Sign in

dev

it dev nextjs fsd

next.js에 FSD 폴더 구조 패턴 적용하기

Backgrounds최근 Next.js 프로젝트에 Feature-Sliced Design(FSD) 패턴을 도입하게 되었습니다. FSD는 프론트엔드 프로젝트에서 모듈들의 레이어(layer)를 명확히 구분하고, 상위 레이어와 하위 레이어 간의 의존성 방향을 명확히 하여 모듈 간 결합도를 낮추고 변경 사항이 어디까지 영향을 미칠지 예측 가능하게 만들어줍니다. 이를 통해 유지 보수성이 크게 향상된다는 장점이 있습니다.(자세한 설명은 이전 글을 참고해주세요) 하지만 Next.js와 FSD 패턴을 함께 사용하다 보니, 일부 컨벤션에서 충돌이 발생하게 되었고, 그 과정에서 몇 가지 문제점과 해결책을 찾아야 했습니다. 이번 글에서는 제가 겪었던 문제들과 이를 해결한 방법을 공유하려 합니다. 1. app 폴더 네이밍 충..
wono | discuss |
it dev react layout

React로 레이아웃 (헤더, 메뉴바, 푸터) 컴포넌트 만들기

대부분의 페이지에는 Header, 메뉴바, Footer 등이 들어갑니다. 하지만 모든 페이지에 일일이 헤더, 메뉴바, 푸터를 작성하기에는 번거롭습니다. 컴포넌트로 만들더라도 매번 세 개의 컴포넌트를 넣는 것은 깔끔하지 않죠. 그래서 보통 필요한 컴포넌트를 묶어서 Layout으로 만들어 사용합니다! 오늘은 한 번 React로 Layout 컴포넌트를 만들어보겠습니다. 1. Layout 컴포넌트 생성하기 우선, 원하는 디렉토리에 Layout 컴포넌트를 생성합니다. 저는 components 폴더 안에 Layout이라는 폴더와 파일을 생성했습니다. (개인적으로 타입스크립트를 선호해서 tsx파일로 만들었는데, jsx를 사용해도 무방합니다) // components/Layout/Layout.tsx const Layo..
wono | discuss |
it dev nextjs port

Nextjs 실행 PORT 설정(변경)하기

Next.js의 개발 서버는 기본적으로 3000 포트에서 실행되도록 설정되어 있습니다. 개발 환경에 따라 다른 포트에서 개발 서버를 실행해야 경우가 종종 생기는데 이를 변경할 수 있는 방법을 알아봅시다. 1. 직접 변경하기 // package.json { ... "scripts": { "dev": "next dev -p 3005", "build": "next build", "start": "next start" } ... } -p 옵션을 통해 뒤에 입력된 포트로 개발 서버가 실행됩니다. 2. 환경변수 사용하기 // package.json { ... "scripts": { "dev": "next dev -p ${PORT-3000}", "build": "next build", "start": "next st..
wono | discuss |