프론트엔드 개발자에게 필요한 역량은? - 기술측면 (1)

프론트엔드가 되기 위해서는 어떤 기술적 역량이 필요할까? 아래는 상세하게 잘 나온 유명한 로드맵이다.

https://github.com/Han-Kyeol/developer-roadmap-kr-?tab=readme-ov-file

GitHub - Han-Kyeol/developer-roadmap-kr-: 2020년, 웹개발자가 되기 위한 로드맵 https://roadmap.sh

 

 

 

1. HTML / CSS

  프론트엔드는 결국 화면을 구현하는 직무이기 때문에, 화면을 만들기 위해 필요한 HTML과 CSS에서 시작한다. 이때 HTML에서는 Semantic에 대한 이해와 SEO 개념, 그리고 웹 표준과 웹 접근성에 대한 개념도 익혀야 한다. 이를 통해 웹페이지의 뼈대를 구성하게되면, 이후 CSS를 통해 스타일을 설정한다. 나중에는 CSS 관련 라이브러리를 사용하게 되지만, 결국은 바탕이 CSS이기 때문에 잘 알아야한다. 다양한 스타일을 만들어보고, 추가로 반응형 디자인을 구현하는 방법도 익혀야 한다. 여기까지는 프론트엔드라기보다는 퍼블리셔에 해당한다. HTML도 프로그래밍 언어가 아니라 마크업 언어이다.

 

2. JavaScript

  자바스크립트는 프론트엔드의 뿌리가 되는 프로그래밍 언어이다. 이후의 React.js나 Vue.js도 다 자바스크립트 기반이다. Python 기반의 Django도 있지만, 프론트엔드의 근본은 자바스크립트이다. 브라우저의 다양한 기능을 가능하게 하는 자바스크립트를 사용하기 위해서는 자바스크립트의 특징과 기본 원리들을 잘 알고있어야 한다. 이 기본기가 잘 다져있을수록 이후에 라이브러리나 프레임워크를 사용할 때 도움이 많이 된다. 기본 원리와 DOM 조작, 이벤트, 데이터 통신 등을 능숙하게 다룰 수 있어야 한다.

 

3. TypeScript

  동적 타입 언어인 JavaScript를 보안하기 위해 정적 타입을 추가해 컴파일 단계에서 오류를 사전에 발견할 수 있어, 런타임 에러를 줄이고 안정적인 코드를 작성할 수 있게 해준다. 요즘 채용 공고를 보면 TypeScript는 필수라고 봐도 무방해보인다. 

 

4. 자바스크립트 프레임워크 및 라이브러리

  나는 React.js를 위주로 학습했다. 하지만 이 외에도 Vue.js, Angular도 있고 Svelte도 있다. 각각 장단점이 있고 특징이 뚜렷해서 차이점을 명확히 알고 선택하는 것이 좋다. 기업마다, 서비스마다 사용하는 기술이 다르기때문에 빠르게 익히고 적용할 수 있는 능력도 필요하다. 하지만 애매하게 여러개를 써보는 것보다 하나의 원리를 깊게 익힌 후에 새로운 기술들로 지식을 넓혀보는 것도 좋은 것 같다. 

  더불어 서버 사이드 렌더링(SSR)에 대한 관심이 높아지면서, 이를 기본으로 지원하는 Next.js도 많이 요구하고있다. 좋은 점은, React와 완벽히 호환되기 때문에, 기존의 React 프로젝트를 Next.js로 전환하기 편하다.

 

5. 상태 관리 라이브러리

  상태 관리는 애플리케이션에서 동적 데이터를 추적하고 업데이트하는 과정을 말한다. 사용자 입력, 서버 응답, 타이머 등 다양한 요인에 의해 변경될 수 있고, 이런 변경 사항을 효과적으로 관리하고 UI에 반영하기 위해서 상태 관리 라이브러리가 필요하다. React의 내장 기능인 ContextAPI를 사용하기도 하지만, 실제 서비스로 갈수록 관리할 상태가 많아지기 때문에 적합하지 않다. 

  대표적으로 Redux, Recoil, Zustand, React-Query가 있고, MobX, Jotai도 있다. 나는 Redux에서도 Redux-tolkit으로 사용하는 편이지만, 다른 라이브러리도 사용해보고싶다.

 

6. 스타일 라이브러리

  SCSS, SASS도 있고, Tailwind CSS도 있다. 하지만 점차 CSS-in-JS 라이브러리를 많이 사용하는 것 같다. 대표적으로 Styled-Components, Emotion이 있다. 특히 React는 컴포넌트 기반이라 CSS-in-JS를 사용하면 컴포넌트와 함께 정의해서 스타일과 로직을 한 곳에서 사용해 재사용성을 높일 수 있고 유지보수하기 좋다. 그리고 JavaScript 변수를 사용해서 동적으로 스타일을 적용할 수 있기 때문에 더 다양하게 스타일을 적용하기 편하다.

 

7. 빌드 & 번들링 도구

  대표적으로 Webpack, Vite, Babel이 있고, 소스 코드를 효율적으로 컴파일하고 최적화해준다. Webpack은 여러 파일과 모듈을 하나의 번들로 결합하고, 코드 스플리팅과 트리 쉐이킹을 통해 성능을 최적화한다. Babel은 최신 JavaScript 문법을 구 버전 브라우저에서도 실행 가능하게 변환해준다. Vite는 빠른 개발 서버와 모듈 번들링을 제공하여 개발 효율성을 높여준다.

8. 테스트 도구

  테스트 라이브러리를 사용하면 버그를 사전에 발견하고 수정해서 서비스의 품질을 높일 수 있다. 대표적으로 Jest와 Mocha, Cypress 등이 있고, React에서는 React Testing Library를 사용하기도 한다. 요즘은 특히 Jest를 많이 사용하는 것으로 보인다.

---

 

여기까지 거의 필수적인 프론트엔드 "기술"에 대해 정리해보았다. 다음 글에서는 도움이 되는 추가적인 기술과 CS 관련 지식에 대해 정리해볼것이다.