404원으로 미리보는 시크릿코드 [프론트엔드 - UI 컴포넌트 편]
판매 종료
까지 남은 시간
0 0시간 0 0 2021-02-26T23:59

404 시크릿코드 [프론트엔드 - UI 컴포넌트 편] 에서 만날 수 있는

3 CASE 주제 대공개!

CASE 1. Infinite Scroll
Q. 무한 스크롤 목록뷰를 구현 하세요.

- 최초에 20개의 목록을 불러옵니다.
- 스크롤 최하단 이동 시 'Loading' 상태 표시가 나타나며, 이후에 20개 목록을 더 가져옵니다.
- 로딩 완료 시 'Loading 표시가 사라지며, 가져온 목록이 하단에 추가됩니다. (무한 반복)

주요 학습 키워드 : 스크롤 동작 감지, Debounce, Intersection Observer, UseEffect
CASE 2. Dropdown Menu
Q. 라벨 클릭 시 선택 가능한 Menu가 출력되고, Dropdown Item 선택 시 데이터의 라벨을 출력해주는 Dropdown Item을 만드시오.

- 라벨 클릭 시 선택 가능한 List가 출력된다.
- Dropdown Item을 선택 시 1) 선택된 데이터를 라벨에 출력한다. 2) 선택된 데이터를 외부로 전달할 수 있도록 한다. 3) 선택된 데이터에 선택 여부를 표시한다.
- Dropdown 외에 영역 클릭 시 아무런 이벤트 없이 리스트를 닫는다.
- 디자인 템플릿을 변경할 수 있도록 템플릿을 분리한다.

주요 학습 키워드 : click event target element 설정에 대한 고민 selector.getBoundingClientRect() 함수 arrow function의 활용 Template literals 을 활용한 html templete 관리
CASE 3. Scroll Indicator
Q. 스크롤 시 현재 남은 컨텐츠의 분량을 화면에 표기해주세요.

- 스크롤을 내리면 상단에 현재 스크롤이 어느 정도 내려갔는지를 나타내는 상태 표시바를 만드시오.
- 스크롤이 끝까지 내려가면 Indicator도 끝까지 이동하고, 스크롤을 다시 상단으로 올리면 Indicator도 다시 뒤로 돌아가게 만드시오.

주요 학습 키워드 :
- 크로스 브라우징을 고려하여 현재 문서의 높이를 가져오기
- width 또는 translateX를 사용하여 남은 컨텐츠를 표기하는 방법 학습하기

시크릿코드 풀버전에서는

이보다 10배 더 많은

UI 컴포넌트 기능 구현 30 CASE를 추가로 만나볼 수 있습니다.

지금 404원에 구매하면 3월 1일까지 원하는 시간대에 언제나 학습 가능!

UI 컴포넌트 실무 문제 3 CASE로

시크릿코드 속에 담긴 실무 개발 노하우를 확인하세요!

* 3월 1일 자정이 지나면 자동으로 수강이 종료됩니다.

404원에 누리는 국내 주요 IT 프론트엔드 개발자의 노하우

2월 26일 금요일 자정, 판매가 종료됩니다!

고민하고 있다면 절대 놓치지 마세요!

수강료.

  • [404 프로모션] 시크릿코드 : 프론트엔드 UI 컴포넌트편

    현재 정가 대비 99% 할인 중!
    2월 26일 금요일 자정 까지

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

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

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