hyeonwooga.log
로그인
hyeonwooga.log
로그인
NextJS 개발 환경 구성하기 - Intro
HyeonWooGa
·
2022년 7월 8일
팔로우
0
nextjs
조은의 프론트엔드 실무 가이드
0
조은의 프론트엔드 실무 가이드
목록 보기
5/13
실무란? 이론을 바탕으로 다양한 문제들과 직면하는 과정
개발이란? 개발자의 지식과 경험을 통해서 얻은 것으로 좋은 결과물을 내는 것
조은 강사님도 처음에는 개발이라는 것이 두려웠었다고 합니다.
하지만 시간이 지나면서 어떻게 개발을 해야하는지 스스로 정리를 하기도하고 주변 선배들의 좋은 방법들을 배우며 나아졌다고 합니다.
단순히 코드를 타이핑하는 것이 아니라 의미있는 결과물을 만들어 가는 과정에서 성장할 수 있을 것이라고 생각합니다.
그래서 이번 과정에서 만들어볼 사이트는? 패스트캠퍼스 사이트
비즈니스 모델, 사이트의 목적을 분석하고 어떤 것들을 더 신경써야할 지 정리 먼저 합니다.
비즈니스적인 문제가 있었을때 어떻게 해결하는지 보는 것도 좋을 것 같습니다.
먼저 전체적인 페이지의 구조와 기능들을 파악합니다
피씨환경, 모바일환경 둘 다 확인합니다.
비슷하지만 다른 부분이 있습니다.
인증 (인증과정에 대한 이해도는 중요합니다)
로그인
회원가입
로그아웃
Profile
유저 정보
글로벌 모듈 (페이지 초창기때 정리를 해두면 좋습니다, 생산성과 관련)
GNB
레이어
푸터
내부 모듈
배너
공지사항
강의 목록(패스트캠퍼스 사이트에서 중요한 스펙, 보여주는 방식, 데이터구조를 먼저 정의를 합니다.)
강의 상세 페이지(API가 없기때문에 일단 MOCK DATA 사용)
모바일 모듈 (모바일 환경에서만 있는 모듈, 분기 태우는 함수 구성해야함)
카테고리 목록
분석한 위의 스펙들을 따라 어떤 아키텍쳐로 개발을 할지 고민합니다.
패스트캠퍼스 사이트는 보편적인 구성이기 때문에, 전통적인 SSR(서버 사이드 렌더링)을 쓸 수 있을 것으로 보입니다.
서버사이드렌더링 vs 스테틱사이트제너레이션
지금까지 분석한 스펙에서는 둘 다 어느정도 합당하다고 볼 수 있습니다.
다만 강의 정보들의 실시간성이 얼마나 보장 되어야 하는가에 대해서 고민합니다.
강의 상세는 SSG
강의 가격 등의 실시간성이 필요하기 때문에
강의 사이트는 SSR
실시간성이 크게 요구되는 부분이 없기 때문에
이런 상황에서 쓸 수 있는 라이브러리가 여러개 있지만 이번에는 NextJS를 사용하겠습니다.
HyeonWooGa
Aim for the TOP, Developer
팔로우
이전 포스트
Why GraphQL?
다음 포스트
NextJS 개발 환경 구성하기 - Create-next-app
0개의 댓글
댓글 작성