search-collection-js v1.0.0

search collection js pc.

Outline

1. 설치 전 할 일
2. 설치 / 설정 / 실행
3. 프로젝트 구조
4. 개발환경 세팅
5. 컬렉션 개발 세팅
6. 개발 프로세스
7. 배포 프로세스
8. 개발시 주의 사항
9. TODO

설치 전 할 일

1. NodeJS 설치 (https://nodejs.org/ko/download/package-manager/#osx)
2. 공동체 깃헙에 본인 SSH 키 등록 (https://help.github.com/articles/connecting-to-github-with-ssh/)

설치 / 설정 / 실행

1. 로컬에 클론 받은 후 node 디펜던시 설치

$ cd ~/your_working_directory
$ git clone git@github.kakaocorp.com:FTDev/tools-search-collection.git
$ cd tools-search-collection
$ npm install

2. 필수 설정

• 통검환경 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"
  }

3. 목적에 따라 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을 열어보면 여러 설정 필드가 있다. 각 필드에 대한 상세는 아래와 같다.

컬렉션 개발 세팅

1. src 폴더 아래에 개발할 콜렉션의 폴더를 만든다 (노출코드가 하나인 경우 대문자 노출코드, 불가능할시 소문자 콜렉션명)
2. config.json을 생성한다. (하나의 컬렉션에서 여러개의 config이 필요할경우 폴더 분기하여 여러개 만들어도 무방)
3. config.json에 필요한 정보를 입력한다 (다음의 링크 참고 https://github.kakaocorp.com/FTDev/tools-search-collection#configuration)
4. 터미널을 열어 프로젝트 root로 이동한다.
5. 개발을 시작해보자. 다음의 명령어를 입력한다 npm start --context="콜렉션폴더명"
6. 브라우저가 자동으로 열리면 각 프로젝트별로 config.json에 설정한 url로 이동할 수 있는 페이지가 나온다. 본인의 콜렉션 페이지를 클릭하면 된다.

개발 프로세스

1. 검색JS아지트로 요청이 온다.
2. 위의 컬렉션 개발 세팅법을 참고하여 세팅한다.
3. 테스트 스크립트를 배포한 뒤 미들 개발자에게 url을 전달한다. 개발시 캐싱으로 인한 불편함을 막기위해 타임스탬프를 박아달라고 요청한다.
4. 필요한 데이터는 C.디스플레이코드 의 네임스페이스로 미들개발자가 내려주도록 한다.
5. 미들쪽에서 작업이 늦어질 경우에는 config.json의 static 기능을 사용하여 개발한다
   • 설정법은 다음을 참고: (설정예제)

배포 프로세스

배포는 크게 다음과 같이 진행한다.

소스 수정 => git 커밋 => 배포 명령어 실행 => Tenth2로 업로드 => 미들 담당자에게 배포 URL 전달

각 테스트 별로 커맨드는 아래와 같다

1. 테스트 배포 npm run publish:test --context=배포할콜렉션폴더
2. 서비스 배포 npm run publish:service --context=배포할콜렉션폴더

서비스의 경우 리비전 (버전 넘버)이 파일명에 붙어서 생성되고, 배포된 파일의 주소는 터미널에 표시된다.

개발시 주의 사항

1. class 선언 금지
   • Object.defineProperty는 IE8에서 표준스펙과는 다르게 동작한다
   • babel이 class를 ES5로 트랜스파일 하며 Object.defineProperty를 사용한다
   • class 기능이 필요한 경우 생성자 패턴과 prototype inheritance 패턴을 사용한다
2. webpack 버전업 금지
   • webpack은 1.13 버전이후로 IE8에 대한 지원을 끊었다.
   • IE8 환경을 지원해야 할 경우 현재의 웹팩 버전을 유지해야 한다.
   • 강제로 업그레이드 하지 않는이상 버전은 유지된다.
3. master 브랜치에서 작업 금지
   • 모든 작업은 콜렉션별로 브랜치를 새로 따서 작업한다. (master 기준)
   • 모든 작업이 끝난 브랜치는 master에 merge한 뒤 삭제한다.
4. 이슈 (버그, 개선 등)등은 깃헙 issue 기능을 함께 활용하여 관리한다.
5. webpack.config 파일 직접 조작 금지
   • 필요한 세팅은 settings.json을 통해서 한다.
   • 추가 기능이 필요하면 툴 관리자에 문의한다.
6. node_modules, dist, .idea 등은 절대로 git에 커밋하지 않는다.
   • 기본적으로 .gitignore에 막아두었지만 강제로 저것들을 커밋하는 일이 없도록 주의하자

TODO

Issue Guide

이슈관리는 github issue 를 이용한다.

• 이슈 생성시 이슈 템플릿에 있는 가이드에 따른다