Front-end 로드맵 정리 & 목표 설정 해보기

개발자로 홀로 서기

SSAFY 9기 졸업을 앞두고, 앞으로 어떤 개발자가 될 것인지 목표를 제대로 설정하기 위해 Front-End 로드맵을 번역해보고, 나의 목표를 함께 설정해보기로 했다.

Developer Roadmaps(Roadmap.sh)

Developer Roadmaps은 Kamran Ahmed가 만든 사이트(Roadmap.sh)에서 확인할 수 있는 개발자 로드맵이다.

Kamran Ahmed의 github

이곳에서는 직무별 다양한 로드맵을 확인할 수 있는데, 나는 FE 로드맵을 번역해보려했는데, 이미 잘 번역된 버전이 있었다..!

developer-roadmap-kr

FE Developer Roadmap

• 공통 로드맵
  

• FE 개발 로드맵
  

---

상세히 살펴보기

1. 인터넷 기본 지식 & HTML/CSS/JS

• 1년 전만해도 개발 지식이 거의 전무했지만, SSAFY의 1학기 수업을 통해 HTML/CSS/JS와 인터넷 기본 CS 지식은 익힌 상태.

• HTML의 형태와 접근성, SEO는 기존 전공에서도 어느 정도 익혔었다!

• CSS의 경우, Grid와 Flex Box를 좀 더 익혀야겠다.

• JS의 경우, 기본기가 정말 중요하다는 것을 프로젝트를 통해 익혔다. (이론으로는 분명히 익힌 내용들임에도 프로젝트에 적용하면서 간과해 에러가 발생하는 경우도 있으니..!)
  -✨TODO: 호이스팅, 비동기처리 등에 대해서 다시 한 번 정리 & 공부하기

• git 역시 활용방법을 배우고 매일 잔디를 깔고 있다🌱

---

2. 패키지 관리자

• 패키지 관리자와 빌트툴의 경우, 무엇을 사용해도 상관 없다고 쓰여있고 나도 두 가지를 모두 사용해보았다.
• 무엇이 낫다고 하기 보다는 node_modules 여부나 초기 속도, 혹은 조합(vite+yarn 의 빠른 빌드 속도와 같이..)에 따라 프로젝트에 맞게 사용하면 될 것 같다.
• 이외에도 HTTPS/CORS 에러와 같은 지식도 다시 한 번 정리해보면 좋을 것 같다.

---

3. 프레임워크

• 프론트엔드 개발을 훨씬 쉽게 만들어주는 프레임워크.
• Vue와 React를 사용해왔으나, 거의 리액트를 주로 쓰는 수준이다. Vue를 활용해서 기존 프로젝트를 다시 만들어보고 싶다.
• CSS도 styledComponent와 module CSS 등을 활용할 수 있는 수준!
• 다만 JEST, react-testing-library, Cypress, Enzyme은 활용해본적이 없다..
  ✨TODO:개념부터 제대로 알아보기

---

3.PWA와 어플리케이션

• 앱 처럼 사용할 수 있는 웹 서비스 인 PWA는 간단하게 개념을 공부해보긴 했지만 직접 만저본 적은 없는 것 같다.
• TypeScript는 세 개의 프로젝트에서 습관적으로 사용해왔지만, 무척 어려운 개념이기도 하다... 자주 쓰는 개념& 팀원들이 사용했던 문법 중 활용도가 높아보이는 코드들은 제대로 정리해두어야겠다.
• 마지막 프로젝트에서 활용해보았던 RN도 필수 추천 항목으로 들어가 있다!
• 정적 사이트 생성기라고 작성되어있는 부분에서 Next.js는 계속해서 공부하고 포스팅도 자주 써야겠다.

---

2024년에는 어떤 개발자로 성장할 수 있을까?

• 2022년 다니던 회사를 그만두고 SSAFY에 입과하기 전까지는 위의 표를 보고 머리만 아팠을 텐데, 이제는 대부분의 기술에 대한 개념을 알고 있고, 심지어 프로젝트 경험까지 생겼다.
• 이만큼 성장한 내가 너무 대견하고, 2024년에는 더욱 더 성장한 내가 되었으면 좋겠다..!

2024년의 목표는👩‍🔧

1. 1일 1포스팅
2. 포트폴리오로 나만의 컴포넌트 에셋/라이브러리 만들어보기
3. 로드맵에서 잘 몰랐던 개념과 기술 다시 사용할 수 있는 프로젝트 해보기
4. 취뽀하기!