프론트엔드 과제

개발자 취업을 위한 프론트엔드 과제 전형 준비 팁, 5가지만 알면 과제 전형은 프리패스로 합격!
(프론트엔드 과제 유형부터 유의사항까지)

취업을 준비하는 개발자 여러분 안녕하세요!
최근 기업들이 채용공고에 코딩테스트보다 개발 과제 전형을 더 많이 넣고 있다는 사실! 알고 계셨나요?
프론트엔드 과제, 미리 준비하고 싶지만 보안상의 이유로 실제 출제된 문제를 찾아보기 어렵고, 기업마다 전부 다른 유형이 나오기 때문에 준비과정이 막막하죠. 그래서 제로베이스는 현직 주니어 개발자들에게 최근 프론트엔드 과제 출제유형과 준비 시 유의 사항에 대해 자문을 받아왔습니다. 개발자로 취업하기 위해 프론트엔드 과제를 열심히 검색하고 있었다면 아래 글을 꼭! 읽어보고 준비하는 걸 추천드려요.

Chapter 1
프론트엔드 과제 전형이란?

신입 개발자 채용 단계 중 하나인 프론트엔드 과제 전형은 프론트엔드 기술을 활용하여 기업에서 주어진 주제나 요구사항에 따라 웹페이지, 하나의 기능을 구현하는 것을 의미합니다.
위 사진은 당근마켓의 채용공고인데요. 흔히 우리가 알고 있는 채용 프로세스 중 하나였던 코딩 테스트가 사라지고 과제 전형으로 대체된 것을 볼 수 있습니다. 이처럼 최근 기업들은 프론트엔드 개발자를 뽑을 때 과제 전형을 더 많이 활용하고 있습니다.

1-1. 기업은 왜 코딩테스트 대신 과제를 볼까?

기업이 기존의 편리한 코딩테스트 대신 확인 절차가 더 많은 프론트엔드 과제를 채용 전형으로 넣은 이유는 무엇일까요? 기업들이 프론트엔드 과제를 더 선호하는 이유는 간단합니다. 바로 “큰 그림을 그릴 줄 아는” 개발자를 뽑기 위해서죠. 코딩테스트는 알고리즘 문제를 기반으로 하기 때문에 기출문제도 많고, 반복해서 암기하면 원리를 이해하지 못해도 풀 수 있는 문제가 많습니다. 특히 제한된 시간 안에 풀어야 하다 보니 코드를 해석하는 과정보다 결과 도출에만 집중하는 경향이 큽니다.
반면 프론트엔드 과제의 경우 웹 페이지나 특정 기능을 구현하기 때문에 전체적인 개발 과정을 생각해야 합니다. 개발자 채용이 줄어든 요즘, 단순히 개발을 할 줄 아는 사람보다 코드를 어떻게 구성할지 고민하는 사람을 더 필요로 한다는 것을 알 수 있습니다.
결론적으로, 기업은 프론트엔드 과제 전형을 통해 지원자의 이런 능력들을 보고 싶어합니다.

첫째, 기술적 역량

모든 채용 전형에서 지원자의 기술적 역량을 평가하는 것은 당연합니다. 하지만 이력서, 코딩테스트, 면접이 결과를 위주로 기술적 역량을 평가했다면, 프론트엔드 과제 전형의 특징은 과제를 수행하는 과정을 확인한다는 점입니다. 기업은 과제 수행 과정에서 개발자의 프로그래밍, 문제 해결, 알고리즘 등의 기술적 역량과 툴 활용력을 파악합니다. 더불어 실제 기업 서비스와 관련된 과제를 통해 지원자의 업무 이해도를 보기도 합니다. 주어진 과제를 실행하기 위해 필요한 기술과 절차를 제대로 이해하고, 적용할 수 있는지 확인하는 것이죠.

둘째, 창의성

기업은 프론트엔드 과제 전형을 통해 신입 개발자의 창의력과 문제해결 능력을 평가합니다. 평가자는 코드 구현의 전체 과정을 확인하여 지원자의 문제접근 방식과 해결법을 확인합니다. 정답과 형식이 정해진 코딩테스트와 달리 프론트엔드 과제는 개발자의 성향에 따라 다양한 해결법이 나올 수 있습니다. 그래서 프론트엔드 과제를 통해 기존 방식 대신 “창의적인 방법으로 문제해결의 효율성을 높일 수 있는” 개발자를 채용하려는 것이죠.

Chapter 2.
프론트엔드 과제 유형

그렇다면 기업은 어떤 형식의 프론트엔드 과제를 통해 지원자의 역량을 확인할까요?
기업 보안상의 이유로 실제 과제 내용을 밝힐 수는 없지만 대략적인 유형은 파악할 수 있는데요. 제로베이스는 프론트엔드 과제 유형을 크게 2가지로 분류하였습니다.

2-1. 순수 자바스크립트 구현

순수 자바스크립트 (바닐라 자바스크립트) 구현은 라이브러리나 프레임워크 없이 기능을 구현하는 과제입니다. 과제 예시로는 이벤트 할당, 위임, DOM 추가, 제거 등의 기능을 구현하는 경우가 많으며, 도구의 도움 없이 순수 자바스크립트만을 활용해야 합니다. 이 때, 모든 스크립트 코드와 스타일은 직접 작성해야 하는 것이 필수입니다. 그래서 순수 자바스크립트(바닐라 자바스크립트) 구현은 기업이 JS문법의 기초와 SPA의 원리에 대한 지원자의 이해도를 확인하는 과제라고 볼 수 있습니다.

2-2. 라이브러리 또는 프레임워크를 사용한 구현 (React, Vue)

React나 Vue를 활용하여 기능을 구현하는 과제입니다. 단순히 테스트를 위한 구현뿐만 아니라 기업 서비스의 실제 웹페이지와 특정 영역을 구현하는 유형도 있습니다. 기업은 이를 통해 실제 업무 상황에서 지원자의 코드 작성 스타일과 구현 능력을 확인합니다. 프레임워크를 활용한 과제는 깃허브에 작성하는 경우가 있기 때문에 커밋 메시지와 브랜치 관리까지 신경을 써야 합니다. 왜냐하면 프론트엔드 과제의 주요 목적은 기능 구현뿐만 아니라 어떻게 생각하고 구현했는가를 물어보는 것이니까요. 어떻게 신경 써야 하는지는 아래 프론트엔드 과제 준비 방법에서 자세히 확인해보세요!

# 라이브러리를 활용한 프론트엔드 과제 구현 방식

추가적으로 라이브러리 또는 프레임워크를 활용한 기능 구현 방식은 두 가지 방법으로 나눌 수 있습니다.
구체적인 구현 방법과 예시가 궁금하다면 아래 블로그를 참고해주세요!

-> 라이브러리 또는 프레임워크를 활용한 기능 구현 방식 설명_블로그 링크

Chapter 3
프론트엔드 과제 준비방법

앞서 말했듯 기업들은 보안상의 이유로 프론트엔드 과제들을 공개하고 있지 않습니다. 그래서 과제를 준비할 때 코딩테스트처럼 기출문제를 풀 수도 없고, 막연히 과제 주제를 기다리기만 해야하는데요. 하지만 개발자 채용이 어려운 요즘, 준비도 없이 과제를 볼 수는 없죠! 제로베이스가 과제 예시가 없더라도 기업에 맞춰 프론트엔드 과제를 준비할 수 있는 방법을 알려드릴게요.

첫째, 기업에서 자주 사용하는 프로젝트를 살펴본다.

기업에서 자주 사용하는 프로젝트를 통해 기업의 코드 활용방식을 파악합니다. 자주 사용하는 프로젝트의 경우 코드 활용 방식 역시 이전 프로젝트들과 유사하기 때문인데요. 기업이 선호하는 방식을 미리 파악함으로써, 현재 나에게 부족한 부분을 보충하거나 다른 주제 예시들을 찾아보며 준비할 수 있습니다.

둘째, 그 프로젝트를 클론코딩 해본다.

프로젝트를 파악하는 가장 쉬운 방법은 ‘클론코딩’입니다. 클론코딩은 실제 서비스를 따라 만들면서 배우는 것으로 그 안에서 내가 능동적으로 기능을 추가하고, 수정할 수 있다는 장점이 있습니다. 이전 프론트엔드 과제 유형에서 보았듯이 기업들은 지원자에게 완전히 새로운 기능을 창조하는 과제보다 기존 기업의 서비스와 기능을 디벨롭하는 유형의 과제를 출제하고 있습니다. 그러므로 프론트엔드 과제 전형을 준비하는 개발자라면 클론코딩을 통해 기업 서비스 구현 방식의 이해도를 높이고, 익숙함을 기를 수 있습니다.

셋째, 클론코딩 결과를 깃허브에 정리한다.

단순히 클론코딩만 하는 것이 중요한게 아닙니다. 특히 이미 만들어진 서비스를 따라하는 것이기 때문에 그 과정보다 클론코딩 후 결과를 정리하는 것과정이 더 중요합니다. 꼭 클론코딩 이후에 기능 구현의 목적, 과정, 결과를 깃허브에 정리해야 합니다. 이는 실제 과제에서 유사한 문제가 나올 경우 활용해볼 수 있으니 꼼꼼하게 정리하는 것을 추천드립니다.

Chapter 4
프론트엔드 과제 준비 팁 5

프론트엔드 과제 준비를 완료했다면 이제 실제 프론트엔드 과제 준비 시, 주의해야할 부분과 제로베이스만의 팁을 알려드릴게요!

1) 리드미 파일에 정리할 때, 프로젝트 설명서를 자세히 쓴다.

마치 웹페이지를 보고 서술하듯 자세하고 정확하게 쓰는 것이 중요합니다.
더불어 아래 예시들이 들어가면 더욱 좋습니다.

- 프로젝트 흐름도
- 프로젝트 시나리오
- 사용한 기술 스택과 기술 선정 이유

2) 기술적인 고민과 해결방법은 별도의 문서로 작성한다.

모든 내용을 한 문서에 모두 적는다고 생각하지 마세요. 그러면 가독성도 떨어지고 평가자가 놓치는 부분이 생길 수 있습니다. 그러므로 기술적인 고민, 해결방법은 별도의 문서로 작성하여 깃허브 내 첨부하는 것이 좋습니다.

PRV 프로젝트는 시니어 개발자들이 뽑은 가장 정리가 잘 된 프로젝트인데요. 많은 개발자들이 프로젝트를 어떤 방식으로 정리해야할 지 고민일 때, 참고하는 프로젝트입니다. 프로젝트 정리 방식이 고민이라면 깃허브 링크를 통해 확인해보세요

-> PRV 프로젝트_깃허브 링크

3) 테스트 코드를 활용한다.

스토리북으로 컴포넌트 테스트 혹은 Jest와 react testing library로 로직 테스트를 진행하는 방법입니다. 테스트 코드를 작성하면 소프트웨어가 어떻게 작동하는지를 검토할 수 있습니다. 이를 통해 프론트엔드 과제 내에서 놓친 부분과 버그를 방지합니다.

테스트 코드, 방법이 어려워 시도조차 못했거나 귀찮아서 종종 지나쳤다면 위 영상을 참고해주세요! 개발, IT 전문가인 삼평동 연구원들이 알려주는 테스트 코드 작성법 영상을 통해 테스트 코드의 중요성을 직접 확인해보세요.

4) 깃허브의 커밋 메시지와 브랜치도 관리한다.

깃허브의 메시지와 브랜치 관리가 중요한 이유는 지원자가 어떤 식으로 업무를 수행하는지 확인할 수 있기 때문입니다. 기업은 이를 통해 지원자가 실무에서 코드를 관리하는 방식뿐만 아니라 타 개발자와의 협력방식도 파악합니다. 브랜치 관리 방식은 개발자마다 다르지만, 취업 후에는 기업에서 관리하는 방식을 따르는 편입니다.

제로베이스는 그 예시로 ‘우아한형제들’의 개발자들이 깃허브에서 업무를 수행할 때 정해놓은 규칙을 가져왔습니다. ‘우아한형제들’ 프론트엔드 개발자들 역시 작업할 때 브랜치와 커밋 그래프 관리를 강조함을 볼 수 있습니다. 과제이기에 무심코 넘어갈 수 있는 부분이지만, 오히려 기업별 디테일한 약속을 잘 지킨다면 꼼꼼한 인상을 남길 수 있겠죠?

5) 컨벤션을 지키고, 제대로 된 변수명을 작성한다.

가장 기본이지만 프론트엔드 개발자분들이 가장 많이 실수하는 부분이기도 하죠. 기업의 가이드라인을 잘 살펴보시고 항상 더블체크 하는 것 잊지 마세요!

마치며

지금까지 프론트엔드 과제 전형에 대해 알아보았습니다. 개발자 채용 공고가 줄어들면서 취업이 어려워진 요즘, 채용 전형의 난이도도 높아지고 있죠. 이럴 때일수록 기초를 다지고, 각 전형에서 기업이 요구하는 바를 제대로 파악하는 것이 중요하답니다. 프론트엔드 과제 준비 팁을 활용하여 프론트엔드 개발자로 거듭나시길 응원합니다!

혹시 이 글을 보고 개발자 취업이 더 막막하다고 느껴지셨다면 프론트엔드 스쿨을 추천드려요! 제로베이스 프론트엔드 스쿨에서는 프로그래밍 기본기부터 시작해서 개발자 최종 합격 순간까지 한 번에 준비할 수 있습니다. 프론트엔드 스쿨에서 제대로 한 번에 개발자 취업해요!

개발자 취업은 제로베이스

추천 컨텐츠