Next.js + Tailwindcss로 개발할 때 프론트엔드 개발의 시작은 HTML + CSS + JavaSript이고,웹브라우 저마다 설정된 default 값을 없애고 디자인 통일성을 위해서, reset.css 를 습관적으로 사용합니다. 그래서 next.js + tailwindcss 조합으로 프로젝트를 생성했을 때도 reset.css 파일을 생성해서 불러오거나,reset.css 파일 내의 초기화 내용을 globals.css 파일에 넣으려는 경우가 있는데, 많은 경우에서 에러가 납니다. 일단 결론부터 이야기 하면tailwind는 자체 리셋 시스템을 이미 내장하고 있습니다. Preflight라고 부른다는데, tailwind를 쓰는 순간 이미 'reset.css'가 적용된 상태가 되는 것이라고... ..

사전 준비 사항npm과 Node.js는 당연히 설치가 되어 있다고 가정합니다.나한테 Node.js가 있는지 없는지, npm이 있는지 없는지 모른다면 아래 글 참조https://spacechild.net/607 프로젝트 생성하기 1. 프로젝트(폴더)를 생성할 폴더로 이동한다 저는 보통은 Projects/ 밑에 프로젝트 폴더를 만드니까, Projects 폴더로 이동합니다. Next.js는 프로젝트 생성 명령어를 치면, 프로젝트가 생기면서 자동으로 폴더가 생성이 됩니다. 해당 폴더가 곧 프로젝트인 개념입니다. 2. 프로젝트 생성 명령어 실행 터미널에 아래 명령어 중 하나를 칩니다. 제일 많이 쓰는 건 npm 방식# npmnpx create-next-app@latest my-app# pnpmpnpm c..

Running the Development Server Next.js 의 개발 서버를 실행하는 법이다. 1. 최초 실행 시 프로젝트를 처음 생성하고, 최초로 서버 실행하기 전에만,터미널에서 아래처럼 'pnpm i' 명령어를 통해, install을 해주고,그 다음에 pnpm dev를 입력한다. pnpm ipnpm dev pnpm i는 프로젝트를 처음 생성하고, '환경 준비(패키지 설치) 단계'라고 생각하면 된다.pnpm i를 실행하면, package.jason을 읽고, 필요한 라이브러리들을 알아서 다운받아 설치한다.설치되는 곳은 node_modules 폴더. 일반적으로 다른 사람과 협업을 하면서, package.jason이 바뀌지 않는 이상, 다시 pnpm i 를 실행할 일은 없다. 2. 최초 실행 ..

https://nextjs.org/learn?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=home Learn Next.js | Next.js by Vercel - The React FrameworkNext.js by Vercel is the full-stack React framework for the web.nextjs.org Next.js 를 어디서 배워볼까 하다가, Next.js 홈페이지를 갔더니, 따라할 자습서가 있다. Next.js Foundation Course Vercel 을 가입하고 로그인 하면, 진행상황도 저장이 되니 한번 해볼만 한 것 같다. 몇 가지 강의를 찾아봤는데, 찾는데 더 오랜 시간이 걸릴 것 같다. 공식 홈페이..