프런트엔드 개발자가 되려면 어떤 것부터 공부해야 할까

최근에 정보통신업계에 대한 사람들의 이해도와 관심도가 높아지면서, 그에 따른 상승효과로 예전에는 주목받지 못했던 '프로그래밍 개발자'라는 직업에 많은 사람들의 관심이 쏟아지고 있는 상황입니다.

특히 "프런트엔드 개발자"는 접근성이 낮고, 러닝 커브가 낮은 편에 속해서 많은 사람이 관심 가지고 있는 직군이라고 생각하는데요. 실제로 제가 직접 가르치고 있는 학생들의 가장 높은 비율을 차지하는 질문 중 하나가 바로 "프런트엔드 개발자가 되려면 어떤 것부터 공부해야 하나요?"입니다.

한 10년 전만 해도 "그냥 HTML, CSS, 자바스크립트만 열심히 배우렴^^"이라고 친절하게 조언해 주고 끝이었겠지만, 글쎄요.. 2023년의 끝을 지나고 있는 지금 시점에서도 정말 저러한 대답이 좋은 대답일까요?

저는 적어도 저러한 대답이 지금도 좋다고 생각하지 않습니다. 왜냐하면, 과거에 비해서 프런트엔드는 공부해야 할 것들이 많이 늘었기 때문입니다. 왜냐구요? 하루가 다르게 새로운 기술 및 이론, 프레임워크가 등장하고 있거든요.

그럼, 대략 프런트엔드는 어떤 것들을 배워야 하는 걸까요?

1.네트워크와 인터넷

프런트엔드를 공부할 때, 단순하게 언어적인 관점에서 특정 언어를 배우기만 하면 된다고 생각할 수 있는데 절대 아닙니다. 프런트엔드를 아주 단순하게 말하자면, 결국 웹 브라우저에 보이는 사용자 인터페이스를 개발하는 것이라고 말할 수 있습니다.

그런데 도대체 웹 브라우저는 어떤 원리를 통해서 사용자 인터페이스를 사용자에게 보여주는 것일까요? 그 물음에 대한 해답은 바로 네트워크와 인터넷에 있습니다. 네트워크와 인터넷을 공부하면 이러한 인터페이스가 어떻게 전송되고 사용자에게 제공되는지 알 수 있습니다.

2.HTML, CSS, 자바스크립트

프런트엔드를 구성하는 기술의 중심은 HTML, CSS, 자바스크립트입니다. 프런트엔드 세계는 사실 멀리서 바라보면 이 세 가지 언어를 중심으로 움직입니다. 우리가 배우고 익히는 모든 개념은 이 세 언어를 효율적으로 사용하기 위한 방법에 불과합니다. 그러니 얼마나 중요한 언어인지 더 이상 말 안 해도 충분하겠죠?

3.HTML, CSS, 자바스크립트 심화 기술

되게 뜻밖에도, 웹 브라우저는 HTML과, CSS, 자바스크립트만 이해하고 실행할 수 있습니다. 하지만, 대부분은 pug, scss, typescript 같은 것도 웹 브라우저가 실행할 수 있다고 생각하는 사람이 많습니다.

이러한 언어들은 결국 따지고 보면 웹 브라우저가 HTML, CSS, 자바스크립트만 실행할 수 있기 때문에 파생한 언어에 불과합니다. 그렇지만, 현대의 프런트엔드 개발에서는 빠질 수 없는 중요한 위치를 차지하는 언어임에는 부정할 수 없는 사실입니다.

4.프런트엔드 개발 도구

프런트엔드에서 빼놓을 수 없는 개발 도구들이 있습니다. 소스 코드 에디터, 버전 관리 시스템, 코드 포맷 터, 린터, 패키지 매니저, 모듈 번들러가 그런 것들입니다.

위키 백과에서는 도구를 다음과 같이 정의합니다.

"도구는 어떤 일을 할 때 이용하는 소규모 장치를 말한다. 도구를 활용함으로써 사람이 일을 할 때 노력을 덜 들이고 편하게 할 수 있다. 예를 들면 음식을 만들 때 사용하는 칼이나 식사할 때 사용하는 수저가 그 예가 되겠다."

프런트엔드에서의 개발 도구도 마찬가지입니다. 개발자는 적절한 도구를 사용함으로써 개발을 해 나가는 과정에서 노력을 덜 들이고 편하게 개발을 할 수 있습니다. 그러니 프런트엔드 개발 도구를 익히고 사용하는 것에도 소홀히 하면 안 됩니다.

5.자바스크립트/CSS 프레임워크

매번 프로젝트를 HTML, CSS, 자바스크립트로 작성하려고 하면 매번 비슷한 기능을 하는 비슷한 코드를 반복적으로 작성해야 합니다. 그러한 상황속에서 개발자들은 코드를 좀 더 효율적으로 작성하고, 편하게 작성하는 법을 찾게 되는데 그 방법의 일환으로 등장한 것이 프레임워크라고 불리는 것들입니다.

프런트엔드 개발에서 사용되는 대표적인 프레임워크에는 자바스크립트 프레임워크와 CSS 프레임워크가 있습니다. (HTML 프레임워크는 없습니다). 배워두면 여러 모로 유용합니다.

6.네트워크 통신

단순히 정적인 프런트엔드 개발을 하는 수준에서 벗어나면, 그 다음 레벨로 프런트엔드 개발자가 가장 먼저 만나게 되는 학습 개념에는 네트워크 통신이 있습니다. 네트워크 통신은 프런트엔드가 어떻게 백엔드와 통신을 할 수 있는지를 이해할 수 있는 중요한 기초 지식이 됩니다.

7.API

프런트엔드 개발을 하다 보면 API라는 용어를 참 많이 듣습니다. API는 간단하게 프런트엔드가 백엔드와 어떻게 소통하면 되는지 정의한 규약입니다. 이런 규약도 트렌드가 있습니다. 과거에는 단순히 SOAP 형식으로 단순하게 주고받던 것에서 이제는 REST, Graph QL 등 다양합니다.

8.테스트

프런트엔드에서 테스트(Test)는 중요합니다. 물론 프런트엔드 분야가 아니라도 개발 분야에서 테스트는 항상 중요합니다. 왜냐하면 테스트는 개발 과정에서 전략적으로 코드 확인 및 검증 단계를 포함하는 과정이기 때문입니다.

프런트엔드에서는 테스트를 크게 "자동화 테스트"와 "수동 테스트"로 구분할 수 있습니다. 이러한 구분 속에서 세부적으로 파고 들어가면 더 많은 내용이 있습니다.

9.배포

개발자가 열심히 개발한 결과물을 로컬(Local)에서만 실행하게 하는 목적이 아니라면, 결과물을 세상에 공개하는 방법도 프런트엔드에서는 중요합니다. 그러한 방법을 프런트엔드에서는 "배포"라고 합니다. 배포에 대한 개념과 종류, 과정 등을 이해하면, 내가 만든 결과물을 어떻게 세상에 내놓아야 할지 넓은 안목이 생기게 됩니다.

결론

위에서 기술한 모든 내용은 제가 <<아는 만큼 보이는 프런트엔드 로드맵>>을 집필하면서 작성했던 내용을 필자의 생각대로 기술한 내용입니다.

빠르게 변하는 IT 기술 속에서 공부 방향을 잡기는 어렵습니다. 방대한 인터넷 자료를 찾고 그중에서 필요한 내용을 선별 및 검증하는 것 또한 쉽지 않습니다.

만약, 프런트엔드에 대한 맥락을 빠르게 살펴볼 방법이 있다면 어떨까요? <<아는 만큼 보이는 프런트엔드 로드맵>>은 바로 그러한 방법을 제시할 수 있는 책입니다.

상기에 기술된 것들에 대한 좀 더 자세한 내용은 책에서 자세히 살펴보실 수 있습니다.

🚀 교보문고: http://gilbut.co/c/23091331Eo

🚀 YES24: http://gilbut.co/c/23098124bF

🚀 알라딘: http://gilbut.co/c/23098896Pw

부디, 이 책이 프런트엔드 개발자로서의 여정을 시작하는 모든 분들에게 도움이 되는 책이 되길 진심으로 바랍니다.