채용 절차

1. 서류 제출 : 이력서, 포트폴리오
2. 코테 및 과제 : 코딩 테스트, 과제
3. 면접 : 전화면접, 기술면접, 인성+기술 면접
4. 처우 협의 : 합격 및 처우 협의

1. 이력서

• 포맷과 레이아웃: 간결하고 읽기 쉬운 포맷을 선택
  • 섹션별로 명확한 구분을 유지하여 정보를 정리 (개요 / 경력(및 학력) / 기술 / 프로젝트 및 오픈소스 활동)
• 개요
  • 명확하고 간결하게 자기 소개와 핵심 기술 스택을 제시
  • 목표와 열정을 강조하며, 이력서를 통해 어떤 가치를 제공할 수 있는지 설명
• 기술 스택
  • 주로 사용하는 프론트엔드 기술 스택을 나열 (개발 언어, 프레임워크 라이브러리 등)
  • 각 기술에 대한 경험을 표시하여, 자신의 기술적 역량을 명확하게 전달
• 그 외 주의할 점
  • 전문적이고 신뢰할 수 있는 인상을 주기 위해 문법과 맞춤법에 신경써야 함
  • 이력서를 회사나 직무에 맞게 맞춤형으로 작성하기. 각 회사의 요구사항에 따라 강조할 내용을 조정

2. 포트폴리오

• 다양한 프로젝트 개발: 웹 애플리케이션, 웹사이트, 모바일 앱 등 다양한 플랫폼과 기술을 다룬 프로젝트 개발
  • 지원하려는 회사에서 원하는 기술 스택을 사용하거나, 특정 프로젝트를 끝까지 개발한 경험 필요
  • 프로젝트 설명과 기술스택
• 프로젝트의 목적, 기능, 사용된 기술 스택, 개발한 내용 등을 자세히 설명
• 코드 샘플 및 데모 제공
  • 프로젝트의 핵심 코드 샘플을 제공하여 자신의 코딩 스타일과 능력을 보여줄 수 있어야 함
  • Github 및 실제 배포 URL, 혹은 데모 스크린샷을 제공하는 것 추천
• 주의할 점
  • 포트폴리오에 포함되는 프로젝트는 품질이 높고 완성도가 높아야 함. 따라서 흥미로운 기능이나 독특한 디자인을 갖 춘 프로젝트를 선택하되,
    • 포트폴리오에 포함된 모든 정보와 코드는 정확하고 최신 상태를 유지하는 것이 좋음.
  • 즉, 프로젝트 기능도 끝까지 개발하고 디자인적 요소까지 신경 쓰는게 더 좋음

3. 코딩 테스트

• 코딩 테스트 준비: 코딩 테스트를 위한 준비를 할 때, 온라인 코딩 플랫폼을 활용
• Codility, HackerRank, Leetcode, Programmers, 백준 등의 플랫폼에서 다양한 문제 풀기
• 각 유형별로 다양한 난이도를 초급부터 고급까지 풀면서 문제 유형 익히기 (*자료 구조 공부 먼저)
• 자주 나오는 문제 유형:
  • 알고리즘과 자료구조: 배열, 문자열, 트리, 그래프 등의 자료구조와 그에 관련된 알고리즘 문제
  • 문제 해결 능력: 주어진 문제에 대한 해결 방법을 찾고 구현할 수 있는 능력
  • JavaScript 기초: 자바스크립트의 기본 문법과 객체, 함수, 이벤트 처리 등에 대한 이해
  • 웹: HTML, CSS, JavaScript를 활용한 웹 개발 문제
• 코딩 테스트는 시간 제한이 있기 때문에, 시간내에 효율적인 알고리즘과 코드를 작성하는 능력이 중요

4. 코딩 과제

• 코딩 과제 유형
  • 특정 시간을 주고 기업에서 원하는 서비스 혹은 요구사항을 충족하는 개발 (최소 몇 시간 ~ 최대 일주일)
  • 회사에서 주는 요구사항 지문을 읽고, 요구사항에 있는 기술 스택을 사용해서 특정 기술을 구현
  • 우선 요구사항에 있는 기술 문제를 해결하는것이 제일 중요하고, 테스트 코드, 디자인적 요소까지 고려하면 좋음
• 과제 푸는 방법
  • 이해와 분석: 과제의 요구사항과 목표를 명확히 이해
  • 계획 세우기: 과제를 시작하기 전에 해결 전략을 계획. 어떤 기술을 사용할지, 어떤 기능을 구현할지 등
  • 구현: 코드의 가독성과 유지 보수성을 고려하여 구현.적절한 네이밍 규칙을 사용하고 코드 주석을 추가
  • 테스트: 구현한 코드를 반복적으로 테스트. 모든 경우의 수를 고려하여 코드를 검증하고 버그를 찾아 수정
• 주의할 점
  • 과제의 난이도와 요구사항을 고려하여 시간을 효율적으로 분배하는것이 중요
  • 요구사항을 정확히 이해하고 구현하기 위해 불분명한 부분이 있으면 적절히 질문

5. 전화 면접

• 전화 면접 준비
  • 회사에 대한 기본적인 리서치와 경력 기술서에 작성한 경력과 기술 공부하기
  • 기본적인 기술 문제를 질문하는 경우가 많음 (기초 CS 문제, Javascript 문제, 웹 동작 원리 등)
  • 프로젝트나 경험을 설명할 때 구체적인 세부 정보와 결과를 제공하는 것이 중요
• 기술 질문 대비
  • HTML, CSS, JavaScript에 대한 기본적인 질문, 웹 개발 프레임워크(React, Angular, Vue.js 등)에 대한 이해와 활용 능력, 브라우저 동작 원리에 대한 이해, 반응형 디자인 및 크로스 브라우징에 대한 전략, 성능 최적화와 웹 사이트 속도 개선 전략 등
  • 지원자의 프로젝트 경험에 대한 질문도 할 수 있음: 프로젝트의 구조, 사용된 기술, 어려웠던 점과 그 해결책 등
• 주의할 점
  • 목소리와 말하기의 명확성 중요. 명확하고 자신감있게 대답하기. 조용한 장소에서 통화할 수 있도록 환경을 조성

6. 기술 면접

• 기술 면접은 지원자의 기술적 역량과 이해도를 평가하는 중요한 단계
• 기술 질문 유형: 기본 기술 질문 & 이력서 및 포트폴리오 기술 질문
  • 기본 기술 질문: 프론트엔드 기술에 대한 개념적 질문 (HTML, CSS, JavaScript의 기본 개념, 동작 원리, 최신 웹 표준에 대한 이해), 프레임워크와 라이브러리에 관한 질문, 웹 성능 최적화에 관한 질문 (웹 페이지 로딩 시간 최적화, 리 소스 최적화, 렌더링 최적화), 프론트엔드 개발 도구와 환경에 관한 질문 (Git, 웹팩, Babel과 같은 도구의 사용 방법과 이해도), 알고리즘과 관련된 질문
  • 이력서 및 포트폴리오: 이력서 및 포트폴리오에 적은 기술 스택에 대한 기본적인 개념, “왜” 해당 기술을 사용했는지에 대한 구체적인 이유. (장점, 다른 기술과의 비교, 프로젝트 특성과 맞는 이유 등등), 프로젝트를 개선한다면 어떻게 개 선할 수 있을 지 등
• 주의할 점: 질문에 대한 답변을 명확하게 구체적으로 제공. 프로젝트를 통해 기술적인 이해도를 보여야 함

7. 인성 면접

• 인성 면접은 지원자의 인격과 성격을 평가하는 과정이며, 기술 질문을 함께 할 때도 있음
• 인터뷰 질문 유형
  • 지원자의 성격과 가치관을 탐색하는 질문: e.g.) “가장 큰 강점은 무엇이며, 어떻게 그것을 활용하고 있습니까?”
  • 팀워크와 협업에 관한 경험을 묻는 질문: e.g.) “팀에서 갈등 상황이 발생했을 때, 어떻게 해결했나요?”
  • 도전과 극복에 대한 이야기를 요구하는 질문: e.g.) “가장 어려운 프로젝트는 무엇이었고, 그것을 어떻게 극복했나요?”
  • 자기계발과 성장에 관한 질문: e.g.) “최근에 어떤 기술적 도전에 직면했으며, 그것을 어떻게 극복했나요?”
• 주의할 점
  • 기술 문제를 할 수도 있으니, 기술 면접이 끝나도 계속 공부해야함
    • (HTML, CSS, JavaScript의 기본 문법과 개념, 프론트엔드 프레임워크의 사용법, 알고리즘 등)
  • 인성 면접에서는 진실성과 일관성이 매우 중요함. 본인의 경험과 가치관에 기반한 답변을 제공

8. 처우 협의

• 가장 마지막 단계인 처우 협의는 채용된 후에 연봉과 혜택 등의 조건을 협의하는 과정임
• 준비
  • 시장 평균 연봉 및 혜택, 해당 직무와 회사의 평판 등에 대한 조사
  • 자신의 경력과 기술 수준에 대해 정확히 파악하고, 어떤 수준의 연봉을 요구할 수 있는지 명확히 기준 세우기
• 연봉 협의: 첫 연봉 제안은 항상 협상이 가능하므로, 너무 빠르게 받아들이지 말고 신중히 고려
  • 연봉 협의 시에는 자신의 역량과 경험을 강조하고, 시장 평균 연봉을 기준으로 적절한 수준을 요구
• 혜택 및 복지 협의: 회사가 제공하는 복지 혜택에 대해 자세히 알고, 자신의 요구와 필요에 맞게 협의
• 주의할 점
  • 너무 과도한 요구는 부담스러울 수 있으므로, 현실적인 요구를 제시
  • 상대방의 입장을 이해하고 존중해야함. 양쪽 모두가 만족할 수 있는 해결책을 찾는 것이 중요

9. Next.js 포트폴리오

1. 프로젝트 만들기 :
   • Next.js를 이용한 프 로젝트 만들기
   • 완성도, 정확성 높게
2. Github 관리 :
   • Next.js 관련 프로젝 트 Github에 올리기
   • 관련 오픈소스 기여
3. 블로그 관리 : Next.js 관련 블로그 작성
4. 포트폴리오 작성 : Next.js 기술 강조해 포트폴리오 작성

9.1 Next.js 프로젝트 만들기

• 자신의 관심 분야나 전문성을 고려하여 프로젝트 주제를 선정
  • 웹 애플리케이션, 다양한 기술 스택을 보여줄 수 있는 프로젝트, 오픈 소스 기여하기
  • Next.js를 이용한 프로젝트를 만들때는 Next.js의 기술을 최대한 활용할 수 있는 프로젝트 작업하기
    • (SSR, SSG, ISR, App router, Server Actions 등 여러가지 기술 사용해보기)
• 하나를 만들더라도, 완성도 있는 프로젝트로 작업하기
• 프로젝트의 모든 기능이 정상적으로 작동할 수 있도록 버그 최소화, 테스트 필수
• 디자인을 고려해서 프로젝트 작업하기. UI/UX에도 최소한의 신경쓰기
• README 정리해서 프로젝트 사용 기술 스택, 프로젝트 기능 설명, 작업의도 등 작성
• 변수화 함수명은 명확하고 가독성있게 작성하기
• Commit 메세지는 명확하고 간결하게 작성하기

9.2 Github 관리

• Next.js 관련 프로젝트 Github에 올리기: Next.js를 활용하여 완성도 있는 프로젝트를 선정
  • 항상 README 관리하기: 프로젝트의 목적, 사용 방법, 기술 스택 등을 설명하는 README.md 파일을 작성
  • 커밋 메세지 및 코드 관리하기: Git을 활용하여 코드를 관리하고, 정기적으로 커밋을 수행하여 작업 내역을 관리
• Next.js 관련 오픈소스 기여하기: Next.js와 관련된 오픈소스 프로젝트를 탐색하고, 기여할 수 있는 프로젝트를 선정
  • 프로젝트의 Issue Tracker를 확인하여 해결할 수 있는 이슈를 찾고 기여하기, 수정한 내용을 기반으로 Pull Request 를 작성하고, 관리자와 협업하여 코드를 반영
• Github 관리하기: Github를 통해 자신의 개발 역량과 프로젝트 경험을 나타내기
  • 정기적으로 Github에 커밋을 하여 잔디 심기 (성실성과 열정 어필)
  • 다만, 잔디를 심기 위해 무의미한 커밋은 지양. 코드의 의미 있는 변경사항에 대해서만 커밋 하도록 노력

9.3 Next.js 관련 블로그 작성

• 꾸준한 블로그 업데이트: Next.js 관련 블로그를 꾸준히 작성하여 성실함을 어필
• 적절한 빈도: 블로그를 자주 업데이트하는 것이 중요하지만, 퀄리티를 유지하기 위해 일정한 빈도를 유지하는 것이 좋음
  • e.g. 매달 한 두번 정도 관심있는 기술에 대한 블로그 업데이트
• 관심 있는 주제 다루기: Next.js를 중심으로 자신이 관심 있는 주제를 다양하게 다루기.
  • e.g. Next.js 13 알아보기, Next.js를 이용한 디자인 시스템 구축, 성능 최적화, FE 최신 트렌드에 대한 이해 등
• 경험 및 노하우 녹여내기: Next.js 프로젝트를 진행하면서 얻은 문제 해결 과정이나 새로운 기술을 도입한 경험 등 공유
• 작성할 수 있는 Next.js 관련 주제들:
  • Next.js 프로젝트 구현 방법 (페이지 라우팅, 데이터 가져오기, 스타일링 등)
  • Next.js 프로젝트 최적화하기
  • Next.js로 실제 토이 프로젝트 구현하기
  • Next.js 공식 도큐 정리하기 등등

9.4 포트폴리오(이력서) 작성

• 포트폴리오 내용 구성: 프로젝트 설명, 디자인 및 사용자 경험, 코드 샘플 및 기능 설명, 링크 및 데모
• 명확하고 구체적인 표현: 프로젝트에서 겪은 어려움, 도입한 기술, 그리고 얻은 결과를 구체적으로 기술
• 오타 및 맞춤법 체크
• 다른 이력서 참고 및 수정: 다른 사람들의 좋은 이력서를 참고하여 워딩을 적절히 수정
  • 지속적으로 이력서를 업데이트하고 수정하는 것이 중요. 새로운 프로젝트나 기술 스택을 추가할 때마다 이력서 업데이트
• 포트폴리오로 정리하기: 각 프로젝트에 대해 명확하고 간결한 설명을 추가(프로젝트의 목적, 주요 기능, 사용된 기술 스택 등을 자세히 기술)
• 기술적인 포인트 강조: Next.js의 특징 및 기술 (SSR, CSR 구현, 라우팅 및 데이터 통신 방법, 성능 최적화 전략 등)을 구체적으로 설명
• 프로젝트의 완성도와 역량 강조: 각 프로젝트의 완성도와 실제 사용자 피드백을 기록하여 포트폴리오에 추가
  • 프로젝트 개발 중 발생한 문제와 이를 해결한 과정을 상세히 기술하여 프로젝트의 신뢰성과 개발 역량을 강조

9.5 포트폴리오 예시

9.5.1 나쁜 예시

• Next.js와 Supabase를 사용하여 숙박 공유 서비스를 만들었습니다. 많은 기술을 사용했고 좋은 결과를 얻었습니 다.
• Next.js를 사용하여 블로그 웹 애플리케이션을 개발했습니다. 많은 어려움을 겪었지만 해결했습니다.

위 예시는 너무 일반적이고 구체적인 내용이 부족함. 어떤 기능이 추가되었는지, 어떻게 사용자 경험이 개선되었는지 등에 대한 정보가 없음. 또한, 구체적인 기술 스택이나 어떤 결과를 얻었는지에 대한 정보가 부족

9.5.2 좋은 예시

• Next.js 및 Supabase를 활용하여 숙박 공유 서비스를 개발했습니다. SSR을 통해 초기 로딩 속도를 최적화하고, ReactQuery을 이용하여 데이터 로딩을 관리했습니다. 결과적으로 페이지 로딩 시간을 30% 개선하고 사용자 이탈률을 15% 감소 시켰습니다.
• Next.js를 사용하여 블로그 서비스를 개발하였습니다. 다만, 초기 로딩 속도가 너무 느려서 사용자 경험이 나쁘다고 판단해, 각 페이지에 SSR을 적용하여 초기 로딩 속도를 최적화했고, 자주 변경하 지 않는 페이지는 ISR를 사용해 적절한 캐싱을 적용했습니다. 또한, 프로젝트 페이지에서는 프로젝트의 상세 정보와 데모 링크를 제공하여 사용자에게 더 나은 경험을 제공했습니다. 결과적으로 방문자 수를 50% 증가시켰고, 이전에 비해 사용자 유지율이 15% 이상 향상되었습니다.

10. 준비할 것 정리

• 원하는 회사 파악: 관심있는 도메인, 문화등을 기반으로 원하는 회사 리스트업 & 필요한 기술 스택과 회사가 원하는 인재상 파악
• 기술 스택 익히기: 필요한 기술 스택을 파악하고, 해당 기술들을 심층적으로 학습 (e.g. JavaScript, HTML, CSS, React.js, Vue.js, Angular 등)
• 프로젝트 개발: 위에 정한 기술스택으로 포트폴리오를 향상시키기 위해 개인 프로젝트나 오픈 소스 기여
• 코딩 테스트 및 알고리즘 공부: 알고리즘과 데이터 구조에 대한 기본적인 이해를 키우고, 코딩 테스트를 준비 (Leetcode, HackerRank, Codility, Programmers)
• 이력서 및 포트폴리오 작성: 이력 및 프로젝트를 기반으로 효과적인 이력서와 포트폴리오를 작성
• 면접 준비: 기술적인 질문에 대비하여 주요 기술과 프로젝트에 대한 깊은 이해를 갖추고, 자신의 경험과 역량을 잘 전달할 수 있도 록 연습
• 커뮤니티 및 네트워킹: 프론트엔드 개발자로서 커뮤니티에 참여하고, 다른 개발자들과 교류하며 지식을 공유 (세미나, 컨퍼런스, 스터디)

11. 뽑히는 기준

• 기술적인 완성도 : 비즈니스의 어떤 요구조건을 정해진 기한 내에 맞춰서 기능을 구현할 수 있는 수준
• 좋은 동료를 찾는 것이기에 팀에 긍정적인 영향력을 끼칠 수 있는 지
  • 동기부여 자체도 어떠한 일에서 스스로 얻을 수 있는 지
• 라이브코딩과 면접
  • 라이브코딩 : 지원자가 갖고있는 기술적 역량을 검증,
    • 간단한 컴포넌트를 개발해보는 방식,
    • 완성도보다는 개발하는 과정에서 지원자의 사고하는 방식, 문제를 해결하는 접근방식,
    • 그 과정에서 어떤 소통방식등을 검증
  • 면접 : 협업 능력과 소통 능력, 그 외 개인만읜 어떤 특출한 장단점을 파악

주로 하는 질문 (커리어, 포텐셜, 협업 능력에 대한 질문)

• 커리어 : 명확한 커리어 목표를 달성하게 한 로드맵 등
• 포텐셜 : 개발을 얼마나 좋아하는지에 대한 검증
  • 얼마나 많은 시간과 비용을 투자하는지에 대한 부분 등
  • 부트캠프 등의 학원 커리큘럼이 아니라, 자기 삶을 개선하고 자기 주변 사회문제를 해결한 경험, 나아가 그것을 제품까지 연결해본 경험
  • 또 제품이 출시되고, 사용자로부터 피드백을 받아서 그 피드백으로 제품을 개선해봤는지
  • 하나의 기술이라도 완벽하게 이해하고 더 잘 활용하기 위해 더 깊게 학습해봤는지
• 협업 능력 : 팀 프로젝트나 어떤 교우관계 등 리더적인 성향인지 팔로우적인 성향인지, 어떤 계획을 세우고 행동하는지 등
  • 리더형을 선호하는 경향이 많음, Top-Down 방식보다 Bottom-Up 방식의 리드가 많기 때문
  • 주도적으로 아이디어를 제시하고, 의견을 제시해서 아이디어와 의견을 팀으로부터 평가받고 적용할 수 있는지
  • 조직에 따라 팔로워형이 선호되기도 한다. (강한 리더 하에 리더의 성과가 팀의 성과인 경우)
• 소통 능력 : 소통이란 것이 꼭 말로만 하고, 친화력이 있는 것만이 전부가 아니다.
  • 누구는 말로 소통을 잘 할 수 있지만, 어느 누구는 텍스트를 통한 소통을 잘하는 경우가 있다.
  • 말로 하는 부분은 부족하다고 솔직히 인정하고, 자기가 생각을 정리해서 글로 하는 소통을 어필하는 것도 좋다.
  • 소통 능력이 부족하면? e.g. 소통 능력은 조직 안에 들어가서 조직 적응을 하면서 배우겠다.
  • 다만, 모든 것을 솔직하게 말한다고 꼭 좋은 결과가 있는 것은 아니다.
  • 지원자가 자신 스스로 어떤 사람인지는 객관적인 점검이 필요하다.
• 핵심 기술 역량 : 비즈니스 문제를 제한된 시간 내에 본인이 갖고 있는 기술적 역량으로 해결가능한지 여부

다양한 서비스나 본인만이 갖고 있는 아이디어를 직접적으로 제품을 구현하는 과정에 있어서 많은 문제를 맞이한다. 그 문제를 해결하는 과정에서 스스로가 고민하고, 조사하고, 학습하는 문제해결과정을 많이 겪어봐야 한다. 따라서 어떤 기술을 학습한다기 보다, 어떤 기술을 사용해서 제품을 만들어간다에 초점을 맞춰야 한다.