Recommended
More Related Content
Similar to 240326_패스트캠퍼스_캠프콘_오원종_2024년_프론트엔드_트렌드_발표자료
Similar to 240326_패스트캠퍼스_캠프콘_오원종_2024년_프론트엔드_트렌드_발표자료 (20)
More from WonJongOh1
240326_패스트캠퍼스_캠프콘_오원종_2024년_프론트엔드_트렌드_발표자료
- 1. 2024 프론트엔드 트렌드로 살펴보는 회사가 뽑고 싶어하는 신입/주니어의 기준 오원종 전) 굿닥, 비바리퍼블리카
- 2. 연사 소개 오원종 • 4년차 웹 프론트엔드 엔지니어 • 게임 플랫폼 스타트업 O사 4월 이직 예정 • 전) 굿닥 (2020~2023) • 전) 비바리퍼블리카 (2019~2020) • 네이버 부스트캠프 6,7,8기 멘토 • 소프트웨어 마에스트로 10기
- 3. 목차 • 2024년 프론트엔드 트렌드 살펴보기 • 프로그래밍 언어 • 프레임워크/라이브러리 • 빌드 도구/번들러 • CSS/스타일링 • 그 외 • 취업/이직을 위한 실전 가이드 • 이력서/서류전형 • 코딩테스트/과제 • 기술인터뷰
- 5. 1. 프로그래밍 언어 ECMAScript 2023(ES14) 비동기 처리 ES6 이후의 문법 클로저 latest ver. 5.3 Enum 유틸리티 타입 제네릭 타입 추론 WebAssembly (WASM) 저수준 언어(C++, Rust)를 브라우저에서 컴파일 가능
- 6. 다음 코드가 실행되었을 때 콘솔이 찍히는 순서를 설명하시오. 예상 면접 질문
- 7. 예상 면접 질문 만약 아니라면, 정확하게 3000ms를 기다리게 할 수 있을까요? 자바스크립트에서 비동기 함수(e.g. setTimeout)는 정확하게 3000ms를 기다렸다가 실행이 되나요?
- 8. 출처 : npm trends 2. 프레임워크/라이브러리
- 10. 예상 면접 질문 Next.js 13 버전에서 등장한 RSC(React Server Component)가 무엇이고 기존의 CSR, SSR과 비교해서 어떠한 차이점이 있는지 설명하시오. React 18 버전에서 새로 나온 Automatic Batching, Hydration, Suspense 등에 대해서 설명하고, 기존의 React와 비교하여 나아진 점이 있다면 설명하시오.
- 11. 출처 : npm trends 3. 빌드 도구/번들러
- 12. 자바스크립트에서 모듈을 불러오는 방식에는 여러 가지 방법이 있는데(ES6 Modules, CommonJS, AMD 등) 각각이 가진 특징을 비교하여 설명하시오. Vite를 개발 환경, 프로덕션 환경에서 사용할 때 장단점을 Webpack과 비교하여 설명하시오. 예상 면접 질문
- 13. 4. CSS/스타일링
- 14. 본인이 사용하는 스타일링 도구는 무엇이고, 왜 그 도구를 사용하는지 이유를 설명하시오. Next.js를 사용하다보면 styled-components가 적용이 되지 않는 이슈가 발생 할 때가 있는데, 이를 해결할 수 있는 방법은 무엇인지 설명하시오. 예상 면접 질문
- 15. 5. 그 외
- 16. 취업/이직을 위한 실전 가이드
- 17. 1. 이력서/서류전형 신입/주니어 개발자 기준으로 이력서는 1장이면 충분 30초 이내로 나를 표현할 때 무엇을 가장 우선순위에 둘 것인가 경력이 있는 경우는, 문제 정의 – 해결 – 성과를 중심으로 써보기 경력이 없는 경우는, 가장 자신 있는 프로젝트를 적고 본인이 직 접 기여한 부분 중 가장 깊이 있게 고민한 부분 위주로 적기 ‘무엇’ 이 아닌 ‘왜‘ 이 기술을 썼는가?
- 18. 저는 React 와 TypeScript를 가지고 커뮤니티 서비스를 개발했습니다. 로그인, 회원가입, 게시글 작성, 댓글 작성 등 기능 을 구현했습니다. 이력서 작성 나쁜 예 좋은 예 커뮤니티 게시글을 불러오는 과정에서 react-query의 캐싱 설정을 사용해서, 기존에 일반적으로 데이터를 불러오는 경우 대비 35% 정도 네트워크 요청 횟수를 감소시켰습 니다. 컴포넌트를 재사용 할 수 있고 관심사 분리를 잘 해 주기 위해서 합성 컴포넌트 패턴을 사용해 기능과 디자인을 나누어 재사용성을 높였습니다.
- 19. • 서류 탈락 확률이 높음 • 연차로 필터링을 하는 곳도 많음 • 저연차라면 헤드헌터의 도움을 받는 것도 쉽지가 않음 • 장점은 내 의지로 마음껏 지원할 수 있어서, 가능 한 많이 지원해 보기 회사에 지원하는 방법 직접 채용 사이트 통해 지원 지인 추천 (레퍼럴) • 지인 추천을 통하면 서류 합격 확률이 많이 올라 감 • 단, 지인이 나를 잘 알고 어필할 수 있는 부분이 있어야 함 • 평소에 개발자 지인들에게 나의 장점을 알리려고 많이 노력하기
- 20. 지식보다는 경험을 지식 • React, TypeScript • redux, zustand, recoil • 자료구조, 알고리즘, 운영체제 • 함수형 프로그래밍 • 아토믹 디자인 시스템 • 등등
- 21. 지식보다는 경험을 지식 경험 • React, TypeScript를 기반으로 커뮤니티 서비스 개발 • Zustand와 react-query를 사용해서 전역 상태 관리 • 아토믹 디자인 시스템을 적용해서 디자인 시스템을 구축함
- 22. 지식보다는 경험을, 경험보다는 성과를 지식 경험 성과 • TypeScript 제네릭을 사용하여 기존 JavaScript 대비 다형성을 지키며 재사용이 가능한 모듈로 개선 • React-query 캐시 설정을 통해 기존 대비 35% 정도 네트워크 호출 감소 • 기존에 아토믹 디자인 시스템이 가진 문제점을 개선하기 위해 합성 컴포넌트 패턴을 도입하여 추상화 레벨을 명확히 함
- 23. 2. 코딩테스트/과제전형 제한된 시간 동안에 알고리즘 문제를 풀거나 과제를 해야 하는 상황 → 이걸 단순히 할 수 있는지 확인하려는게 아님 → 빠르게 잘 할 수 있는지 확인하고자 함 아직 코딩테스트/과제에 숙련이 덜 되었다면, 많이 알고리즘 문제를 풀어보고 다양한 기능 구현을 많이 해보자. 어느 정도 여기에 숙련이 되었다면, 어떻게 하면 더 잘 만들 수 있는지, 가독성을 높일 수 있는지, 버그를 줄일 수 있을지, 테스트를 할 수 있을지 등 생각을 덧붙이자.
- 24. 10X10 10가지 유형의 알고리즘 문제를 각각 10개씩만 풀어보자 출처 : LeetCode, 프로그래머스
- 25. 10X10 10가지 유형의 알고리즘 문제를 각각 10개씩만 풀어보자 출처 : LeetCode, 프로그래머스
- 26. 연습을 실전처럼 문제별로 시간을 제한을 두고 푸는 연습을 하기 (사람마다 기준이 달라 절대적일 수는 없습니다.) 프로그래머스 기준 Lv 2 : 한 문제 당 15~30분 Lv 3/4 : 한 문제 당 30~45분 LeetCode 기준 Medium : 한 문제 당 15~30분 Hard : 한 문제 당 30~45분 일반적으로 3문제 120분 4~5문제 180분 이렇게 많이 주어집니다.
- 27. 과제전형 평소에 다양한 기능을 많이 구현해 보는 것이 가장 좋은 준비 회사는 기본적으로 그 회사에서 실제로 개발하는 내용과 완전 별개 의 내용을 과제로 주지 않습니다. 커머스 회사 → 특정 커머스 화면 만들기 B2B SaaS 회사 → 대시보드 일부 부분 만들기 회사가 웹뷰를 많이 쓴다면 → 웹뷰 특정 기능을 구현하기 회사가 크고 복잡한 데이터를 다룬다면 → 리렌더링 최적화 하기
- 28. 과제전형 평소에 다양한 기능을 많이 구현해 보는 것이 가장 좋은 준비 여기서 회사가 보고 싶은 것 • 지원자가 이걸 할 수 있는가? ( ⃤ ) • 지원자가 이걸 익숙하게 잘 할 수 있는가? (O) • 지원자가 여기서 우리가 고민하는 부분을 같이 고민해 볼 수 있는가? (O) • 지원자가 여기서 우리가 고민하는 부분을 해결해 올 수 있는가? (Best)
- 29. • 필수 구현 사항은 다 구현하기 • 선택 구현 사항 중 할 수 있는 것을 최대한 시도해 보기 • 성공하지 못한 부분을 한 데 까지라도 최대한 기 록해 두기 • 구현을 다 못 했더라도, 마감 기한을 절대 넘기지 말기(태도) 과제전형의 기준 신입 (경력이 없는 경우) 주니어 (경력이 있는 경우) • 필수는 기본, 선택 구현 사항도 웬만해서 다 하기 • 가능하다면 제출 due date 보다 더 일찍 제출하 기 • 요구사항에 없는 내용들 중에 더 개선할 부분들을 찾아보고, 기록하기 • 어떤 기술 선택, 코드 하나하나에도 ‘왜’를 생각하 며 선택하고 작성하기
- 30. 3. 기술인터뷰 첫 술에 배부를 수 없음을 기억하기 -> 무조건 많이 보아야 느는 영역 매 번 인터뷰를 볼 때마다 내용을 잘 정리해서, 다음 인터뷰 때는 대답을 반드시 잘 할 수 있게 만들기 이력서에 본인이 적어놓은 기술들에 대해서는 최소한 그 기술이 무엇이며, 비슷한 다른 기술들 대비 장단점이 무엇인지를 알고 있어야 하며 그걸 모르면 과감하게 빼기 해당 회사의 JD를 인터뷰 전에 다시 한 번 잘 읽어보고 가기
- 31. 기술 인터뷰 단골 질문 최소한 이 정도의 내용은 거의 100% 물어보기 때문에 잘 준비! • 자기 소개 • 여기서 본인의 개발 커리어, • 본인의 개발자로서의 강점, 관심사 • 현업 이외의 보여줄만한 경험 등 • 자연스럽게 녹여낼 수 있으면 이후 면접 때 대화 주제로 이어짐
- 32. 자기 소개 예시 나 안녕하세요. 저는 OOO 입니다. … 저는 개발을 통해 비즈니스 문제를 해결하는 일에 관심이 많이 있습니다. 면접관
- 33. 자기 소개 예시 나 안녕하세요. 저는 OOO 입니다. … 저는 개발을 통해 비즈니스 문제를 해결하는 일에 관심이 많이 있습니다. 네 저는 A회사에서 웹 프론트엔드 개발자로 근무하면서 OO 서비스를 맡아서 개발을 했 는데… 면접관 혹시 이전에 본인이 개발자로서 주도적으 로 문제를 해결한 경험이 있으신가요? (면접관의 답변을 미리 예측할 수 있고, 이 에 대한 준비를 잘 하면 좋은 점수를 얻을 수 있다.)
- 34. 기술 인터뷰 단골 질문 최소한 이 정도의 내용은 거의 100% 물어보기 때문에 잘 준비! • 자기 소개 • 여기서 본인의 개발 커리어, • 본인의 개발자로서의 강점, 관심사 • 현업 이외의 보여줄만한 경험 등 • 자연스럽게 녹여낼 수 있으면 이후 면접 때 대화 주제로 이어짐 • 가장 주도적으로/도전적으로 참여했던 작업에 대해서 설명 • 작은 일이라도, 본인이 직접 한 일들 위주로 잘 말할 수 있는 작업이어야 함 • (경력이 있는 경우) 전 회사에서 이직하는 사유 • 여기서 주의할 점은 전 회사 또는 전 회사 동료를 비난하는 방향이 되면 안 됨
- 35. • CORS에 대해서 설명해 보세요. • 자바스크립트의 비동기 처리 하는 과정을 설명해 주세요. • React-query의 장점과 단점은 무엇인가요? • 컴포넌트 리렌더링을 줄일 수 있는 방법에는 어 떠한 것들이 있을까요? 기술 인터뷰 질문 유형 지식 기반 경험/성과 기반 • 이력서에 적어주신 A 회사의 B 업무에서 본인이 어떠한 기여를 하셨나요? • Emotion을 사용하면서 불편하신 점은 없으셨나 요? 있었다면 어떻게 해결하셨나요? Emotion을 도입하는 과정에 대해서 다른 팀원들을 어떻게 설 득하셨나요? • C 프로젝트를 지금 다시 작업할 수 있다면 어떤 부분을 더 보완해서 작업하실 것 같으신가요?
- 36. 마지막으로 하고 싶은 말
- 37. 출처 : 황성현님 X(트위터)
- 38. 출처 : 황성현님 X(트위터)
- 39. 출처 : 황성현님 X(트위터)
- 40. 감사합니다. 코드 레벨의 고민을 넘어 시스템 레벨의 고민을 하는 성능을 챙기는 프론트엔드 개발자가 되시기를 바랍니다.