프론트엔드 개발자로 일하기 시작한 지도 벌써 9개월이 되었다. 이제 어느 정도 프로젝트 진행이나 개발 업무에 대한 부분은 익숙해졌으나 문제는 단순 반복되는 업무 속에서 점차 생각하지 않고 개발하게 된다는 점이었다. 따라서 이를 극복하기 위한 'FE 한 단계 도약하기' 프로젝트를 진행해 보려 한다. 일단 첫 번째로 현재 현업에서 최소한으로 요구하는 개발 스택과 우대사항들을 파악하고 이를 맞추기 위해 필요한 기준을 세워보려 한다. 다음으로 이러한 기준을 바탕으로 1년 정도 어떻게 공부해 나갈 것인지 계획을 세우고 결과물을 만들어 나갈 계획이다.
프론트엔드 요구스펙 현황
현재 현업에서 프론트엔드 개발자에게 요구하는 대략적인 스펙은 어떠할까? 주관적으로 선정한 5개 스타트업들의 프론트엔드 관련 정보들을 살펴보았다.
- 토스 프론트엔드 챕터의 모든 것
- 오늘의집 프론트엔드 채용공고
- 당근마켓 프론트엔드 개발자(프로덕트) 채용공고
- 배민 상품시스템팀 프론트엔드 개발자 채용공고
- 직방 호갱노노 프론트엔드 Jr.개발자 채용공고
일단 위 5가지 채용공고 및 직군 정보를 바탕으로 러프한 워드클라우드를 만들어 보면 가장 많이 언급되는 스택은 역시 다음과 같았다.
- React
역시나 가장 많이 언급되고 있으므로 기본기와 같은 느낌이다 - TypeScript
리액트와 더불어 가장 많이 사용되므로 기본적인 내용들은 모두 알아두면 좋을 것 같다 - Yarn
모노레포와 함께 Yarn berry가 많이 언급되는 것을 볼 수 있었다 - CSS
역시 프론트엔드에선 기본적으로 많이 언급된다 - Webpack
패키지 제작 및 배포에 대한 요구사항도 많았다 - Next.js
일정 시점 이후에는 거의 사용하는 것 같다
스택 이외에 특이한 점은 다음에 대한 언급이 많았다는 점이다.
- 라이브러리
라이브러리 의존도가 매우 높다는 뜻으로 해석해 볼 수 있을까? - 광고
비즈니스적인 관점에선 프론트 영역의 광고가 매우 중요한 것일까? - 테스트 및 CI
마찬가지로 자주 언급되고 있다 - 모노레포
기술 블로그 등에서 최근 많이 다루고 있다
프론트엔드 개발자에게 요구하는 최소한의 조건들
이제 대략적인 분위기는 파악하였으니 구체적으로 나름 잘나간다는 회사들이 공통으로 제시하는 최소한의 요구사항부터 정리해보았다.
- N년 이상의 웹 프론트엔드 개발 경력 (난이도 하 ⭐)
보통 3년으로 다행히 재직 중이라 퇴사만 하지 않는다면 충족 예정 - HTML, CSS, JavaScript 생태계에 익숙하신 분, 브라우저 동작 원리에 대한 이해 (난이도 중 ⭐⭐⭐)
요즘은 보통 언급조차 되지 않는 경우도 흔하지만 실제로 깊이 파보면 끝도 없다 - React(혹은 타 SPA 프레임워크)에 대한 기본 지식 혹은 개발 경험이 있으신 분 (난이도 상 ⭐⭐⭐⭐)
React 혹은 SPA 프레임워크는 기본적으로 언급되지만 과연 제대로 이해하고 사용하고 있을까? 역시 위와 더불어 깊이 들어가면 꽤 어려운 것으로 알고 있다 - TypeScript 사용 경험이 있으신 분 (난이도 중 ⭐⭐⭐)
최근 많이 사용되는 TS는 이제 우대사항에서 요구사항으로 이동하고 있다. 업무에서 이미 사용 중이라 일단은 대충 알지만 제대로 사용하려면 추가적인 공부가 필요하다. 특히 바닐라 JS와의 차이점이나 정적 타입 분석에 대한 심도깊은 질문이 들어온다면... 대답할 수 있을만큼 이해도를 높여야한다. - UI/UX에 대해 높은 가치를 두고 개발할 수 있으신 분 (난이도 하 ⭐)
디자인을 전공했기 때문에 기본적으로 탑재되어 있다고 나름 자신하지만 그래도 기본적인 사례들은 정리하자 - 문제해결 능력이 있으신 분 (난이도 하 ⭐)
사실 문제해결 능력을 실제 업무를 진행하기 전에 보여줄 방법은 서류나 코테다. 일단 코테는 따로 준비해야 하니 논외로 하고 이력서나 포폴에 자신의 프로젝트를 진행하면서 경험한 내용을 잘 정리한다면 나중에 면접에서도 잘 설명할 수 있지 않을까? - 컴퓨터공학 전공 혹은 그에 준하는 전공 및 지식을 보유하신 분 (난이도 상 ⭐⭐⭐⭐)
보통 이런 조건이 있으면 비전공자인 나는 지원을 고민한다. 그래도 꼭 지원해보고 싶은 공고라면 전공자에 비하면 CS 지식이 부족한것이 사실이니 기본적인 개념들은 정리한 후 면접에 들어가려한다
체크리스트를 정리하면 다음과 같다.
- N년 이상의 웹 프론트엔드 개발 경력
- HTML, CSS, JavaScript 생태계에 대한 이해
- React(혹은 타 SPA 프레임워크) 사용 경험
- TypeScript 및 정적 타이핑 툴 사용 경험
- UI/UX에 대한 이해
- CS 전공 및 그에 준하는 지식 보유
프론트엔드 개발자에게 요구하는 있으면 좋은 스펙들
위의 기본기를 익혔다면 추가로 겸비하면 좋은 조건들은 무엇일까?
- Next.js 등 SSR 경험이 있는 분
- Redux(Mobx) 등의 상태관리 툴 사용 경험이 있는 분
- React Query 등과 같은 SWR 사용 경험이 있으신 분
- React Native 경험이 있는 분
- Webpack, ESBuild 등 모듈 번들러에 대한 이해가 깊으신 분
- Relay, GraphQL 사용 경험이 있으신 분
- 오픈소스 컨트리뷰트 경험이 있는 분
- 테스트(E2E, unit testing) 및 CI/CD 경험이 있는 분
- 성능 최적화 경험이 있는 분
준비 계획
그렇다면 이제 위 내용을 바탕으로 1년간 경력 프론트엔드 엔지니어로 한 단계 도약하기 위해서 어떻게 준비해야 할지 계획을 세워보자.
- HTML, CSS, JavaScript 기본기 다지기
몰랐던 부분은 없는지, 알고 있는 게 확실한지, 최근 변한 내용은 없는지 다시 한번 확인하면서 빈틈을 메꾸는 식으로 1달 정도 진행하자. - React 정복하기
React를 이용해서 돈을 벌지만 과연 모든 것을 알고 있다고 말할 수 있을까? 자주 사용하는 만큼 그 끝은 어딘지 파고들어 보기로 한다. 2달 찐하게 가보자. - TypeScript 이해하기
TS는 겸손하게 이해하기로 일단 정했다. 사실 TS 관련 책도 구매했지만 반도 이해하지 못했었다. 그러나 이제 제대로 사용할 때가 왔다. 1달 동안 공부해보자. - CS 관련 지식 쌓기
이 부분은 사실 다른 공부와 다르게 상시로 가야 할 것 같다. 너무나 공부할 범위가 넓기 때문에 일단은 지금까지 쌓아온 패턴 관련 자료나 클린코드, 미디움의 글과 리팩토링 카탈로그를 하루에 30분씩 읽어보기로 하였다. - 토이 프로젝트 진행하기
지금까지 공부했던 스택을 바탕으로 소규모 프로젝트를 3개월간 진행해 보자. 프로젝트 레포에서 테스팅과 CI/CD 관련 경험도 쌓아보려 한다. - 실제 패키지 배포하기
제작한 결과물을 배포해 보고 성능 개선을 진행해 보자.
방대한 계획이지만 시니어 프론트엔드 개발자가 되기 위한 밑바탕이라고 생각하고 열심히 준비해 보려 한다.
코드를 디자인하다