주니어 프론트엔드 개발자에게 TypeScript, Next.js, React Query가 중요한 이유

프론트엔드 개발에 관심이 있으신 분들이라면 TypeScript, Next.js, React Query에 대해 한 번쯤 들어보셨을 텐데요. 위 3가지는 코드스테이츠 프론트엔트 개발 부트캠프가 학습 커리큘럼 개선을 위해 올해 초 현직 개발자를 대상으로 실시한 설문조사에서 신입 프론트엔드 개발자가 학습하면 좋을 항목으로 뽑힌 프로그래밍 언어와 프레임워크, 라이브러리이기도 합니다.

앞으로 어떤 걸 더 배우고, 공부해야 할지 고민 중인 예비 프론트엔드 개발자, 신입 프론트엔드 개발자분들을 위해 조사 결과를 요약한 인사이트를 공유합니다.

---

주니어 프론트엔드 개발자가
알아두면 도움이 되는 3가지

코드스테이츠가 자체적으로 실시한 현직 개발자 설문조사에 의하면 경력 1년차 이하 프론트엔드 개발자가 학습하면 좋을 항목으로 프로그래밍 언어 TypeScript가 1위, React 기반의 SSR 프레임워크 Next.js가 2위, Reeact 라이브러리인 React Query가 3위를 차지했습니다. 각 항목들이 무엇이고 왜 주니어 프론트엔드 개발자에게 중요한지 하나씩 알아볼게요.

1. TypeScript

TypeScript란 Microsoft에서 대규모 응용 프로그램 개발용으로 설계한 프로그래밍 언어입니다. TypeScript를 알아두면 도움이 되는 이유는 JavaScript의 문제점을 보완할 수 있기 때문입니다.

JavaScript의 동적 타입이 불러오는 오류 보완

JavaScript는 프론트엔드 개발자에게 중요한 언어입니다. HTML, CSS로 구성된 정적인 화면을 JavaScript를 통해 동적인 화면으로 표현할 수 있기 때문인데요. JavaScript를 통해 사용자 친화적인 UI를 구축하고 좋은 UX를 이루어 낼 수 있습니다.

또한, JavaScript는 타입을 명시할 필요가 없는 동적 타입을 가지는 언어이기 때문에 다른 언어들에 비해 단순한 구조와 원칙을 갖고 있어 배우기 쉽다는 장점을 가지고 있습니다.

하지만 이와 같은 JavaScript의 장점이 때로는 단점으로 작용할 때도 있는데요. 개발의 규모가 커질수록 타입을 명시할 필요가 없는 JavaScript의 경우, 어떤 유형의 데이터가 전달되는지 이해하기 어려울 수 있고 이는 개발자에게 알 수 없는 오류를 안겨주게 됩니다. 결국 개발자는 알 수 없는 오류를 찾기 위해 많은 시간과 노력을 쏟게 됩니다.

이와 같은 비효율을 없애기 위해서 TypeScript가 필요합니다. TypeScript는 개발자가 코드 내에서 전달되는 데이터의 유형을 지정할 수 있도록 하여 개발 프로세스 초기에 오류를 포착하게 할 뿐 아니라 코드베이스를 더 쉽게 이해하고 유지 및 관리할 수 있게 도와줍니다.

프론트엔드 개발자에게 TypeScript이 중요한 이유

TypeScript를 활용하면 위에서 언급한 것처럼 개발 프로세스 초기에 오류를 미리 발견할 수 있어 안정적인 개발 환경에 도움을 주기 때문에 이미 많은 기업에서 사용하고 있는 언어입니다.

설문에 참여한 한 현직 프론트엔드 개발자의 말을 빌리면 TypeScript를 사용한 경험이 없는 지원자는 서류 전형에서 탈락시키는 경우까지 있다고 합니다. 물론 기업마다 상황의 차이가 있기 때문에 일반화하긴 어렵지만 프론트엔드 포지션 채용 시장에서 1년 차 또는 그 미만 프론트엔드 개발자에게 TypeScript를 요구하는 곳이 많아지고 있다는 것입니다.

따라서 JavaScript 언어로 안정적으로 개발하고 채용 시장에서의 경쟁 우위를 선점하기 위해서 0~1년 차 프론트엔드 개발자에게 TypeScript는 매우 중요한 언어입니다.

2. Next.js

Next.js는 React 기반의 SSR(Server Side Rendering) 프레임워크입니다. Next.js는 SEO에 불리한 React, CSR의 문제점을 해결하여 SEO에 도움을 줄 뿐 아니라 개발자의 작업 환경을 더욱 편리하게 해주는 다양한 기능을 제공합니다.

SEO(검색 엔진 최적화)에 불리한 React와 CSR의 문제점을 해결하는 Next.js

더 나은 사용자 경험과 SEO을 위해 SSR(Server Side Rendering)의 중요성이 점점 높아지고 있습니다. Next.js를 사용하면 이를 손쉽게 구현할 수 있기 때문에 많은 기업에서 Next.js를 선호하고 있습니다.

React는 2013년 Meta에서 개발한 프론트엔드 JavaScript 라이브러리입니다. React는 대표적으로 CSR 방식으로 동작하는 라이브러리입니다. CSR은 Client Side Rendering이란 뜻으로 쉽게 말하자면 우리가 매일 방문하는 웹 페이지를 화면에 보여주는 과정을 브라우저(Chrome 등)가 하는 방식을 말합니다.

CSR 방식은 SPA(Single Page Application)와 연관이 깊습니다. SPA는 하나의 페이지만 사용하는 웹 애플리케이션입니다. 하나의 페이지로도 애플리케이션처럼 풍부한 상효작용을 할 수 있습니다. 사용자가 SPA와 상호작용할 때마다 Ajax 요청으로 필요한 부분만 불러와서 화면에 보여주기 때문입니다.

따라서 사용자가 해당 페이지를 처음 접속 시 데이터가 거의 없는 상태이고 이후 사용자에게 필요한 데이터를 불러와 보여주는 방식이기 때문에 검색 엔진이 참고할 데이터가 부족합니다.

이처럼 CSR 방식은 사용자에게 노출되기 어렵기 때문에 최근에는 SEO를 위해 SSR 방식을 사용하는 경우도 있습니다. SSR(Server Side Rendering)은 CSR과 반대로 웹 페이지를 화면에 보여주는 과정을 서버가 하는 방식을 말합니다. SSR은 사용자에게 보여줄 페이지를 서버가 미리 준비하여 브라우저에 전달하고 노출하기 때문에 CSR과 달리 모든 페이지에 검색 엔진이 참고할 데이터가 존재합니다. 따라서 CSR 방식에 비해 SEO에 유리합니다.

Next.js의 다양한 기능을 활용해 효율적인 React 개발 가능

뿐만 아니라 Next.js는 개발자에 필요한 여러 기능을 제공하여 개발자들이 직접 구현하지 않아도 작업이 가능하게 합니다. 예를 들어, 파일 시스템 기반의 라우팅을 사용하여 페이지를 관리할 수 있으며, 자동 코드 분할을 지원하여 코드를 손쉽게 최적화할 수 있습니다. 이를 통해 React 개발을 보다 효율적으로 할 수 있죠.

3. React Query

React Query는 React 라이브러리로 React 개발을 보다 쉽고 효율적으로 만들어 주며, 코드의 가독성을 높여주는 역할을 합니다. 따라서 주니어 프론트엔드 개발자라면 이러한 React Query의 장점을 이용해 더 나은 코드를 작성할 수 있습니다. 최근 많은 기업이 React Query를 도입하고 있기도 하고요.

설문에 참여한 현업자들 또한 1년 차 프론트엔드 개발자가 React Query를 미리 준비한다면 채용 시장에서의 경쟁 우위를 선점하기 좋은 라이브러리라고 말하기도 했습니다.

유틸리티 함수, 훅 제공부터 데이터 캐싱까지

일반적으로 React를 사용한 웹 애플리케이션에서는 데이터를 주고받기 위해 주로 axios나 fetch 같은 라이브러리를 사용합니다. 이러한 라이브러리를 이용하면 데이터를 받아오고, 상태를 관리하며, 로딩 상태, 에러 처리를 해야 합니다.

그러나 React Query는 이러한 작업을 간편하게 처리할 수 있도록 도와주는 여러 유틸리티 함수와 훅을 제공합니다. 이러한 기능들은 React 개발을 더욱 쉽고 효율적으로 만들어 주며, 코드를 재사용할 수 있게 해줍니다.

React Query의 핵심 기능 중 하나는 데이터 캐싱입니다. 데이터를 주고받은 결과를 캐시로 저장하여, 동일한 요청이 반복되어도 새로운 요청을 보내지 않고 저장되어 있는 데이터를 사용할 수 있습니다. 이는 네트워크 사용량을 줄이고, 애플리케이션 성능을 향상시키는 데 도움이 됩니다.

주니어 프론트엔드 개발자에게
도움이 되는 활동 3가지

이번에는 현직 프론트엔드 개발자가 주니어 프론트엔드 개발자에게 추천하고 싶은 활동으로 꼽아주신 3가지를 소개할게요.

1. 페어 프로그래밍

페어 프로그래밍은 짝 프로그래밍이라고도 하며, 쌍을 이루어 함께 코드를 짜는 프로그래밍 방법인데요. 내가 아는 것을 상대방이 이해할 수 있도록 설명하는 연습, 필드에서 만날 개발자와 원만하게 협업하기 위한 연습을 통해 자연스럽게 기본기를 쌓을 수 있어 코드스테이츠 프론트엔드/백엔드 개발 부트캠프에서도 활발하게 사용하고 있는 방법입니다.

실제 조사에서도 많은 현직 개발자가 페어 프로그래밍은 커뮤니케이션 능력과 같은 소프트 스킬을 향상하는 데 도움이 되며 개발자가 다양한 사고방식과 접근 방식을 배울 수 있도록 도울 수 있다고 답변했습니다. 설문조사 대상자 중 약 90%가 넘는 현직 개발자분들이 페어 프로그래밍이 실제 개발 역량 향상 및 산출물 퀄리티 향상에 도움이 된다고 말씀하셨습니다. 그러나 서로 공통 주제에 대해서 충분히 고민한 다음에 만나서 하는 것이 도움이 된다는 의견이 많았습니다. 적절한 페어 프로그래밍, 솔로 프로그래밍 비중도 8:2 라고 답변한 비율이 가장 높았고요.

이를 통해 페어 프로그래밍의 중요성을 알 수 있을 뿐 아니라 페어 프로그래밍을 잘 수행하기 위해서는 솔로 프로그래밍의 시간이 꼭 필요하다는 것도 알 수 있었습니다.

또한 실무자 입장에서 개발자 간 의견 충돌, 감정 소모 등의 이유로 “피곤한 업무 방식”이라는 평도 있었습니다.

2. 코드 리뷰

코드 리뷰는 무조건 도움이 된다는 의견이 100%로 나왔는데요. 대표적인 이유는 코드 리뷰를 통해 각자가 생산하는 코드를 평가하여, 제품의 질을 높일 수 있고 실제 필드에서도 코드 리뷰를 기반으로 의사소통을 주로 진행하기 때문에 소프트 스킬을 향상하는 데도 많은 도움이 되기 때문이라는 답변이 있었습니다.

코드스테이츠 프론트엔드 개발 부트캠프는 이와 같은 현직 개발자 설문조사 결과를 기반으로 기존 커리큘럼에서 진행하던 코드 리뷰를 점진적으로 확대할 계획입니다.

설문조사에서 언급되었던 장점 외에도 코드 리뷰는 아래와 같은 긍정적 효과가 있어 주니어 프론트엔드 개발자에게 권장하는 활동입니다.

새로운 기술과 아이디어 경험

코드 리뷰는 다른 개발자들의 코드를 검토하고 이해하는 과정에서 동료 개발자들이 적용한 기술이나 코드 스타일을 배우고, 새로운 접근 방식을 이해할 수 있습니다.

개발자 간 존중, 신뢰도 UP

코드 리뷰는 함께 일하는 개발자 사이의 신뢰를 높이는 데 도움이 됩니다. 동료 개발자의 피드백을 수용하고 개선하기 위해 노력하며, 신뢰를 키워갈 수 있습니다. 이를 통해 다양한 경험과 피드백을 받을 수 있으며, 이는 개발자의 실무 역량 및 성장에 큰 도움이 됩니다.

3. 솔로 프로젝트/팀 프로젝트

코드스테이츠 개발 부트캠프는 설립 초기부터 매 기수마다 꾸준히 팀 프로젝트를 진행해 왔습니다. 팀 프로젝트를 통해 협업에 필요한 GitHub 활용 방식과 소프트 스킬을 익힐 수 있기 때문입니다.

소통, 협업 방법을 배울 수 있는 팀 프로젝트

설문조사에 참여한 현직 개발자들 또한 주니어 개발자에게 필요한 활동으로 팀 프로젝트를 1위로 꼽아주셨는데요. 이유로는 팀 프로젝트 과정에서 새로운 관점이나 지식을 배울 수 있고, 다른 개발자와 소통하는 방법을 익힐 수 있기 때문이라고 답해주셨습니다.

개인 역량을 갈고닦을 수 있는 솔로 프로젝트

2위는 솔로 프로젝트가 차지했습니다. 솔로 프로젝트를 진행하면서 자신의 역량을 객관적으로 살펴볼 기회를 가질 수 있어 성장에 도움을 주기 때문이라는 답변이 많았는데요.

코드스테이츠의 프론트엔드/백엔드 개발 커리큘럼은 팀 프로젝트 참여 전 솔로 프로젝트를 먼저 진행하도록 설계하여 수강생 메타인지 향상에 노력을 기울이고 있습니다.

추후 신규 커리큘럼 개편을 통해 이전보다 솔로 프로젝트 비중을 높이고 실무에 필요한 역량을 기를 수 있는 과제도 도입 예정입니다.

프로젝트 경험, 풍부한 포트폴리오 재료

팀 프로젝트, 솔로 프로젝트 진행 경험은 취업 준비 시 개발 포트폴리오를 만들 때도 적극 활용할 수 있습니다.

솔로 프로젝트는 프로그래밍 언어나 기술을 활용하여 자기 아이디어를 실현하는 과정입니다. 프로젝트 결과물을 통해 개인의 개발 역량을 뾰족하게 보여줄 수 있습니다.

팀 프로젝트의 경우 일반적으로 개인 프로젝트보다는 규모가 크기 때문에 더 많은 코드와 기술을 다루게 됩니다. 다른 개발자와 함께 작업을 진행하며 생길 수 있는 문제들을 미리 만나보고, 이를 해결하며 개발 경험을 쌓을 수 있습니다.

이처럼 주니어 개발자라면 다양한 프로젝트 활동을 통해 본인의 개발 포트폴리오를 풍성하게 채워나갈 수 있습니다.

실무 역량, 협업 능력
모두 갖춘 개발자를 꿈꾼다면?

코드스테이츠는 사용자 친화적인 웹 서비스를 만드는 개발자로 거듭날 수 있는 프론트엔드, 백엔드 부트캠프 과정을 운영하고 있습니다. 앞서 소개한 페어 프로그래밍, 개인/팀 프로젝트 활동을 통해 커뮤니케이션 역량을 쌓고 탄탄한 학습 커리큘럼, 데일리 코딩 시간을 통해 문제 해결 능력을 키울 수 있습니다. 프로젝트 결과물로 색깔있는 나만의 포트폴리오까지 만들 수 있죠.

실무 역량과 협업 능력을 골고루 갖춘 프론트엔드 개발자로 성장하고 싶다면 지금 코드스테이츠 부트캠프의 문을 두드려보세요.

_{글 김대윤 Educational Software Engineer (프론트엔드 부트캠프)
편집 조주연 Content Manager}

---