hyeonwooga.log
로그인
hyeonwooga.log
로그인
NextJS 개발 환경 구성하기 - Intro
HyeonWooGa
·
2022년 7월 8일
팔로우
0
nextjs
조은의 프론트엔드 실무 가이드
0
실무란? 이론을 바탕으로 다양한 문제들과 직면하는 과정
개발이란? 개발자의 지식과 경험을 통해서 얻은 것으로 좋은 결과물을 내는 것
그래서 이번 과정에서 만들어볼 사이트는? 패스트캠퍼스 사이트
먼저 전체적인 페이지의 구조와 기능들을 파악합니다
인증 (인증과정에 대한 이해도는 중요합니다)
글로벌 모듈 (페이지 초창기때 정리를 해두면 좋습니다, 생산성과 관련)
내부 모듈
모바일 모듈 (모바일 환경에서만 있는 모듈, 분기 태우는 함수 구성해야함)
분석한 위의 스펙들을 따라 어떤 아키텍쳐로 개발을 할지 고민합니다.
서버사이드렌더링 vs 스테틱사이트제너레이션
강의 상세는 SSG
강의 사이트는 SSR
이런 상황에서 쓸 수 있는 라이브러리가 여러개 있지만 이번에는 NextJS를 사용하겠습니다.
조은의 프론트엔드 실무 가이드
목록 보기
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개의 댓글
댓글 작성
관련 채용 정보
스터닝
프론트엔드 개발자(신입)
프론트엔드 개발자로서 국내 최대 크리에이티브 플랫폼 스터닝에서 UX/UI 협업 및 웹 서비스 개발을 통해 창작자의 가치를 실현하는 데 기여해보세요. React, Typescript, Next.js와 같은 기술을 활용하며 유연한 근무 환경에서 업무에 몰입할 수 있습니다.
기아
[ICT] Backend Developer
웹 서비스 플랫폼의 백엔드 개발을 통해 효율적이고 안정적인 시스템을 설계하는 기회를 제공합니다. Java, Spring 프레임워크를 활용해 Agile 환경에서 함께 성장할 개발자를 기다립니다!
인플루디오
[포카마켓] React 프론트엔드 개발자 (1년 이상)
K-POP 포토카드 거래를 혁신하는 포카마켓에서 React와 Next.js를 활용한 프론트엔드 개발자로 함께 성장할 기회를 잡아보세요. 수평적이고 빠른 의사결정 구조 속에서 고객 경험을 최우선으로 하며, 적극적인 의견 공유로 더 나은 팀을 만들어갈 인재를 기다리고 있습니다.