개발자 도리의 프론트엔드의 모든 것

프론트엔드 개발자가 되려면 무슨 기술을 어떻게 얼마나 배워야 할까요?

웹 브라우저에 표시되는 웹 페이지를 만드는 것이 가장 중요한 목적이므로 웹을 구성하는 3요소,

즉 HTML, CSS, 자바스크립트를 필수적으로 배워야 합니다. 또한 코드 관리를 위한 버전 관리 시스템도 필수로 공부해야 합니다.

더 나아가 CSS와 자바스크립트의 더 깊숙한 부분을 파고드는 심화적인 기술과, 협업을 위한 각종 개발 도구, 자바스크립트 기반 프레임워크 등을 공부하여서 다른 사람과 차별성과 전문성을 무기로 삼아, 대체되지 않는 프론트엔드 개발자로 성장하여야 합니다.

이번 시간에는 대략적인 프론트엔드 개발 로드맵을 살펴보며 이해만 하고 넘어가고 자세한 설명은 다음에 하도록 하겠습니다.

오늘은 천천히 로드맵을 따라가며 아, 이런 부분을 공부하는구나를 이해하시고 넘어가시면 좋을 것 같습니다.

그럼 시작하겠습니다.

1. 인터넷과 네트워크

프론트엔드 개발자라면 서버와 클라이언트의 통신 과정에서 적용되는 인터넷과 네트워크에 대한 간단한 기초 지식이 있어야 합니다.

이 지식은 단순히 책 한 권만으로 안 끝날만큼 방대한 분량이기에, 간단히 인터넷의 발전 과정과 DNS, IP주소, 도메인과 같은 네트워크의 기초 개념을 이해하시면 좋습니다.

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

HTML, CSS, 자바스크립트는 웹의 가장 중요한 3요소로, 프론트엔드 개발자가 필수로 거치는 언어입니다. 

평균적으로 HTML과 CSS까지는 많은 사람들이 무난하게 공부하고 넘어가지만, 자바스크립트에서 벽을 느끼고 중간에 포기하는 사람들이 쉽게 접할 수 있습니다. 이 말은 조금은 어렵더라도 자바스크립트를 다룰 줄만 안다면 진정한 프론트엔드 개발자가 되는 과정에서 크게 한 발 앞서나간다고 말할 수 있겠습니다.

3. HTML, CSS, 자바스크립트의 심화 과정

-HTML 전처리기 : HTML이 어느정도 이해가 가고 학습이 끝나셨다면 HTML이라는 언어의 한계와 불편함을 느낄 수 밖에 없습니다.

HTML은 마크업 언어(markup language)이기 때문에 불필요하고 까다로운 작성 규칙이 있고, 반복하거나 유사하게 작성하는 경우가 다반사 입니다. "HTML 전처리기"는 이와 같은 불편함을 줄여주고 조금 더 효율적이고 편리하게 코드를 작성할 수 있도록 도와줍니다.

많은 HTML 전처리기 중에서도 가장 대표적인 함엘, 슬림, 퍼그를 공부하시는 것을 추천드립니다.

4. CSS 전처리기 / 후처리기

HTML을 좀 더 효율적이고 편하게 작성하기 위한 HTML 전처리기가 존재하는 것처럼, CSS에도 전처리기와 후처리기가 존재합니다.

대부분의 직장이나 실무에서는 간단하게 CSS를 사용하기보다는, CSS 전처리기나 후처리기를 사용하는 경우가 많습니다.

개발자 도리는 CSS 전처리기로 SCSS를, 후처리기로는 postCSS를 추천합니다. 

5. CSS 방법론

CSS에 어느정도 감이 잡히셨다면 CSS를 효율적으로 작성하는 데 필요한 여러 가지 방법론을 배우셔야 합니다.

물론 처음부터 방법론에 관심을 가질 필요는 없지만, 한 단계 더 성장하기 위해서 고급 기술과 스택을 쌓는 개발자가 되려면 반드시 거쳐야 하는 단계입니다.

개발자 도리는 CSS 방법론으로 OOCSS, SMACSS, BEM을 추천합니다. 

6.타입스크립트

타입스크립트는 초급에서 중급으로 넘어가는 개발자가 되기 위해서 반드시 익혀두어야 하는 언어 중 하나입니다.

타입스크립트는 자바스크립트를 기반으로 하기 때문에 자바스크립트를 충분히 익혀두셨다면 쉽게 학습이 가능하지만

그렇다고 자바스크립트를 안 배웠다고 타입스크립트를 배울 수 없는 건 아닙니다. 본인에 상황에 맞춰서 루트를 선택하시면 됩니다.

일반적으로 개발자 도리는 자바스크립트를 충분히 감을 잡고 많은 예제를 푼 이후에 타입스크립트를 공부하시는 것을 추천합니다.

7. 개발 도구

프론트엔드 개발을 진행할 때, 활용할 수 있는 개발 도구들이 있습니다. 대표적으로 소스 코드 에디터, 코드 포매터, 린터, 버전 관리 시스템, 패키지 매니저, 모듈 번들러 등이 있습니다. 이러한 도구는 직장이나 실무에서 무조건 활용되므로 언제 학습하냐는 시기의 문제일 뿐

반드시 익히고 넘어가야 합니다.

8. CSS프레임워크와 자바스크립트 프레임워크

CSS 프레임워크 : CSS를 기본으로 하는 많고 많은 프레임워크 중에서, 가장 실무에서 많이 쓰이는 것은 부트스트랩과 테일윈드 CSS 입니다. CSS를 공부하시고 전처리기 / 후처리기까지 하셨다면 이제는 부트스트랩과 테일윈드 CSS 중에서 하나를 골라 학습하시면 되겠습니다.

자바스크립트 프레임워크 : 직장이나 실무에서는 보편적으로 자바스크립트 프레임워크를 사용하기에 필수적으로 인지도가 높은 앵귤러, 리액트, 뷰와 같은 프레임워크를 이해하고 다루실 줄 아셔야 합니다. 셋 중에서 가장 자신과 잘 맞다고 생각하는 언어를 먼저 공부하시는 것을 추천합니다.

9. 네트워크 통신

프론트엔드에서 백엔드와 데이터를 주고받을 때는 HTTP 프로토콜을 사용해 통신합니다.

HTTP 프로토콜만 놓고 본다면 네트워크 개발이 더 맞는 표현이지만, 그래도 백엔드와의 데이터 교환을 위해 최소한의 기본 지식을 알고 있어야 합니다. 최소한의 네트워크 통신에 대한 기본 지식을 학습하는 것을 추천합니다.

10. API(Application Programming Interface)

API, 즉 응용 프로그래밍 인터페이스는 HTTP 프로토콜로 데이터를 교환할 때 사용되는 기술입니다. 

API는 프론트엔드 개발 시 가장 많이 듣게 되는 용어로, 개념을 확실히 알고 있어야지만 나중 가서 실무를 진행할 때 큰 어려움 없이 진행이 가능해집니다. API의 종류, 디자인 패턴, 호출 방법 등을 학습하는 것을 추천합니다.

11. 테스트

웹 어플리케이션을 만드는 과정은 아무리 뛰어난 개발자라도 생각보다 복잡하고 예기치 못한 오류가 발생합니다.

이러한 문제를 최소한으로 줄이기 위해서 필수적으로 테스트 과정을 거치기에 프론트엔드에서 수행할 수 있는 테스트의 종류,

유형, 도구 등을 학습하는 것을 추천합니다.

12. 배포

웹 어플리케이션이 완성되면 다른 사람들에게 보여주고 접근할 수 있도록 인터넷에 공개, 즉 배포하는 과정이 필요합니다.

배포는 프론트엔드 개발의 끝이자 새로운 시작입니다.

배포 후 웹 어플리케이션이 공개되더라도 해야 할 일은 남아있기 때문입니다.

배포까지 공부를 마쳤다면 프론트엔드 개발자가 되기 위해서 실무에 필요한 기본적인 지식은 다 쌓았다고 할 수 있습니다.

이번에는 프론트엔드 개발자가 되기 위해서 배워야 할 기술들을 순서대로 나열하며 훑어봤습니다.

이번 포스팅을 통해 여러분이 앞으로 알아가야 할 프론트엔드의 기본적인 개념이 머릿속에 정리되었기를 바라겠습니다.

읽어주셔서 감사합니다.

안녕하세요, 개발자 도리입니다.

이번 글은 웹 개발자 중에서도 프론트엔드 개발자가 되고 싶거나, 관심 있어 하시는 분들을 위해서,

프론트엔드 개발자가 현직에서 하는 일이 무엇이 있는지 알려드리고, 크게 중요한 7가지 부분들을 나누어 설명해 드리겠습니다.

웹 개발은 우선 프런트엔드(Front-end) 개발과 백엔드(back-end) 개발로 나누어집니다.

그렇다면 프론트엔드 개발이란 무엇일까요?

프론트엔드 개발은 사용자가 웹 어플리케이션을 사용할 수 있도록 눈에 보이는 화면과 기능을 개발하는 것을 의미합니다.

그와 반대로 백엔드 개발도 있는데요,

이번 시간에는 프론트엔드 개발자가 하는 일을 집중적으로 다루어보기 위해서 작성한 글이니 백엔드 개발자가 하는 일은 나중에 다루어 보도록 하겠습니다.

프론트엔드 개발자가 하는 일은 크게 7가지로 나누어 구분할 수 있습니다.

1. UI/UX 개발

프런트엔드 개발자는 기본적으로 UI(사용자 인터페이스)와 UX(사용자가 웹사이트를 이용하면서 느끼고 생각하는 총체적 경험)를 만드는 역할을 합니다.

초장기에는 단순히 문서만 표시하는 정적인 페이지를 만들었기에 UI만 신경 써도 괜찮았습니다. 하지만 요즘 시대에는 사용자와의 상호작용이 무엇보다 중요해졌습니다. 현재 프론트엔드 개발자를 준비 중이시라면 UI는 물론이고, UX까지 고려한 웹 페이지를 만들 줄 아셔야 합니다. 

2. 재사용이 가능한 UI 개발

프론트엔드 개발자는 앵귤러, 리액트, 뷰 등의 자바스크립트 프레임워크(JavaScript framework)를 가지고 재사용 할 수 있는 UI를 개발합니다. 재사용이 가능한 UI를 만들어 놓는다면 향후 팀원들과의 프로젝트를 진행하면서 UI의 일관성을 유지하며, 프로젝트 전반의 생산성 향상에도 도움이 되기 때문입니다.

3. 애니메이션 구현

프론트엔드 개발자는 CSS 또는 자바스크립트를 활용해 다양한 효과가 포함된 애니메이션을 만들고 유지보수를 진행합니다.

이러한 애니메이션 효과는 웹 사이트를 방문하는 사용자의 흥미를 유발하고 사용자의 경험을 긍정적으로 바꿀 수 있으며 다른 웹 사이트와의 차별화를 줄 수 있습니다.

4. 웹 사이트 성능 최적화

웹 사이트 성능 최적화란 "사용자가 웹 사이트를 더 원활하고 쾌적하게 이용할 수 있도록 반응 속도, 로딩 속도, 안정성 등의 요소를 개선하여 사용자 경험을 향상시키는 것을 말합니다. 프론트엔드 개발자는 사용자가 웹 사이트에서 좋은 경험을 하도록 웹 브라우저의 개발자 도구나, 웹 사이트의 성능을 측정하는 테스트 도구 등을 이용하여 웹 사이트의 성능을 최적화시킵니다. 웹 사이트 성능 최적화에 사용되는 예시로는 캐싱, 압축, 이미지 최적화 등이 있습니다.

5. 테스트 코드 작성

프론트엔드 개발자는 자신이 작성한 코드의 품질을 유지하기 위해 테스트를 위한 코드를 작성합니다. 

테스트 코드는 웹 사이트의 올바른 동작 여부를 테스트하기 위하여 작성하며, 테스트 코드를 오류 없이 깔끔하게 정상적으로 돌아가는 코드를 만들기만 한다면 다양한 브라우저와 기기에서 안정적인 서비스를 제공할 수 있습니다.

6. 디버깅

프론트엔드 개발자는 코드에서 일어나는 다양한 문제들을 해결하기 위해 문제가 발생하는 코드를 추적하는 디버깅, 즉 소스 코드의 오류 또는 버그 등을 찾아 수정하는 것을 수행합니다. 디버깅을 잘하는 개발자들은 다양한 상황에서 발생하는 오류나 버그 등에 대해서 침착하게 대처하는 능력이 뛰어나 안정적인 서비스를 제공할 수 있습니다.

7. 다른 팀원 개발자들과의 협업

프론트엔드 개발자는 프로젝트를 빠르고 정확하게 끝내기 위해서 다른 개발자와 협업하는 것이 보편적입니다. 예를 들어 프로젝트와 관련된 코드, 문서, 데이터 등의 자료를 공유하여 개발의 속도를 높이고, 또한 협업을 위한 버전 관리 도구 등인, 깃과 SVN 등을 활용하여 전문적으로 소스 코드를 관리, 유지 보수하여, 체계적으로 업무를 할당하기도 합니다. 프론트엔드 개발자가 되면 메신저, 화상 회의, 전화 등을 통해 업무와 관련된 소통을 신속하고 명확하게 할 수 있는 능력을 필요로 합니다.

이렇게 프론트엔드 개발자가 되면 대략적으로 무슨 일을 수행하고 어떤 능력이 필요한지 대충 감이 오실 텐데요,

추가적으로 더 알아가기 좋은 키워드들을 설명해 드리고 마무리하도록 하겠습니다.

웹 어플리케이션(web application) : 웹 브라우저에서 동작하며, 사용자와 "상호작용"이 가능한 소프트웨어

웹 개발(web development) : 웹 어플리케이션을 만드는 일

백엔드 개발(back-end development) : 서버에서 동작하는 실제 웹 어플리케이션을 개발, 즉 웹 어플리케이션에서 다루는 데이터를 관리하고 처리하는 부분을 개발하는 일

여기까지 프론트엔드 개발자가 되면 실제로 하는 일들에 대해서 알아보았습니다.

다음시간에는 프론트엔드 개발자가 되기 위해서 어떤 방향성을 가지고 어떤 것부터 순서대로 공부하고 어떤 기술을 배워야 하는지에 대하여

프론트엔드 개발 로드맵을 소개하는 글을 포스팅 하겠습니다.

프론트엔드 개발에 관심을 가지신 여러분들이 성공적으로 실력있는 프론트엔드 개발자가 되기를 응원하면서,

이번 프론트엔드 개발자가 되면 하는 일에 대한 주제가 도움이 되셨으면 좋겠습니다.

개발자 도리였습니다. 읽어주셔서 감사합니다.