Tailwind CSS

미리 정의된 유틸리티 클래스를 HTml 에서 직접 사용

• 클래스 이름만으로 스타일이 명확해지고 , 빠른 작업 가능
• 더 적은 CSS 파일 , 직관적인 협업 환경 구축 가능
  

TypeScript

JavaScript 에 몇가지 기능을 추가한 프로그래밍 언어

• 타입 체킹 기능이 추가되어 코드 상의 실수를 더 쉽게 알 수 있다.
• React.j와 Next.js 에서 기본으로 사용
• .ts를 확장자로 사용
  

React.js

웹 개발을 편리하게 해주는 JavaScript 라이브러리

• HTML 과 JavaScript를 하나로 합친 .jsx 형식 사용
• 컴포넌트화 하여 HTML 일부를 재사용하기 쉬운 조각으로 만들 수 있음
• State 개념을 적용하여 상태만 바꾸면 UI에 자동 반영
  

SPA (Single Page Application)

• 하나의 HTML 파일로 시작해서 필요한 내용만 동적으로 바꿔주는 웹앱
• 페이지를 이동해도 전체를 새로 불러오지 않고 자바스크립트가 화면 일부만 바꿔줌
• SPA의 특징
  -빠름
  -부드러움
  -앱처럼 느껴짐
  -ex) Gmail,Notion 등

CSR (Client-Side Rendering)

-페이지를 열면 브라우저가 JavaScript로 화면을 그림
-서버는 데이터만 보내주고 , 화면은 클라이언트가 조립
-초기에 느릴 수 있지만 한번 로딩 후엔 빠름

Next.js

• React.js를 더욱 사용하기 편리하게 하고, 추가 기능을 가진 프레임워크
• React.ts로 만든 웹 앱을 더 효율적으로 개발 할 수 있또록 도와줌
• 페이지 단위 라우팅을 자동으로 제공

💡 먼저, "라우팅"이 뭐야?
웹사이트에서 페이지를 바꾸는 것이야.
예를 들어, 네가 어떤 웹사이트에서
/home에 있다가
/about 페이지로 이동하면,
👉 이게 바로 라우팅.


🔁 한 줄 요약
Next.js는 pages 폴더 안에 파일을 만들기만 하면, 자동으로 주소(라우팅) 를 만들어줘서, 우리가 복잡한 설정을 하지 않아도 돼!

SSR (Server-Side Rendering)

• CSR의 반대 개념으로 서버에서 HTML 를 생성하는 구조
• CSR의 경우 SEO가 거의 불가능 하지만 ,SSR의 경우 SEO가 가능
  -CSR은 검색 엔진이 HTML 만 불러왔을 때 비어 있기 때문
  -SSR은 서버에서 HTML을 만들어주기 때문에 HTML 내용이 채워져 있다
  -Next.js에서는 SSR과 CSR을 필요에 따라 선택적으로 사용 가능
  • 주로 블로그나 뉴스 등 SEO가 중요한 페이지는 SSR구현
  • 웹 서비스의 대시보드 등 부드러운 동작이 중요한 페이지는 CSR구현
    
    

SSG(Static Site Generation)

-빌드 시점에 HTML을 미리 생성하는 방식
-SSR보다 로딩속도가 더 빠르고 , 서버 부하도 적다
-SSR은 사용자가 접속하면 매번 HTML 을 만들어줌
-SSG는 서버에 배포할 때 미리 HTML을 만들어 올린다.
-실시간 데이터가 필요 없는 페이지에 적합
-포트폴리오,마케팅 페이지 등 데이터베이스를 참조할 필요가 없는 경우 사용