프로그래밍 (100) 썸네일형 리스트형 Error: Image with src "..." is missing required "width" property. 기존 Next.js 프로젝트에서는 Stitches를 사용하고 있었다. 그런데, Stitches는 더 이상 적극적으로 유지보수 되지 않는다고 하여 사용성이 비슷하면서 제로 런타임의 이점을 갖는 PandaCSS로의 마이그레이션을 진행 중이다. PandaCSS 공식 홈페이지에서 안내된 대로 마이그레이션을 완료했는데, dev로 실행했을 때 제목과 같은 오류가 발생했다. 물론 next/image 패키지의 Image 컴포넌트를 사용할 적에 나는 width, height 속성을 잘 전달했다. 기존에도 잘 동작하고 있었다. 관련하여 검색해도 비슷한 사례는 찾아볼 수 없었다. styled 함수를 이용하여 Image 컴포넌트를 감싸서 사용하고 있었는데, import { styled } from "@/styled-syste.. useState는 initial value를 구독하지 않는다. function Textfield({ initialText }: { initialText: string}) { const [text, setText] = useState(initialText) console.log("(re)rendered with props: ", {initialText}) return setText(value)}/> } function App() { const [text, setText] = useState("Hello") const handleClick = () => { console.log("Button is clicked") setText("Bye") } return ( Hello ); } 위와 같은 리액트 앱이 있습니다. 위에서 Hello 버튼을 클릭하면 어떻게 될까요? 아마도.. NextJS 빌드 오류 EPERM, MODULE_NOT_FOUND pnpm + Turborepo + NextJS 조합으로 구성된 프로젝트를 윈도우에서 빌드할 때 아래와 같은 오류가 발생한다. $ pnpm build > @rsv/main@0.0.0 build C:\Users\*****\Documents\***********-********-*****\apps\main > relay-compiler --validate && next build [INFO] [default] compiling... [INFO] [default] compiled documents: 1 reader, 1 normalization, 1 operation text [INFO] Compilation completed. [INFO] Done. warn - You have enabled experimen.. IntelliJ + Spring Boot Profile 적용하기 실행 환경에 따라 런타임에 다른 값을 적용하고자 할 때, 각기 다른 프로파일을 불러와 값을 적용할 수 있다. IntelliJ Ultimate 버전에선 다이얼로그 창에 옵션을 넣어주는 것으로 간단하게 적용할 수 있지만, Community 버전에선 그런 기능이 제공되지 않는다. 구글 검색으로 나오는 방법은 Gradle > bootRun 실행/디버그 구성 편집에서 VM 옵션에 -Dspring.profiles.active=local 를 추가하는 것이다. 하지만 이 옵션을 넣어도 실행을 하면 default 프로파일이 적용되어 옵션이 반영되지 않음을 알 수 있다. Spring 공식 문서에 Profile에 관한 설명을 읽어보면, profile을 추가하려면 application.properties 파일에 다음과 같은 .. IntelliJ + Spring Boot 개발환경 준비 어쩌다가 Spring을 공부하게 됐다. 백엔드에 대해서 아는 것이 아무것도 없어서 막막할 따름이다. 일단, 도서관에서 책이라도 빌렸다. 책에서는 이클립스에 STS 플러그인을 설치하여 사용하는데, 현재는 해당 플러그인이 검색되지 않을 뿐더러 비슷해보이는 플러그인은 버전 문제로 설치조차 안 된다. 이클립스 최신 버전에서 다시 시도를 해볼까 생각을 해봤지만, IntelliJ에서 다시 시도해보기로 했다. 다행히, IntelliJ 공식 문서에 Spring 프로젝트 생성에 관한 가이드가 잘 작성돼 있었다. Spring | IntelliJ IDEA www.jetbrains.com 하지만, 위 문서에도 나와 있듯이 Spring 및 이와 관련된 플러그인에 대한 지원은 Ultimate 버전에서만 기본 제공된다. 난 Com.. 리액트 공부 #1 그저께부터 리액트 공식 홈페이지 자습서를 통해 리액트를 공부 중이다. 가볍게 읽으며 공부하기엔 제대로 이해되지 않기 때문에 메모를 하면서 공부를 해야겠다는 생각이 들었다. 그래서 블로그에 조금씩 메모를 남기며 공부할 것이다. 리액트를 공부하는 목적은 건우와 함께 만들 서비스의 웹 페이지를 구현하기 위해서다. 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 개요 React.Component를 상속하는 클래스를 정의한다. 이 클래스는 HTML 태그처럼 사용될 수 있다. 이를 React 컴포넌트 클래스라고 부른다. 이러한 개별 컴포넌트는 props라는 멤버를 통해 매개변수를 받아온다. properti.. macOS에서 파이썬 개발환경 새로 준비하기 설치된 파이썬 버전이 한 둘이 아닌지라, 무턱대고 라이브러리를 설치하면 어떤 버전에 설치되는건지 여간 번거롭다. 그래서 homebrew로 하나의 버전만 유지하려고 기존에 있던 여러 파이썬 버전을 삭제하고 재설치를 했다. 환경변수는 당최 어떻게 수정하는건지 알 수 없어서 찝찝함이 남는다. 1. 기존 버전 삭제 rm -rf /usr/local/bin/python* rm -rf /usr/local/bin/pip* 2. 환경변수 삭제 brew doctor brew cleanup 3. 새로운 버전 설치 brew install python3 4. 환경변수 설정 vim ~./zshrc alias python=/usr/local/bin/python3 alias pip=/usr/local/bin/pip3 5. 번외 위와.. Docker에 OpenGL 환경 설정하기까지의 과정 작업환경은 Intel Iris Plus Graphics를 탑재한 MacBook Pro 2020년형이다. Visual Studio Code에서 작업할 것이며, Docker에 Ubuntu20.04 이미지를 사용할 것이다. 내 목표는 이 환경에서 파이썬 3.7 버전으로 OpenGL 창을 띄우는 것이다. 아래는 이를 위한 삽질을 기록하도록 한다. 도커 환경 설정 https://docs.microsoft.com/ko-kr/learn/modules/use-docker-container-dev-env-vs-code/ Visual Studio Code에서 Docker 컨테이너를 개발 환경으로 사용 - Learn Visual Studio Code Remote - Containers 확장을 사용하여 완전한 기능을 갖춘 컨.. 이전 1 2 3 4 ··· 13 다음
