pc-renewal v0.0.1
PC Renewal
프로젝트 설명
프로젝트 소개
PC는 UV, 거래액 측면에서 20% 이상의 비중을 차지하는 주요 POC 채널로 PC 메인(Main)은 2016년 이후 개편이 진행된 바가 없고, 메인 화면의 사용성 및 전시 효율도 지속 하락하고 있어 PC 개선에 대한 필요성에 따라 시작되었다.
참고) https://wiki.11stcorp.com/pages/viewpage.action?pageId=281066643
프로젝트에서 제공되는 것
다음 페이지 렌더링을 위한 Javscript 파일이 라이브러리 형대로 제공되어야 한다.
- PC Main 페이지
- PC Event 페이지
- Subpage에서 공통으로 사용하는 영역들(GNB, Floating Menu, Footer)
참고) Subpage는 11번가에서 서비스하고 있는 모든 페이지를 말한다.
프로젝트 개발 목표
개발 관점에서의 프로젝트를 진행하기 위한 최종 목표는 다음과 같다.
- PC개선 개발에 대한 생선성을 높일 수 있도록 한다.
- 유지보수에 용이한 개발 환경을 목적으로 기능구현을 할 수 있도록 한다.
- 산출물들에 대해 버전관리가 되어 배포될 수 있도록 한다. (버전관리의 중요성)
개발환경별 작업 방향
- 개발환경: 개발생산성을 높인다. (mock, HMR 적용)
- 상용환경: 산출물 버전에 대한 관리를 해야한다. (output구성)
산출물 버전관리
latest.txt 파일을 통해 버전관리를 한다. 빌드시에는 이전의 빌드를 지우고 새로 생성하는 것이 아닌 모듈의 각 버전이 변경되었는지를 확인하여 각각의 경우에 따라 산출물을 생성한다.
- 버전 업데이트가 이루어진 경우, 새로운 버전으로 빌드한다.
- 버전 업데이트가 이루어지지 않은 경우, 이전 버전으로 빌드한다.
개발 환경
저장소(Repository)
코드의 버전관리는 bitbucket에서 한다.
개발 환경 버전
개발환경과 주로 사용되는 패키지 버전은 다음과 같다.
- node: v13.8.0
- npm: v6.14.4
- webpack: v4.43.0
- preact: v10.4.1
- typescript: v3.7.5
- swiper: v5.3.7
- lottie-web: v5.6.6
- jest: v26.0.1
- enzyme: v3.11.0
- storybook: v5.3.18
Host 설정
로컬(Local)개발 환경을 구성하기 위해 Host를 설정한다. 배포시에는 배포 환경에 따라 도메인은 다른 host를 바라보도록 설정되어야 한다. (.env-ENV 파일 참고)
127.0.0.1 local.pc.11st.co.kr # pc-renewal
172.18.173.184 s-fo.011st.com # markup
172.28.115.188 v.011st.com # staticversion 서버. js & lastest.txt가 배포되는 서버
172.28.113.136 fe2white.11st.co.kr # html가 배포되는 서버참고) 11st.co.kr 도메인을 맞춰주지 않으면 인증에 사용하는 cookie를 확인하는데 이슈가 발생한다. 꼭 등록해야 함! 참고) js와 lastest.txt는 staticversion 서버에, html은 fe2white서버에 배포한다.
서버 띄우기
원격 저장소에서 복제(Clone)
코드를 원격저장소에서 로컬로 가져온다.
- http: http://bitbucket.11stcorp.com/scm/fe2/pc-renewal.git
- ssh: ssh://git@bitbucket.11stcorp.com:7999/fe2/pc-renewal.git
패키지 설치
개발 환경(node v13.8.0)에서 npm 패키지를 설치한다.
$ node -v # node버전 확인. v13.8.0
$ npm install개발환경(node v13.8.0)이 로컬에 구성되어 있지 않은 경우
npx를 이용하여 개발환경버전의 node환경에서 패키지 설치를 진행할 수 있다.
$ npx -p node@13.8.0 npm install참고) https://www.npmjs.com/package/npx
npm 스크립트 실행
다음과 같이 스크립트를 실행한다.
$ npm run start # 개발시 mock 데이터를 바라보고 있는 dev serveer를 띄운다. HRM 적용되어 있다.
$ npm run start:dev # 실제 API를 바라보고 있는 dev-server를 띄운다. HRM 적용되어 있다.
$ npm run build:stg # stg 배포를 위한 build 스크립트. (.evn-stg 파일 참고)
$ npm run build:alp # alp 배포를 위한 build 스크립트. (.evn-alp 파일 참고)
$ npm run build:prod # prod 배포를 위한 build 스크립트. (.evn-real 파일 참고)최종 산출물 (모듈)
- pc.common: GNB & Footer 컴포넌트에 대한 산출물
- pc.main: GNB & Main & Footer 컴포넌트에 대한 산출물
- pc.events: GNB & Events & Footer 컴포넌트에 대한 산출물
- pc.polyfills: IE대응을 위한 polyfill 모듈들
- lottie-web: 애니메이션 로고를 위한 lottie 모듈
- legacy를 대체하기 위한 파일들: pc.util_l, pc.footer_l, pc.history_l, pc.ad_l
참고) Footer option: myHistory / footerAd / floatingBanner 참고) 버전관리는 latest.txt 에서 한다.
최종적으로 생성되는 산출물 예시
.
dist # 최종 산출물을 담고 있는 빌드 디렉토리
├── preview # preview용 테스트 템플릿 제공을 위한 dir
├── favicon.ico
├── latest.txt
├── lottie-web.5.6.6.js
├── pc.common.0.0.1.js
├── pc.events.0.0.1.js
├── pc.main.0.0.1.js
└── pc.polyfills.0.0.1.js디렉토리 구조
.
├── .storybook # 컴포넌트 테스트 및 검증을 위한 storybook 설정
├── src
│ ├── components # 컴포넌트
│ │ ├── Events # 이벤트 전체보기
│ │ ├── Footer # 서비스 하단영역
│ │ ├── Gnb # 서비스 상단영역
│ │ ├── Main # 메인 페이지
│ │ └── FloatingBanner # GNB 사이드에 따라다니는 작은 배너
│ ├── entries # 최종 산출물 제공을 위한 엔트리들
│ ├── hooks
│ │ └── apis
│ ├── polyfills
│ ├── service # API 요청을 위한 서비스
│ │ ├── apis # 실제 API 호출
│ │ └── mocks # API 테스트를 위한 mock (json 파일들 목록)
│ ├── templates # 모듈 렌더링을 확인하기 위한 html 템플릿들
│ │ ├── assets # 템플릿에서 사용하는 공통 js & css
│ │ ├── guide # 산출물들의 적용 가이드가 정리된 템플릿 (prewview용도로 제공된다)
│ │ ├── sample # 산출물들이 적용된 화면을 볼 수 있는 샘플 템플릿
│ │ └── test # 테스트를 위한 템플릿
│ └── utils
└── tests # jest 단위 테스트를 위한 디렉토리
└── __config__- Gnb는 서비스 상단영역을 구성하는 컴포넌트로 Header 로 통칭되기도 함.
- HeroBanner는 Main컴포넌트에서 사용되는 베너로, 빌보드 베너라고도 함.
- Swiper모듈은 Main컴포넌트 내에서 사용하고 있다.
- templates 디렉토리에 정의된 html파일들은 산출물 적용안을 보여주기 위한 prewview 용도로 사용된다. smaple페이지 작성시 guide페이지에 따라 script를 적용하도록 한다. (모듈별 script적용 방식이 다르기 때문)
파일 설명
빌드 설정 파일
- latests.txt: 최종 산출물들에 대한 버전을 관리한다.
- .env-ENV: 배포환경 별로 구분되어야 하는 환경변수들을 정의한다.
개발환경 구성 파일
- .babelrc: 최신 문법 변환을 위한 babel 설정 (webpack, jest에서 사용되고 storybook에서 사용하는 설정은 별도로 구성되어 있음)
- .eslintrc.js: 정적코드분석을 위한 eslint설정
- .prettierrc: prettier의 포맷 적용을 위한 설정. (코드 공통 형식)
- jest.config.js: 테스트프레임워크인 jest를 위한 설정 (테스트 유틸리티로 enzyme 사용)
- tsconfig.js: 타입스크립트를 위한 설정
산출물을 위한 웹팩 파일
설정
- webpack.common.js
- webpack.mock.js
- webpack.dev.js
- webpack.prod.js
- webpack.utils.js: entry, output, plugin 등의 웹팩 설정과 관련된 유틸들
빌드
- webpack.build.stg.js
- webpack.build.alp.js
- webpack.build.real.js
테스트
Html 페이지 작성
작성 순서
- template 디렉토리 안에 html파일을 추가한다.
- html은 babel로 변환되지 않으므로 호환성을 위해 ES5문법으로 작성해야 한다. (const, let, arrow function 안됨!)
개발환경 구성파일
mock 데이터 (json)
mock데이터는 HTTP Code, Status를 제외하고 서버로부터 응답받은 데이터만 정의한다. 하나의 API에 대해서 하나의 응답으로 mock을 정의할 수 있다.
참고) mock 디렉토리(src/service/mocks/)구성은 RESTAPI의 path과 동일하게 설정할 수 있다.
jest
jest를 통해 단위 테스트를 실행한다.
$ npm run testenzyme
enzyme을 통해 컴포넌트를 시뮬레이션할 수 있다. 컴포넌트 시뮬레이션에 대한 테스트를 진행한다.
storybook
storybook를 통해 컴포넌트를 테스트 한다. 기본 구성요소가 되는 컴포넌트들의 렌더링 결과를 확인 할 수 있다. knob 애드온(Addon)을 적용되어 있으며, knob을 통해 props에 대한 컴포넌트 렌더링된 결과를 확인 할 수 있다.
$ npm run storybook새로운 산출물을 추가 하는 방법
- 버전관리: lastest.txt 파일에 추가할 산출물 명과 버전을 작성한다.
- 엔트리 추가: /stc/entries 디렉토리에 산출을의 도대가 되는 js를 작성한다.
- 엔트리 메타 데이터추가: 엔트리와 산출물로 제공될 모듈명을 mapping하는 메타 데이터를 추가한다.
- 환경변수: 필요에 따라 환경변수를 추가한다. (배포환경: .env-ENV / 개발환경: webpack.dev.js)
- 테스트페이지: 필요에 따라 테스트페이지를 작성한다.
4 years ago