플레이그라운드
공부하며 만든 토이프로젝트를 그대로 돌려 볼 수 있게 모아 두었습니다.
그래도 해야지 어떡해
대기중·끝냈다 두 칸으로 할 일을 옮기고 진행률을 보여 주는 순수 JavaScript Todo 앱.
JavaScriptDOMlocalStorage열기 →
React 19 beta 커피 주문서
React 19 beta 의 useActionState 로 폼 제출을 Action 으로 다루는 커피 주문 예제.
React 19 betauseActionStateCRA 5열기 →
폼 검증 모듈
필드마다 검증 함수를 등록하고 제출 시 한꺼번에 검사하는 작은 폼 모듈.
JavaScriptDOMES module열기 →
DOM API 홈페이지
부드러운 스크롤 내비게이션, 자동 이미지 슬라이더, 탭, 클릭 슬라이더를 순수 DOM API 로 만든 한 페이지.
JavaScriptDOMCSS열기 →
데이터 테이블
이름별 메인 테이블과 ID별 서브 테이블을 읽고, 정렬·선택·검색하는 React + Redux 과제.
React 17Reduxreact-router 6styled-componentsCRA열기 →
내가 좋아하는 동물
동물 사진에 좋아요·싫어요를 고르고, 다음 페이지에서 둘로 나눠 보는 비동기 통신 과제.
React 17react-router 6axiosstyled-componentsCRA열기 →
React 연습장
클래스·함수 컴포넌트 CRUD, 커피 주문, 이미지 로딩 깜빡임 예제를 버튼으로 골라 보는 연습 앱.
React 18Vite열기 →
반응형 랜딩 페이지
코딩 부트캠프 소개 페이지를 Bootstrap 그리드만 가져와 반응형으로 만든 CSS 과제.
HTMLCSSBootstrap grid열기 →
Dribbble 카드
작품 이미지 위에 올리면 제목과 좋아요·댓글 수가 나타나는 Dribbble 식 카드.
HTMLCSS열기 →
E-commerce 상품 목록
상품 카드 세 장에 별점, 수량 조절, 장바구니 버튼을 붙인 쇼핑몰 목록.
HTMLCSS열기 →
Slack 메시지
프로필 사진, 이름, 시간, 본문으로 된 Slack 메시지 한 줄. 시간 위에 올리면 툴팁이 뜬다.
HTMLCSS열기 →
Vue 3 Todo 앱
Vue 3 입문서를 따라 만든 Todo 앱. 할 일을 추가·완료·삭제하고 localStorage 에 저장한다.
Vue 3vue-cli 4열기 →
HTML·CSS 워밍업
Vue 를 배우기 전 닷새 동안 한 마크업·CSS 연습. 포털 메인, 회원가입 폼, 레이아웃, 그림 카드.
HTMLCSS열기 →
홈페이지 한 섹션 클론 코딩
숫자가 0부터 올라가는 지표와 수상 내역이 차례로 나타나는 한 섹션을 TypeScript React 로 똑같이 만든 과제.
React 17TypeScriptreact-countupstyled-componentsCRA 4열기 →