신입 프론트엔드 웹(Frontend Web) 개발자가 되기 위해 필요한 순서

 

 

#순서1

프론트 개발을 하시려면 가장 먼저 Javascript와 html에 대해서 공부를 해야 합니다.

Javascript는 기본적으로 ECMA6 문법까지는 하셔야 합니다.

또한 HTML5에서의 다양한 테그(element)의 역할을 알아야 합니다.

앵귤러, 리엑트, 뷰 등을 먼저 하지 마시구요..

 * 저 3종친구를 먼저한다고 시도하는 것은 운전도 못하는 사람이 대형버스를 운전하는 것과 같습니다.

브라우저에서 제공하는 개발자 도구에서 편리하게 연습 할 수 있습니다.

 

#순서2

브라우저에 대해서 알아야 합니다.

브라우저는 HTML의 엘리먼트와, Javascript 코드가 동작을 할 수 있도록 환경을 구성하여 주는 프로그램 입니다.

익스플로러, 파이어폭스, 크롬, 엣지, 웨일 및 사파리 등등..

이러한 브라우저들은 모두 Javascript의 규칙적인 문법을 따르지만, 그렇지 않는 경우도 있습니다.

 * ECMA표준을 지킨다는 표현이 맞겠습니다만 여기서 쉽게 풀어 썼습니다.

각각의 브라우저에서 지원이 가능한, 지원이 불가능한 문법이 무엇인지 알아야 합니다.

 

#순서3

스타일(Style, css)에 대해서 공부하셔야 합니다.

퍼블리셔나 웹디자이너 수준급은 아니지만 단순한 게시판을 만들 수 있는 수준으로 연습하는 것을 추천드립니다.

Style에 대해서 아무런 지식이 없는 프론트개발자 본적이 없습니다.

 

#순서4

Jquery를 공부해야 합니다.

"Jquery의 시대가 지났다!", "누가써!" 이러는데 공공기관 가 보시면 "Jquery" 프로젝트 정말 많습니다.

신규 사업에서 안쓰일 수도 있지만, 기존 구축된 사업들의 많은수가 Jquery로 되어 있습니다.

내가 입사한 회사가 이미 Jquery로 구축된 프로그램이 존재하는데...Jquery를 전혀 못 한다면..손도 못대고 밤새 야근 할 수 있습니다.

기능이나 성능이 매우 뛰어납니다.

 

#순서5

다음으로 Typescript입니다.

Typescript 문법은 Javascript와 비슷하지만, "자료형" 이라는 것이 존재하여 조금 어렵습니다.

이러한 Typescript는 npm이라는 프로그램으로 설치하여 컴파일&사용 이 가능합니다.

npm을 위해서는 Node.js 설치 및 사용법도 함께 알아가야 합니다.

그러므로 Node.js와 Typescript를 알아야 합니다.

 

#순서6

번들러(bundler)에 대해서 경험을 해 보셔야 합니다.

번들러의 대표적인 예로는 웹펙, 파셀이 있습니다.

번들러라는 것은 프론트 개발을 쉽게 할 수 있도록 도와주는 친구들이라 생각하면 됩니다.

너무 깊게 하지 않으셔도 되지만 어떻게 동작하는지, 왜 사용되는지를 알아야 합니다.

그리고 나서 앵귤러, 리엑트, 뷰 3종 친구 중 원하는 한가지를 하시면 될 것 같습니다.

번들러를 알고나면 3종 친구 연습하는데 도움이 됩니다.

 

#순서7

앵귤러, 리엑트, 뷰 라는 프레임워크(라이브러리)가 있습니다.

번들러, 테스트도구 등과 함께 합쳐진 개발환경을 구축하여 사용 됩니다.

일반적으로 리엑트, 뷰가 많이 사용되며 각각 경험을 해 보고 나서 본인에게 맞는 것을 선택하여 공부 하시면 됩니다.

3가지중 1가지는 반드시 익혀야 합니다.

 

#순서8

각종 프론트 라이브러리를 자유롭게 사용하시는 방법을 배우셔야 합니다.

Openlayers4, Ckeditor5등등..

레퍼런스를 보고 자유롭게 구현을 할 수 있는 수준으로 연습하셔야 합니다.

"저는 리엑트(앵귤러 or 뷰)만 할 줄 알아요..", "리엑트(앵귤러 or 뷰)와 관련된 라이브러리가 없어요.." 라고 말하는 개발자가 안되려면 꼭 해 보아야 합니다.

저런 분들은 프론트 개발자로써 오래 활동을 못합니다....

개발자라고 하기 보다는 리엑트 코더, 앵귤러 코더, 뷰 코더 라고 부르는게 맞겠네요.

 

#순서9

고객에 의해서 커스텀한 기능등을 Html canvas로 구현하는 방법 등을 익숙하게 사용 할 수 있어야 합니다.

가령 고객이, 엑셀처럼 표가 사용자의 선택에 의해서 병합되는 기능을 요구한다고 가정하여봅니다.

그런데 그러한 기능을 제공하는 라이브러리는 없구요..

이처럼 외부 라이브러리가 사용 불가능한 경우에 기능 구현을 위해서 canvas를 익히는 것을 추천 드립니다.

* Html canvas를 사용하시다 보면, 왜 수학이 필요한지, 알고리즘이 필요한지 알게 됩니다..ㅠ

 

#순서10

형상관리가 무엇인지 알아야 합니다.

git, github, svn등등..협업에서 사용하는 주요 프로그램이 무엇인지 반드시 알아야 합니다.

 

#순서11

운영체제, 네트워크 등에 대한 기본적인 지식이 필요 합니다.

해당 내용을 개발하는 경우에 사용하지 않더라도 알아두면 반드시 도움이 됩니다.

예를 들어, "ftp나 sftp등을 활용하여 수정된 파일을 올려달라!" 라는 요청을 받는 경우가 있다고 하면 뭔 말인지 몰라서 아무것도 못하는 개발자가 되어 버릴수가 있습니다.

 

#순서12

컴퓨터 알고리즘을 공부해야 합니다.

100만개의 데이터를 정렬하고 그룹화하여 차트로 보여주는 경우가 있다고 한 다면 효율적인 방법을 사용하기 위해서는 알고리즘에 대한 지식이 필요 할 수도 있습니다.

아마도 #1~ #9번까지 단계를 밟아 나 간다면 자연스레 몇몇개의 알고리즘은 터득한 상태일 것 입니다.

필수요소라고 할 수는 없겠지만, 충분히 필요한 요소라 생각 합니다.

 

 

프론트엔드 웹 개발자는 리액트, 앵귤러, 뷰 또는 Jquery 등등 언급된 기술 중 1가지만을 활용하여 개발하는 인력을 의미한다고 생각하지 않습니다.

프론트(Frontend)라는 의미 그대로 "브라우저 화면" 에서 보여지는 기능을 개발하는 것을 의미 합니다.

사용자는 브라우저에서 동작하는 기능이 앵귤러, 리엑트, 뷰 또는 Jquery인지 모릅니다.

단지 브라우저에서 동작하는 기능이 "좋다", "나쁘다", "편리하다", "불편하다" 만 기억합니다.

 

각종 라이브러리와의 연동, 사용자 요구에 따른 멋진 화면 기능 구현, 예전에 구축된 Jquery기능 수정 및 다양한 브라우저에 대한 가변적인 기능 등등..

이러한 전문적 모습을 지닌 개발자가 웹 프론트엔드 개발자가 아닐까요..^-^

 

주관적인 생각 위주로 정리를 하여 보았습니다.

좀 더 좋은 의견이 있으시면 댓글 또는 메일로 부탁드립니다. 👻

 

* 신입 백엔드 웹 개발자가 되기 위해 필요한 순서

https://lts0606.tistory.com/516