NextJS 개발 환경 구성하기 - Intro

HyeonWooGa·2022년 7월 8일
0
post-custom-banner

실무란? 이론을 바탕으로 다양한 문제들과 직면하는 과정

개발이란? 개발자의 지식과 경험을 통해서 얻은 것으로 좋은 결과물을 내는 것

  • 조은 강사님도 처음에는 개발이라는 것이 두려웠었다고 합니다.
  • 하지만 시간이 지나면서 어떻게 개발을 해야하는지 스스로 정리를 하기도하고 주변 선배들의 좋은 방법들을 배우며 나아졌다고 합니다.
  • 단순히 코드를 타이핑하는 것이 아니라 의미있는 결과물을 만들어 가는 과정에서 성장할 수 있을 것이라고 생각합니다.

그래서 이번 과정에서 만들어볼 사이트는? 패스트캠퍼스 사이트

  • 비즈니스 모델, 사이트의 목적을 분석하고 어떤 것들을 더 신경써야할 지 정리 먼저 합니다.
  • 비즈니스적인 문제가 있었을때 어떻게 해결하는지 보는 것도 좋을 것 같습니다.

먼저 전체적인 페이지의 구조와 기능들을 파악합니다

  • 피씨환경, 모바일환경 둘 다 확인합니다.
    • 비슷하지만 다른 부분이 있습니다.

인증 (인증과정에 대한 이해도는 중요합니다)

  • 로그인
  • 회원가입
  • 로그아웃
  • Profile
  • 유저 정보

글로벌 모듈 (페이지 초창기때 정리를 해두면 좋습니다, 생산성과 관련)

  • GNB
  • 레이어
  • 푸터

내부 모듈

  • 배너
  • 공지사항
  • 강의 목록(패스트캠퍼스 사이트에서 중요한 스펙, 보여주는 방식, 데이터구조를 먼저 정의를 합니다.)
  • 강의 상세 페이지(API가 없기때문에 일단 MOCK DATA 사용)

모바일 모듈 (모바일 환경에서만 있는 모듈, 분기 태우는 함수 구성해야함)

  • 카테고리 목록

분석한 위의 스펙들을 따라 어떤 아키텍쳐로 개발을 할지 고민합니다.

  • 패스트캠퍼스 사이트는 보편적인 구성이기 때문에, 전통적인 SSR(서버 사이드 렌더링)을 쓸 수 있을 것으로 보입니다.

서버사이드렌더링 vs 스테틱사이트제너레이션

  • 지금까지 분석한 스펙에서는 둘 다 어느정도 합당하다고 볼 수 있습니다.
  • 다만 강의 정보들의 실시간성이 얼마나 보장 되어야 하는가에 대해서 고민합니다.

강의 상세는 SSG

  • 강의 가격 등의 실시간성이 필요하기 때문에

강의 사이트는 SSR

  • 실시간성이 크게 요구되는 부분이 없기 때문에

이런 상황에서 쓸 수 있는 라이브러리가 여러개 있지만 이번에는 NextJS를 사용하겠습니다.

profile
Aim for the TOP, Developer
post-custom-banner

0개의 댓글