조은의 프론트엔드 개발 실무 가이드 : 요구사항 분석과 적정 기술 (3)
패스트캠퍼스 The Red
Next 기반 애플리케이션 개발 환경 구성하기
패스트캠퍼스 사이트 Next.js로 구현하기 (TypeScript 기반)
CH03_01. 시작하기에 앞서
- 이론을 바탕으로 실무에서 다양하게 직면하는 문제 해결하기
- 개발자 개개인이 가진 지식과 경험에 따라서 문제 해결 방법이 다름
- 모든 개발 과정이 다를 수 있다 (1인/조직 단위 개발, 사수 유무, 비즈니스 이해도, 접근방식 등)
실습 예제 : 패스트캠퍼스 사이트 구현 (일부분)
- 어떤 비즈니스적인 문제가 있었을 때 어떤 접근방식을 가지고 그 문제를 해결하는지 과정 학습
- PC와 모바일웹이 약간 다름 : 현재 앱은 없으나 앱 유무에 따라 또 구현 방식 달라짐, 웹뷰 이해
- 교육 사이트 : 컨텐츠 다수
- 인증 : 로그인과 회원가입 - 사이트 전체에 어떻게 유지시킬 것인가?, 로그아웃, 프로필, 유저정보 등
- 글로벌 모듈 : GNB, 레이어, footer
ㄴ 글로벌 모듈을 얼마나 잘 설계하느냐에 따라 생산성에서 차이가 난다.- 내부 모듈 : 배너(슬라이드), 공지사항, 강의 목록(중요) - 데이터 구조를 어떻게 보여주는게 좋을까?
ㄴ 강의 상세는 Mock Data로 구현 (실제 API가 없으므로)- 모바일 모듈 : 카테고리 목록 (분기, util성 함수)
대단위의 스펙 : 공통으로 사용할 것, 어떤 것들을 신경써야 할까? 베이스 설계하기
Server Side Rendering vs Static Generater Rendering
데이터가 들어오는 전체 사이트 : SSR
정적인 페이지(강의 상세) : SSG
Next.js 사용하여 구현하기
CH03_02. create-next-app
- Next.js 설치
- custumizerable
- webpack, parcel같은 별도 도구를 쓰지 않고도 사용 가능
- 무엇보다 webpack5로 빌드됨
Typescript를 활용한 간단한 Next.js 프로젝트
Tip : 문서화 (README.md)
Contributors
- 참여자/프로젝트 관련자 @태깅
Tech Requirement (Tech Stack)
- Create-next-app
- Next.js
- TypeScript (JavaSript ES6)
- ESLint
- Babel 설정 (polyfill, preset)
Docker
- Dockerfile을 이용해서 Docker Container
- Docker Compose를 사용하고 있습니다.
Script
$ npm run build $ npm run deploy
CH03_03. BabelRC, ESLint 설정하기
Babel
.babelrc : 브라우저 버전별 호환(변환)
https://nextjs.org/docs/basic-features/supported-browsers-features
ESlint
.eslintrc.json : 규칙
- Next.js ESLint https://nextjs.org/docs/basic-features/eslint
- ESLint https://eslint.org/
- airbnb ESLint https://www.npmjs.com/package/eslint-config-airbnb-typescript
- 참고자료
ㄴ VScode + TypeScript + ESLint + Prettier 셋팅하기
ㄴ airbnb ESLint 알아보자
ㄴ airbnb ESLint 적용하기
회사와 팀의 프로젝트 기초 개발환경 설정
협업 시 일관성 및 유지보수성을 높일 수 있는 설정
.github
- github 사용 전제 설정
CODEOWNERS
ㄴ PR을 날리거나 개발 진행 시 코드 관리자 지정 파일
ㄴ 저장소 내에서 일어나는 모든 이슈들에 대한 Reviewer로 붙게 됨
ㄴ github protection : CODEOWNER가 Review를 날렸을 때만 Merge가 가능하도록 설정하는 기능
ㄴ ex) Docker 파일은 DevOps, SRE가 관리하도록 설정한다든가
API는 BE가 관리하도록 설정한다든가
CH03_04. Jest 기반 테스트 환경 설정하기
- 테스트 환경 설정은 쉽지만, 어떤 걸 더 신경 쓰고 내부에서 더 봐야하는구나 이해하는 것은 조금 어려울 수 있음
유닛테스트: 코드상 기능 점검 (빌드된 결과물 바탕으로 함수 호출하여 로직 파악, 정상 동작 확인)E2E테스트: End to End 테스트, 실제 환경에서 실제 동작을 바탕으로 점검한다
ㄴ 페이지를 띄워서 브라우저의 동작 점검, 데이터 렌더링, 쿼리가 날라가나 등...- 코드 상에서는 문제는 없으나 브라우저 상에서는 문제가 생길 수 있음
- 테스트 결과가 100%라고 해서 실제 적용이 100% 나오지 않을 수 있음
의도한 동작이 기대한 대로 잘 되는지 점검하는 과정- Edge Case를 모두 테스트에 다 넣기에는 시간 상의 제약이 있으므로 실제 일어나는 중요한 Edge Case 몇 가지로 테스트에 넣고 이후 발생된 사항에 대해 추가적인 진행 등 유연한 테스트 과정 (모든 걸 다 대응하는 게 능사는 아니다)
- 결제 한 번을 눌렀는데 10번 결제된다 같은 Business상 Critical한 이슈, 클릭 수에 따른 로깅이 여러 번 일어날 경우 데이터 정합성에 문제가 생기기는 이슈 등과 같은 테스트는 중요
Jest and React Testing Library
CH03_05. Docker Container 생성하기
- 배포 환경 설정 : AWS? Docker? Kubernetes? Vercel?
(AWS가 항상 답은 아니다)- 클라우드 플랫폼을 선정해 어떻게 컨테이너를 배포할지 회사마다 환경이 다름
- FE, BE, DevOps 협의
Next.js with Docker
Docker 설치 후 진행
https://nextjs.org/docs/deployment
https://github.com/vercel/next.js/tree/canary/examples/with-docker
Docker Container 환경에서 이슈 없이 돌아가는지
Dockerfile 생성 (Docker image)
package.json 수정 후 실행
"scripts": {
"start:production": "docker run -p 3000:3000 프로젝트명",
"docker": "docker build . -t 프로젝트명",
}CH03_06. GitHub Actions로 배포 스크립트 추가하기
- Docker를 어딘가에 업로드하거나 Vercel을 쓰거나 AWS EC2에 올리거나 등등 비즈니스 방향에 따라, Kubernetes 분산 컨테이너를 만들어서 하거나, 무중단 배포 등 (DevOps에 따라)
강의 시간 및 인증 등 제약으로 간단한 빌드 환경 셋팅과 과정 안내
GitHub Actions
https://nextjs.org/docs/advanced-features/ci-build-caching#github-actions
https://docs.github.com/en/actions/deployment/about-deployments/deploying-with-github-actions
- Deploying to Amazon Elastic Container Service
- Deploying to Azure
- Deploying to Google Kubernetes Engine
- Building and testing Node.js
- GitHub Actions에서 레시피를 바탕으로 내가 어떤 식으로 구현할지 이해해두면 좋을 것임
- 클라우드 플랫폼 계정, DevOps에 대한 이해 필요
modern FE dev = node.js & install & DevOps.....
만들기 전 설치하는 데에만 한 1시간 넘게 소요한 듯..
