📆221101
Next.js와 tailwindCSS 연습겸 복습겸 강의 듣기
🪐강의는 "개발하는 정대리"님의 Next.js 나만의 포트폴리오 만들기
- 챕터: 총 16개
- 강의시간 : 2:37:05
📌오늘의 목표
7. 푸터, 헤더 설정
8. TailwindCSS 설정
10. 레이아웃 설정
7. 푸터, 헤더 설정
루트 폴더에 "components" 폴더를 만들고 안에 각각 헤더, 푸터 컴포넌트 역할을 할 header.js, footer.js를 만들어준다.
다음으로, 레이아웃 컴포넌트에 헤더와 푸터를 추가해준다.
이 기본 레이아웃 컴포넌트를 가지고 홈, 프로젝트 페이지를 만들 예정!
pages/projects.js에 레이아웃 컴포넌트를 추가한다.
localhost.3000/projects에 들어가면
이런 페이지가 만들어진다.
8. TailwindCSS 설정
npm install -D tailwindcss터미널을 열어 tailwindCSS를 설치해준다.
npx tailwindcss init이 명령어를 실행하면 tailwind.config.js가 만들어진다.
포트폴리오에 다크모드 기능도 추가할 예정이라 다음과 같이 파일을 변경한다.
다음으로 globals.css 파일을 열어 모든 내용을 지워주고
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwindCSS를 import해준다.
그리고 루트폴더에 postcss.confing.js 파일을 추가한다.
하지만 tailwindCSS가 적용이 되지 않았는데, 찾아본 결과 autoprefixer가 설치가 되지 않았기 때문이었다.
터미널에서
npm install -D autoprefixerautoprefixer를 설치해주자 에러없이 tailwindCSS가 적용됐다.
index.js에 tailwindCSS를 다음과 같이 추가하고
실행해보면
잘 적용이 된다.
9. 레이아웃 설정
레이아웃은 "tailblocks"에서 코드를 가져와 사용했다.
헤더, 푸터 레이아웃뿐만 아니라 다양한 레이아웃을 찾을 수 있다.
🍦 코멘트
벌써 챕터 9까지 들었지만 각챕터당 분량이 적어서 겨우 40분 들었다 ^^ㅎㅎ
아직 코드는 제대로 짜지도 못했으니 당연한가?
nextJS랑 tailwindCSS 모두 몇주만에 쓰는건데 그래도 나름? 기억이 많이 남아서 다행이다
까먹기전에 복습하기 잘했다.
