Study_240701 ( Next.js )

• 프레임워크와 라이브러리
  • 프레임워크 : 개발자가 기능 구현에만 집중 가능하도록 필요한 모든 프로그래밍적 재원을 지원하는 기술의 조합 
    • Spring Framework : Java 기반의 웹(백엔드) 프레임워크
      • FE까지 가능한 full stack coverage framework
      • JSP, Thymeleaf
    • Vue.js, Angular.js : Javascript 기반 웹 프론트엔드 SPA 프레임워크
    • Django, Flask : Python 기반의 웹 프레임워크
    • Ruby on Rails
    • .NET Framework
    • Express.js, NestJS : Javascript 기반 웹 백엔드 프레임워크
  • 라이브러리 : 공통 기능의 모듈화가 이루어진 프로그램의 집합
    • React.js
    • react-router-dom
    • redux

Next.js

• Next.js : 웹 개발을 위한 React 프레임워크 -> React.js가 가지고 있는 기능을 확장 -> 웹App개발시 필요한 다양한 기능 과 구조를 제공
  • 다양한 렌더링 기법 : CSR, SSR, SSG, ISR
  • 라우팅 : 파일(폴더) 기반 라우팅
  • roue handler : 백엔드 가능
  • 스타일링 : CSS, Sass, CSS-in-JS
  • 최적화, 번들링
    • 코드 스플리팅, 이미지 최적화, 웹팩 설정 등
  • 복잡한 백엔드 로직은 구현이 어렵거나 불가 : WebSocket, WebRTC 등
    • WebSocket, WebRTC 모두 실시간 통신을 위해 설계된 기술. 채팅이나 화상 회의, 파일 공유 등에서 사용. HTTP와 비교했을 때 엄청나게 효율적인 실시간 통신을 제공
  • FE 로직과의 종속성 : 백엔드 로직만 변경해서 배포해야 하면 프론트엔드도 함께 배포해야함
• 유용한 기법 제공
  •  렌더링 : 기존 SPA 라이브러리에서 사용하던 CSR에서 벗어나 SSR, ISR, SSG등을 가능케 함
  • 코드스플리팅 : 웹 페이지 로딩 시간을 줄이기 위한 방법
    • 일반적인 웹사이트를 방문할 때는 해당 웹사이트 전체 코드를 한 번에 다운로드 받아서 처리 -> 문하지 않는 페이지까지 다운로드 받아야만 하므로 오래걸릴 수 밖에 없음 -> 사용자가 최초 View를 보기 위한 시간이 오래 걸림
      • TTV : Time To View의 약자로써, 사용자가 최초 View를 볼 수 있을 때 까지의 시간
    • 코드 스플리팅을 사용하면 사용자가 필요로 하는 부분만 우선 로딩 / 나머지는 필요에 의해서만 로딩 -> TTV 향상
      • 각 컴포넌트를 별도 Javascript 번들로 분리 -> 필요한 부분만 로드하도록 보장 -> 비즈니스 로직 구현에 집중
  • Data Fetching
    • 여러 옵션을 통해 한 번만 값을 가져올지, 일정 주기별로 가져올지, 지속적으로 계속 가져올지 결정 -> SSR, SSG, ISR과 밀접한 연관
  • Vercel에서 제공하는 Next.js인 만큼 배포가 굉장히 쉬움 -> Next.js를 사용하면 : vercel로 일괄 배포
• 6가지 원칙을 기반으로 개발
  • 설정이 필요 없는 즉시 사용 가능 기능
  • JavaScript 전면 적용 + 모든 함수가 JavaScript로 작성됨
  • 자동 코드 분할 및 서버 렌더링
  • 데이터 가져오기 설정 (주기적, 영구적, 요청에따라 등 ) 가능
  • 요청 예측
    • 사용자가 원하는 것을 미리 예측 = 요구사항 예측
  • 배포 간소화