Front-end 개발자 학습목록

Step 1

• Git / GitHub
• ECMAScript2015(ES6)
• JavaScript의 동작원리
• DOM API (Web API) and Concept
• NPM
• Webpack ( + babel )
• HTML/CSS 기본 (아… 기본이 어디까지 일까요)
• CSS Media query

Step 2

• 자료구조, 네트워크를 비롯한 CS 지식
• ES5 Core Concept
• AJAX(Asynchronous JavaScript and XML)
• CORS
• 브라우저 동작 원리 (Critical Path)
• 웹 접근성

Step 3

• CSS 방법론
• 서버 사이드 렌더링 / 클라이언트 사이드 렌더링 ( + SPA )
• AMD, CommonJS
• 함수형 지식
• Additional Step
• 기본적인(?) 백엔드 지식
• View 라이브러리 (React)
• 상태 관리 라이브러리
• 하드웨어 가속에 대한 이해

아래는 받은 질문과 그에 대한 제 답변입니다.

#1. 프론트엔드 개발자로 취업하고 싶은데 꼭 필요한 언어나 라이브러리, 프레임워크가 있다면 어떤 것이 있을까요?

프로그래밍 언어부터 말씀드릴게요. 필요한 언어는 아시다시피 HTML / CSS / JavaScript 이겠죠?

1. HTML/CSS

HTML/CSS 의 경우에는 처음 학습할 때는 쉽다고 느껴질 수 있지만 쉽지 않죠. 각종 방법론 중 하나를 고려하여 보다 효율적으로 CSS를 작성하고, 의미, 구조에 맞춰 HTML을 작성하는 것은 쉬운 일이 아닙니다. ‘웹 접근성’을 고려하고 ‘크로스 브라우징 이슈’에 대응하기 위해서는 스펙 문서를 읽어야 합니다. (이 경우까지 고려할 줄 아는 정도라면 이미 훌륭할 것 같네요.) ‘media query’를 활용한 반응형 디자인과 CSS의 grid layout 까지 이해하고, CSS3에서의 animation과 transition에 대한 이해까지 있으면 더 좋구요.

• HTML/CSS 기본 (아… 기본이 어디까지일까요)
• CSS 방법론
• Grid layout
• CSS Media query
• CSS3 Animation / Transition
• 웹 접근성

2. JavaScript

자바스크립트의 경우에는 ‘근대화’ 시대로 접어든지 얼마 안 된 언어입니다. ES3부터 시작해서 ES5, ES6로 발전을 해왔고, 현재는 ES8까지 standard로 나와있는데요, ES6로 대부분 전환되고 있습니다. ES6(ECMAScript 2015) 스펙을 기준으로 학습하시되, ES5에 있는 각각의 이슈에 대해서 학습할 필요가 있습니다.

대표적인 예로는, Prototype Chaning, Hoisting, Scope, 이를 기반으로 탄생한 Namespace pattern,this의 정체,Closure 등이 있습니다. 물론 ES6의 문법은 다 아셔야 합니다.

가장 중요한 것이 자바스크립트라고 생각하는데요, 언어 자체로는 자바스크립트가 싱글 스레드, 비동기로 동작하기 때문에 이에 대한 이해가 필요합니다. 즉, JavaScript의 작동 원리를 알아야 합니다. 이 링크(JavaScript 동작 원리)를 참고하세요!

언어 자체도 중요하지만 프론트엔드는 브라우저 위에서 웹 문서를 조작하는 분야이기 때문에, 웹 문서(document)에 대한 이해도 필요합니다. 예를 들면, DOM에 이벤트를 등록한다던가, delegation을 통해 이벤트를 전파한다던가 등에 대한 학습을 요구합니다.

• ECMAScript2015(ES6)
• DOM API (Web API) and Concept
• ES5 Core Concept
• JavaScript의 동작 원리

3. 라이브러리, 프레임워크

강점이 될 수 있지만, 기본적인 내용을 모르고서 학습을 내세운다면 오히려 단점이 될 수 있는 부분이라고 생각합니다.

이게 자칫 잘못 전달되면 학습 방법에 대한 이야기로 전달될 수 있어서 짚어드리자면, 라이브러리 또는 프레임워크를 먼저 학습하고 기본에 대해서 학습하시든, 기본을 학습하고 라이브러리, 프레임워크를 학습하시든 그 순서는 상관없습니다. 자신에게 맞는 방법으로 학습하시면 됩니다. 다만, 중요한 것은 기본에 대한 학습이라고 생각됩니다.

요즘 프론트엔드 생태계를 살펴보면 React, Vue, Angular 이렇게 3대장이 있고 jQuery 라는 유물이 있을 거 같아요. 각종 라이브러리나 프레임워크를 사용하면 SPA에서 고려되는 각종 요소들을 학습할 수 있습니다. 예를 들면 컴포넌트에 대한 이해, Routing, history, SSR, 상태 관리, 그리고 rerender를 위한 detection 등이 있습니다. 그래도 저 중에서 하나를 고르라면 저는 개인적으로 React를 추천하고 이유는 다음과 같습니다.

• 자바스크립트라는 언어 자체를 보다 깊게 공부할 수 있는 계기가 될 수 있다.
• ‘매직’을 확인할 수 있으며 그 정도가 다른 프레임워크에 비해 덜하다. (즉, 구조 자체가 직관적이다.)
• 참고할 수 있는 레퍼런스가 많다. (다른 것도 충분합니다.)
• 현 시점, 가장 많이 사용하고 있는 라이브러리이며 그 발전 가능성 또한 유망하다.
• 현업에서 많이 사용하고 있다는 점은 취업에 유리하다고 까지 이어진다.

거의 비슷하기 때문에 뭘 선택하든 상관은 없습니다 라고 말하면 무책임할 것 같아서 나름의 이유로 React 선택해봤습니다 :)

React를 학습하셨다면 추가적으로 Redux 또는 MobX 와 같은 ‘상태 관리 라이브러리’도 살펴보시면 좋을 것 같습니다. ‘상태 관리’라는 이슈는 프론트엔드 환경이 복잡해지면서 위에서 언급한 라이브러리나 프레임워크를 사용하지 않더라도 맞딱뜨릴 이슈입니다.

각종 상태 관리 라이브러리에서는 어떻게 상태 관리를 효율적으로 하는지 파악하면 정말 큰 도움이 됩니다. (그러면서 더 깊이 들어가면 redux-saga, RxJS 등으로 비동기 처리를 핸들링 하는 학습도 이어하실 수 있습니다.)

• View 라이브러리 (React)
• 상태관리 라이브러리(redux, mobx, …)
• 그 외 다른 라이브러리 (Ramda, rxjs, … )

#2. 그 외에 필요한 역량이 있다면 어떤 것이 있을까요?

0. Git 에 대한 이해와 GitHub 사용 경험

Git은 이제 필수입니다. 내부 동작을 깊게 까지 알 필요는 없지만 stage는 무엇인지 등, 기본적인 원리에 대한 이해가 있으면 좋을 것 같네요. 기본적인 Git 명령어는 이 링크(최소한의 Git Command)를 참고하세요. 이 링크의 command와 fast-forward merge / 3-way-merge / rebase vs merge 정도 알면 될 것 같습니다. (사실 Git은 Conflict를 resolve 할 때 시간 여행하면서 배우면 금방 익숙해집니다.)

그리고 GitHub을 사용할 줄 알아야 합니다. clone하고 fork하고 Pull Request 등록하고 까지는 기본일 것 같습니다. 추가적으로 git-flow와 github-flow 정도? 알면 좋을 것 같아요.

• Git / GitHub

1. 협업 경험

개발자 간의 협업이 있었나, 또는 다른 직군 (학생이라면 전공이 될 수 있습니다.)의 사람과 협업을 해본 것은 큰 강점이 될 수 있습니다. 협업을 하면서 그냥 협업을 하는 것이 아닌, 트러블을 해결하는 과정과 협업을 보다 효율적으로 하기 위한 수단 등이 하나의 스토리가 될 수 있습니다. 어쩌면 면접이라는 과정은 함께 일하는 사람을 뽑는 과정에 불과하기 때문에 이 부분이 개발적인 지식보다 크게 작용할 수 있습니다.

2. 자바스크립트 생태계

Node 가 등장하면서 자바스크립트 생태계가 크게 바뀌어서 이 부분에 대한 기본적인 학습이 필요합니다. 너무 많아서 정말 필요한 세 개만 말씀드리면 NPM, Webpack ( + babel), AMD vs CommonJS 이렇게가 되겠네요 :)

• NPM
• Webpack ( + babel )
• 모듈 시스템에 대한 이해 (AMD, CommonJS)
  • http://d2.naver.com/helloworld/12864

자바스크립트 생태계를 이해하기 위한 좋은 글, 2017년과 그 이후 JavaScript의 동향 시리즈 (2018 시리즈가 얼마 전에 나왔습니다.)

• 라이브러리와 프레임워크
• JavaScript, ECMAScript

3. 브라우저의 동작 원리

Critical Path라고 검색하시면 잘 나올텐데요, 브라우저가 어떤 원리로 문서를 렌더링하는가를 알면 좋습니다. 이 부분은 정리 잘 된 문서 공유드립니다.

• 브라우저의 동작 원리

4. 그 외 자료구조, 네트워크 지식을 비롯한 CS 지식

저는 CS과목 중 자료구조와 네트워크가 가장 중요하다고 생각하는데 다른 사람은 어떨지 모르겠네요… (OOP는 베이스.) 자료구조는 각 자료구조의 특징과 사용하는 예제들을 중심으로 학습하면 될 것 같구요, 네트워크는 웹 성능과 연관지어서 학습하시면 좋을 것 같네요. (대표적인 면접문제로 브라우저의 URL 입력창에 www.naver.com을 입력하고 엔터를 땅~ 치면 무슨 일이 벌어지나요? 입니다.) 또 DNS, CDN 등이 네트워크와 연관이 있으니 함께 학습하기를 권합니다. 이 부분은 뻔한 이야기가 될 것 같으니 여기까지 할게요 :)

CS는 여기 기술 면접 가이드 보시면 됩니다.(ㅋㅋ)

5. 영어

… 사실 0번입니다.

#3. 프론트엔드 개발자지만 백엔드도 어느 정도 할 줄 알아야 할까요?

‘어느 정도’가 조금 애매하긴 한데요, 백엔드 개발자와의 의사소통이 가능한 수준 정도는 할 줄 알아야 한다고 생각합니다. 예를 들면 API를 열어줄 때, 어떠한 방식으로 열어줄 것인가 등에 대해서 백엔드 개발자와 협의하는데 백엔드에 대한 지식이 있으면 그만큼 의사소통에 수월해집니다. 백엔드 지식이라고는 할 수 없지만 CORS에 대한 지식과 함께 ajax 에 대해서는 필수적으로 아셔야 해요. (면접에서도 많이 물어보시구요.)

그리고 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이를 구분하고 각각의 장단점은 무엇인지에 대한 이해가 필요합니다. 자연스럽게 SPA에 대한 내용도 포함되겠네요. 아 적고 나니 정말 정말 중요한 것 같네요.

• 브라우저의 렌더링 방식
  • 서버 사이드 렌더링 / 클라이언트 사이드 렌더링 (+SPA)
• AJAX(Asynchronous JavaScript and XML)
  • CORS
• 기본적인(?) 백엔드 지식

출처 : https://jbee.io/essay/for_junior_frontend_developer/