2020년 프론트엔드 개발자가 되고싶다면 알아야하는 10가지 기술

웹 사이트 그까짓 거 뭐 그냥 대.... 
하던 시절이 있었는데 다시 생각해보니 한심하기 짝이 없다. 

웹 개발 과정을 얕게나마 경험하고 난 뒤에는 웹 사이트에서 보이는 모든 것과 클릭할 수 있는 모든 것엔 의도와 복잡한 처리 과정이 있다는 것을 알게 되었다. ( 로그인 누르면 그냥 로그인되는 거 아니야?... 응 그냥 되는 거 아니야... ) 

웹 개발자는 크게 '백엔드 개발자'와 '프론트엔드 개발자'로 나누어져 있지만 국내에서는 웹 개발자 ( 둘 다 잘해야 하는.. )로 불리는 게 일반적이었다. 하지만 최근에는 웹 프론트엔드 기술이 다양해지고 복잡해지면서 ( 반응형, 다양한 브라우저 등.. ) 프론트엔드 개발자에 대한 가치와 수요가 증가하였다. 특히나 요즘처럼 동적인( dynamic ) 웹 사이트가 대세인 상황에서 로딩 최적화나 렌더링 최적화에도 능한 프론트엔드 개발자가 있다면 어느 기업에서나 탐내는 인재가 될 것이다. 

이처럼 프론트엔드 개발자는 다른 개발 직군에 비해 새롭게 각광받고 있는 직군임과 동시에 수요가 늘고 있는 직군임이 분명하다. 
그렇다면 이러한 프론트엔드 개발자가 되려면 어디서부터 어떻게 시작해야 할까? 

내가 알고 있는 지식 그 이상을 습득하기 위해 해외 블로그 및 글 등을 찾아보았다.  
그렇다면 이제부터 본격적으로 2020년 프론트엔드 개발자가 되고 싶다면 알아야 하는 10가지 기술을 나열해 보겠다.

 

1. HTML & CSS 

HTML ( Hyper Text Markip Language )와 CSS ( Cascading Style Sheets )는 웹 코딩의 가장 기본이 되는 기본 골자라고 볼 수 있다. 
이 두 가지가 없으면 웹사이트에서는 심심하고 아무런 꾸밈이 없는 플레인 텍스트 ( plain text ) 밖에 볼 수가 없다. 때문에 프런트엔드 개발자가 되기 위해서는 HTML&CSS를 다루는데 능숙해야 한다. 하지만 앞써 말했듯이 HTML&CSS 는 진입장벽이 낮아 단기간 안에 탄탄한 기본 지식을 쌓을 수 있다. HTML&CSS에 능숙해지면 기본적인 웹사이트 정도는 만들 수 있다. 

 

2. Javascript 

웹사이트에 기능 ( 무언가를 클릭했을 때 무언가가 바뀐다던지.. )을 더해주기 위해서는 Javascript를 배워야 한다. ( ES5 이상을 추천한다 ) 
가령 쇼핑몰 사이트에서 쇼핑 도중 찜하기를 눌러도 웹사이트가 리로딩되지 않는 건 Javascript 덕분이다. 
사실상 HTML&CSS&Javascript 이 세 가지만으로 기본적인 웹 애플리케이션은 만들 수 있다. 
세계적으로 가장 각광받고 있는 언어이기도 하며 인기와 더불어 표준이 빠르게 업데이트되는 언어이기도 하다.

 

 

3. jQuery ( 선택 )

한때 가장 인기 있었던 Javascipt 라이브러리이다. ( Javascript 개발을 빠르게 도와주는 플러그인이나 익스텐션 등의 모음 )
Javascript의 코드를 줄여줌으로 써 간편하면서 빠른 개발을 도와준다. 하지만 새롭게 등장한 수많은 Javascipt 라이브러리와 프레임워크에게 밀려 현재는 그 인기가 많이 식었다. ( github 스타 수 / 개발자 사이트 설문조사에 의하면.. ) 국내에서는 jQuery를 사용하는 기업이 아직 많이 있기 때문에 목표로 하는 기업의 기술 자격요건에 따라 jQuery가 필수 요건 이 될 수도 있다.

 

 

4. React / Vue.js

최근 구직사이트에는 React 나 Vue.js 활용 경험이 자격요건인 프론트엔드 공고가 많이 올라온다 ( 경력이 대부분이다.. 신입은 어디서 경력을 쌓나요?... ). 가볍고 빠른 성능, 쉽고 빠른 개발을 도와준다는 점 때문에 React 나 Vue.js를 Javascript 프레임워크/라이브러리로 채택하여 개발하는 기업이 많아졌기 때문이다. ( 둘은 각자만의 장단점이 있다. 공통점도 많다... ) React 나 Vue.js 는 데이터 모델이나 브라우저나 DOM과 같은 웹 기술에 한정되지 않고 모바일 앱( PWA, React Native ), 웹 애플리케이션, 데스크톱 애플리케이션 ( Electron ) 기술에서도 사용되기 때문에 범용성 또 한 넓다.

 

 

5. CSS 프레임워크 

페이지 레이아웃, 입력창 등의 디자인을 CSS와 Javascript로 만든 프레임워크이다. 진입장벽이 낮을 뿐만 아니라 반응형 웹으로 뚝딱 만들어 주는 혁명적인 프레임워크이다. 대표적으로 Bootstrap, Foundation, Materialize CSS 등이 있다. ( 부트스트랩을 처음 써 봤을 때의 만족감이란 어마어마하다.. ) 대분이 오픈소스이며 사용자가 변경하는 것이 자유롭고 상업적으로 이용이 가능하다. 

 

6. CSS 전처리기 

CSS는 배우기 쉽고 재미있지만 작업이 고도화가 될수록 다루기 힘들어진다. CSS 전처리기는 이러한 CSS의 불편한 점을 해결해주고자 나왔다. 표준 CSS에는 없는 기능인 조건문, 반복문, 연산 등을 이용하여 고도화가 되어도 확장에 용이하고 쉽게 CSS 코딩을 할 수 있도록 해준다. 단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일하여 사용한다. 대표적으로 Less, Sass(SCSS), Stylus 등이 있다.

 

 

7. API와 친해지기 

프론트엔드 개발자는 백엔드 개발자 혹은 오픈소스로부터 제공되는 API를 각 화면에 맞게 호출하여 데이터를 조작하는 일을 한다. 그렇기 때문에 API를 호출하여 처리하는 방법과 HTTP 프로토콜에 대한 이해 그리고 API 문서를 읽고 적용 및 응용할 수 있는 능력이 필수적이다. 또 한 RESTful API에 익숙해지는 것이 좋다. 백엔드 개발자와 프론트엔드 개발자는 원하는 목적의 데이터를 원활히 주고받기 위해 REST와 같은 가이드라인을 사용하고 이러한 가이드라인을 잘 따른 API를 RESTful 한 API 라 한다. ( 엔드포인트만 봐도 어떠한 동작을 하는 API 인지 바로 캐치할 수 있는... ) 

 

8. 개발자 도구 활용 

최근 웹 애플리케이션은 서버와의 잦은 통신, 복잡한 UI 등의 기능들이 담기면서 크고 무거워졌다. 이로 인해 생기는 긴 로딩 시간은 사용자에게 안 좋은 영향을 끼친다. 개발자 도구는 이러한 성능을 측정하고 개선시켜 주는데 도움을 준다. 예를 들어 크롬 개발자 도구의 Performance 패널이 있다. Performance 패널에서는 앞서 살펴본 웹 페이지 로딩 단계를 차트 형태로 살펴볼 수 있다. 웹 페이지가 로드되는 과정을 리코딩하고 단계마다 걸리는 시간을 확인할 수 있다. 로딩 과정에서 최적화가 필요한 부분을 찾을 때 사용한다. 더 나아가 웹 페이지 로딩과 렌더링 최적화를 위해 웹페이지의 로딩과 렌더링 과정을 공부해 보는 것을 추천한다.

 

 

9. 형상관리 툴 / Git 

형상관리 툴은 프로젝트 버전을 관리해주며 개발 도중 장애가 발생하더라도 원하는 시점으로 돌아갈 수 있게 해 준다. 많은 기업들이 Git을 사용하고 있고 구직자의 필수 경험 요소로 거듭나고 있다. 기본적인 Git의 원리 및 명령어 정도는 외워 놓아야 한다. Github 또 한 사용할 줄 안다면 원격 저장소의 개념, 협업 방법 등에 익숙 해 질 수 있다. 

 

10. 협업 능력 / 커뮤니케이션 능력 

프론트엔드 개발자는 백엔드 개발자, 디자이어, 퍼블리셔, 기획자와 같은 다양한 직군과의 소통과 협업을 필요로 한다. 기획자, 디자이너, 퍼블리셔와 소통을 하면서 그들의 기획의도와 디자인을 구현하고 백엔드 개발자와 소통하여 기능을 완성시켜야 한다. 앞단과 뒷단 사이에서 지속적인 소통을 통해 결과물을 만들어 나가야 한다. ( 디자인과 백엔드 개발에 대한 지식이 있다면 훨씬 더 수월하겠죠?.. )