Skip to content

Instantly share code, notes, and snippets.

@pocojang
Last active November 22, 2024 10:05
Show Gist options
  • Save pocojang/af4211355f72ea6f3fc306fe4580566f to your computer and use it in GitHub Desktop.
Save pocojang/af4211355f72ea6f3fc306fe4580566f to your computer and use it in GitHub Desktop.
2016년에 FE를 배우는 기분, 2023년에 FE를 배우는 기분

시작하며

요즘 따라 과거 유행했던 2016년에 자바스크립트를 배우는 기분이라는 글이 떠오른다.
그때는 꼬꼬마 신입 개발자였고 어차피 글을 봐도 아무런 내용도 이해할 수 없었고 오히여 외계어에 가깝게 보였었는데 요즘은 얼추 아.. 이런 시절이 있었구나 새삼 많은 생각이 든다.

현재 2023년이 된 지금 프론트엔드 개발자를 꿈꾸는 어린 학생들도 신입 개발자들도 정말 많아졌다.
그들과 비교하면 난 먼저 시작한게 전부인데 조금은 더 쉽게 시작한게 아닐까 항상 반성하게 된다. 이 글로 그간 느꼈던 시대의 변화를 작성하고 한번 정리해보고자 한다.

연대 별 타임라인을 목차로 이 글을 작성했으며 기술 수준이나 시기의 어긋남이 있을 수는 있습니다.

2016

Screenshot 2023-05-22 at 12 10 02 AM

2016

  • 모바일 시장이 걷잡을 수 없이 커져가며..
    • 프론트엔드 전문 채용 공고가 스멀스멀 나타나기 시작함
  • Hoxy.. 나 프론트엔드 개발자냐?
    • 퍼블리셔 vs 프론트엔드 개발자 떡밥 시작
    • Bootstrap + jQuery 만 있다면 나도 프론트엔드 개발자
  • 인터넷 익스플로러 8~11 사용자가 여전히 많아
    • Spring + JSP + jQuery 조합 여전히 초강세
  • 프론트엔드 프레임워크 대장은 AngularJS
    • React는.. 미미한 수준
    • 하지만 React 전도사 Velopert님의 등장
  • NPM은 도대체 뭘까... CDN 쓰고싶다..
  • 해외에서는 Dan Abramov의 대활약 시작
    • Redux
    • Hot Reloading
    • Time Travel

2017

Screenshot 2023-05-22 at 12 12 31 AM

2017

  • AngularJS => Angular 넘어가기 학습 열풍
  • 퍼블리셔의 존재에 대한 이야기 난무
  • 하지만 대부분 TypeScript 거부
    • 학습할 수 있는 자료 자체가 없음
    • 갑자기 늘어나는 러닝커브
  • React 사용자와 사용 사례가 엄청나게 늘어남
  • CRA v1.0.0 정식 출시
    • Velopert님 강의 열풍
    • 네이버 등 대기업 도입 가이드
    • Redux 배우기 열풍
  • 하지만 대부분 Redux 조차 잘 못 다룸
    • Presentational & Container Components 대세로 자리매김
    • jQuery 걷어내기 유행
  • 하위 브라우저 호환 지옥

2018

Screenshot 2023-05-22 at 12 14 54 AM

2018

  • Angular vs React vs Vue 무한 논쟁
  • React를 사용하거나 낮은 러닝커브의 Vue로 입문하자는 이야기가 자주 나옴
  • 여전히 TypeScript에 대한 거부감이 심함
  • Webpack, Babel 등 주변 도구 학습에 엄청난 고통을 느껴감..
  • React + Redux는 이미 표준 사례에 가까워짐
    • HOC, componentDidUpdate(), SFC, PureComponent 등 React 사용 방법이 점점 발전함
  • MobX 등장으로 Redux vs MobX 논쟁이 많아짐
  • 기술 역량이 괜찮은 경우 Redux Saga 를 사용하는 사례가 점점 늘어남
  • FEConf 등 프론트엔드 행사와 직군이 점점 자리 잡아감
  • 다양한 하이브리드 앱에 수요가 서서히 증가
  • 여전히 IE 대응을 위한 폴리필 떡칠
  • CSS Modlules를 넘어 BEM 방법론 사용 사례 증가
  • MS 공격적인 움직임 시작

2019

Screenshot 2023-05-22 at 12 17 15 AM

2019

  • React는 완전한 대세로 자리매김
    • Vue 또한 나름 괜찮은 점유를 가져감
  • 수 많은 기업에서 TypeScript 도입하기 시작
  • styled-components 주도로 CSS in JS 사용 증가
  • React v16.8 출시 Hooks
    • 함수형 컴포넌트 학습과 도입에 대한 자료 홍수처럼 넘쳐나기 시작함
    • 학습 피로도 증가 및 설레발 주도 개발에 대한 논쟁 증가
    • 함수형 프로그래밍 대유행 시작
  • ContextAPI vs Redux
    • 상태관리에 대한 불신과 피로도에 대한 논쟁
    • GraphQL 또한 논란한 스푼
  • 프론트엔드 팀이 생겨나며 Prettier & ESLint & Husky & lint-staged 등 협업을 위한 고민과 해결 사례가 늘어나기 시작함
  • Redux Saga 는 여전한 신뢰도로 자리를 굳건히함
  • Vanilla JavaScript 학습 요구 대두
  • 수 많은 라이브러리와 고급 프론트엔드 기법이 우수수 쏟아져나옴
    • 프론트엔드 학습에 상당한 피로감, 무력감이 퍼짐
    • 업계에서 고급 인재는 인정받기 시작

2020

Screenshot 2023-05-22 at 12 20 26 AM

2020

  • React & Hooks API & TypeScript +@Axios => 생태계 구축
    • React Native 사용 기업이 늘어나며 그 자리는 더 확고해져감
    • Class Component에 대한 거부감이 증가하기 시작
  • 3년 차 이상 프론트엔드 개발자 뽑는 것은 완전히 기본
    • Tree Shaking, Code Splitting, SSR, Hydration
    • 그 이상의 프론트엔드 개발자는 몸값이 계속 올라감
  • 성숙한 대규모 FE 팀은 Lerna를 주축으로 모노레포 노하우 쌓기 시작
  • Recoil 등장으로 다시 한번 지각 변동이 예고 됨
    • Suspense와 조합을 먼저 도입하는 시도에 의미를 부여
  • RTL & Jest를 주축으로 TDD에 대한 성숙도가 점점 올라감
  • Storybook 사용 사례 증가 +@Emotion
    • 드디어 상태를 넘어 컴포넌트에 관심가지기 시작
    • Atomic Design Pattern 도입 유행 +@headless UI
  • Vue 3 정식 출시 & Composition API 등장
    • 오히려 Vue => React 전환 케이스가 늘어나기 시작
  • 뒤늦게 SEO 대응의 심각함을 깨우치기 시작함
    • 러닝커브에 Next.js, Nuxt,js에 대한 고민이 시작됨
  • GraphQL 이후로 Serverless에 대한 관심이 간간히 피어남
  • 기업에서는 성능 최적화를 요구하기 시작
  • ESM Bundler 관심이 올라옴

2021

Screenshot 2023-05-22 at 12 23 48 AM

2021

  • 개발자 역대급 호황기로 몸값 상승, 이직, 보너스 대잔치
  • AngularJS Deprecated
  • Next.js, Nuxt,js에 사용 기업이 점점 늘어감
  • React Query vs SWR (Server State) => React Query 우위 점하는 중
  • CI/CD & Github Actions & DX 등 프론트엔드 개발자의 영역 확장 => BFF
  • Storybook 활용도 증가 => 너도나도 디자인시스템 & 너도나도 디자인 토큰
  • Figma 생태계 발전 => UX/UI 자동화 시도
  • 성능 최적화는 당연한 수순으로 올라옴
  • Zero Runtime CSS in JS 사용도 증가
  • Redux Toolkit이 알려지기 시작했으나 정식 릴리즈도 안된 Recoil에 밀림
    • 대부분 새로운 프로젝트는 Recoil로 만들기 시작
  • 다양한 기업의 Yarn Berry 도입 가이드가 전파되어 Yarn Berry 사용도가 급증
  • Deno 출시로 인기는 엄청나지만 국내 사용 사례가 눈에 띄게 늘어나지는 않음
  • 일부 성숙한 FE 개발팀에서 Svelte 를 사용하는 사례가 늘어나기 시작함
  • Spring과 비슷한 NestJS 인기 급상승
  • 토스의 기술 선도로 많은 프론트엔드 개발자들에게 동기부여
  • 네카라쿠배와 국비교육으로 프론트엔드 개발 신입 급증
  • Copilot 사용자 꾸준히 증가
  • React Beta Docs 공개
  • Snowpack 과는 다르게 ESBuild 관심도 꾸준히 상승

2022

Screenshot 2023-05-22 at 12 25 57 AM

2022

  • 전세계 경기 침체로 인한 IT 대해고 시대 시작
  • React v18 정식 릴리즈 => 길고 긴 떡밥들 업데이트
  • Next.js & TansStack Query 독주
    • 거의 필수 스택으로 자리잡는 분위기
  • IE 지원 종료 => 점점 새로운 스펙에 대한 자유도가 높아짐
  • written by Rust 라이브러리 대유행 & WASM
    • 유사 라이브러리를 향상된 속도로 대체하는 가파른 세대 교체
    • 실 사용 사례가 나오고 있지만 러닝커브로 대중적이지는 못한 상황
  • 무섭게 성장하는 Vercel
    • React 개발팀과 협업 & SWC, Svelte 메인테이너 영입
  • Zustand & Jotai
    • 상태관리의 새로운 선택지 등장으로 뒤늦은 환호
    • 반면 Recoil은 대규모 해고 사건과 업데이트가 붕 뜨게 됨
  • MFA (Micro Frontend Architecture)
    • 점점 복잡해지는 서비스와 팀 구조로 MFA 도입 사례가 꾸준히 증가
  • Lerna의 부진 & 모노레포 대전쟁
    • Lerna vs Turborepo vs NX vs Rush Stack
  • 너도나도 Vite 도입에 엄청난 폭풍이 몰아침
  • Evan You의 Turbopack 견제

2023

2023

  • 대규모 언어 모델(LLM)
    • GPT에 충격받은 사람들 특히 개발자
    • 유명 네임드 개발자들조차 혼란
  • 전세계 경기 침체로 인한 IT 대해고 및 인력 효율화
    • 채용 Close & 넘쳐나는 신입 수요
  • 5년 차 이상 프론트엔드 개발자 뽑는 추세로 변화하는 추세
    • FE => TPM, TPO 직군 전환 움직임
  • 서서히 나타나는 React Server Components
    • 그리고 반대하는 세력들
  • 무섭게 성장하는 Vercel (aka Early React)
  • RSC에 더해 더욱 진보된 렌더링 기법 등장
    • ISR, Streaming SSR
  • 꽤나 관심가질 법한 Qwik
    • like a React + React 호환 + 압도적인 퍼포먼스
  • 특이한 흐름의 TypeScript 생태계
    • 빡빡한 타입의 tRPC, Zod 열풍
    • TC39 JS 타입구문 Stage1
    • Svelte의 TS 걷어내기
  • Recoil 의 독자적인 행보 => 폭풍성장하는 Pmndrs
  • 상태 관리 사용 방법의 진화

결론

과거의 신입 개발자로서의 나는 공부할 자료를 찾지 못해 이 바닥의 훌륭한 개척자분들의 뒤를 열심히 밟았던 것 같다.
그 당시에는 프론트엔드 개발자의 수도 적었고 레퍼런스, 서적, 동영상 강의는 정말 적었기 때문이다.
이해도 되지 않는 영어 자료를.. 어설픈 구글 번역을 통해 영어로 된 문서를 읽으며 공부했던 기억이 난다.

하지만 지금은 어떠한가?
수 많은 자료가 있고 그 수준도 매우 높아졌다. 또한 경쟁자들도 많아졌다.
신입 그리고 주니어분들이 피터지게 경쟁하는 이 시기를 함께하며 지켜보니.. 내가 지금까지 일할 수 있었던 것은 정말 먼저 시작했기 때문이 아닐까 정말 운빨 개발자인 것 같다.

결국 프론트엔드 개발자로 성장하며 느낄 수 있는 것은 나 혼자만 성장하는 것이 아닌 생태계도 함께 성장한다는 것이다.
신입 시절에는 너도나도 Redux, TypeScript 모두 배우기 어렵고 힘들다고 포기하는 경우가 부지기수였다.
현재는 Redux..? 이제 신입들조차 배우기를 꺼려하는 레거시로 취급받는 상황이며 TypeScript는 이미 많은 회사들이 채용에 필수로 요구하고 있다.
이러한 생태계의 변화는 개발자들의 성장과 함께 이루어진 것이다. 돌아보면 개발자로서 흐름에 따라 성장하는 것이 아닌 흐름을 만들어가는 개발자가 되고 싶었지만 정말 쉽지 않았다. 그래도 교육자로 활동하거나 프론트엔드 팀을 이끌며 흐름을 만드는데 조금은 기여하지 않았을까...?

아직도 수 많은 개발자들이 이런 빠른 흐름에 스트레스 받고 있다.
어쩌면 이런 흐름에 뒤쳐지지 않기 위해 노력하는 것이 개발자의 일 그리고 숙명이 아닐까 싶다.

@ella-yschoi
Copy link

2023년에 개발 생태계에 들어온 신입 개발자로서 이런 내용이 궁금했는데 감사합니다 ㅎㅎ 잘 읽었습니다!

@pocojang
Copy link
Author

미디엄으로 넘어가며 글을 다시 작성했습니다
관심 감사합니다!
https://medium.com/@pocojang/learn-frontend-9cb73dc10a54

@redcontroller
Copy link

앞서 자료도 없고 혼란했던 시기에 공부했던 사람들이 새롭게 떠오르는 기술을 익히며 연차를 쌓아가는 스토리....
그리고 요즘 FE 채용 시장이 어떻게 흘러왔나 이해할 수 있었습니다 🤣
우리나라의 프론트엔드 역사를 읽어나가는 게 참 재미있었습니다 ! 🤗👍
좋은 글 감사합니다 ~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment