Thumbnail
개발 · 프로그래밍 기타 (개발 · 프로그래밍)

파이널 코딩테스트 : 프론트엔드 대시보드

(4.5)
11개의 수강평 ∙  370명의 수강생
330,000원

월 66,000원

5개월 할부 시
지식공유자: The Oreum
총 125개 수업 (22시간 13분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

중급자를 위해 준비한
[프론트엔드, 취업 · 이직] 강의입니다.

실제 기업에서 출제되는 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%를 채우기 위한 여러분의 집념과 열정을 응원합니다! "

 

︎ 더 오름 로드맵

image

공동 지식공유자: 제주코딩베이스캠프의 썸네일 -J-의 썸네일 Hojun Lee의 썸네일 Bonfire의 썸네일
커리큘럼 총 125 개 ˙ 22시간 13분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 프로젝트 깃헙과 피그마 링크, 면접 질문, 포트폴리오 템플릿
섹션 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:56
스크립트 - 버튼 기능 구현 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. 추가 문제 - 바닐라 JS로 SPA 만들기 및 API 비동기 통신 : 스토어 페이지 만들기(★★★★★)
문제 관련 링크 모음
문제 설명 미리보기 06:54
프로젝트 개요 08:42
공통 CSS 작성 10:05
url이동을 위한 history 04:14
페이지별 렌더링 원리 02:55
상품 목록 페이지(ProductPage)와 상품 상세 페이지(ProductDetail) 연결 13:29
파라미터 처리 07:47
fetch 05:07
기본 정보 로드 06:52
상품목록 컴포넌트 구현 16:49
좋아요 버튼 만들기 및 라우트 기능 고치기 07:27
[공지] 안내드립니다.
좋아요 기능 구현하기 12:58
할인 금액 표시 및 상품 목록 페이지 완성 11:04
컴포넌트 추상화 13:01
컴포넌트 상태 만들기 14:07
스타일 가져오기 05:31
상품 상세 페이지(ProductDetailPage) 시작, Component 생성 방식 변경 13:23
상품 상세 페이지(ProductDetailPage) 상세 정보 section구현 16:36
쪼끔 불편한게 있습니다. 05:45
상품 상세 페이지(ProductDetailPage) 상세 정보 section구현 (2) 23:39
상품 상세 페이지(ProductDetailPage) 상세 정보 section구현 (3) 14:34
상품 상세 페이지(ProductDetailPage) 상세 정보 section구현 : 옵션이 있는 경우(1) 12:09
상품 상세 페이지(ProductDetailPage) 상세 정보 section구현 : 옵션이 있는 경우(2) 17:44
상품 상세 페이지(ProductDetailPage) 상세 정보 section구현 : 옵션이 있는 경우(3) 25:33
상품 상세 페이지 UI 완성 21:15
장바구니 페이지 완성(장바구니 추가, 바로 구매, 쿠폰 적용 기능 구현) 01:00:10
섹션 13. Q&A 답변 세션(글)
Q&A 답변 모음
강의 게시일 : 2021년 07월 26일 (마지막 업데이트일 : 2023년 02월 15일)
수강평 총 11개
수강생분들이 직접 작성하신 수강평입니다.
4.5
11개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
oh thumbnail
5
코딩 테스트는 안보지만... 웹 페이지 제작 연습하고 싶어서 샀는데 꽤 괜찮은 것 같습니다. 감사합니다.
2021-10-21
로날루영 thumbnail
5
좋은강의 감사합니다.
2021-11-15
hwk thumbnail
5
와... 조금 비싸도 사봤는데... 이 실력으로 코테를 보려고 했던 제가 너무 부끄러워집니다ㅠㅠ 중간까지 들었는데 너무 만족스러워요... 저는 어느정도 구현에 자신이 있다고 생각하고 마지막으로 이 강의를 들어본건데, 문제를 마주하는 순간 생각보다 막막하더라구요... 그래서 초반 강의에서는 많이 헤맸습니다ㅠ 점차 진행하면서 어떤식으로 구현을 해야하는지 순서가 보이면서 속도가 붙기 시작했어요. 전보다는 확실히 주관있는 코드가 짜이는 것 같아요! 비싸지만 돈 값하는 강의라고 생각합니다!! 프론트엔드 개발자 준비하시는 분들은 후회 안하실거예요!
2021-09-23
123456ghghgh thumbnail
5
좋은강의 감사합니다
2021-10-19
찌니 thumbnail
5
WoW~!! 와디즈 펀딩으로 구매해서 수강 중인데 너무 좋네여ㅠㅠ 아직 완강은 못했지만..^^7 완강까지 달려볼께요 ㅎㅎㅎ
2021-10-19
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!