choijming21 님의 블로그

hooks, lib, utils, services, api 폴더 차이점

프로젝트를 처음 시작하거나 기존 프로젝트를 리펙토링할 때, 가장 중요한 결정 중 하나는 폴더 구조를 어떻게 설계할 것인가입니다. 체계적인 폴더 구조는 코드의 가독성을 높이고, 팀원간 협업을 원할하게 하며, 프로젝트의 유지보수성을 크게 향상시킵니다.  그러나 많은 개발자들이 hooks, lib, utils, servies, api 같은 유사해 보이는 폴더들의 정확한 용도와 차이점에 대해 혼란을 느끼곤 합니다. 저도 마찬가지고요! "이 유틸리티 함수는 utils에 넣어야 할까, lib에 넣어야 할까?", "servies와 api 폴더의 차이점은 무엇일까?" 같은 질문이 자주 등장합니다.  그래서 이 블로그 포스트에서는 React 프로젝트에서 흔히 사용되는 주요 폴더들의 목적과 차이점을 명확히 설명하고, 각 ..

[ Troubleshooting🛠️ ] Next.js 서버사이드 렌더링에서 styled-components 적용하기

1.  문제 발생❓ Next.js와 styled-components를 함께 사용할 때, 페이지 새로고침 시 스타일이 적용되지 않는 문제가 발생했습니다. 이로 인해 사용자가 페이지를 새로고침할 때마다 스타일이 없는 콘텐츠가 잠시 표시되는 깜박임 현상(FOUC - Flash of Unstyled Content)이 발생했습니다.  2.  원인 추론 🔎 이 문제는, styled-components가 기본적으로 클라이언트 측에서 런타임에 스타일을 주입하는 방식으로 작동하기 때문에 발생했습니다. Next.js의 서버 사이드 렌더링(SSR) 환경에서는 이러한 동적 스타일 주입이 자동으로 이루어지지 않아 초기 HTML에 스타일이 포함되지 않았습니다.  3.  해결 과정 📋 문제 해결을 위해 두 가지 주요 설정을 적..

[ Troubleshooting🛠️ ] Invalid URL 오류 및 Next.js 데이터 fetching pattern

제가 혼자 공부하면서 발생했던 invalid url 오류에 대해서 해결했던 과정을 블로그에 작성해보겠습니다 :)  1.  문제 발생❓  Server ErrorTypeError: Invalid URL 오류 위치: src/services/melonApi.ts (6:25) @ axios    2.  원인 추론 🔎  getStaticProps 함수는 서버 측에서 실행되기 때문에, 상대 URL 경로 ( /api/melon/chart/${chartType} )를 사용하면 기준점이 없어 "Invalid URL" 오류가 발생합니다. 여기서 발생한 문제의 핵심은 CORS(Cross-Origin Resource Sharing) 이슈와 서버 사이드 렌더링의 특성이 결합된 것입니다:CORS 이슈 해결 방식: 이전 작업에서 ..

Docker 입문 가이드: 설치부터 개념까지

안녕하세요! 오늘은 비전공자도 쉽게 알 수 있게 docker의 개념을 블로그에 정리해볼까 합니다! 저도 비전공자이기 때문에 docker의 개념이 많이 어렵더라고요. 이해할 수 있게 쉽게 개념을 풀어 적어보려고 합니다:)      🐋 도커(Docker)는 언제 사용하나?도커는 저 사람 컴퓨터에서는 되는데 내 컴퓨터에서는 안돼! 와 같은 상황을 해결해주기 때문입니다!  🐋 도커(Docker)란 무엇인가? Docker는 리눅스 컨테이너 기반의 오픈소스 가상화 시스템입니다.  가상화란 실제 있지 않는 것을 마치 있는 것처럼 보이게 해주는 기술입니다. 다른 블로그를 참고하였는데 가상화의 예시로 "현재 존재하지 않는 애인을 마치 있는 것처럼 화면 속에 띄어주는 것이 가상화이다." 이 말이 가장 적절할 것 같습니..

[ Troubleshooting🛠️ ] Tanstack Query의 데이터 로딩

1.  문제 발생❓필터 버튼을 처음 누를 때마다 "로딩 중..." 메세지가 잠시 표시됨이는 새로운 데이터를 가져오는 동안 isLoading 상태가 true가 되기 때문사용자 경험을 저하시키고 화면이 깜빡이는 느낌을 줌// useChart.tsexport const useChart = (chartType: ChartType) => { return useQuery({ queryKey: ["melonChart", chartType], queryFn: () => fetchChart(chartType), staleTime: 1000 * 60 * 5, // 추가 옵션 없음 });};    2.  해결 과정 📋Tanstack Query가 제공해 주는 placeholderData 옵션 사용하..

[ Troubleshooting🛠️ ] CORS 문제 해결

Next.js 프로젝트에서 melon API를 연결할 때 발생할 수 있는 CORS 이슈와 해결 방법을 단계별로 설명해보려고 합니다. 그러면 먼저 CORS가 무엇인지 부터 알아야 할텐데요! 🌍 CORS란? CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유를 의미하며, 서로 다른 출처의 웹 페이지나 서버가 자원에 접근할 수 있도록 허용하는 보안 메커니즘입니다.    1.  문제 발생❓ 웹 브라우저에서 Next.js 클라이언트 코드가 로컬 API 서버(http://localhost:5000)에 직접 요청하면 아래와 같은 CORS 오류가 발생할 수 있습니다.Access to XMLHttpRequest at 'http://localhost:5000/api/v1/chart/..

웹 개발을 하다보면 인증 방식에 대해 고민하게 됩니다. 이때 가장 기본이 되는 개념이 '쿠키'와 '토큰'입니다.  🍪 쿠키(Cookie)란? 쿠키는 웹사이트가 사용자의 브라우저에 저장하는 작은 데이터 파일입니다. 사용자의 세션 관리, 개인화 설정 등을 위해 사용됩니다. 웹 서버가 사용자의 브라우저에 전송하면, 브라우저가 이를 저장했다가 동일한 서버에 요청을 보낼 때 함께 잔송합니다. 🍪 쿠키의 특징:클라이언트(브라우저) 측에 정보 저장됨크기 제한이 있음(보통 4KB)만료 날짜를 정할 수 있음특정 도메인에 종속됨 🍪 쿠키의 예시:// 서버에서 쿠키 설정 (Node.js 예시)response.setHeader('Set-Cookie', 'username=김철수; expires=Fri, 31 Dec 202..

폼 관리는 웹 개발에서 빈번하게 마주지는 과제입니다. 특히 유효성 검사는 사용자 경험과 데이터 무결성을 위해 필수적인 요소입니다. 이번 글에서는 Next.js에서 폼 관리를 간소화 해주는 React Hook Form과 타입스크립트와 함께 사용하기 좋은 스키마 검증 라이브러리인 Zod에 대해 알아보겠습니다.   🪴 React Hook Form이란?React Hook Form은 리액트 폼을 위한 유연하고 효율적인 라이브러리로, 폼 상태 관리와 유효성 검사를 간소화 합니다. 기존의 Formik, Redux-Form과 같은 라이브러리들과 비교했을 때 다음과 같은 장점이 있습니다:가벼운 용량: 불필요한 리렌더링을 최소화하여 성능이 우수합니다.간결한 코드: Hooks 기반의 API로 직관적인 사용법을 제공합니다...

Next.js 프로젝트에 Tailwind CSS를 설치하는 과정에서 "npx tailwindcss init -p" 명령어를 실행했을 때 "could not determine executable to run" 오류가 발생하는 경우가 있었습니다. 이 글에서 이 문제의 원인과 해결 방법에 대해 정리해보겠습니다!    1.  문제 발생❓Next.js 프로젝트를 설정하고 Tailwind CSS를 설치한 후 초기화 명령어를 실행했을 때 다음과 같은 오류가 발생했습니다.npx tailwindcss init -pnpm error could not determine executable to runnpm error A complete log of this run can be found in: /Users/username/..

1.  문제 발생❓ params를 이용한 동적 렌더링 페이지 4개(DynamicPage 컴포넌트)를 구현했습니다. params의 pageId값을 받아 pageId값과 일치하는 데이터를 찾아 각각의 pageConfig 데이터를 초기에는 클라이언트 측에서 렌더링 하는 방식으로 구현했습니다. 하지만 전체 페이지가 클라이언트 컴포넌트로 설정되어 있어 이로 인해 초기 페이지 로딩 시 이미지 렌더링 속도가 현저히 느려지는 문제가 발생했습니다.  2.  원인 분석 🔎 Next.js에서 클라이언트 컴포넌트 "use client"로 설정된 컴포넌트는 서버에서 사전 렌더링 되지 않고 클라이언트 측에서 hydration이 완료된 후에만 완전히 렌더링됩니다. 전체 DynamicPage 컴포넌트가 클라이언트 컴포넌트였기 때문..