실무 문제 상황 CASE 1차 공개, 지금 구매하고 바로 만나보세요!

같은 UI 컴포넌트 기능이라도
더 성능 좋게 구현하는 방법은 따로 있습니다.

국내 주요 IT 기업 현업 개발자가
실무 UI 컴포넌트 구현 예제를 바탕으로
다양한 문제 접근법과 개발 노하우를 알려드립니다.

[step 0]

버튼 컨텍스트 구현 문제를 직접 풀어보세요.

* 구체적인 개발 조건은 아래의 링크에서 확인하실 수 있습니다.

[step 1]

현업 개발자의 코드와 해설을 확인하세요.

*시크릿코드는 하나의 문제 상황을 해결하는 다양한 문제 해결 방법을 제시합니다.

[step 2]

국내 주요 IT 기업 8년차 프론트엔드 개발자가
위 문제를 해결하는 과정을 직접 보여드립니다.

영상에서 언급된 더 성능 좋은 코드를 구현하지 못하셨나요?
현업 개발자의 또다른 문제 접근법이 궁금하신가요?
더 다양한 실무 UI 컴포넌트 문제를 경험해보고 싶으신가요?

시크릿코드 안에 모두 담겨 있습니다.

300명이 넘는 개발자들이 선택한데에는 그만한 이유가 있습니다.
개발자의 성장, 더이상 미루지 말고 시크릿코드로 제대로 경험하세요.

출제진 및 해설진 라인업

시크릿코드 출제진 및 해설진은 모두 현업 FB 개발자들로만 이루어져있습니다. 출제진 및 해설진 라인업은 앞으로도 계속 업데이트 될 예정입니다.

이웅모 개발자님

약력
 현) SW 기업 대표
현) poiemaweb.com 운영자
전) 외국계 IT 기업 소프트웨어 컨설턴트
전) 일본 N자동차 웹프레임워크 개발

저서
<모던 자바스크립트 Deep Dive(자바스크립트의 기본 개념과 동작 원리)>(2020)
< Angular Essentials(ES6, TypeScript 핵심 + SPA 개발 베스트 프렉티스)>(2018)

정재남 개발자님

약력
 현) 네이버 프론트엔드 엔지니어
전) NC Soft 프론트엔드 엔지니어
전) 쿠팡 프론트엔드 엔지니어

저서
 <코어 자바스크립트>(2019)

강의
 자바스크립트 강의 다수

박준영 개발자님

약력
 전) 교회정보 플랫폼 '교회가는 길' 개발
전) 핸드메이드 오픈마켁 '앳플레이스' CTO 및 Cofounder
전) 강릉 시외 및 고속버스터미널 버스정보 디스플레이 시스템 소프트웨워 개발 (한국공예 + 디자인문화진흥원 주관, 포스트미디어 협업)
전) AGCWEB CTO (2015.06~2017.03)

강의
기업 출강 Ebay : Node React
온라인 : Node.js 올인원패키지 외 다수

페이지
김인권 개발자님

약력
현) 에어서플라이 프론트엔드 개발자
현) 페이스북 '나, 개발 한번 해보려고' 페이지 운영

저서
<모두의 HTML5 & CSS>

강의
- 입문자를 위한 함수: 입문과 중급사이
- 비전공자를 위한 자바스크립트: 입문과 중급사이 외 다수

페이지
정용우 개발자님

약력
 현) 국내 대기업 프론트엔드 엔지니어 재직 중
전) 네이버 랩스 프론트엔드 엔지니어
전) 카카오 프론트엔드 엔지니어

강의
 전) Fastcampus ByteDegree Front-end HTML Part 미니 프로젝트 문제 출제 및 감수 참여

노경모 개발자님

약력
 현) Frontend Engineer at ODK Media(2019~)
전) Frontend Engineer at Gopax(2018~2019)
전)Frontend Engineer at NCODE(2016~2018))

강의
-JavaScript, ES6+, Modern Web Development 강의
-Node.js, MongoDB, GraphQL 백엔드 강의

문제 상황 30 케이스, 다양한 문제 접근법 80+ 을 참고해 코딩하고
실무 문제 해결 능력 빠르게 익히세요.

케이스 공개 순서는 변동될 수 있습니다.

30 CASE 라인업

01. 버튼 컨텍스트 메뉴
이벤트 리스너, 이벤트 위임 구현 원리, detail 태그, React-Create Portal 등
02. 스크롤 네비게이션 바
크로스 브라우징을 고려하여 스크롤 위치를 가져오는 방법을 학습
03. 무한 스크롤
스크롤 동작 감지, 이벤트 리스너, scrollTop, mousewheel, IntersectionObserver, useEffect
04. 스크롤 스파이
스크롤 동작 감지, offsetTop/scrollTop/clientHeight의 상관관계, 이벤트 리스너, mousewheel, throttle과 debounce, IntersectionObserver, useEffect
05. 페이지네이션
페이지 설정에 따른 댓글 데이터 가공 표현
06. 스톱워치
데이터 모델 -> 뷰 방향의 단방향 데이터 바인딩 구현
07. 드래그 앤 드롭
dnd api/events, sortable
08. 검색어 자동 완성 기능
debounce, API Request, RxJS, Reactive 패러다임
09. 검색어 자동 완성 기능 2
검색어 입력에 따른 API 호출을 제어하는 방법을 학습
10. 리스트
Fetch, Axios, Ajax 기본 사용법과 함께 async / await를 사용한 비동기 방식과 함께 역할별로 코드를 리팩토링 하는 방법 학습
11. 순간 검색 기능
debounce, request api를 대신하기 위한 Promise 활용 (test를 위한 mock data 활용),디자인 부분과 기능을 분리하기 위한 방법
12. 모달 팝업 구현
13. 유관 검색어 기능
input event의 활용도 selector.getBoundingClientRect() 함수 지연시간을 적용하여 마지막 이벤트만 발생시키는 기능 (debounce)
14. 아날로그 시계
CSS 변수(CSS 커스텀 프로퍼티)
styled-components
useRef
useEffect
15. 다크 모드
localStorage, prefers-color-scheme, window.matchMedia, styled-components: theming, 등
16. 스톱 워치2
CSS 그리드 레이아웃, setInterval, Document.createDocumentFragment, useState, useEffect
17. 콤보 박스
18. 라디오 박스
localStorage, prefers-color-scheme, window.matchMedia, styled-components: theming, 등
19. Rating UI
DOM Access, DOM Events(mousemove, mouseleave, click, etc.), MouseEvent, Mouse Position Calculation, useState, State Management
추가 케이스 문제는
순차적으로 공개됩니다!

지금 구매하시면 정가보다 77% 할인된 가격으로
실무 문제 100 +, 시니어 시크릿 코드 80+, 해설 강의 100 +
모두 다 평생 소장 가능

(2021.02.15 강의 2차 OPEN / 2021.02.22 강의 전체 OPEN )

문의 : help-secret@fastcampus.co.kr

수강료.

  • 시크릿 코드 : 프론트엔드 UI 컴포넌트편

    현재 정가 대비 77% 할인 중!

    정가 379,000원
    현재 판매가 85,000원

    12개월 무이자 할부 시 월 7,083원

    수강 신청하기

국내 9개 카드사 12개월 무이자 할부 지원!

  • 삼성카드
  • 신한카드
  • 롯데카드
  • 현대카드
  • 하나카드
  • BC카드
  • KB국민은행
  • 씨티카드
  • NH농협카드