✍️ 뚝딱뚝딱 구현 (+회고록)
1.📌 (1) 자체 프로젝트 with-dog UI
초기세팅 & 컨벤션 / ChatList UI / ChatList Modal UI
2.📌 +) WebSocket 으로 채팅기능 구현 해보기
JS + WebSocket 채팅 구현
3.📌 +) Socket.IO로 채팅기능 구현 해보기
JS + Socket.IO & React + Socket.IO 채팅 구현
4.📌 (2) 자체 프로젝트 with-dog 채팅구현
Socket.IO로 ChatRoom 만들기
5.Next.js 로 미니 무비앱 만들기
Layout component / Head / Image / Font / Data Fetching / API key 관리 / SSR / 라우팅하기
6. ✍️ 기억보단 기록을 (3개월 회고)
7.✍️ 기업협업 인턴십 회고
8.CREAM 프로젝트 회고
9.TOWE 프로젝트 회고
10.메인페이지 애니메이션 구현
Infinity Carousel (Slider) 기능 / scroll Event / useRef & useEffect
11.투두리스트 뚝딱뚝딱
아이템 추가 & 삭제 & 체크 박스 필터링 & 다크모드 & 로컬스토리지 저장
12.React로 minishop 만들기(1)
리액트에서 Bootstrap 사용하기 / 이미지 넣기 / Route / Nested Route / useNavigate / Styled-components
13.React로 minishop 만들기(2)
useEffect 개념 + 활용 / 리액트에서 setTimeout 사용하기 / cleanup / if문 / 전환애니메이션
14.React로 미니블로그 만들기
JSX styling / state와 setState, props / component 작성법 / onClick / map() / input
15.Instagram Clone - react, scss(1)
Router와 UseNavigate / SCSS 변환하기
16.Instagram Clone - react(2)
input 관리와 useState / 삼항연산자 / Key와 useRef 활용하기 / 댓글 삭제하기
17.Instagram Clone - js
HTML + CSS + JS / form 태그와 로그인 버튼 활성화 / comment 추가, 저장, 삭제하기
18.스타벅스 메인페이지 만들기(1)
HTML + CSS + JS로 클론코딩 하기
19.스타벅스 메인페이지 만들기(2)
20.스타벅스 메인페이지 만들기(3)
21.클론코딩 CSS 반응형 연습
인스타그램 프로필 페이지 클론코딩해보기
22.mypage 만들기
CSS 수직, 수평정렬 / all:unset 유의점 / 가상 요소 선택자 / 이미지 설정 / Typing Effect와 keyframes / scroll 핸들러동작과 JS리팩토링
23.미니 쇼핑몰 게임 만들어 보기
HTML+CSS+JS+JSON을 이용해서 쇼핑몰 미니게임 만들기 / map() & join() 배열 메소드 활용하기
24.JavaScript로 Canvas 만들어 보기
HTML+CSS+JS를 이용해서 Canvas 만들기 / Canvas API / CanvasRenderingContext2D / event
25.유튜브 UI 만들어 보기
YouTube Clone) 반응형, 이벤트처리 + flex박스와 img, 동영상 넣어보기
26.메인 페이지 만들어 보기
MainPage Clone) 메인 페이지 + 곱하기 그레디언트 + 마우스 롤오버, 레이아웃 배치