들어가기 전에

안녕하세요! 이 글은 패스트캠퍼스에서 진행하는 2024년 3월 캠프콘: 프론트엔드 편 강연을 듣고 해당 내용을 요약 정리하고 후기를 작성한 글입니다. 발표를 들으며 제가 느끼기에 중요한 내용이나 계속 기억하고 싶은 내용을 메모하여 벨로그 게시물로 남기게 되었고, 이 과정에서 제가 추후에 읽었을 때 이해하기 쉽도록 저의 해석이나 추가 설명을 덧붙인 부분도 있기에 발표자 님이 의도하신 워딩이나 맥락과 완벽하게 일치하지 않을 수 있습니다. 만약 오류나 잘못된 부분을 발견하신다면 댓글로 제보해주시면 감사하겠습니다. 🤧

일정 : 2024.03.26(화) 19:00 ~ 21:30 (온라인)
발표자 : Owen 님 (전 굿닥, 비바리퍼블리카 소프트웨어 엔지니어-FE)

2024년 트렌드로 보는, 회사가 선택하는 신입/주니어 기준

2024년 프론트엔드 트렌드 살펴보기

1. 프로그래밍 언어

모든 언어의 최신 기술을 전부 팔로잉 할 수는 없지만, 각 언어의 중요 기능은 따라가자.

JavaScript

• 최신버전: 2023(ES14)
• 비동기 처리, 클로저, ES6 이후 등장한 문법...

TypeScript

• 최신버전: latest 5.3v
• Enum, 제네릭, 타입 추론, 유틸리티 타입...

WebAssembly (WASM)

• 저수준 언어를 브라우저에서 컴파일 가능하도록 도와준다.

예상 질문
1. 비동기 처리 순서
2. JS에서 비동기 함수(e.g. setTimeout())는 정확하게 3000ms를 기다리는가?
3. 만약 아니라면, 정확하게 시간을 기다리게 할 수 있는가?

2. 프레임워크, 라이브러리

2024년 현재 프론트엔드 프레임워크/라이브러리 점유율
1. React 리액트
2. Vue.js 뷰
...

• 리액트는 사용할 수 있는 라이브러리가 많다 → 다양한 경험을 할 수 있는 것이 장점!
• 뷰는 가벼운 것이 장점! 학습하기 수월한 편. 리액트/스벨트와는 다르게 독자적 노선
  - but... 생태계가 작고 약하다.
• 스벨트는 코드 양을 적게 작성할 수 있다. 가상돔을 사용하지 않아 오버헤드가 적다.
  - but... 역시 생태계가 작고 약하다.

그 외에도 NEXT.js, quik, solidjs, astro, tRPC … 등이 있다.

리액트만 잘하는 건 위험할 수 있다. 위 프레임워크와 라이브러리들도 언제 어떻게 순서가 바뀔지 아무도 모르기 때문에, 특히 프론트엔드는 변화무쌍하기 때문에 리액트 외에도 상황에 따라 적절히 프레임워크와 라이브러리를 선택해 사용하는 것이 중요하다.

• NEXT.js : 앱 라우터, 서버 컴포넌트 등… 학습해야 할 것이 많이 생긴다. 꼭 최신 버전을 사용해야 하나면, 그것은 아니다. 필요에 의해 하나씩 천천히 사용해보기를 권장!
• qwik, astro : SSR을 지원하는 프레임워크. 이런 프레임워크가 어떤 고민을 가지고, 어떻게 출시됐는지 알고있는 것이 좋다.

예상 질문
1. React 18 Automatic Batching, Hydration, Suspense 등에 대해 설명하고 기존 리액트와 비교하여 나아진 점을 설명하세요.
2. Next.13 에서 등장한 RSC가 무엇이고 기존 CSR, SSR 비교해서 어떤 차이점이 잇는지 설명하세요.

3. 빌드 도구, 번들러

webpack, esbuild, rollup, vite… (npm trends)

왜 빌드 도구를 알아야 할까? 바로 성능을 위해서.

토이프로젝트와 다르게 실제 현업의 프로젝트는 규모가 크고 무겁다.
성능을 체크하지 않는다면 유저 이탈이 발생할 가능성이 높다.

• webpack : 복잡한 프로젝트에서 설정이 어려움. 러닝커브가 심함. 무거움.
• esbuild : 병렬 처리 기능. 기존 node기반 보다 빠름.
• vite : 빠른 서버 지원. 롤업 기반의 플러그인 지원(코드스플리팅, 레이지로딩 등). 개발 환경과 운영 면에서 모두 좋음.

예상 질문
1. Vite를 개발 환경, 프로덕션 환경에서 사용할 때 장단점을 Webpack과 비교하여 설명하세요.
2. JS에서 모듈을 불러오는 방식에 여러가지가 있는데(ES6 Modules, CommonJS, AMD) 각각의 특징을 비교하여 설명하세요.

4. CSS, 스타일링

컴포넌트 기반의 스타일링 도구는 확장이 어렵다.

• 유틸리티 기반 → tailwindcss

• CSS-in-JS → 런타임 시점에서 실행ㄹ되어 성능에 영향을 주는 한계점 때문에 하락세

• styleX : 메타에서 만듬, 컴파일러 기반,

• 바닐라익스트랙트 : 제로 런타임 방식의 css-in-js

• styled-components, Emotion...

5. 그 외

supabase, pnpm., playwright, turborepo...

시스템 측면에서 고민할 수 있는 도구들.

• 백엔드 없이 데이터베이스와 서버만들수있는 supabase,
• 모노레포 도구인 turborepo,
• 백엔드 개발자가 api 만들기 전에 모킹할 수 있는 MSW...

이것들도 모두 성능 관련이고, 제품 출시 시간을 줄일 수 있으니 알아두자.

취업/이직을 위한 실전 가이드

1. 이력서, 서류 전형

• 신입 기준 이력서는 1장이면 충분하다.
• 많은 내용을 담아도 제대로 안 본다.
• 30초 이내로 표현할 때, 무엇을 우선순위에 둘 것인가 생각해보자.
• 경력이 있는 경우 : 문제 정의 - 해결 - 성과 중심으로 작성
• 경력이 없는 경우 : 자신있는 프로젝트를 적고 직접 기여한 부분과 가장 깊게 고민한 부분위주로 어필
• 면접관들은 얼마나 대단한 프로젝트를 했냐가 중요하지 않다. 어떤 프로젝트를 했고, 어떤 고민을 했는지 어필하는 것이 중요하다.
• 무엇이 아닌 "왜" 이 기술을 사용했는지 생각하자.
• 회사에 지원하는 방법은 채용 사이트와 지인 추천 루트가 있다.
• 링크드인, 페이스북 등의 SNS를 잘 활용하자. 메일을 보내봐도 좋다.
• 지식보다는 경험을, 경험보다는 성과를 어필할수록 결과가 좋다.

나쁜 예
"저는 React와 TypeScript를 가지고 커뮤니티 서비스를 개발했습니다."

좋은 예
"커뮤니티 게시글을 불러오는 과정에서 react-query의 캐싱 설정을 사용하여 기존에 일반적으로 데이터를 불러오는 경우 대비 35% 정도의 네트워크 요청 횟수를 감소시켰습니다."

2. 코딩 테스트, 과제 전형

제한된 시간 내 알고리즘이나 과제를 수행하는 것은 단순히 할 수 있는지 확인하는 것이 아니다.
문제 해결 능력을 확인하는 것이다.

코딩테스트

• 10가지 유형의 알고리즘을 각각 10문제씩 풀어보자.
• 해시, 스택과 큐, 그리디, 다이나믹 프로그래밍 등...
• 연습은 실전처럼, 문제별로 시간을 제한하여 연습하자.
• 프로그래머스 기준 Lv.2는 15~30분, Lv.3~4는 30~45분

과제

• 평소에 다양한 기능을 많이 구현해보는 것이 좋은 준비다.
• 실제 개발 내용과 별개의 내용을 과제로 주지는 않는다.
  - 커머스 회사 → 커머스 화면 구현
  - 웹 뷰 사용 회사 → 웹 뷰 기능 구현
• 단순히 지원자가 과제를 구현할 수 있는가? ❌
• 익숙하게 잘 하는가? 👌
• 우리가 하는 고민을 같이 고민하는가?👌
• 우리가 고민하는 부분을 해결할 수 있는가? 💯

3. 기술 인터뷰

첫 술에 배부를 수 없다. 무조건 많이 보아야 성장한다.
매 인터뷰마다 내용을 잘 정리하여 다음 인터뷰를 준비하자.

• 이력서에 본인이 적은 기술들에 대해서 최소한 그 기술이 무엇인지, 비슷한 다른 기술 대비 장단점이 무엇인지를 알고 있어야 하며 모른다면 과감히 삭제하자.
• 인터뷰 전에, 해당 회사의 JD를 읽어보고 준비하자.

99.9% 단골 질문들

• 자기소개 (본인 커리어, 강점, 장단점, 관심사, 협업, 협업 외 경험...)
• 가장 주도적/도전적으로 참여했던 작업 (작은 일이라도 본인이 직접 작업한 일 위주로)
• (경력의 경우) 이직 사유

지식 기반 질문

• CORS에 대해 설명해 보세요.
• 자바스크립트가 비동기 처리하는 과정을 설명해 보세요.
• React-Query의 장점과 단점은 무엇인가요?
• 컴포넌트 리렌더링을 줄일 수 있는 방법에는 어떤 것이 있나요?

경험/성과 기반

• 이력서에 적어주신 0회사 0업무에서 어떤 기여를 하셨나요?
• 000를 사용하면서 불편한 점은 없으셨나요? 있었다면 어떻게 해결하셨나요?
• 000을 도입하는 과정에서 팀원과 어떤 대화를 하셨나요?
• 0000 프로젝트를 다시 작업할 수 있다면 어떤 부분을 보완하고 싶으신가요?

4. 마지막으로

코드 레벨을 넘어 시스템 레벨을 고민하고, 성능을 챙기는 프론트엔드 개발자가 되자!

• 회사에서 해결해야 하는 대부분의 문제는 좋은 코드보다, 좋은 시스템이 필요하기 때문이다.