kschoi/frontend-challenges

🚀 Frontend Challenges

Frontend 개발의 기초를 닦기 위한 예제 모음집입니다.

Fundamentals

1. async와 defer - script의 async와 defer를 알아봅니다.
2. variable과 constant - 자바스크립트의 변수와 상수를 살펴봅니다.
3. statements - if, switch 문을 살펴봅니다.
4. operators - 자바스크림트의 다양한 연산자를 알아봅니다.
5. object - 기본 오브젝트 CRUD 방법을 살펴봅니다.
6. array - 대표적인 array api를 살펴봅니다.
7. array-like-object - array-like 객체를 이해하기 위한 예제입니다.
8. closure - 클로저를 이해하기 위한 예제입니다.
9. immutable - 오브젝트 타입의 불변성을 지키기 위한 방법을 살펴봅니다.
10. localStorage와 sessionStorage - localStorage와 sessionStorage 사용 예제입니다.

DOM

1. event-delegation - 'behavior' 패턴 등 이벤트 위임을 이해하기 위한 예제입니다.
2. browser-default-actions - 브라우저 기본 액션을 막는 방법과, 스크롤 성능을 향상시킬 수 있는 passive 옵션을 살펴봅니다.
3. dispatching-custom-events - 커스텀 이벤트 디스패치 예제입니다.
4. mouse events - 마우스 이벤트 예제입니다.
5. keyboard events - 키보드 이벤트 예제입니다.
6. form events - 폼 이벤트 예제입니다.
7. observer - MutationObserver와 IntersectionObserver 예제입니다.

UI Components

1. notification - 로드 이후 하단에 노출되었다가 사라지는 공지 알림 UI 예제입니다.
2. navbar - SCSS를 활용한 반응형 네비게이션 바 UI 예제입니다.
3. drawer - 서랍형 UI 예제입니다.
4. item-list - 상품리스트와 스와이퍼 API 적용 UI 예제입니다.

Data Structure

1. array - 자바스크립트 2차원 배열 자료구조 예제입니다.
2. stack - 자바스크립트 스택 자료구조 예제입니다.
3. queue - 자바스크립트 큐 자료구조 예제입니다.
4. linked list - 자바스크립트 연결리스트 자료구조 예제입니다.
5. set - 자바스크립트 집합 자료구조 예제입니다.

React

1. 시작하기 - ReactDOM render 함수와 React.createElement, React.Component, JSX, babel 기본 이해 예제입니다.
2. hooks - 함수형 컴포넌트와 useState, useRef 기본 예제입니다.
3. webpack - webpack 구성 과정을 이해하기 위한 예제입니다.

HTTP

1. http message - http 요청 메시지를 작성해봅니다.

Node

1. createServer - http 모듈을 사용하여 서버를 만들어봅니다.

Projects

1. blog 만들기 - react, typescript, mobx를 사용하여 블로그 만들기 예제입니다.
2. simple-react-shopping-mall - 리액트 기본 개념을 익히기 위한 간단한 쇼핑몰 SPA 예제입니다.
3. simple-layout - 동영상 백그라운드를 가진 간단한 레이아웃 예제입니다.
4. i-like-lemons - React, Tailwind CSS, Framer-motion을 사용한 3D 애니메이션 예제입니다.
5. pizza-play - React, Framer-motion으로 만든 페이지 라우팅 애니메이션 예제입니다.
6. chrome dino game - 자바스크립트 크롬 공룡 게임 예제입니다.