프로젝트 개요

• 웹타이머 구현

• 리액트를 이용한 todo-list 웹앱

• 네이버 실시간 검색어 추출하는 웹앱 또는 api(function)

실행방법

Project setup

npm install

Json.server Start

npm run server

Project Start

npm start

Basic requirements

1. ✅ 웹타이머 구현

   • ✅ 스탑워치 기능
   • ✅ 타이머 기능
   • 🚫(선택) 백그라운드 동작

2. ✅ 리액트를 이용한 todo-list 웹앱

   • ✅ 리스트 체크
   • ✅ 리스트 수정
   • ✅ (선택) 리스트 비활성화
   • 🚫 (선택) 리스트 순서 변경
   • 🚫 (선택) 단위 테스트(jest)
   • ✅ (선택) Hook 기반 작성
   • 🚫 (선택) Context 및 전역 스토어 사용

3. 🚫 (추가 예정) 네이버 실시간 검색어 추출하는 웹앱 또는 api(function)

   • 🚫 네이버 실시간 검색어 추출
   • 🚫 (선택)24시간 안에 시간대별로 검색어 추출

Skills

• React, Typescript, Styled Components, ES6+

구현 기능 상세

일반

• React-router-dom을 이용한 페이지 전환
• Styled-component를 활용한 컴포넌트 스타일링

웹타이머 구현

• 원하는 시간 입력(prompt) 후 동작하는 타이머
• 0초 부터 버튼을 누를 때까지 시간을 계산하는 스탑워치 기능
• 버튼을 통해 타이머와 스탑워치 기능 전환

리액트를 이용한 todo-list 웹앱

• Json.server 를 이용한 가상 백엔드 구성
• Add 버튼을 통해 task 추가
• task 더블 클릭을 통한 체크
• 삭제 버튼을 통한 task 삭제
• 수정 버튼을 통한 task 수정

(추가 예정)네이버 실시간 검색어 추출하는 웹앱 또는 api(function)

시연 gif

웹타이머 구현

• 타이머

• 스탑워치

리액트를 이용한 todo-list 웹앱

• Task 추가

• Task 체크, 삭제

• Task 수정