Sign in

nextjs

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 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 |
it dev nextjs api

[ Next.js ] - next api에서 express-rate-limit 사용하기

기본적으로 express-rate-limit은 무분별한 요청으로 인한 서버 과부하를 막기 위해 사용되는 라이브러리이다. 백엔드 서버를 제대로 구축하여 express-rate-limit을 사용하는 것은 express-rate-limit문서에 나온 그대로 사용하면 문제없이 사용할 수 있지만 next에서 express-rate-limit을 그대로 사용하면 에러가 나고 제대로 작동하지 않기 때문에 해당 라이브러리를 사용하기 위해서는 수정하여 사용하여야 한다. 기본적인 express-rate-limit 사용 ☞ 2022.06.02 - [Javascript/Node.js] - [ Node.js ] - 서버 DDos 공격 막기 사용방법 next 환경 구축 > npx create-next-app --ts // 위의 명..
wono | discuss |
it dev nextjs router

Next.js App Router.. 이제는 앱라적 사고가 필요하다. Deep dive 시작부터 파헤치기 Part.1

현재 우리는 Next.js 14.2.2 버전을 사용 중이며 App Router 마이그레이션을 진행 중입니다. App router 로 전환 및 개발하며 얻은 정보와 best practice, 그리고 삽질기를 기록하기 위해 글을 작성해 봅니다. Next.js의 App Router는 기존 Page Router와는 근본적으로 다른 방식으로 작동하며, 기존까지의…
wono | discuss |