우리 같이 입어요! 인프런 후드티 💛
Thumbnail
추석 앵콜 할인 20% 중(D-5)
개발 · 프로그래밍 웹 개발
파이널 코딩 테스트 : 프론트엔드
87명이 수강하고 있어요.
20% 330,000원 264,000원

월 52,800원

5개월 할부 시
지식공유자 : The Oreum
총 94개 수업˙총 16시간 14분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
폴더에 추가 150 공유
중급자를 위해 준비한
[웹 개발, 취업 · 이직] 강의입니다.

실제 기업에서 출제되는 Front-End 코딩 테스트를 참고하여 제작된 10가지 문제를 함께 풀어보며 2차 코딩 테스트(구현 테스트)를 완벽하게 대비해 봅시다!

✍️
이런 걸
배워요!
2차 코딩 테스트(구현 테스트) 대비
HTML, CSS, JS 웹/앱 페이지 구현
Selenium
CyPress

frontend codingtest final

[검색 최적화를 위한 텍스트입니다]

실제 기업에서 출제되는 Front-End 코딩 테스트를 참고하여 제작된 10문제를 함께 풀어보며
2차 코딩 테스트(구현 테스트)를 대비할 수 있는 강의입니다.

프론트엔드 개발자 코딩 테스트!
왜 모의고사가 필요할까요?

1차 코딩 테스트인 '알고리즘 테스트'의 경우,
대비할 수 있는 강의, 웹 사이트, 모의 테스트 등을
쉽게 찾아볼 수 있습니다.

하지만 2차 코딩 테스트(구현 테스트)의 경우,
"공개된 출제 문제를 찾아보기 힘들어요."
"기업마다 어떤 문제가 출제될지 알 수 없어요."
"어떤 코드를 작성해야 가산점이 있는지 모르겠어요."
"나의 실력을 정확히 알 수 없어서 뭐부터 준비해야 할지 잘 모르겠어요!"

그/래/서
'파이널 코딩 테스트 : 프론트엔드'를 준비하였습니다!

10개의 2차 코딩 테스트 예제 문제를 함께 풀어보면서
구현 테스트에 대한 감을 잡을 수 있습니다.

보통 개발자의 취업 프로세스는 다음과 같습니다.

이력서 제출 → 1차 코딩 테스트 → 2차 코딩 테스트
→ 실무 면접 → 임원 면접 → 최종 합격

코딩 테스트 1차에서는 기본 소양을 알아보는 알고리즘 코딩 테스트를,
2차에서는 실무 능력을 알아보기 위한 과제를 제출합니다.

2차 코딩 테스트에서 '과제 구현'이란
정확히 어떤 것일까요?

실무 능력을 알아보기 위한 과제로는
보통 UI 디자인과 기능 명세를 주고
똑같이 구현하라는 문제가 출제됩니다.

주어진 과제를 구현하고 제출하면,
면접에서는 코드를 왜 그렇게 작성하였는지,
코드 구현에는 어떤 어려움이 있었고, 어떻게 극복했는지 등을
인터뷰하게 됩니다.

그렇다면 우리에게는 어떤 대비가 필요할까요?
✅  실제 기업에서 출제되는 유사 내용의 문제 풀어보기
✅  난이도별 학습(기업마다 문제 난이도가 상이하기 때문에)
✅  스스로 어떤 부분이 취약한지 체크
✅  반복 학습을 통한 Front-End 구현의 자신감 얻기

본 강의에서는 현직 Front-End 개발자와 함께
다양한 난이도로 구성된 10개의 예제 문제를 하나씩 차근차근 풀어보면서
스스로 어떤 부분이 취약한지 체크해보고,
페이지 구현에 대한 자신감을 얻으실 수 있습니다.

[강의 시뮬레이션]
1. 노션 페이지에서 문제 UI 디자인과 요구사항 명세를 확인한다.
2. 제공된 피그마 링크와 강의 자료를 활용하여 직접 코드를 작성해본다.
3. 강의 영상을 보면서 현직 개발자가 작성한 코드를 확인하고 문제점을 보완한다.

[파이널 코딩 테스트 강의 3/줄/요/약]
- 프론트엔드 개발자 취업/이직 준비
- 페이지 구현에 대한 자신감
- 디자이너와의 협업(in Figma)

본 강의에서는 예제의 UI 디자인 이미지와 함께 Figma(피그마) 링크가 제공됩니다.
Figma에서 디자이너가 디자인한 결과물의 픽셀 간격, 폰트 사이즈, 색상 코드 등을
직접 확인해가며 효율적인 협업을 연습해 볼 것입니다.

[Q&A]
Q. 프론트엔드 개발자 취업시 2차 코딩 테스트 대비는 필수인가요?
2차 코딩 테스트에서 어떤 난이도의 문제가 출제될지 알 수 없기 때문에
최대한 많은 예제 문제/튜토리얼을 경험해보시는 것이 좋습니다 :)

Q. Windows/MacOS 개발 환경을 제공하나요?
네, Windows, MacOS 모두 원활하게 수업을 들으실 수 있습니다 :)

Q. 어떤 코드 에디터를 사용하나요?
본 강의는 Visual Studio Code로 수업이 진행됩니다.

수강생 여러분들이 더 편리하게 공부하실 수 있도록
Notion 페이지 링크, 강의 자료(이미지 소스) 등 강의 수강 시 필요한 모든 것을 제공합니다.

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
프론트엔드 개발자를 준비하는 취준생
이직을 준비하는 프론트엔드 개발자
페이지 구현에 대한 자신감을 얻고 싶은 분
디자이너와 현업에서 어떻게 협업하는지 알고 싶은 분
📚
선수 지식,
필요한가요?
HTML
CSS
Javascript

안녕하세요
The Oreum 입니다.
The Oreum의 썸네일

더 오름은 제주코딩베이스캠프의 프리미엄 브랜드로 주로 실무, 취업과 연관된 강의를 제작하고 있습니다.

제주코딩베이스캠프에서 이론적인 지식을 획득하셨다면, 더 오름의 실전 강의들을 통해 포트폴리오와 실무 능력들을 모두 가져가세요! 

" 2%를 채우기 위한 여러분의 집념과 열정을 응원합니다! "

공동 지식공유자: 제주코딩베이스캠프의 썸네일 Jaehyun Han의 썸네일 Hojun Lee의 썸네일 Bonfire의 썸네일
커리큘럼 총 94 개 ˙ 16시간 14분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 프로젝트 깃헙과 피그마 링크, 면접 질문, 포트폴리오 템플릿
깃헙과 피그마 링크
면접 질문
포트폴리오 템플릿 미리보기
node js 환경설정 08:08
섹션 2. 파코테 1 - 최신 영화 PreView Page(★★☆☆☆)
프로젝트 개요 및 환경설정 미리보기 05:43
HTML 작성 19:20
CSS 작성 - 1부 14:13
CSS 작성 - 2부 14:53
CSS 작성 - 3부 14:11
섹션 3. 파코테 2 - 이미지 캐러셀 Page(★★★☆☆)
프로젝트 개요 및 html 구조 08:48
캐러셀 구현 전략과 style 12:51
style - 1부 09:56
style - 2부 16:19
스크립트 - 버튼 기능 구현 13:09
스크립트 - 이미지 업로드 기능 구현 13:35
스크립트 - 마무리 14:22
섹션 4. 파코테 3 - 영화 별점 평가하기(★☆☆☆☆)
프로젝트 개요 및 html 구조 미리보기 12:45
reset.css 파일에 추가해야할 코드가 있습니다.
css 스타일링 - 1부 13:08
css 스타일링 - 2부 14:24
스크립트 - 좋아요 버튼 14:44
스크립트 - 별점기능 초기화 09:30
스크립트 - 별점 hover 이벤트 10:47
스크립트 - 별점 이벤트 마무리 18:46
섹션 5. 파코테 4 - 뮤직 플레이(★★★★★)
프로젝트 개요 및 환경설정 11:06
뮤직플레이 다이어그램(이미지)
유틸리티 함수 작성 10:57
인트로 컴포넌트 작성 11:57
탭버튼 컴포넌트 작성 16:47
topMusics 컴포넌트 작성 24:36
searchView 컴포넌트 작성 13:46
playList 컴포넌트 작성 17:05
playList 컴포넌트 완료 06:18
playView 컴포넌트 작성 16:30
reset.css 파일에 추가해야할 코드가 있습니다.
스타일 작성 13:53
스타일 작성 마무리 및 코드 오류 수정 12:37
마크업 보충 - 메인화면1 13:05
마크업 보충 - 메인화면2 21:25
마크업 보충 - 리스트,검색화면 13:08
마크업 보충 - 플레이뷰 15:57
섹션 6. 파코테 5 - 구글 드라이브 클론(★★★★☆)
요구사항 확인 및 환경설정 08:04
구글 드라이브 클론 다이어그램(이미지)
헬퍼&로딩 컴포넌트 스크립트 10:14
브래드크럼 스크립트 14:38
finder&api 스크립트 09:14
album 컴포넌트 스크립트 12:24
스타일링&오류체크 08:36
마크업 보충 - 1부 14:46
마크업 보충 - 2부 07:35
섹션 7. 파코테 6 - 카드 게임(★★★☆☆)
프로젝트 개요 및 html 구조 08:11
컨테이너 & 타이틀 스타일 09:07
카드 스타일 14:20
스크립트 구현 전력 08:59
스크립트 - 카드 판별 로직 10:06
스크립트 - 카드 랜덤 생성 11:11
섹션 8. 파코테 7 - 무인 자판기(★★★☆☆)
프로젝트 개요 및 html 구조 13:03
html 구조완성 및 스타일 연결 06:32
음료수 리스트 스타일림 15:28
잔액 입금 획득 스타일림 12:05
자판기 스타일 끝 09:45
나의정보&모바일 대응 스타일 마무리 11:19
콜라 제네레이터 스크립트 12:45
버튼 스크립트 13:05
아이템 선택 스크립트 15:49
획득버튼 스크립트 11:22
섹션 9. 파코테 8 - MBIT 테스트지 만들기(★★★☆☆)
프로젝트 개요 및 환경설정 08:26
html 구조 11:41
express 설정 08:21
인트로 스타일 09:01
문항 스타일 08:41
결과 스타일 15:22
문항 생성 스크립트 14:02
문항 스크립트 완성 08:55
결과 스크립트 완성 15:21
섹션 10. 파코테 9 - 퍼즐 게임 구현(★★★★☆)
HTML 작성 05:08
CSS 작성 10:26
문제 풀이 아이디어 01:48
JS - 기본 기능 구현 12:07
JS - 퍼즐이동 구현(1) 11:43
JS - 퍼즐이동 구현(2) 15:47
코드리뷰 및 수정 04:12
섹션 11. 파코테 10 - 레스토랑 예약 시스템 구현(★★★★☆)
HTML 작성 07:48
CSS 작성 - 1부 13:25
CSS 작성 - 2부 07:54
JS - 테이블 기능 구현 17:30
JS - 점유 구현 11:29
JS - 정렬 구현 03:31
코드리뷰 및 수정 04:11
섹션 12. Q&A 답변 세션(글)
Q&A 답변 모음
강의 게시일 : 2021년 07월 26일 (마지막 업데이트일 : 2021년 08월 10일)
수강평
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
추석 앵콜 할인 20% 중(D-5)
20% 330,000원 264,000원

월 52,800원

5개월 할부 시
폴더에 추가 150 공유
지식공유자 : The Oreum
총 94개 수업˙총 16시간 14분
평생 무제한 수강
수료증 발급 강의
입문 초급 중급이상 대상
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스