[FE] 2024 프론트엔드 상황 (State Of Frontend)

안녕하세요~

오늘은 회사에서 테스트 서버를 개발하려고

프론트엔드를 조사하다가

좋은 내용의 해외 블로그가 보여서

관련 내용을 적어 보려고 합니다. 

프론트 엔드 프레임워크에서 많이 사용하는 패키지까지 

좋은 내용이 많아서 너무 좋았어요.

 

1. 설문에 참여한 사람의 직업 분포입니다.

프론트엔드 설문인데 풀스택 개발자가 가장 많다는 것이 신기하네요.

그리고 QA도 0.1%있어서 다행이라고 생각이 드네요.

저도 QA 엔지니어지만

앞으로는 프론트, 백엔드, QA, DevOps등 

다양한 영역의 기본 지식이 필요할 거라고 생각하고 있습니다.

---

2. 두번째는 직원수에 대한 질문입니다.

신기한 게 회사의 직원이 100명 이내와 1000명보다 많은 회사 합쳐서 50%가 된다는 것이 신기하네요

다들 대기업에 다니나봐요~ 

---

3. 일하는 방식에 대한 질문입니다.

86% 이상이 재택근무나 하이브리드 근무네요..

우리나라도 빨리 원격근무가 일반화되면 좋을 것 같아요.

---

4. 프론트 엔드 경력에 대한 질무입니다.

---

5. 팀에서 하는 일에 대한 질문입니다.

QA 스페셜리스트로 해외에서는 별도의 Role이 있나 보네요.

QA 스페셜리스트는 특정 도메인에 전문화된 QA로 생각하시면 됩니다.

---

6. 작년에 사용한 프레임워크는 어떤 것인가요?

역시 react가 가장 많이 사용하고 있네요

근데 Svelte도 개발자들이 43%나 배우고 싶어 하네요

react와 vue가 가장 많이 사용되지만 Svelte가 요즘 빠르게 성장하는 프론트 엔드 프레임워크로 보입니다.

---

7. 작년에 사용한 렌더링 프레임워크(rendering frameworks)는 어떤 것인가요?

react에 힘입어 Next.js가 가장 많이 사용하는 프레임워크지만

Astro와 SvelteKet이 개발자들이 관심받고 프레임워크로 보입니다.

---

8. 작년에 사용한 검증 라이브러리는?

zod가 가장 많이 사용하는 라이브러리네요.

나중에 한번 사용해봐야 할 것 같아요~

---

9. 작년에 사용한 날짜 관련 라이브러리는?

날짜는 date-fns가 가장 많이 사용하고 있는데

moment와 비슷하게 사용 중이네요.

근데 moment는 사용하지만 싫어하는 사람들도 많네요..ㅎㅎ

---

10. 작년에 사용한 상태관리 라이브러리는?

React Context API가 가장 많이 사용되고 있는데

사용했지만 싫어하는 것까지 하면 Redux도 많이 사용 중이네요

---

11. 작년에 사용한 기타 라이브러리는?

---

 

12. 작년에 데이터 가져오는 데 사용한 툴은?

Axios와 native fetch가 가장 많이 사용되었네요. 

 

13. 가장 선호하는 호스팅 프로그램은?

 당연히 AWS나 별도 서버라고 생각했는데

Vercel이 1등을 차지했네요.

Vercel이 nextjs개발팀에서 만든 배포사이트라

배포가 편한가 보네요~~

나중에 기회가 되면 써보고 싶네요.

 

14. 사용한 CI 도구는?

시대가 많이 변했네요.

Jenkins라고 생각했는데 Github actions이 압도적인 1등이네요.

---

 

15. 마이크로 프론트엔드를 사용해 봤나요?

마이크로 프론트엔드가 2022년에는 75%였는데

많이 줄어들었다고 하네요.

---

16. 사용해 본 마이크로 프론트엔드 방법은?

 webpack 5가 가장 많이 사용하네요.

---

17. 패키지 관리에 사용하는 프로그램은?

npm이 기본이라 가장 많이 사용하네요.

Yarn은 대규모 프로젝트에 적합하고 고급기능을 제공해서 상단 한 유저를 유지한다고 하네요.

그리고 PNPM은 새로 인기 상승 중인 툴이라고 합니다. 

PNPM도 한번 배워보고 싶네요~

---

18. 가장 많이 사용하는 javascript 런타임은?

 

---

19. 작년에 Typescript사용했나요?

---

20. 작년에 사용한 typing방법은?

 

typescript를 다들 많이 사용하네요.

---

 

21. 작년에 사용했던 브라우저 기술은?

 

---

22. 프로그레시브 웹 앱의 미래는?

---

23. 가장 좋아하는 디자인 시스템은?

shadcn/ui와 MUI/Material UI가 가장 많이 사용되고 있네요

 

 

---

24. 작년에 사용한 디자인 툴은?

 

역시 피그마가 가장 많이 사용되고 있네요.

---

25. 작년에 사용한 스타일링 툴은?

Plain CSS, Sass/SCSS, Tailwind CSS 등 다양한 스타일링 도구가 사용되고 있네요

---

26. 개발팀에서 테스트를 하는 사람은?

거의 개발자가 한다가 22%라니...ㅠㅠ

---

27. 작년에 스스로 테스트를 수행해 보셨나요?

22%나 테스트를 한 번도 수행하지 않았다니!!!ㅠㅠ

 

---

28. 테스트한 종류는?

와... 단위 테스트뿐만 아니라 E2E테스트와 통합테스트도

정말 높네요..

---

29. 사용해 본 테스트 툴은?

프론트엔드는 playwright와 cypress만 알고 있었는데

jest가 가장 많이 사용되고 있네요.

그런데 vitest와 playwright가 인기가 점점 올라가고 있다고 하네요.

---

30. 가장 좋아하는 IDE는?

Visual Studio Code 가 가장 많이 사용되고 있네요.

---

31. 가장 좋아하는 브라우저 코드 에디터는?

가장 많이 사용되고 있는 것은 CodePen입니다

---

32. 가장 좋아하는 버전 컨트롤 시스템은?

당연하게도 Github네요

---

33. 작년에 사용한 빌드 툴은?

vite가 가장 많이 사용되었고 그다음으로 esbuild네요.

---

34. 코딩 스타일 툴은?

ESLint와 Prettier를 많이 사용하네요.

---

35. 일할 때 AI를 사용하나요?

저도 많이 사용하는데

AI는 이제 필수인 것 같아요~

---

36. 어떤 AI 툴을 사용했나요?

GPT 가 압도적이네요.

---

37. AI를 어떤 용도로 사용했나요?

 

코드 어시스트로 많이 사용하고 지식검색으로 많이 사용하네요..

코드리뷰도 적용한 사람이 34%네요

 

---

38. 당신의 프로그램에 AI 통합여부

거의 통합하지 않고 사용하면 채팅이나 추천, 콘텐츠 생성으로

사용하네요..

 

---

39. AI의 미래는 무엇인가?

아직 프론트엔드 개발자를 대체하기는

힘들다고 생각하네요~

---

40. 접근성 강화를 어떻게 하고 있나요?

 

---

 

원본사이트

https://tsh.io/state-of-frontend/

The State of Frontend 2024