Thumbnail
BEST 개발 · 프로그래밍 교양 · 기타

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

(4.6)
10개의 수강평 ∙ 322명의 수강생
330,000원

월 66,000원

5개월 할부 시
지식공유자: The Oreum
총 118개 수업 (19시간 17분)
수강기한: 무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
중급자를 위해 준비한
[취업 · 이직, 프론트엔드] 강의입니다.

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

공동 지식공유자: 제주코딩베이스캠프의 썸네일 -J-의 썸네일 Hojun Lee의 썸네일 Bonfire의 썸네일
커리큘럼 총 118 개 ˙ 19시간 17분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 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. 추가 문제 - 스토어 페이지 만들기(API를 활용한 SPA 만들기)(★★★★★)
문제 관련 링크 모음
문제 설명 미리보기 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
섹션 13. Q&A 답변 세션(글)
Q&A 답변 모음
강의 게시일 : 2021년 07월 26일 (마지막 업데이트일 : 2022년 11월 28일)
수강평 총 10개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.6
10개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
hwk thumbnail
와... 조금 비싸도 사봤는데... 이 실력으로 코테를 보려고 했던 제가 너무 부끄러워집니다ㅠㅠ 중간까지 들었는데 너무 만족스러워요... 저는 어느정도 구현에 자신이 있다고 생각하고 마지막으로 이 강의를 들어본건데, 문제를 마주하는 순간 생각보다 막막하더라구요... 그래서 초반 강의에서는 많이 헤맸습니다ㅠ 점차 진행하면서 어떤식으로 구현을 해야하는지 순서가 보이면서 속도가 붙기 시작했어요. 전보다는 확실히 주관있는 코드가 짜이는 것 같아요! 비싸지만 돈 값하는 강의라고 생각합니다!! 프론트엔드 개발자 준비하시는 분들은 후회 안하실거예요!
2021-09-23
js be thumbnail
코딩실력이 어느정도 된다고 생각하시는 분들한테는 비추에요. 별 3개정도 되는 가벼운 예제들은 괜찮아요. 크게 어려울게 없으니까. 근데 별 5개 붙여놓은 애들 강의는 별로에요. 코딩 테스트라는게 주어진 조건과 기능을 구현하는 건데 강의에서 "이건 무슨무슨 일을 하는 클래스에요. 나중에 쓰니까 이해가 안돼도 넘어가세요." 이런 식의 설명이 좀 많아요. 이건 강의가 아니죠. 그냥 코딩하는 거 보고 따라 치는거지. 테스트를 볼 때 요구사항에 맞게 과정을 밟아가면서 이런게 필요하겠다라는 방식으로 접근을 해서 설명을 해줘야 코딩테스트 대비 강의 아닌가요? 코딩테스트가 아닌 작은 토이프로젝트 할 때도 그게 당연한거잖아요. 제가 느끼기에는 그냥 다 만들어진 코드 옆에 띄워두고 따라치시면서 설명해주는 느낌이에요.
2022-03-02
oh thumbnail
코딩 테스트는 안보지만... 웹 페이지 제작 연습하고 싶어서 샀는데 꽤 괜찮은 것 같습니다. 감사합니다.
2021-10-21
찌니 thumbnail
WoW~!! 와디즈 펀딩으로 구매해서 수강 중인데 너무 좋네여ㅠㅠ 아직 완강은 못했지만..^^7 완강까지 달려볼께요 ㅎㅎㅎ
2021-10-19
깨구리 thumbnail
영상이 타이트해서 안지루함 토이프로젝트 뭐할지 할때 들어도 좋을거같음
2021-10-19
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!