📆221031
Next.js와 tailwindCSS 연습겸 복습겸 강의 듣기
마침 노션에 프로젝트들을 정리했었는데 노션을 활용한 포트폴리오를 만드는 강의에다가 한번 써본 적 있는 tailwindCSS까지 사용한다니 연습&복습으로 딱인 것 같아서 바로 수강 시작!
🪐강의는 "개발하는 정대리"님의 Next.js 나만의 포트폴리오 만들기
- 챕터: 총 16개
- 강의시간 : 2:37:05
📌오늘의 목표
1. 인트로
2. 강의 소개
3. 개발환경 설정
4. Next.js 소개
5. SSR 및 CSR 개념 설명
6. Next.js 설치 및 페이지 설정
1~3. 강의 소개
포트폴리오 개발부터 배포까지 해보는 강의.
사용하는 기술들
- Next.js (서버사이드렌더링을 지원하는 리액트 프레임워크)
- TailwindCSS로 다크모드 기능 지원
- 로티 애니메이션 (애니메이션 적용)
- 노션 API 적용 (백엔드를 노션 API로 사용, 데이터베이스도 노션에서 관리)
4. Next.js 소개
Vercel이라는 배포회사에서 만들었음. 서버사이드렌더링을 지원함.
5. SSR 및 CSR 개념 설명
네이버 등에서 검색할 때 인터넷창에서 URL을 검색해서 사이트를 들어가는데, SPA(Single page application)는 보통 React나 Vue 등을 활용함.
우리가 흔히 아는 Frontend Framework(React, Vue등)는 웹사이트에서 우리가 들어왔을때 Client(브라우저로 생각하면 됨)에서 렌더링을 함. 딱 브라우저로 들어갔을 때 화면요소들이 렌더링이 됨. 하지만 이것의 큰 단점이 있음.
검색엔진은 크롤링을 활용함. 크롤링이란 검색엔진 봇이 웹사이트에 들어가서 HTML 태그 등을 다 긁는 것을 말하는데 그렇게 얻은 정보로 검색이 가능한 것.
하지만 SPA로 만들어진 사이트들은 검색엔진이 크롤링을 하려고해도 크롤링할 HTML요소가 없음. 이 것을 SEO(검색엔진 최적화)가 이루어지지 않았다고 함. 이래서 우리는 NextJS, NuxtJS(Vue) 등을 사용하게 됨. 얘네는 서버사이드 렌더링이라고 해서, 서버에서 이미 렌더링을 해옴. 그래서 검색엔진 최적화된 사이트를 만들기 위해서 Next.js등을 사용해서 만들어야 하는 것.
다시 전반적으로 설명하자면, CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)으로 나눌 수 있는데 CSR은 브라우저에서 웹사이트 화면을 보는 우리 쪽에서 화면을 그리는 것이고 SSR은 서버쪽에서 HTML을 그려주는 것임.
우리가 SPA를 활용해서 얻을 수 있는 장점은 웹사이트가 있을 때 데이터가 변경되거나 그럴때 해당부분만 렌더링을 하기 때문에 속도가 빨라진다는 것인데 SPA의 단점은 크롤링이 안되고, 그래서 SEO면에서 힘들다는 것임. 그렇기 때문에 우리는 SSR을 사용하는 것!
🍦 코멘트
강의 구성이나 속도, 집중도는 괜찮다고 생각했는데 SSR과 CSR 부분 설명은 문장이 끝맺지 못하거나 길어져서 바로바로 이해하기가 조금 어려웠다. 따로 한번 봤던 부분이라 어떤 개념인지는 알겠는데 딱 이 설명으로만 처음 접했다면 어렵게 느껴졌을 것 같다. 아직 극극극 초반 고작 환경설정만 끝낸 상태이지만 얼른 완강해서 빨리 포트폴리오까지 만들어야지!
카페에서 듣는중인데 역시 듀얼모니터없으니까 진짜 불편하다 ㅋㅋㅋㅋ ㅠㅠ 이젠 집에서 공부해야겠다.
