서론 ESLint는 기본적으로 code linter이다. 코드 품질과 관련. Prettier는 기본적으로 code formatter이다. 코드를 이쁘게 정렬해준다. 문제는 linter의 기능에 formatter의 기능도 들어가기 때문에 충돌이 생긴다. 이 충돌을 막아주는 것은 eslint-config-prettier 라는 패키지다. 지난 번 Airbnb 설정을 따르려고 했지만 수많은 문제점이 생겼다. 너무 엄격하기 때문에 learning curve가 높고, 그로 인해 오히려 개발에 지장을 준다. 또한 예외 rules가 늘어나다보니 linter의 본래 역할을 못 하는 경우도 발생했다. 이번에는 간단하게 Lint의 기본 기능에도 충실하고 Prettier와도 충돌나지 않게 처음부터 다시 설정해보자. Tailw..

nextjs 공식사이트를 모니터링 하던 중 너무 잘만들어진, 학습과정이 있어 가져왔습니다. Next.js Learn Course next블로그를 읽다가 학습 과정에 대한 내용을 발견했는데요 내용은 아래의 이미지와 같습니다 Learn Next.js | Next.js by Vercel - The React Framework (nextjs.org) 다음.js 14 | 다음.js (nextjs.org) 처음 Next.js를 접했을 때는 이런 기능이 없었던 것 같은데... 이런 교육적인 요소도 제공해주는 환상적인 Next.js입니다. 그래서 해당 기능을 확인해보니, 설정된 학습 과정은 이렇게 구성되어 있습니다 또 여기서 react를 배운 적이 없다면, react 기초부터 배울 수 있도록 구성되어 있습니다 아.....

Headless Storefront 지난 달 (2023년 10월26일) Next.js 버전 14 발표 Conference의 발표 세션 9개 중 하나는 미국의 BigCommerce 기업에서 발표하였다. 내용은 BigCommerce가 Headless Storefront를 개발하고 있다는 내용이었다. headless란 '머리가 없다' 뜻이다. 즉, frontend가 없다는 뜻이다. 그리고 storefront 역시 frontend라는 뜻이다. 그렇다면 BigCommerce는 머리가 없는 머리를 개발하고 있다는 뜻인가? Headless E-commerce란 무엇인가? Headless E-commerce는 이커머스 IT 종사자들이 힙하게 쓰는 단어이고, 막상 진정한 의미는 개발을 하면서 정립해 나가는 느낌이다. 즉..

Parallel Routes란 Parallel route란 Next.js 13.3 버전에서 새로 도입된 기능이다. 13.3버전은 2023년 4월초에 출시되었고 App router가 공식적으로 개시된 13.4버전은 2023년 5월초에 출시되었다. 그래서 자료를 찾아도 많이 없다. 우선 공식문서의 주소 : https://nextjs.org/docs/app/building-your-application/routing/parallel-routes Parallel routes가 무엇인지에 대해 공식문서에 설명이 아주 길지만, 나름 한 줄로 요약하자면, 같은 layout에서 slot을 이용해 여러 개의 page를 동시에 rendering하고 독립적으로 streaming이 가능하며 각각 폴더에 loading.tsx과..

Environment variables https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#environment-variable-load-order 위 링크를 들어가보면 어떤 .env를 우선적으로 적용하는지 설명이 되어있다. Vue나 React처럼 dotenv 패키지를 설치하고, local, dev, stage, prod로 나눌 수 있으면 좋겠는데 Next.js에서는 dev, prod, test 3가지만 기본적으로 제공해주고 있다. 일단 나는 dev를 local환경으로 쓰고, prod를 배포용 환경으로 쓰려고 한다. 추가로 세분화하고 싶다면 추가 설정이 더 필요하다. 테스트를 위해 .env.devel..

Reset CSS 예전에는 Reset CSS를 해주었지만 Tailwind는 설치만 하면 기본적인 Reset을 (margin이나 padding) 해주므로 따로 할 필요가 없지만 app/globals.css 파일은 생성해주어야 한다. globals.css 코드는 밑에서 채우고 우선 app/layout.tsx에서 import 해준다. import './globals.css'; Tailwind CSS https://nextjs.org/docs/app/building-your-application/styling 를 가면 Next.js에서 사용할 수 있는 CSS가 나온다. SCSS, CSS-in-JS중에 가장 유명한 styled-components를 사용해도 되지만, 요즘에는 Tailwind CSS의 점유율이 점점..