- NodeJS 설치 (https://nodejs.org/ko/download/package-manager/#osx)
- 공동체 깃헙에 본인 SSH 키 등록 (https://help.github.com/articles/connecting-to-github-with-ssh/)
- 로컬에 클론 받은 후 node 디펜던시 설치
$ cd ~/your_working_directory
$ git clone git@github.kakaocorp.com:FTDev/tools-search-collection.git
$ cd tools-search-collection
$ npm install- 필수 설정
-
통검환경 cross-domain이슈를 피하기 위해 /etc/hosts 에 본인 도메인 등록
$ sudo vim /etc/hosts --------------------------- # 주소는 *.daum.net 형태로 입력 # 0.0.0.0을 쓰는 이유는 VDI로 IE테스트를 하기 위해서임 127.0.0.1 localhost 0.0.0.0 bs.dev.daum.net
-
본인이 등록한 url을 settings.json의 localhost필드에 할당
// add your own hosts here after adding 0.0.0.0 to your /etc/hosts { "localhost": "bs.dev.daum.net" }
- 목적에 따라 npm 커맨드 실행
$ npm start // 개발용 로컬 서버 실행
$ npm run publish:dev // 테스트서버 빌드 및 배포
$ npm run publish:service // 실서버 빌드 및 배포├── dist # 배포용 소스 파일, 직접 손댈 필요 없다
├── package.json # 프로젝트 패키지 설정파일
├── src # 프로젝트 소스 폴더
│ ├── estate # 콜렉션 소스 폴더
│ │ ├── A1A4 # 콜렉션 UI 타입별 스크립트 폴더
│ │ │ ├── README.md # 콜렉션 UI 타입별 문서
│ │ │ ├── config.json # 콜렉션 UI 타입별 설정파일
│ │ │ ├── index.js # 콜렉션 UI 타입별 엔트리 포인트
│ │ │ └── selectbox.js
│ │ ├── A2A3
│ │ │ ├── README.md
│ │ │ ├── config.json
│ │ │ └── index.js
│ │ ├── B1
│ │ │ ├── README.md
│ │ │ ├── config.json
│ │ │ ├── index.js
│ │ ├── B2
│ │ │ ├── README.md
│ │ │ ├── config.json
│ │ │ ├── index.js
│ │ │ └── selectbox.js
│ └── image
├── settings.json # 전체 개발환경 설정파일, webpack config은 되도록 직접 만지지 않고 해당 파일의 설정만 이용한다.
├── webpack.config.babel.js # 공통 웹팩 설정 파일
├── webpack.config.local.babel.js # 로컬 개발용 웹팩 설정 파일
└── webpack.config.production.babel.js # 배포용 웹팩 설정 파일
모든 사람의 로컬 환경이 다 같기는 어렵기 때문에 개발서버의 포트, 로컬 URL 등을 바꿀 수 있도록 인터페이스를 제공한다.
/프로젝트/경로/settings.json을 열어보면 여러 설정 필드가 있다. 각 필드에 대한 상세는 아래와 같다.
| 필드 | 타입 | 내용 |
|---|---|---|
| hostname | string | CORS정책을 피하기 위해 사용할 로컬 호스트를 정의한다. /etc/hosts에 등록 되어있는 주소여야 한다. |
| proxyPort | number | 템플릿 프록시서버의 포트를 지정한다. 혹여 다른 프로젝트에서 사용하는 포트와 겹칠경우 바꿔주면 된다 |
| devServerPort | number | 개발 서버를 구동할 때 사용할 포트 번호 |
| globalModules | object | webpack은 라이브러리도 같이 번들링을 해버리기 때문에, 통검에서 글로벌로 제공하고 있는 라이브러리의 경우 해당 목록에 올려서 사용해야 한다. 필드명은 import할 모듈의 경로명이며, 키는 해당 모듈의 글로별 변수명이다. 자세한 것은 https://webpack.js.org/configuration/externals/ 참고 |
- src 폴더 아래에 개발할 콜렉션의 폴더를 만든다 (노출코드가 하나인 경우 대문자 노출코드, 불가능할시 소문자 콜렉션명)
- config.json을 생성한다. (하나의 컬렉션에서 여러개의 config이 필요할경우 폴더 분기하여 여러개 만들어도 무방)
- config.json에 필요한 정보를 입력한다 (다음의 링크 참고 https://github.kakaocorp.com/FTDev/tools-search-collection#configuration)
- 터미널을 열어 프로젝트 root로 이동한다.
- 개발을 시작해보자. 다음의 명령어를 입력한다
npm start --context="콜렉션폴더명" - 브라우저가 자동으로 열리면 각 프로젝트별로 config.json에 설정한 url로 이동할 수 있는 페이지가 나온다. 본인의 콜렉션 페이지를 클릭하면 된다.
- 검색JS아지트로 요청이 온다.
- 위의 컬렉션 개발 세팅법을 참고하여 세팅한다.
- 테스트 스크립트를 배포한 뒤 미들 개발자에게 url을 전달한다. 개발시 캐싱으로 인한 불편함을 막기위해 타임스탬프를 박아달라고 요청한다.
- 필요한 데이터는 C.[디스플레이코드] 의 네임스페이스로 미들개발자가 내려주도록 한다.
- 미들쪽에서 작업이 늦어질 경우에는 config.json의 static 기능을 사용하여 개발한다
- 설정법은 다음을 참고: (설정예제)
배포는 크게 다음과 같이 진행한다.
소스 수정 => git 커밋 => 배포 명령어 실행 => Tenth2로 업로드 => 미들 담당자에게 배포 URL 전달
각 테스트 별로 커맨드는 아래와 같다
- 테스트 배포
npm run publish:test --context=배포할콜렉션폴더 - 서비스 배포
npm run publish:service --context=배포할콜렉션폴더
서비스의 경우 리비전 (버전 넘버)이 파일명에 붙어서 생성되고, 배포된 파일의 주소는 터미널에 표시된다.
- class 선언 금지
- Object.defineProperty는 IE8에서 표준스펙과는 다르게 동작한다
- babel이 class를 ES5로 트랜스파일 하며 Object.defineProperty를 사용한다
- class 기능이 필요한 경우 생성자 패턴과 prototype inheritance 패턴을 사용한다
- webpack 버전업 금지
- webpack은 1.13 버전이후로 IE8에 대한 지원을 끊었다.
- IE8 환경을 지원해야 할 경우 현재의 웹팩 버전을 유지해야 한다.
- 강제로 업그레이드 하지 않는이상 버전은 유지된다.
- master 브랜치에서 작업 금지
- 모든 작업은 콜렉션별로 브랜치를 새로 따서 작업한다. (master 기준)
- 모든 작업이 끝난 브랜치는 master에 merge한 뒤 삭제한다.
- 이슈 (버그, 개선 등)등은 깃헙 issue 기능을 함께 활용하여 관리한다.
- webpack.config 파일 직접 조작 금지
- 필요한 세팅은 settings.json을 통해서 한다.
- 추가 기능이 필요하면 툴 관리자에 문의한다.
- node_modules, dist, .idea 등은 절대로 git에 커밋하지 않는다.
- 기본적으로 .gitignore에 막아두었지만 강제로 저것들을 커밋하는 일이 없도록 주의하자
이슈관리는 github issue 를 이용한다.
- 이슈 생성시 이슈 템플릿에 있는 가이드에 따른다