Front-End Developer (프론트 앤드 개발자) Road Map (로드맵) 시리즈를 작성 해보려고 합니다.
프론트 엔드 개발자로서 자리잡고 성장해 나가기 위해 필수적으로 익혀야 할 기술 스택 들을 우선 순위를 정해서 순차적으로 정리해 보려고 합니다.
작성하는 저를 위해서 그리고 이 글을 보시는 다른 개발자 분들께 도움이 되었으면 합니다.
1장 Convention
Enterprise환경에서 소프트웨어를 개발 할때는 여러명의 개발자 들과 협업을 하게 됩니다.
이때, 여러명이서 동시에 하나의 소프트웨어를 만들기 때문에 프로젝트가 상당히 지저분해 질 수 있습니다.
따라서, 팀내에서 운영할 공동 규칙들을 정해서 코드 구조, 커밋 로그 형식등을 일관된 스타일로 적용하여 운용하여야 합니다.
프로젝트 시작전, 대표적으로 정하는 규칙(Convention)은 다음과 같습니다.
1. Git Branch Strategy (깃 브랜치 전략)
- master : 제품으로 출시될 수 있는 브랜치
- develop: 다음 출시 버전을 개발하는 브랜치
- feature: 기능을 개발하는 브랜치
- bugfix: 버그 수정 브랜치
- release ???
2. Git Commit Message Convention (깃 로그 작성 규칙)
AngularJS Commit Convention을 사용한다.
<type>: <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
예제)
feat: add ABR Controller
ABRController.js file is added.
It uses BOLA Algorithm.
Close #321
가) type
커밋의 종류
- feat: 새로운 기능
- fix: 버그 수정
- docs : 설명 추가& 변경
- style: 코드 스타일 변경
- refactor: 코드 구조 변경
- test: 테스트 코드 추가& 변경
- chore: 개발 환경 변경
나) subject
커밋 요약문
- 소문자로 시작
- 현재 시제의 명령문으로 작성
- .(마침표) 사용 금지
다) body
커밋 상세한 설명
라) footer
???
3. Code Convention
가) 변수/함수/클래스 명칭
- 파스칼 표기법 : 단어의 모든 첫 글자를 대문자로 표기
클래스 명
- 카멜 표기법 : 단어의 첫글자 대문자로 표기, 맨 앞에 오는 글자는 소문자 표기
변수명, 함수이름
나) 들여쓰기
스페이스로 두 번
4. Directory Structure
일반적으로 Web Component 개발을 위한 디렉토리 구조와 Web Service 개발을 위한 디렉토리 구조는 다르다.
Web Component의 경우, javascript Component 형태의 산출물을 가지고 있기 때문에 html, css 들을 string 형태로 변형해서 javascript 형태로 포함된다.
그러나, Web Service의 경우, 웹 페이지 기반이므로 HTML, CSS가 별도로 관리된다.
이 밖에도 Web Framework에 따라서 폴더구조가 정해지기도 한다. 여기서는 Vanila JS를 기준으로 한다.
※ 참고
윈도우 프롬프트 창에서 tree 를 입력하면 하위 폴더구조를 그려준다.
- Web Component 유형
└─project
├─config
│ └─webpack
├─dist (또는 build)
│ └─assets
│ ├─css
│ ├─images
│ └─js
├─doc
├─src (또는 app)
│ ├─skin: 컴포넌트 html, css 파일
│ ├─utils: javascript 유틸리티
│ └─index.js: 시작 entry 파일
└─test (또는 spec)
- Web Service 유형 (SPA)
└─project
├─config
│ └─webpack
├─dist (또는 build)
│ └─assets
│ ├─css
│ ├─images
│ └─js
├─doc
├─src (또는 app)
│ ├─assets
│ │ ├─images
│ │ └─sass
│ ├─components: javascript 컴포넌트
│ ├─utils: javascript 유틸리티
│ └─views: 페이지 html
│ └─index.html: 시작 페이지 html
│ └─index.js: 시작 entry 파일
│ └─router.js: 라우팅 파일
└─test (또는 spec)