대부분의 프로그래밍 입문자분들이 많이 하는 질문 중 하나는

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

프론트엔드와 백엔드, 서버 등 다양한 개발자 유형이 있지만 이번에는 프론트엔드 개발자 관련 이야기를 하겠습니다.

프로그래밍 언어는 아시다시피 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, … )

다음편에는 백엔드 개발자에 대해서 알아보죠

모두의 코딩

소식 및 정보

댓글0