코스 이미지

[취업스터디/3기] FE 취업 생존 키트 : 채용 과제를 풀어보며 JS 역량 기르기

2020년 마지막 기수 모집중! 10/29(목)일정이 맞지않다면 대기 신청을 해주세요! 할인 쿠폰과 함께 가장 먼저 연락드릴게요!

FE 취업 생존 키트 : 채용 과제를 풀어보며 JS 역량 기르기

기업들은 늘 좋은 FE 개발자를 찾는 게 어렵다고 합니다.

반대로, 지원자들은 열심히 학습해왔는데 막상 실전과 괴리를 느낍니다.

라이브러리와 프레임워크를 잘 익혔더니, 결국 JS 기본기가 중요하다고 합니다.

지금, 채용 시장에선 어떤 FE 개발자를 원하는 걸까요?

실제 25개 기업에서 채용을 위해 사용했던 과제를 풀며

개발 실력 점검 및 부족했던 부분을 빠르게 보완해보세요.

그리고 FE 과제 수행 + 코드 리뷰 과정을 4주간 반복하면서 좋은 FE 개발자로 성장합시다!

🗓 SCHEDULE 일정

  • 스터디 시작: 2020-10-29(목)
  • 스터디 종료: 2020-11-26(목) 총 4주
  • 준비물 및 사용 프로그램:
  • 개인 노트북

    Windows, MacOS 상관 없음
  • Slack

    실시간 채팅 및 Q&A
  • GitHub

    미션 제출 및 코드리뷰
  • School

    프로그래머스 스쿨

⚙️ 4주간 이렇게 배워요

이 스터디는 단순히 책 몇 개를 함께 따라 해보거나, 어떤 강의를 순서대로 함께 듣기만 하지 않습니다. 프로그래머스에서 진행한 프론트엔드 개발자 채용 과제를, 직접 풀어보고 스터디 리더에게 4주간 코드 리뷰를 받으며 진행됩니다.

  • 스터디 전, 실제 채용 과제를 직접 풀어 보며, 실력 점검을 점검하며 채용 과제 수준도 직접 경험합니다.
  • 1~3주 차에는, 사전 모의 테스트와 관련된 미션을 진행하고 코드 리뷰를 받습니다. 3주 동안 반 복하면서 JS 실력을 쌓아갑니다.
  • 4주 차에는, 사전 테스트보다는 조금 더 어려운 테스트를 진행합니다. 코드 리뷰를 통해 최종적으로 실력을 점검해보며 마무리합니다.

실제 채용 과제를 직접 풀어 볼 수 있는 기회!

실전 모의고사를 2회 진행하는 스터디

프로그래머스에서 진행한 실제 25개 기업에서 채용을 위해 사용했던 과제를 공개합니다. 실제 채용 문제를 직접 풀어 볼 수 있는 기회입니다. 실전 과제를 풀어보면서 개발 실력을 점검하고, 부족한 JS 실력을 빠르게 보완합니다.

또한, 2번의 모의 테스트는 개발자 채용 시 사용하는 테스트 환경과 동일한 환경에서 테스트를 진행합니다. 이번 기회를 통해, 실제 채용 과정을 경험해보시고, FE 업계 현황도 파악해보세요.

  • 🧑🏻‍💻 제1회 모의 테스트 (10/22 ~ 10/29)

    실력 점검과 실제 채용 과제 수준 확인하기

    • 프로그래머스에서 3월에 진행한 FE 채용 프로그램에 실제 사용된 과제를 그대로 재현해, 스터디 시작 시점에 풀어봅니다.
    • 이를 통해 실제 테스트 환경에 대한 파악, 어떤 내용의 채용 과제가 나오는지, 또 내 현재 실력은 어떤지 점검합니다.
  • 👩🏻‍💻 제2회 모의 테스트 (11/17 ~ 11/24)

    4주간 나는 얼마나 성장했나, 최종 점검하기

    •미션 수행, 코드리뷰를 토대로 내가 얼마나 FE 실력이 늘었는지 최종 점검하는 테스트를 진행합니다.
    • 이때에도 실제 채용 과제 테스트 환경과 동일한 환경에서 테스트를 진행하지만, 1차 모의 테스트보다는 조금 더 어렵고 다소 복잡해진 과제를 풉니다.

🙆🏻‍♂️운영자가 직접 모의 테스트에 대해 자세히 설명해 드립니다.

🔎 정말 채용에 쓰였던 과제를 공개하는 건가요?

프로그래머스에서 진행한 FE 개발자 채용에 사용된 과제로 진행합니다.

단순히 학습을 위한 과제가 아니라, 실제 25개 기업에서 채용을 위해 사용했던 과제이기 때문에 성공적인 취업(혹은 이직)을 위해 FE 업계 동향을 파악할 수 있습니다. 많은 기업의 채용 공고에서 JS 기본기가 강조된 점에 착안하여 라이브러리나 프레임워크 도움 없이 4시간 동안 오롯이 VanillaJS로 수행하는 과제입니다.

🔎 프로그래머스에서 프론트엔드 개발자 채용을 많이 하나요?

프로그래머스는 개발자 채용을 위해 과제 테스트를 중심으로 운영하고 있습니다.

현재 진행하고 있는 카카오 챌린지를 비롯하여, 다수의 기업과 협업하여 오로지 개발자의 실력으로 취업할 수 있도록 개발자 채용 문화를 새롭게 만들어 나가고 있습니다.

🤷 TARGET 참여대상자

본 과정은 HTML/CSS에 대한 기본 지식은 필수입니다.

JavaScript의 경우 문법 자체에는 익숙한 상태여야 합니다.

웹 페이지 프론트엔드를 구현해본 경험(회사나 스터디 어디서든)이 있으시면 좋고 하나 이상의 JS 기반의 라이브러리 또는 프레임워크를 써본 경험이 있으면 더욱 좋습니다.

  • 성공적인 취업 또는 이직을 위해 업계 동향을 파악하고픈 분

    혼자서 공부만 하다보면 업계 동향까지 파악하는 것은 어렵습니다. 실제 채용 과제를 통해 FE 개발 업계 현황을 파악하고, FE 개발자에게 요구하는 사항을 직접 경험해봅니다.
    실무 경력이 풍부한 스터디 리더를 통해 효율적인 코드 작성법도 알아가세요.
  • VanillaJS로 코딩하는데 어려움을 겪는 분

    모든 라이브러리와 프레임워크 기저에는 JS가 있습니다. JS 기본기가 탄탄하면, 새로운 라이브러리 혹은 프레임워크가 등장하더라도 변화에 빠르게 대응하는 프론트엔드 개발자로 성장할 수 있습니다.
    스터디를 통해서 어떤 부분에서 개발 실력이 부족한지, 확인하고 4주 동안 체계적인 코드 리뷰를 통해 JS 실력을 보완해 보세요!

FE 취업 생존 키트를 열면!

2회의 실전 과제 테스트 + 상시로 진행되는 코드 리뷰

추가적으로 과제를 통해 FE 업계 동향까지 파악할 수 있게 준비되어 있습니다.

한 번 열어 보시겠어요?

궁금한게 있어요!

프론트엔드 개발자를 위한 자바스크립트와 FE 취업 생존 키트,

저는 둘 다필요해 보이는데 뭘 하는게 맞나요?

🧑🏻‍💻 프론트엔드 개발자를 위한 자바스크립트 : 실무에서 웹 개발할때 프레임워크, 라이브러리만 주로 다루다 보니 기본적인 동작 원리가 헷갈려 JS 기본기를 강화하고 싶은 분

🧑🏻‍💻 FE 취업 생존 키트 : 현재 취업을 준비하고 있거나, FE 채용 시장의 트렌드가 궁금하여 실제 채용 과제를 풀어 보며 실력을 점검해보고 싶은 분

🤵 LEADER 스터디 리더

경력이 풍부한 프론트엔드 개발 선배가 이끌어주는 스터디
스터디 리더 문윤기님
문윤기 리더 슬로워크 프론트엔드 리드 개발자

실제 채용에 활용된 과제를 저와 함께 직접 구현하는 스터디입니다. 화면 레이아웃 구성, API 요청과 결과 처리, 이벤트, 상태와 컴포넌트까지 JS 프레임워크 없이 오로지 VanillaJS로 직접 코드를 구현합니다. 이를 통해 JS 기본기를 다지고, 실무에서 실제로 요구되는 능력까지도 알아봅니다.

  • 현. 스티비 프론트엔드 리드 개발자
  • 전. 슬로워크(웹개발실) 웹개발 팀장
  • 프로그래머스 [Vue.js로 데일리리포트 앱 만들기] 강사
  • 프로그래머스 프론트엔드 개발 과제 다수 검수
  • 프론트엔드 개발 관련 교육 경험 다수

실제 과제 평가자도 강력 추천해요 👍

2020 프로그래머스 웹 프론트엔드 데브 매칭 과제 평가자가 추천합니다.

채용에 쓰인 과제를 직접 풀어 보면서, 나의 실력을 정확히 파악할 수 있고 단순히 알고리즘 문제가 아닌 서비스를 개발하면서 생기는 현실적인 문제를 깊이있게 고민하는 경험을 해 수 있습니다.

이런 경험은 실제 컴포넌트를 개발할 때 밑거름이 되어 유지보수가 용이한 컴포넌트를 만들어 볼 수 있는 좋은 기회라고 생각햡니다.

또한, 최근 서버 유지비용과 빠른 랜더링 속도 때문에 웹에서 데이터를 가공하고 표현하는 방식으로 많이 발전하게 되어, 데이터를 잘 다룰 필요가 있는데요. VanillaJS를 잘 이해하고 있다면 데이터의 흐름을 파악하고 효율적으로 다룰 수 있습니다.

📈 4주간의 미션 + 2회 모의 테스트

📖 스터디를 시작하기에 앞서

Chapter 0. 사전 모의 테스트 진행

본격적인 스터디에 앞서, 사전 모의 테스트를 진행합니다. 이를 통해, 자신의 현재 실력을 확인하고 앞으로 스터디에서 무엇을 얻어 갈 수 있을지 고민해 봅니다.

🗓 1주차

Chapter 1. 오리엔테이션 + 레이아웃 문제 해결하기

기본적인 개발 실력을 보여줄 수 있는 레이아웃 문제에 대해서 다룹니다. 반응형 웹 기초와 최신 스펙인 다크 모드에 대해 학습하고, API 요청 모듈을 분리하여 작성하고 요청 결과 처리에 대해 알아보며 기본기를 다집니다.

다룰 내용
  • ✅ 오리엔테이션 : JS 기본기의 중요성
  • ✅ 반응형웹 기초 및 다크모드 기능 알아보기
  • ✅ API 요청 모듈 작성 및 결과 처리

[1주차 온라인 세션] 2020-10-29(목) 20:00 ~

🗓 2주차

Chapter 2. 검색 페이지 문제 해결하기

검색 결과 페이지 구현과 이벤트 처리에 대해서 다룹니다. 이 작업을 통해서 컴포넌트의 상태에 대해 학습하고, 검색 결과 저장 등 유저 편의성을 고려한 코드를 구현해 봅니다.

다룰 내용
  • ✅ 컴포넌트의 상태 설계와 작성하기
  • ✅ 클릭, 스크롤 등 브라우저 이벤트 다루기
  • ✅ 로컬스토리지를 활용하여 데이터, 상태 저장하기

[2주차 온라인 세션] 2020-11-05(목) 20:00 ~

🗓 3주차

Chapter 3. 코드 구조 리팩토링

코드 구조 리팩토링과 테스트 코드 작성에 대해서 다룹니다. 코드를 ES6 module 형태로 변경해 봅니다. API status code에 따라 에러 메시지를 분리하고 API fetch 코드를 수정하는 등의 리팩토링을 통해 이해하기 쉽고 간결하게 코드를 작성해 봅니다.

다룰 내용
  • ✅ ES6 module 형태로 코드 변경해보기
  • ✅ 컴포넌트 메소드 및 Util 함수 분리
  • ✅ API 요청 결과 처리 리팩토링
  • ✅ 코드 검증을 위한 테스트 작성하기

[3주차 녹화 세션] 2020-11-12(목) 20:00 ~

🗓 4주차

Chapter 4. 최종 점검 : 모의테스트 진행 및 코드 리뷰

사전 테스트보다 조금 더 어렵고 복잡해진 과제를 풀어 보고, 얼마나 JS 실력이 향상됐는지 최종적으로 점검해봅니다. 스터디 리더의 세션을 통해 한 번 더 코드를 살펴보며 스터디를 마무리합니다.

다룰 내용
  • ✅ API 요청 방식 및 결과 처리 방식 변경하기
  • ✅ 검색 결과에 대한 정렬, 필터 기능 구현하기
  • ✅ js event를 활용해서 컬럼 갯수 제어하기

[4주차 녹화 세션] 2020-11-19(목) 20:00 ~

*온라인 세션이 뭐에요?: 더 많은 내용을 스터디원들에게 알려드리기 위해, 일주일에 한 시간 정도는 모두 동시접속하여 추가 설명이 필요한 개념에 대해 소개도 받고, 질문답변을 진행하는 시간입니다. 또한, 참가자가 있을 경우 페어 프로그래밍을 진행합니다. 이 온라인 세션은 녹화본을 제공하지만, 실시간성이 중요한 세션이기 때문에 가급적 참여하는 것을 추천합니다.

😘 선배 개발자들이 이 스터디를 추천해요!

리더가 아닌 다른 실무 개발자들도 이 스터디 내용과 진행 방식을 신뢰하고 있어요.

  • 개발자 이선협

    "기업은 업무에 금방 적응할 수 있고 기반 지식이 튼튼한 인재를 원합니다. 그런 인재를 뽑기 위해서 기업은 실제로 하고 있는 업무와 연관된 과제를 통해 파악하고 React, Vue와 같은 도구를 사용하지 않고 VanillaJS를 통해 풀어보게 할 겁니다. 그렇기에 우리가 VanillaJS 기반의 과제를 풀고, 공부하는 것은 FE 개발자로 원하는 회사에 취업하기 위한 가장 빠른 지름길이 될 거라고 생각합니다. "

    이선협 ― Cobalt Inc. 풀스택 개발자, Vue.js Korea 운영진


  • 개발자 김태희

    "Front-end 직군이 각광받고 있는 지금, 수많은 라이브러리와 프레임워크가 쏟아지고 있습니다. JavaScript 자체에 대한 이해와 깊이만 있다면 어떤 것을 쓰느냐는 크게 중요한 문제가 아닙니다. 이미 기업 채용에 사용되었던 문제를 스터디를 통해 차근차근 풀어보는 경험을 통해 JavaScript에 대한 이해, 웹 애플리케이션이 어떠한 설계를 가져야하는지, 어떻게 동작하는지에 대한 성장을 얻을 수 있을 것 입니다."

    김태희 ― ODK Media 개발자

💳 스터디 참여비

4주, FE 취업 생존 키트

2020-10-29(목) ~ 2020-11-27(목)

스터디 리더 문윤기

4주간 이어지는 풍부한 코드리뷰와 미션을 놓치지 마세요.

온라인 카드결제(할부), 무통장 입금 모두 가능합니다.

💵

할인가 350,000원

할인가는 10/1(목) 오후 8시 전까지 결제해야 적용됩니다.

정가 450,000원

우리, 카카오톡 친구해요!

  • 프로그래머스 교육 카카오 채널을 만들었어요. 여기를 눌러, 친구 추가를 해주세요. 신규 교육 과정 소식은 물론 다양한 이벤트 소식까지 가장 먼저 알려드립니다.

실제 수강생들의 후기를 들어보세요


  • 1기 임동준

    나를 성장시키는 세 가지 경험을 할 수 있었던 스터디

    1. 현장으로 연결되는 경험 : 프로그래밍 공부를 하면서 '학습한 지식을 실제 업무에서 어떻게 사용하게 될까?', '현장에서 실질적으로 필요로 하는 역량은 무엇일까?'에 대한 고민 때문에 스터디를 신청하게 되었습니다. 과정을 진행하면서 그동안 학습했던 개념들이 실제 현장에서 어떤 문제를 해결해 나갈 때 쓰일 수 있는지 연결해 볼 수 있었습니다.

    2. 코드리뷰를 통한 성장 : 스터디 리더뿐만 아니라 다른 스터디원분들과도 함께 코드리뷰를 통해 받은 피드백으로 스스로 코드를 리팩토링하며, 각자의 과정을 나누는 경험은 혼자 공부하는 제 입장에서 너무 소중한 경험이었습니다. 코드리뷰를 통해 무의식적으로 반복하던 실수를 줄이고, 더 좋은 코드에 대한 좋은 습관들을 얻어갈 수 있었습니다.

    3. 함께 자라기 : 미션은 각자의 속도로 진행되지만, 온라인 세션을 통해 실시간 소통을 할 수 있어서 좋았습니다. 기술적인 고민에서부터, 진로에 대한 이야기까지 나눌 수 있어서 각자의 경험으로 서로 간에 스며드는 지식의 공유 덕분에 더 큰 동기부여를 얻고 스터디를 끝까지 진행할 수 있었습니다.

    임동준(1기), 프론트엔드 개발자

  • 1기 류한경

    회사에서 혼자 일하는 시간이 길다 보니 늘 하던 대로 개발하게 되고 성장하지 못한다는 생각에 위기감을 느끼고 있었습니다. 그러다 스터디 모집 공고를 보게 되었고 새로운 환경에 저를 노출하여 도전하고 성장하고자 스터디에 참여하게 되었습니다.

    가장 인상 깊었던 부분은 끊임없는 피드백과 코드 리뷰였습니다. 슬랙을 통해 질문과 답변을 빠르게 받아볼 수 있고 스터디원분들이 공유하는 글을 보면서 많은 영감을 얻었습니다. 또한 멘토님과 스터디원분들이 남겨주신 코드 리뷰를 토대로 제 코드를 점진적으로 리팩토링하여 좋은 결과물을 얻을 수 있었기에 한 단계 성장할 수 있는 계기가 되었습니다.

    스터디에 참여한 다양한 개발자들(이미 프론트엔드 개발자로 일하고 계시거나 새롭게 시작하시는 분들)의 어려움이나 고민을 들으며 함께 공감할 수 있는 시간이었고, 스터디가 종료된 이후에도 커뮤니티에 참가하여 지속적으로 성장할 수 있는 좋은 발판을 얻었습니다.

    류한경(1기), 프론트엔드 개발자

  • 1기 홍현의

    올해 하반기를 준비 중인 취준생입니다. FE 개발자의 채용 과제를 통해 기업에서 개발자에게 원하거 나, 기대하는 능력이 무엇인지 궁금했습니다. HTML/CSS, JavaScript를 이용해 작은 프로젝트 하나 구현해본 경험이 없어, 취업하면 어떤 상황에 닥칠지 모른다는 불안감이 있었어요. 그래서 맨땅에 부딪혀보며 해보자! 마음으로 스터디에 참여했습니다.

    실제 스터디에서 멘토님들의 세션 강의와 실시간으로 빠르게 이뤄지는 질의응답, 코드리뷰 덕분에 어려움 없이 학습할 수 있었습니다. 특히 코드리뷰나 온라인 세션을 통해 더 좋은 코드의 기준에 대해서 배울 수 있었고, 제가 스터디 도중 겪은 문제 상황을 해결해나가면서 깊이 있는 이해의 중요성에 대해서 리마인드할 수 있는 시간이 되었습니다.

    홍현의(1기), 취업 준비생

질문 & 답변