Next js public VS src

Next js public VS src

🎯 목표 앞서 svgr을 활용해 svg파일을 리액트 컴포넌트로 변환했었습니다. 이 과정에서 원본 svg파일과 컴포넌트를 분리하여 다른 디렉토리에 관리해야했습니다. 또한 정적인 svg에서 동적인 리액트 컴포넌트로 변환하는 과정이기 때문에, 원본은 'public', 컴포넌트는 'src에 보관하는 방식이 적합하다고 판단했습니다.검증을 위해 오늘은 public 폴더와 그 외의 폴더의 차이점을 알아보겠습니다.📃진행 순서public 경로별 파일관리의 차이점 svgr 파일 전략 수립(bonus) 이미지, 폰트, 파비콘은 어디에 관리할까💻public리액트 공식문서에 따른 public 사용 이유는 다음과 같습니다.빌드 시 파일 이름 변경 방지* 빌드 :소스코드 파일을 '실행 가능한 산출물' 즉 컴퓨터에서 실행될 수..

  • format_list_bulleted react
  • · 2025. 5. 6.
  • textsms
Next js svgr 라이브러리 유연하게 사용하기

Next js svgr 라이브러리 유연하게 사용하기

🎯 목표프로젝트 초기 구성에 svgr을 세팅 했었습니다. 허나 매번 컴포넌트 명을 붙여주어야 하는 번거로움과 svg의 스타일(면, 선 스타일)에 따라 props 미적용 이슈가 있었습니다. 이러한 낮은 활용성 문제를 해결하기 위해 리액트 컴포넌트 변환 과정을 자동화하고, 템플릿화하여 재사용성을 높여보겠습니다.📃진행 순서svgr,Next.config Settingsvgr/clisvgr 커스텀index.js에 아이콘 일괄 관리하기💻 svgr 세팅npm install --save-dev @svgr/webpack// next.config.mjs/** @type {import('next').NextConfig} */const nextConfig = { turbopack: { rules: {..

  • format_list_bulleted react
  • · 2025. 5. 5.
  • textsms
Next js Multiple layout 설정 (페이지별 공통 레이아웃)

Next js Multiple layout 설정 (페이지별 공통 레이아웃)

🎯 목표특정 페이지에서만 전체 레이아웃 컴포넌트 (Header, Footer 등)을 조건부 노출하도록 설정하는 방법을 알아봅시다.Nextjs의 Multiple Layout 기능을 이용해 간단히 구현할 수 있습니다.진행 순서Root Layout의 기능, layout.js 파일 생성경로에 영향을 미치지 않는 라우팅 그룹💻 Root Layout처음 프로젝트 생성 후 app폴더 밑에 있는 layout.js는 모든 페이지의 공통 레이아웃을 정의합니다. Root layout은 웹 페이지 HTML에 필수적인 html과 body 태그를 생성해줍니다. 만일 사용자가 이를 삭제하더라도Next.js가 자동으로 이를 신규 생성합니다.export default function RootLayout({children}) { ..

  • format_list_bulleted react
  • · 2025. 5. 3.
  • textsms
Next js Hydration Error, 'use client'

Next js Hydration Error, 'use client'

🎯 목표 Root에 layout.js라는 전역 페이지를 서버 컴포넌트로 유지해야 SSR을 지킬 수 있다는 글을 보고 변경해보니계속해서 Hydration Error가 출력되고 있습니다. 서버 HTML과, 클라이언트 HTML간 차이가 있어서 이를 매칭시키지 못하고 있다는 건데요. 이 오류를 해결해보겠습니다.🪜진행 순서Next js의 컴포넌트, 렌더링Server Component VS Client Component Emotion Hydration Error 방지Next js의 컴포넌트13버전부터는 생성 시 기본적으로 서버 컴포넌트로 정의한다. 후에 개발자는 클라이언트, 서버 컴포넌트 두 가지 선택지에서 선택하여 정의할 수 있다.이 내용에 대해서 이해하기 전에 렌더링의 기본 개념에 대해 정리해보겠다.렌더링이..

  • format_list_bulleted react
  • · 2025. 5. 2.
  • textsms
Next js ESLint + Prettier로 협업환경 통일하기

Next js ESLint + Prettier로 협업환경 통일하기

🎯 목표개발자간 협업 용이성과 코드 통일성을 준수하게 해주는 두 패키지를 적용해보겠습니다.Prettier는 보통 익숙하지만 ESLint는 생소할 수 있습니다. 각각 어떤 역할에 특정되어있는지, 왜 함께 사용하는지 알아본 뒤 실제 적용까지 해보겠습니다.ESLint 공식문서, Nextjs 공식문서를 참고했습니다.적용 시 Nextjs를 주로 참고하시는 걸 추천드립니다. 최신 버전에서 변경된 부분이 많아 3시간동안 헤맸습니다.. ESLint 공식 문서 https://eslint.org/ Nextjs Eslinthttps://nextjs.org/docs/app/api-reference/config/eslint 🪜진행 순서왜 사용하는가? (Feat. 함께 사용해야하는 이유)설치 및 적용✅왜 사용하는가?사용이..

  • format_list_bulleted react
  • · 2025. 4. 30.
  • textsms
Next js 아코디언 액티브 유지

Next js 아코디언 액티브 유지

🎯 페이지 이동 시에도 액티브 유지아코디언 링크로 새 페이지로 이동 시에 모든 is-active 클래스가 사라지는데요. 사용자 경험 향상을 위해 이동시에도 어떤 메뉴가 활성화되었는지 유지되게 해보겠습니다.리액트의 useSearchParams 내장 훅을 이용해 구현하겠습니다.useSearchParams?리액트 라우터에서 현재 URL의 쿼리 매개변수(쿼리 스트링)를 읽고 수정하는 데 사용되는 훅🪜진행 순서페이지 이동 시 URL에 현재 active 값 담아서 이동 시키기컴포넌트 생성 시 URL에서 값 가져오기액티브 초기값으로 설정하기액티브 초기값 업데이트페이지 이동 시 URL에 현재 active 값 담아서 이동현재 idx는 1depth, index는 2depth의 고유값입니다. 이를 쿼리 스트링으로 이동할..

  • format_list_bulleted react
  • · 2025. 4. 29.
  • textsms