한우의 개발일기

트러블 슈팅도커 빌드시 환경변수를 읽어 오지 못하는 오류가 생겼다yml파일# docker-compose.ymlservices: web: build: context: . dockerfile: Dockerfile args: NEXT_PUBLIC_API_MOCKING: ${NEXT_PUBLIC_API_MOCKING} NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL} NEXT_PUBLIC_KAKAOMAP_KEY: ${NEXT_PUBLIC_KAKAOMAP_KEY} ports: - "3000:3000" environment: - NODE_ENV=production - NEXT..

도커 적용하기먼저 도커 홈페이지로 이동후 각각 OS 환경에 맞는 도커 데스크탑을 설치해준다. 편한 개발환경을 위해 vscode 익스텐션도 설치해주자!!설치를 한뒤 프로젝트 파일로 이동한 뒤루트디랙토리에 Dokerfile, doker-compose.yml 파일을 생성해준다.dokerignore 파일도 만들어주면 좋다!!(뒤에서 설명할 예정)# DockerfileFROM node:18-alpine AS base# DependenciesFROM base AS depsRUN apk add --no-cache libc6-compatWORKDIR /appCOPY package.json yarn.lock ./RUN yarn install --frozen-lockfile# BuilderFROM base AS build..

watch 와 useWatchReact Hook Form은 React에서 폼을 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. 이 훅폼에는 폼의 상태를 추적하는 데 사용하는 두 가지 함수가 있습니다. 바로 useWatch와 watch 함수입니다.watch 함수watch 함수의 동작watch 함수는 React Hook Form에서 제공하는 중요한 기능으로, 폼 필드의 값들을 실시간으로 관찰(감시)하는 역할을 합니다.주요 기능과 동작 원리기본 사용법// 모든 필드 감시const allValues = watch();// 특정 필드만 감시const titleValue = watch("title");// 여러 필드 감시const { title, description } = watch(["title", "desc..

일단 쿠키란 무엇인가??쿠키(Cookie)란?쿠키는 웹 서버가 생성하여 웹 브라우저로 전송하는 작은 정보 파일입니다. 웹 브라우저는 수신한 쿠키를 미리 정해진 기간 동안 또는 웹 사이트에서의 사용자 세션 기간 동안 저장합니다. 웹 브라우저는 향후 사용자가 웹 서버에 요청할 때 관련 쿠키를 첨부합니다.그렇다면 Next에서의 쿠키는 어떻게 쓰일까??Next.js의 쿠키 처리는 크게 4가지 환경에서 이루어진다고한다서버 컴포넌트(Server Components)에서의 쿠키// Server Componentimport { cookies } from 'next/headers'export default function Page() { const cookieStore = cookies() const theme = ..

프로젝트에 리액트 쿼리 적용기나는 프로젝트에 next AppRouter 를 적용하여 프로젝트를 진행을 하고 있던중 밑에 보이는 화면의 오른쪽 창을 앱라우터를 쓰니까 Parallel Routes 한번 적용을 해보면 어떨까? 라는 생각에 Parallel Routes로 오른쪽 창을 제작하게 되었다Parallel Routes를 적용을 하여 위에 보이는 사진의 오른쪽 창은 모달 혹은 다른 컴포넌트가 아닌 하나의 페이지가 되고있다.트러블 슈팅 및 리액트 쿼리 적용기여기서 오는 트러블슈팅이 하나있었는데 오른쪽 창과 뒤에 보이는 페이지는 아예 서로다른 페이지이다.예를들어 뒤에있는 페이지는 PageA.tsx 이고 오른쪽에 있는 페이지는 pageB.tsx 인것이다여기서 왔던 트러블슈팅은 완료하기 버튼을 누르거나 해당 글을..