# 1. 정체되지 않는 프론트엔드 개발자의 일하는 방식

###### tags: `지호`, `프론트엔드 Back to the Basics`

---

## 1. 프론트엔드 개발자의 정의와 성장

### 프론트엔드 개발의 변화
WEB 2.0
AJAX

### 개발환경
- vi, vim 정도는 알아두기
- [좋은 git 커밋 메시지를 작성하기 위한 7가지 약속](https://meetup.toast.com/posts/106)
- [공식 문서 통합](https://devdocs.io/)
- 여러 버전의 NodeJS 관리: NVM, n
- 화면 캡쳐: 라이스캡?

### 프론트엔드
- 사용자와의 직접 연관이 있는 분야
- HTML과 CSS는 계속해서 새로운 명세가 발표된다. HTML5, CSS3는 없다고 봐도 무방하다.

### 자바스크립트
- 깃헙 기준 6년째 1위
- 다양한 분야에서 사용 가능
- 모바일 애플리케이션 개발: React Native
- 데스크톱 애플리케이션 개발: [Electron](https://www.electronjs.org/)

### 공부 방법
- 공부할 범위가 너무 많으니까, 범위를 축소하고 깊이 있게 배우기
- 공식 문서: MDN, React/Vue 공식문서
- 공식 문서 한번에 다 읽으려고 하지 말고 자주 읽기
- 도메인 지식 습득
- 코드 많이 읽기
- 개인 프로젝트: 나한테 필요한 것을 주제로, 내가 못하는 기술이라도 적어두기
- 어느정도 알고있는 기술이면 글로 남기기: 검증하는 과정, 예제 코드 작성 필요 (https://taegon.kim/archives/7107)
- 처음 접한 기술이라면, "왜" 이 기술을 만들었는지 살펴보기.
- "React 방식으로 생각하기"

### 트렌드 파악
- 깃헙 트렌딩 주 3회 이상 보기
- 트렌드를 정리해서 보내주는 메일링 리스트 구독
- 프론트에서 유명한 SNS 계정 팔로우 (되도록 영문) : @GeekNewsBot, @estima7, @WebPlatformNews, @dan_abramov, @nodejs_ko, @paul_irish, @addyosmani, @JavaScriptDaily, @devsfarm, @smashingmag, @nodejs, @thoughtbot, @openjsf, @gaeraecom, @taggon
- 채용 공고 읽기

### 협업
- 컴포넌트화(라이브러리화): [Atomic Design Pattern](https://brunch.co.kr/@ultra0034/63), https://bradfrost.com/blog/post/atomic-web-desig
- 애자일

<br/>
<br/>

## 2. 개발을 시작할 때 일어나는 고민들
- 번들러 사용: 웹팩
- 보일러 플레이트 사용
- 단위 테스트: Jest
- 컴포넌트 기반 개발: 하나의 컴포넌트가 하나의 기능만 담당