🥕

프론트엔드 발표 자료 관련

속성
결과 제출 관련
참가자
태그
날짜
프론트
  • 브랜치 전략, 피어리뷰, 깃허브 (디스커션, 위키, 깃허브 프로젝트) 쓴거
  • 페이지별 기능 (각 페이지별 담당자가 내용을 위키에 정리하면 이 부분을 시연할 때 설명하면서 보여주는 식으로) 페이지별 특별한 기능 .. 챌린징 … 아무튼 ….

Next.JSTypeScript 도입

NextJS

  • React를 기반으로 SSR을 할 수 있는 프레임 워크
  • 프레임워크 도입을 통하여 협업을 원할하게 할 수 있는 장점. NextJS에서 기본적으로 pages 와 같은 폴더를 제공하므로 디렉터리 구조를 맞춰나가는데 원할 하였음
  • 플랫폼 특성 상, 다양한 렌더링 방식 적용 가능, 즉 페이지별로 유연하게 각 렌더링 방식의 장점에 맞추어 렌더링이 가능함
    • 유저와 상호작용이 자주 일어나는 커뮤니티, 댓글 → CSR을 사용하여 SPA의 장점 중 하나인 자연스러운 유저와의 소통 가능
    • 데이터베이스에 존재하는 정적 데이터를 보여주는 전시회, 유저 관련 페이지 → SSR, SSG
      • 또한, 전시회 관련 데이터의 경우, 유입에 중요한 요소라고 판단하여 SSR 의 장점인 SEO 성능이 좋다 는 점을 활용할 수 있음
 

TypeScript

  • 백엔드와의 협업에서 API 를 통하여 데이터를 주고 받는 작업이 아주 중요하고, 각 API의 필드 값이 중요.
  • 타입스크립트를 통하여 API 명세에 대한 타입을 정의함으로써, 복잡한 api 명세 데이터를 활용하는 경우 미리 작성한 타입을 통하여 타입 스크립트의 기능을 활용가능.
    • 특히나 코드 자동완성과 같은 컴파일 단계의 기능을 통하여, 복잡한 타입도 컴파일러의 도움을 받을 수 있었음
  • 또한, 컴파일 타입에 타입 관련 에러를 잡아냄으로써 배포 단계에서 타입관련 문제 (값으로 null 이나 undefined 가 들어오는 경우를 방어할 수 있었음.