$$config title: CLASS 101, 리액트 풀스택 강좌, 복습용강좌 keywords: - IT - CLASS 101 리액트 풀스택 강좌, 복습용 $$ # CLASS 101, 리액트 풀스택 강좌, 복습용강좌 - 주소 : [https://slog.gg/p/5034](https://slog.gg/p/5034) --- # 관련링크 ## 유틸 - [소스코드 비교툴 - https://www.diffchecker.com/](https://www.diffchecker.com/) ## 몰입코딩 클래스101 유료강좌 - [CLASS 101, 웹코딩 강좌 - to2.kr/dBN](to2.kr/dBN) - [CLASS 101, 웹코딩 강좌, 수업페이지](https://to2.kr/bmw) - [CLASS 101, 리액트 풀스택 강좌 - to2.kr/dBO](https://to2.kr/dBO) - [CLASS 101, 리액트 풀스택 강좌, 수업페이지](https://slog.gg/p/4711) ## 일반 - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [리액트 시작 소스코드(기본 CSS), to2.kr/dCa](https://to2.kr/dCa) - [ken 5034, 유튜브 재생목록](https://www.youtube.com/playlist?list=PLE0hRBClSk5INU85nlyKhH0z_IGIKnG3K) --- # 이 강좌를 이용해서 공부하는 방법 - [CLASS 101, 리액트 풀스택 강좌 - to2.kr/dBO](https://to2.kr/dBO) - 강좌결제는 제작자에게 큰 힘이 됩니다. $$hide - [![img](https://cdn.class101.net/images/924eaacc-1d1d-443c-b94d-f415cd403011/750xauto.webp)](https://to2.kr/dBO) $$ --- # 챕터 1, 개요 # 1-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 1, 1강, 개요](https://youtu.be/SqORNUwxoOg) - [CLASS 101, 리액트 풀스택강좌](https://class101.page.link/urm3) # 1-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 1, 2강, 개발툴세팅](https://youtu.be/FM3Vjp8w6M4) - [CLASS 101, 리액트 풀스택 강좌 - to2.kr/dBO](https://to2.kr/dBO) - [추천영상 - 몰입코딩 - 코드팬 세팅법 shorts](https://www.youtube.com/playlist?list=PLkUOTXG0qeWqtVp8rvulubW28xenSwiuv) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [리액트 시작 소스코드(기본 CSS), to2.kr/dCa](https://to2.kr/dCa) # 챕터 2, 숫자 카운터 # 2-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 2, 1강, 1부, 버튼 클릭할때마다 콘솔로그](https://youtu.be/cZgv1YZ9Elw) - [영상 - 리액트풀스택, ken 5034, 챕터 2, 1강, 2부, 버튼 클릭할때마다 숫자증가](https://youtu.be/XWgPLAbGB-c) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN - 1부](https://codepen.io/jangka44/pen/gOoKwez?editors=0011) - [CODEPEN - 2부](https://codepen.io/jangka44/pen/yLpRVGL?editors=0010) # 2-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 2, 2강, 공부하는 방법, 엄청나게 중요합니다.](https://youtu.be/XnjSZ5cWK5c) # 2-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 2, 3강, 숫자 증가, 복습](https://youtu.be/Op_dILG9ElA) - [CODEPEN](https://codepen.io/jangka44/pen/KKZegGO?editors=0010) # 2-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 2, 4강, 다양한 증감 기능](https://youtu.be/2f-3i92fyK0) - [CODEPEN](https://codepen.io/jangka44/pen/mdpKraK?editors=0010) # 2-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 2, 5강, 제가 사용하는 용어설명, 회귀, 턴, 기억전승, 주인공](https://youtu.be/Vw9QOTv_zJo) - [CODEPEN](https://codepen.io/jangka44/pen/XWVyPyP?editors=0011) # 2-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 2, 6강, 제가 사용하는 용어설명, 회귀, 턴, 기억전승, 차원, 부모, 자식](https://youtu.be/jnIXW34d3DY) - [CODEPEN](https://codepen.io/jangka44/pen/JjMeaVq?editors=0011) # 챕터 3, 입력상자 제어 # 3-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 3, 1강, 비제어 입력요소](https://youtu.be/bkQU30sErzg) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/yLpEadN?editors=0011) # 3-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 3, 2강, 제어 입력요소와 onChange](https://youtu.be/Ih_nZ4R_Cak) - [CODEPEN](https://codepen.io/jangka44/pen/MWrXjMa?editors=0011) # 3-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 3, 3강, 이벤트 객체](https://youtu.be/YvLeXlXBaK4) - [CODEPEN](https://codepen.io/jangka44/pen/BaJVLgM?editors=0011) - [추천영상 - 뉴렉처 - 자바스크립트 & DOM 프로그래밍 39강 - 이벤트와 이벤트 객체](https://youtu.be/lXeJSMGlRgE) # 3-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 3, 4강, 제어요소에 변경허용](https://youtu.be/z5lBYOizPtw) - [CODEPEN](https://codepen.io/jangka44/pen/QWaxGwL?editors=0010) # 챕터 4, 위캔 사용법 # 4-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 4, 1강, 위캔 사용법 소개](https://youtu.be/49T3zbDhq0c) - [위캔 - slog.gg](https://slog.gg) - [새 캔 - https://slog.gg/p](https://slog.gg/p) - [위캔 사용법 강좌 - slog.gg/p/1231](https://slog.gg/p/1231) # 4-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 4, 2강, 위키나 블로그를 꼭 해야 하는 이유](https://youtu.be/3bpV2MCrZ_w) - [추천영상 - EO - 지방대 개발 비전공자가 배달의민족 리드 개발자가 되기까지](https://youtu.be/V9AGvwPmnZU) # 4-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 4, 3강, 블로그 2개 소개](https://youtu.be/C1hZ6915spY) - [김지애 학생 블로그 - slog.gg/b/1080](https://slog.gg/b/1080) - [이명한 학생 블로그 - slog.gg/b/1464](https://slog.gg/b/1464) # 4-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 4, 4강, 위캔 팁, 도움이 되는 툴](https://youtu.be/_xt_d1zZKlg) - [토스트UI 에디터 - 모든 플러그인이 적용](https://nhn.github.io/tui.editor/latest/tutorial-example12-editor-with-all-plugins) - [zpat 무료이미지 호스팅 - zpat.info/](https://www.zpat.info/) - [postimages 무료이미지 호스팅 - postimages.org/ko/](https://postimages.org/ko/) - [UML툴 - plantuml.com/ko/](https://plantuml.com/ko/) # 챕터 5, 개발자가 되려면, 틈틈이 공부해야하는 좋은 자료들 소개 # 5-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 5, 1강, 개발자가 되려면, 틈틈이 공부해야하는 좋은 자료들 소개](https://youtu.be/NS5rjG4J4CA) - [몰입코딩 - 수업자료 모음 - slog.gg/p/4680](https://slog.gg/p/4680) # 5-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 5, 2강, 깔끔한 모던 자바스크립트 강좌 소개](https://youtu.be/yuaHpyMmE5s) - [드림코딩 모던 자바스크립트 기초 - slog.gg/p/4710](https://slog.gg/p/4710) # 5-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 5, 3강, CSS 선택자, FLEX 관련 튜토리얼 소개](https://youtu.be/tiwTCyaNwNQ) - [CSS 선택자 연습 튜토리얼, CSS DINER](https://flukeout.github.io/) - 제한시간 : 10분 - [flex 튜토리얼, flex 개구리](https://flexboxfroggy.com/#ko) - 제한시간 : 10분 - [flex 튜토리얼, flex 디펜스](http://www.flexboxdefense.com/) - 제한시간 : 15분 - [flex playground](https://codepen.io/enxaneta/debug/adLPwv) - 목표 : flex-grow, flex-shrink, flex-basis 를 직관적으로 이해한다. - [영상 1부](https://youtu.be/IzpVeeErCok) - [영상 2부](https://youtu.be/CemPWQkx9gQ) - [이번에야 말로 css flex를 익혀보자](https://studiomeal.com/archives/197) - 목표 : flex의 전반적인 내용을 이해한다. # 5-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 5, 4강, CSS 선택자, FLEX 활용 튜토리얼 소개](https://youtu.be/S7Nr6LOtSNs) - 튜토리얼 시작 - [CODEPEN - 시작](https://codepen.io/jangka44/pen/MWEYpmb) - [CODEPEN - 정답예시](https://codepen.io/jangka44/debug/dyoQRjV) - [CODEPEN - 작업 0](https://codepen.io/jangka44/pen/mdWwNRd) - 목표 : 헤더와 푸터를 flex item으로 만들고 세로 방향으로 배열해주세요. - 힌트 - display: flex; - flex-direction: column; - [CODEPEN - 작업 1](https://codepen.io/jangka44/pen/KKprqVJ) - 목표 : 푸터안의 텍스트를 가운데 정렬해주세요. - 힌트 - display: flex; - justify-content: center; - [CODEPEN - 작업 2](https://codepen.io/jangka44/pen/gOpQRro) - 목표 : 중단부분을 마크업 해주세요. - [CODEPEN - 작업 3](https://codepen.io/jangka44/pen/poJQwNB) - 목표 : 중단부분의 세 부분을 세로가 아닌 가로로 배열해주세요. - [CODEPEN - 작업 4](https://codepen.io/jangka44/pen/wvaQeWX) - 목표 : 양쪽 사이드바가 남는 공간을 1:1 비율로 나눠가지도록 해주세요. - [CODEPEN - 작업 5](https://codepen.io/jangka44/pen/ZEGmyez) - 목표 : 왼쪽 사이드바의 너비는 150px, 오른쪽 사이드바의 너비는 120px, 나머지 여백은 중앙박스가 차지하게 해주세요. - 힌트 - flex-grow: 1 or 0; - [CODEPEN - 작업 6](https://codepen.io/jangka44/pen/PoqxjOa) - 목표 : 컨테이너의 높이기 100vh 이상이 되도록 해주세요. - 힌트 - min-height: 100vh; - [CODEPEN - 작업 7](https://codepen.io/jangka44/pen/ZEGmyrY) - 목표 : 중단부분의 높이가 헤더와 푸터가 사용한 나머지를 차지하게 해주세요. - 힌트 - flex-grow: 1 or 0; - [CODEPEN - 작업 8](https://codepen.io/jangka44/pen/VwLVWXM) - 목표 : 중앙박스에 텍스트를 길게 넣고, 화면의 너비를 줄여서, 양쪽 사이드 박스의 너비가 언제 달라지는지 확인해주세요. - 힌트 - 화면의 너비를 천천히 줄여보세요. - [CODEPEN - 작업 9](https://codepen.io/jangka44/pen/BaNGZrq) - 목표 : 화면의 너비가 줄어들어도 양쪽 사이드바의 너비가 바뀌지 않게 해주세요. - 힌트 - flex-shrink: 1 or 0; - [CODEPEN - 작업 10](https://codepen.io/jangka44/pen/dyoQRjV) - 완료 - [1부, 작업 0 ~ 7](https://youtu.be/_y9Bbu7vbM0) - [2부, 작업 8 ~ 10](https://youtu.be/ZR1o1eMtpaY) - 튜토리얼 끝 # 5-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 5, 5강, 벨로퍼트와 함께하는 모던 리액트](https://youtu.be/XFwW5P5V_qA) - [벨로퍼트와 함께하는 모던 리액트](https://react.vlpt.us/) # 5-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 5, 6강, 리액트 공식문서](https://youtu.be/IkromPb2uUg) - [리액트 공식사이트](https://ko.reactjs.org/) - [리액트 공식사이트 - 문서](https://ko.reactjs.org/docs/getting-started.html) - [리액트 공식사이트 - 자습서(튜토리얼)](https://ko.reactjs.org/tutorial/tutorial.html) # 챕터 6, 스톱워치 구현 # 6-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 6, 1강, setTimeout](https://youtu.be/jZ-HFiOYvz4) - [CODEPEN](https://codepen.io/jangka44/pen/popKRZK?editors=0011) - [추천영상 - 달레의 코드 - setTimeout()과 setInterval() | 브라우저로 배우는 자바스크립트 기초](https://youtu.be/QIotZ0Gyw-E) - [추천영상 - 코딩앙마 - 자바스크립트 중급 강좌 #12 setTimeout / setInterval](https://youtu.be/nwk_aNbFEEc) # 6-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 6, 2강, 숫자가 자동 증가](https://youtu.be/BbTFb0cks2A) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/oNpyBPg?editors=0010) # 6-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 6, 3강, 일시중지](https://youtu.be/L_KSotkyQ3I) - [CODEPEN](https://codepen.io/jangka44/pen/xxpzgav?editors=0010) # 6-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 6, 4강, 재개](https://youtu.be/AIrlNiM_hLM) - [CODEPEN](https://codepen.io/jangka44/pen/jOYKyQx?editors=0010) # 6-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 6, 5강, 재개 후 즉시 일시중지 버튼누르면 안되는 버그수정](https://youtu.be/VzJbSfELhUE) - [CODEPEN](https://codepen.io/jangka44/pen/zYpaNMX?editors=0010) # 챕터 7, 숫자 카운터, 2nd # 7-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 7, 1강, JSX 조각을 별도의 변수로 분리](https://youtu.be/aRx9ia_NuGw) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/wvpXPPJ?editors=0010) # 7-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 7, 2강, if를 사용해서 짝수일 때만 짝수라는 문구가 나오도록](https://youtu.be/ngVtFQz4dzQ) - [CODEPEN](https://codepen.io/jangka44/pen/vYprWRN?editors=0010) # 7-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 7, 3강, 8의 배수일경우 문구가 나오도록](https://youtu.be/bBW7DOR3qD4) - [CODEPEN](https://codepen.io/jangka44/pen/BaJVmxR?editors=0010) # 7-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 7, 4강, and 연산자](https://youtu.be/ieSdKZSNgGU) - [CODEPEN](https://codepen.io/jangka44/pen/KKZeyBo?editors=0010) # 7-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 7, 5강, or 연산자](https://youtu.be/t5v4T3AxQt8) - [CODEPEN](https://codepen.io/jangka44/pen/YzYvEJw?editors=0010) # 챕터 8, 팝업 # 8-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 8, 1강, 팝업과 닫기버튼](https://youtu.be/LEjJz06WRbA) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/PoEageR?editors=0010) # 8-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 8, 2강, 닫기버튼 누르면 팝업 제거](https://youtu.be/fKtyVz9qMMg) - [CODEPEN](https://codepen.io/jangka44/pen/oNpyOyZ?editors=0010) # 8-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 8, 3강, 팝업열기버튼](https://youtu.be/kH8rt7ohijY) - [CODEPEN](https://codepen.io/jangka44/pen/WNdyWKL?editors=0010) # 8-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 8, 4강, 팝업버튼관련 로직을 두줄에서 한줄로 줄이기](https://youtu.be/qJvJOJmJXbg) - [CODEPEN](https://codepen.io/jangka44/pen/JjMZVwb?editors=0010) # 챕터 9, 상품리스트 # 9-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 1강, 상품이미지](https://youtu.be/8urJXvIlkMQ) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [Lorem Picsum, 이미지 플레이스홀더 서비스](https://picsum.photos/) - 사용법 : https://picsum.photos/id/{번호}/{가로길이}/{세로길이} - 예시 : https://picsum.photos/id/237/200/300 - [CODEPEN](https://codepen.io/jangka44/pen/oNpMgVW?editors=0010) # 9-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 2강, 상품명과 상품가격 추가](https://youtu.be/zGZ1ydOz7P8) - [CODEPEN](https://codepen.io/jangka44/pen/BaJPyEq?editors=0010) # 9-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 3강, 품목을 3개로 늘림](https://youtu.be/6CKXH0_6R20) - [CODEPEN](https://codepen.io/jangka44/pen/wvpxBLQ?editors=0010) # 9-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 4강, 상품명에 CSS 작업, 3번이나 작업해야 해서 힘듬](https://youtu.be/fyz9086Um7o) - [CODEPEN](https://codepen.io/jangka44/pen/wvpxawR?editors=0010) # 9-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 5강, 상품리스트품목을 별도의 컴포넌트로 제작](https://youtu.be/r2zitw3hurI) - [CODEPEN](https://codepen.io/jangka44/pen/dyJjoZe?editors=0010) # 9-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 6강, 이미지번호, 상품명, 상품가격을 별도의 변수로 분리](https://youtu.be/ll6VIU0V51U) - [CODEPEN](https://codepen.io/jangka44/pen/ExopjjN?editors=0010) # 9-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 7강, 컴포넌트 호출시 속성을 사용하여 props로 데이터 전달](https://youtu.be/kTtBbsTGT4c) - [CODEPEN](https://codepen.io/jangka44/pen/rNprVLL?editors=0010) # 9-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 8강, 구조분해할당의 여러가지 사용법](https://youtu.be/uQRgNfFI8nI) - [CODEPEN](https://codepen.io/jangka44/pen/rNprVLL?editors=0010) # 챕터 10, 상품리스트, 2nd, 테일윈드, 반응형 # 10-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 1강, 테일윈드 로드, 웹폰트 적용](https://youtu.be/VWbqh0ehMIQ) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [Lorem Picsum, 이미지 플레이스홀더 서비스](https://picsum.photos/) - 사용법 : https://picsum.photos/id/{번호}/{가로길이}/{세로길이} - 예시 : https://picsum.photos/id/237/200/300 - [CODEPEN](https://codepen.io/jangka44/pen/YzYjNwM?editors=1100) ```html ``` ```css /* 웹폰트 불러오기 */ @font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; } ``` # 10-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 2강, 테일윈드 소개](https://youtu.be/YkTjAy56Eus) - [테일윈드 - https://tailwindcss.com/](https://tailwindcss.com/) - [테일윈드 치트시트 - https://nerdcave.com/tailwind-cheat-sheet](https://nerdcave.com/tailwind-cheat-sheet) - [테일윈드 치트시트 - https://flowbite.com/tools/tailwind-cheat-sheet/](https://flowbite.com/tools/tailwind-cheat-sheet/) - [CODEPEN](https://codepen.io/jangka44/pen/oNpMBqr?editors=1100) # 10-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 3강, 상품리스트 마크업, 크롬 개발자 도구의 요소탭 활용법](https://youtu.be/ffT_szFeBT8) - [CODEPEN](https://codepen.io/jangka44/pen/dyJjvZp?editors=0010) # 10-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 4강, 테일윈드 적용](https://youtu.be/wKVmdhaauag) - [CODEPEN](https://codepen.io/jangka44/pen/xxpJqJZ?editors=0010) # 10-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 5강, 화면이 넓을때 생기는 빈공간 채우기](https://youtu.be/fap79Ol3cWs) - [CODEPEN](https://codepen.io/jangka44/pen/gOojmKo?editors=0010) # 10-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 6강, 4개이상 늘어나면 밑으로](https://youtu.be/XqtFphdKFNg) - [CODEPEN](https://codepen.io/jangka44/pen/VwyByee?editors=0010) - [CSS 그리드 튜토리얼 - https://cssgridgarden.com/#ko](https://cssgridgarden.com/#ko) - [추천글 - 1분코딩 - 이번에야말로 CSS Grid를 익혀보자](https://studiomeal.com/archives/533) # 10-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 7강, 반응형 상품리스트](https://youtu.be/6dK118stQEY) - [CODEPEN](https://codepen.io/jangka44/pen/KKZBWOj?editors=0010) # 10-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 8강, 테일윈드의 container 를 사용해서 내용이 너무 화면넓게 퍼지는 것을 막음](https://youtu.be/yVoYBLXAWKY) - [CODEPEN - container 실험](https://codepen.io/jangka44/pen/KKZBZmx?editors=1100) - [CODEPEN](https://codepen.io/jangka44/pen/MWrBrmZ?editors=0010) # 10-9강 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 9강, 테일윈드와 궁합이 좋은 classnames 라이브러리 소개](https://youtu.be/hE20Y3h04ac) - [CODEPEN](https://codepen.io/jangka44/pen/JjMmrVN?editors=0010) # 10-10강 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 10강, classnames 객체용법](https://youtu.be/jk2YKJEvvcA) - [CODEPEN](https://codepen.io/jangka44/pen/zYpmPYN?editors=0010) # 챕터 11, 리액트 관련 자주하는 실수 # 11-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 11, 1강, useState 구문은 무조건 함수 제일 위쪽에 모아두어야 합니다.](https://youtu.be/_vThqMm_adI) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/NWXLKVW?editors=0010) # 11-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 11, 2강, 직접만든 컴포넌트에는 className, style 등이 작동하지 않습니다, 전달을 꼭 해줘야 합니다.](https://youtu.be/TgMjDf7hppM) - [CODEPEN](https://codepen.io/jangka44/pen/popOMRa?editors=0010) # 11-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 11, 3강, onClick에 매개변수가 필요한 함수는 바로 연결할 수가 없습니다.](https://youtu.be/lRURyVNVpp8) - [CODEPEN](https://codepen.io/jangka44/pen/OJzoKOp?editors=0010) # 11-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 11, 4강, 한번의 함수실행에서, 여러번 실행된, setState의 결과가 전부 반영되는 방법](https://youtu.be/FLLlLqpSUVE) - [CODEPEN](https://codepen.io/jangka44/pen/popYmrw?editors=0010) # 11-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 11, 5강, setState 함수에 인자로 새 상태를 반환하는 함수를 넘기면 좋은 경우, 첫번째](https://youtu.be/TL07MiruBPI) - [CODEPEN](https://codepen.io/jangka44/pen/ZEvZQYz?editors=0010) # 11-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 11, 5강, setState 함수에 인자로 새 상태를 반환하는 함수를 넘기면 좋은 경우, 두번째](https://youtu.be/_VZYF_A9d8o) - [CODEPEN](https://codepen.io/jangka44/pen/bGaZKeE?editors=0010) # 챕터 12, 데이지UI # 12-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 12, 1강, 데이지 UI 소개](https://youtu.be/XW-hec4Zko0) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/NWXJMMK?editors=0010) - [데이지UI 컴포넌트](https://daisyui.com/components/) - 데이지UI 로드, 데이지UI를 사용하시려면, 테일윈드도 필요합니다. ```html ``` # 챕터 13, 숫자기록 # 13-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 1강, 숫자기록](https://youtu.be/pF2_wIcn4ms) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/ZEvModN?editors=0010) # 13-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 2강, 배열 렌더링](https://youtu.be/Mn2OoHyFRTU) - [CODEPEN](https://codepen.io/jangka44/pen/ExoeRZK?editors=0010) # 13-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 3강, 숫자가 교체되는게 아니라, 쌓이도록](https://youtu.be/9pAgcry0mQs) - [CODEPEN](https://codepen.io/jangka44/pen/mdpGKLK?editors=0010) # 13-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 4강, 엘리먼트 배열](https://youtu.be/DJ3-RDJ5TKI) - [CODEPEN](https://codepen.io/jangka44/pen/oNpPyKq?editors=0010) # 13-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 5강, 배열의 요소에 일괄작업을 해서 새로운 배열을 생성, map](https://youtu.be/MAQTvcwbnFg) - [CODEPEN](https://codepen.io/jangka44/pen/gOodjbE?editors=0010) # 13-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 6강, 엘리먼트 배열을 map 함수로 만들 때, 배열요소 엘리먼트에는 각각 고유한 key 속성이 부여](https://youtu.be/6IqfxHYnkLM) - [CODEPEN](https://codepen.io/jangka44/pen/ExoeBeL?editors=0010) # 13-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 7강, 기록된 숫자들이 리스트 형태로 출력](https://youtu.be/3HIRUrZ0tag) - [CODEPEN](https://codepen.io/jangka44/pen/YzYOodb?editors=0010) # 13-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 8강, 입력시 마다 기존의 입력창 값 초기화, 유효성 체크](https://youtu.be/QGe6eP_QXI8) - [CODEPEN](https://codepen.io/jangka44/pen/PoEdrrP?editors=0010) # 13-9강 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 9강, 엔터입력시 기록](https://youtu.be/-EyoOsA4f2Q) - [CODEPEN](https://codepen.io/jangka44/pen/ZEvMgYx?editors=0010) # 13-10강 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 10강, 폼의 onSubmit을 이용한, 엔터입력시 기록](https://youtu.be/6Mu3OfFZMyI) - [CODEPEN](https://codepen.io/jangka44/pen/jOYvgWG?editors=0010) # 챕터 14, form을 사용해서 dom 조작하기 # 14-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 14, 1강, form을 이용해서 dom 조작하기](https://youtu.be/v3TB17xEXyk) - [CODEPEN](https://codepen.io/jangka44/pen/yLpRBer?editors=0010) - DOM은 일단, 화면에 보여지는 객체들이라고 생각해주시면 됩니다. # 14-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 14, 2강, 숫자기록입력상자에 form을 이용한 dom 조작](https://youtu.be/kQHfD2lub0g) - [CODEPEN - 시작](https://codepen.io/jangka44/pen/jOYvgWG?editors=0010) - [CODEPEN - 결과](https://codepen.io/jangka44/pen/GRyYKry?editors=0010) - DOM은 일단, 화면에 보여지는 객체들이라고 생각해주시면 됩니다. # 챕터 15, useRef 기초 # 15-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 15, 1강, useRef를 사용해서 dom 조작하기](https://youtu.be/gAXvTxke8SE) - [CODEPEN](https://codepen.io/jangka44/pen/WNdaejL?editors=0010) # 15-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 15, 2강, 숫자기록입력상자에 useRef를 이용하여 dom 조작](https://youtu.be/YXFyCHmXM6E) - [CODEPEN - 시작](https://codepen.io/jangka44/pen/jOYvgWG?editors=0010) - [CODEPEN - 결과](https://codepen.io/jangka44/pen/MWrPpYO?editors=0010) # 15-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 15, 3강, useRef와 useState의 차이점](https://youtu.be/4djLEcGkuRM) - [CODEPEN](https://codepen.io/jangka44/pen/GRyYKyd?editors=0011) # 챕터 16, 배열에서 특정요소를 제거 # 16-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 16, 1강, 배열에서 특정요소를 제거](https://youtu.be/89qUe7M1TRo) - [CODEPEN](https://codepen.io/jangka44/pen/oNpaZzr?editors=0010) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) # 16-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 16, 2강, 숫자리스트에서, 특정숫자제거, 첫숫자제거, 마지막숫자제거 기능 추가](https://youtu.be/8yJptiSZ3CI) - [CODEPEN - 시작](https://codepen.io/jangka44/pen/MWrPpYO?editors=0010) - [CODEPEN - 결과](https://codepen.io/jangka44/pen/JjMmWJV?editors=0010) # 16-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 16, 3강, 숫자리스트에서, 특정 위치에 있는 숫자를 제거](https://youtu.be/-EClktYc0vs) - [CODEPEN](https://codepen.io/jangka44/pen/WNdapaM?editors=0010) # 16-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 16, 4강, 숫자리스트항목에 삭제기능](https://youtu.be/FZBVfJHnCmA) - [CODEPEN](https://codepen.io/jangka44/pen/popxeGO?editors=0010) # 챕터 17, 배열에서 특정요소를 수정 # 17-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 17, 1강, 배열에서 특정요소를 수정](https://youtu.be/ypQwyf78Xxg) - [CODEPEN](https://codepen.io/jangka44/pen/gOoBxWr?editors=0010) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) # 17-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 17, 2강, 숫자리스트에서 특정요소를 원하는 숫자로 수정](https://youtu.be/6fkMT2yUwqY) - [CODEPEN - 시작](https://codepen.io/jangka44/pen/popxeGO?editors=0010) - [CODEPEN - 결과](https://codepen.io/jangka44/pen/XWVxaRx?editors=0010) # 17-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 17, 3강, 숫자리스트항목에 수정기능](https://youtu.be/XowkFhxL-1M) - [CODEPEN](https://codepen.io/jangka44/pen/XWVxaRx?editors=0010) # 챕터 18, 개발에 유용한 사이트 소개 # 18-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 18, 1강, 웹 라이브러리들의 cdn을 제공해주는 사이트, cdnjs](https://youtu.be/0V-U_-W4Ms0) - [CODEPEN](https://codepen.io/jangka44/pen/PoExGaz?editors=1010) - [CDNJS - https://cdnjs.com/](https://cdnjs.com/) - [CDNJS - 제이쿼리](https://cdnjs.com/libraries/jquery) # 18-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 18, 2강, 상업적으로 이용가능한 한글폰트 제공 사이트, 눈누](https://youtu.be/hu-ISdn68Yw) - [CODEPEN](https://codepen.io/jangka44/pen/OJzaRwb?editors=1000) - [눈누](https://noonnu.cc/) - [눈누 - 지마켓산스](https://noonnu.cc/font_page/366) # 18-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 18, 3강, 폰트기반 아이콘 라이브러리, 폰트어썸](https://youtu.be/ATAn3wyehtI) - [CODEPEN](https://codepen.io/jangka44/pen/gOoQwBM?editors=1010) - [폰트어썸 - 아이콘](https://fontawesome.com/icons/) - [폰트어썸 - 아이콘, 모든 카테고리](https://fontawesome.com/icons/categories) - [폰트어썸 - 아이콘, 모든 무료아이콘](https://fontawesome.com/search?m=free) - [CDNJS - 폰트어썸](https://cdnjs.com/libraries/font-awesome) # 챕터 19, 알림기능 구현 # 19-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 19, 1강, 데이지UI의 Alert 컴포넌트 사용하여 알림UI](https://youtu.be/hJaRQgPvW38) - [CODEPEN](https://codepen.io/jangka44/pen/KKZrgJQ?editors=0010) - [데이지UI - Alert 컴포넌트](https://daisyui.com/components/alert/) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) # 19-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 19, 2강, 폰트어썸 아이콘, 지마켓산스폰트 적용](https://youtu.be/DoLjkAZj9fY) - [CODEPEN](https://codepen.io/jangka44/pen/XWVyjOo?editors=0010) - [폰트어썸 - circle-info, solid](https://fontawesome.com/icons/circle-info?s=solid) # 19-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 19, 3강, Alert 컴포넌트 옵션작업](https://youtu.be/khnZ18rccus) - [CODEPEN](https://codepen.io/jangka44/pen/JjMeRzQ?editors=0010) # 19-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 19, 4강, NotifyOnce 컴포넌트로 Alert 컴포넌트를 감싸서 숨김](https://youtu.be/f7l-pdYL4PE) - [CODEPEN](https://codepen.io/jangka44/pen/gOoQwNg?editors=0010) - [SKYPACK - classnames](https://www.skypack.dev/view/classnames) - [테일윈드 - 치트시트](https://nerdcave.com/tailwind-cheat-sheet) # 19-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 19, 5강, 어떤함수가 재실행되어도, 함수의 특정부분은 재실행하지 않게 하는 방법](https://youtu.be/E2UZEWv87kk) - [CODEPEN](https://codepen.io/jangka44/pen/YzYRpZp?editors=0012) # 19-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 19, 6강, 전역변수를 사용해서 함수의 특정부분 재실행 방지](https://youtu.be/3AmbhBHiZm4) - [CODEPEN](https://codepen.io/jangka44/pen/ExoONwx?editors=0011) # 19-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 19, 7강, state를 사용해서 함수의 특정부분 재실행 방지](https://youtu.be/CJD95IoCJmw) - [CODEPEN](https://codepen.io/jangka44/pen/GRywNOM?editors=0011) # 챕터 20, useEffect를 사용하여 한번 알림된 내용이 다시 알림되지 않도록 # 20-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 20, 1강, useEffect를 사용하여 함수의 특정부분 재실행 방지](https://youtu.be/OCsQ5Qo1Yno) - [CODEPEN](https://codepen.io/jangka44/pen/NWXEbYL?editors=0011) # 20-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 20, 2강, 의존성 배열 인자를 제거하면, 매번 실행은 되지만 타이밍이 늦어진다.](https://youtu.be/Rhf4FfdsYow) - [CODEPEN](https://codepen.io/jangka44/pen/rNpQWbV?editors=0011) # 20-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 20, 3강, 타이팅이 늦어져야 하는 경우, useRef, useEffect 조합](https://youtu.be/zwNb4xXiMPs) - [CODEPEN](https://codepen.io/jangka44/pen/XWVyNLX?editors=0010) # 20-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 20, 4강, 자식이 리랜더링 되는것은 부모 관계없고, 부모가 리랜더링되면 자식도 리랜더링 됨](https://youtu.be/pa8ktG16uyM) - [CODEPEN](https://codepen.io/jangka44/pen/oNpQBNe?editors=0011) # 20-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 20, 5강, useEffect의 의존성배열을 이용해서, 실행민감도 조절](https://youtu.be/pekyPhH11QQ) - [CODEPEN](https://codepen.io/jangka44/pen/bGaQgEZ?editors=0011) # 20-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 20, 6강, useEffect의 cleanup 함수](https://youtu.be/DDj1Oxjznns) - [CODEPEN](https://codepen.io/jangka44/pen/oNpmERj?editors=0011) # 20-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 20, 7강, useEffect로 컴포넌트가 unmount 될 때 관련된 예약들 취소](https://youtu.be/mkjYDNKHoRQ) - [CODEPEN](https://codepen.io/jangka44/pen/bGazLXL?editors=0011) # 챕터 21, 다크모드 구현 # 21-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 21, 1강, 제이쿼리 방식의 다크모드](https://youtu.be/4AZDwS36SYE) - [CODEPEN](https://codepen.io/jangka44/pen/VwyVPMx) # 21-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 21, 2강, 리액트 방식으로 변경](https://youtu.be/8QSZGobmMns) - [CODEPEN](https://codepen.io/jangka44/pen/yLpQgKO?editors=1010) # 챕터 22, useMemo 사용하여 쓸데없는 연산 줄이기 # 22-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 22, 1강, useMemo를 하기 위한 준비, 실행이 완료되는데 엄청 오래 걸리는 함수 구현](https://youtu.be/YaCS-aj_gS0) - [CODEPEN](https://codepen.io/jangka44/pen/eYyQvvV?editors=1011) - [제타위키 - https://zetawiki.com/wiki/자바스크립트_수행시간_측정](https://zetawiki.com/wiki/자바스크립트_수행시간_측정) # 22-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 22, 2강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현](https://youtu.be/kJI5zATW-5g) - [CODEPEN](https://codepen.io/jangka44/pen/QWaJpvp?editors=1010) # 22-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 22, 3강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 state 적용](https://youtu.be/vQi0v3vqvnw) - [CODEPEN](https://codepen.io/jangka44/pen/eYyQeqR?editors=0011) # 22-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 22, 4강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useEffect 적용](https://youtu.be/9iORosswWT8) - [CODEPEN](https://codepen.io/jangka44/pen/rNpQpOY?editors=0011) # 22-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 22, 5강, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useMemo 적용](https://youtu.be/4zKDjavRKyg) - [CODEPEN](https://codepen.io/jangka44/pen/vYpQpKw?editors=0011) # 챕터 23, React.memo 사용하여 쓸데없는 연산 줄이기 # 23-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 23, 1강, 실행이 오래걸리는 PrimeNosCount 컴포넌트 구현](https://youtu.be/eTxpHlDhD6Q) - [CODEPEN](https://codepen.io/jangka44/pen/KKZrZRX?editors=0010) # 23-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 23, 2강, useEffect로 속도 최적화](https://youtu.be/0zwhZAf2cEI) - [CODEPEN](https://codepen.io/jangka44/pen/abEQRZg?editors=0011) # 23-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 23, 3강, useMemo로 속도 최적화](https://youtu.be/jBxrV5uIm40) - [CODEPEN](https://codepen.io/jangka44/pen/qBpQJRE?editors=0011) # 23-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 23, 4강, React.memo로 속도 최적화](https://youtu.be/IAlFTp1Owk4) - [CODEPEN](https://codepen.io/jangka44/pen/WNdYapz?editors=0011) # 챕터 24, useCallback 으로 어이없는 리랜더링 막기 # 24-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 24, 1강, useCallback을 사용하기 위한 환경을 만들기](https://youtu.be/IAlFTp1Owk4) - [CODEPEN](https://codepen.io/jangka44/pen/RwxqeYg?editors=0011) # 24-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 24, 2강, useCallback을 사용하여 어이없는 리랜더링 막기](https://youtu.be/FSBsd0KPoFg) - [CODEPEN](https://codepen.io/jangka44/pen/YzYRJvZ?editors=0011) # 챕터 25, 음식주문시 옵션기능 # 25-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 1강, 음식옵션 리스트](https://youtu.be/0v87Krorc_8) - [CODEPEN](https://codepen.io/jangka44/pen/popQxOG?editors=0010) # 25-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 2강, 음식옵션 리스트아이템 체크기능](https://youtu.be/c5YssZTD0aI) - [CODEPEN](https://codepen.io/jangka44/pen/jOYQeeX?editors=0010) # 25-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 3강, 리스트아이템을 전부 체크하면, 전체 토글 체크박스도 체크 되도록](https://youtu.be/KLKkB_NCPag) - [CODEPEN](https://codepen.io/jangka44/pen/dyJQgQN?editors=0010) # 25-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 4강, 전체 토글 체크박스를 클릭시 그 상태가 전체에 반영](https://youtu.be/cRG0yOcBCk4) - [CODEPEN](https://codepen.io/jangka44/pen/dyJQgwN?editors=0010) # 25-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 5강, new Array().fill 기능으로 초기상태를 쉽게 만들기](https://youtu.be/2Qtf2sy-Bbo) - [CODEPEN](https://codepen.io/jangka44/pen/XWVyxOJ?editors=0010) # 25-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 6강, 옵션의 선택개수표시](https://youtu.be/sz5nvkdtkPE) - [CODEPEN](https://codepen.io/jangka44/pen/xxpQyBV?editors=0010) # 25-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 7강, useMemo 사용하여 옵션과 상관없는 변화에 의한 쓸데없는 옵션관련계산 없애기](https://youtu.be/YvfwTsC_T9Y) - [CODEPEN](https://codepen.io/jangka44/pen/gOoQByv?editors=0010) # 25-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 8강, OrderMainFood, OrderOptions 컴포넌트로 나눔](https://youtu.be/103mCiZSXmY) - [CODEPEN](https://codepen.io/jangka44/pen/KKZrGLY?editors=0010) # 25-9강 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 9강, React.memo, useCallback 사용하여 각각의 컴포넌트 자체가 필요할 경우에만 리랜더링 되도록](https://youtu.be/7YNczkx8xlc) - [CODEPEN](https://codepen.io/jangka44/pen/GRywwgx?editors=0011) # 챕터 26, 체크박스, 셀렉트박스, 라디오버튼 # 26-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 26, 1강, 체크박스, 셀렉트박스, 라디오버튼](https://youtu.be/6MteJEAZ1-I) - [CODEPEN](https://codepen.io/jangka44/pen/JjMeqNj?editors=1000) # 26-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 26, 2강, 체크박스 다루기](https://youtu.be/4V-X_ZgEu58) - [CODEPEN](https://codepen.io/jangka44/pen/rNpQQrj?editors=0010) # 26-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 26, 3강, 라디오버튼 다루기](https://youtu.be/OUgReM-arBo) - [CODEPEN](https://codepen.io/jangka44/pen/XWVyyyR?editors=0010) # 26-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 26, 4강, 반복문으로 라디오버튼 출력 후 관리](https://youtu.be/UboPKu_xxts) - [CODEPEN](https://codepen.io/jangka44/pen/MWrzzZj?editors=0010) # 26-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 26, 5강, 셀렉트박스 다루기](https://youtu.be/g6pY9YyT-Uk) - [CODEPEN](https://codepen.io/jangka44/pen/mdpQQov?editors=0010) # 26-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 26, 6강, 음식주문폼에 체크박스, 라디오버튼 도입, 상황에 따른 상태생성 위치 설명](https://youtu.be/-t5svhXqqVQ) - [CODEPEN](https://codepen.io/jangka44/pen/JjMeeQL?editors=0010) # 챕터 27, 함수를 만들면 좋은 이유 # 27-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 27, 1강, 할일추가 함수를 만들면 그 이후가 편함](https://youtu.be/UD23QU93Gzs) - [CODEPEN](https://codepen.io/jangka44/pen/oNpJoyo?editors=0010) # 27-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 27, 2강, 할일삭제 함수를 만들면 그 이후가 편함](https://youtu.be/TnkRUwe8zvE) - [CODEPEN](https://codepen.io/jangka44/pen/Vwyqrgx?editors=0010) # 27-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 27, 3강, 할일수정 함수를 만들면 그 이후가 편함](https://youtu.be/1JdfakNDgu0) - [CODEPEN](https://codepen.io/jangka44/pen/zYpyPVw?editors=0010) # 챕터 28, 객체배열의 CRUD # 28-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 28, 1강, 객체형식의 할일을 추가하는 기능 구현](https://youtu.be/m_QsH-pn3lc) - [CODEPEN](https://codepen.io/jangka44/pen/QWazaBd?editors=0010) # 28-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 28, 2강, 할일추가시 할일번호가 자동으로 1씩 증가되도록, useState 이용](https://youtu.be/fBPkr9CMWCA) - [CODEPEN](https://codepen.io/jangka44/pen/MWrZrBE?editors=0010) # 28-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 28, 3강, 할일추가시 할일번호가 자동으로 1씩 증가되도록, useRef 이용](https://youtu.be/jSofs_VGIwA) - [CODEPEN](https://codepen.io/jangka44/pen/QWazaVd?editors=0010) # 28-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 28, 4강, 할일삭제](https://youtu.be/YBYjXDwRHOU) - [CODEPEN](https://codepen.io/jangka44/pen/mdpapoy?editors=0012) # 28-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 28, 5강, 리스트에서 특정요소객체의 일부속성만 불변성 있게 변경하는 방법](https://youtu.be/cfhsd-UL0f8) - [CODEPEN](https://codepen.io/jangka44/pen/yLpGpGz?editors=0010) # 28-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 28, 6강, 할일수정](https://youtu.be/lfMzbLcHbcY) - [CODEPEN](https://codepen.io/jangka44/pen/PoEXEMN?editors=0010) # 챕터 29, 커스텀 훅 # 29-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 29, 1강, 할일리스트앱을 상위(로직) 컴포넌트와 하위(UI) 컴포넌트로 분리](https://youtu.be/CYihsqgego8) - [CODEPEN](https://codepen.io/jangka44/pen/KKZbQRB?editors=0010) # 29-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 29, 2강, 로직중에서도 UI 컴포넌트와 밀접한 것들은 UI 컴포넌트로 이동](https://youtu.be/IUMjnEdFxl0) - [CODEPEN](https://codepen.io/jangka44/pen/MWrZQXZ?editors=0010) # 29-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 29, 3강, 커스텀 훅으로 UI와 관계없는 핵심 로직과 상태들을 묶을 수 있다](https://youtu.be/GjHl7JWkGPY) - [CODEPEN](https://codepen.io/jangka44/pen/OJzrQox?editors=0010) # 29-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 29, 4강, 커스텀 상태를 구조분해 하지않고, 바로 자식에게 넘김](https://youtu.be/xcae3HVSksw) - [CODEPEN](https://codepen.io/jangka44/pen/oNpJEJx?editors=0010) # 29-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 29, 5강, 자식이 커스텀 상태를 구조분해 하지않고, 바로 사용](https://youtu.be/Jlnu1j9CI2s) - [CODEPEN](https://codepen.io/jangka44/pen/YzYdeBN?editors=0010) # 챕터 30, 할일 리스트 # 30-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 1강, 새 할일 폼 만들기](https://youtu.be/xm0c_qLcCAE) - [CODEPEN](https://codepen.io/jangka44/pen/jOYXeJv?editors=0010) # 30-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 2강, 할일작성날짜를 기록](https://youtu.be/Ff5fDhwXI5E) - [CODEPEN](https://codepen.io/jangka44/pen/RwxEemV?editors=0010) - [CODEPEN - to2.kr/dDL - 자바스크립트 날짜객체를 yyyy-mm-dd hh:mm:ss 형태로 변환](https://to2.kr/dDL) # 30-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 3강, 쉬운개발을 위해 날짜를 문장형태로 저장](https://youtu.be/Gq7_UfbFLPE) - [CODEPEN](https://codepen.io/jangka44/pen/GRyPwZy?editors=0010) # 30-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 4강, TodoList, TodoListItem 컴포넌트로 분리](https://youtu.be/k4FHp0cruGI) - [CODEPEN](https://codepen.io/jangka44/pen/qBpLQNa?editors=0010) # 30-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 5강, 삭제기능](https://youtu.be/Tv3QFqnrkkk) - [CODEPEN](https://codepen.io/jangka44/pen/vYpvQXe?editors=0010) # 30-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 6강, 수정모드로 변경하는 버튼](https://youtu.be/5u6mxuzsDhg) - [CODEPEN](https://codepen.io/jangka44/pen/JjMwebR?editors=0010) # 30-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 7강, 수정모드에서 입력상자와 수정취소버튼, 수정취소버튼 노출](https://youtu.be/_kMwHjqkuV4) - [CODEPEN](https://codepen.io/jangka44/pen/PoEXxWe?editors=0010) # 30-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 8강, 수정모드 입력상자의 기본값 적용](https://youtu.be/xYHfKgKD9So) - [CODEPEN](https://codepen.io/jangka44/pen/abEPQXW?editors=0010) # 30-9강 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 9강, 수정모드취소시, 입력상자의 값이 기본값으로 돌아가도록](https://youtu.be/zUpWnr2qYiE) - [CODEPEN](https://codepen.io/jangka44/pen/NWXeEpe?editors=0010) # 30-10강 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 10강, 수정기능](https://youtu.be/YzaoJFct-lc) - [CODEPEN](https://codepen.io/jangka44/pen/BaJvGdq?editors=0010) # 챕터 31, MUI 소개 # 31-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 31, 1강, MUI 소개](https://youtu.be/s5QfRl2J0sc) - [to2.kr/dDN - 리액트 MUI 연습장](https://to2.kr/dDN) - [MUI](https://mui.com/) - [MUI - all components](https://mui.com/material-ui/) # 31-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 31, 2강, 리액트 MUI 연습장, to2.kr/dDN 소개](https://youtu.be/yhlVwxnI7qw) - [to2.kr/dDN - 리액트 MUI 연습장](https://to2.kr/dDN) - [CODEPEN](https://codepen.io/jangka44/pen/abEXVWv?editors=0010) # 31-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 31, 3강, 컴포넌트 설명서 보는 방법](https://youtu.be/0Y_N0m5CITY) - [CODEPEN](https://codepen.io/jangka44/pen/KKZJyyY?editors=0010) - [MUI - Autocomplete](https://mui.com/material-ui/react-autocomplete/) - [테일윈드 치트시트](https://nerdcave.com/tailwind-cheat-sheet) # 31-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 31, 4강, 컴포넌트 API 확인 방법](https://youtu.be/N327r856K74) - [MUI - Autocomplete API](https://mui.com/material-ui/api/autocomplete/) # 31-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 31, 5강, MUI 테마 커스터마이징 하는 방법](https://youtu.be/IsquAs9AFkE) - [MUI THEME 제너리에터](https://bareynol.github.io/mui-theme-creator) - [CODEPEN](https://codepen.io/jangka44/pen/vYpbdMX?editors=0010) # 챕터 32, MUI 컴포넌트 # 32-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 1강, Button](https://youtu.be/n7WbeQYyqF0) - [to2.kr/dDN - 리액트 MUI 연습장](https://to2.kr/dDN) - [CODEPEN](https://codepen.io/jangka44/pen/zYpepBw?editors=0010) # 32-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 2강, AppBar](https://youtu.be/n25Lo6Vs_BU) - [CODEPEN](https://codepen.io/jangka44/pen/wvpNmzj?editors=0010) # 32-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 3강, AppBar, fixed](https://youtu.be/u7fgPeqb_-Y) - [CODEPEN](https://codepen.io/jangka44/pen/RwxvMKg?editors=0010) # 32-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 4강, Snackbar](https://youtu.be/tDJ7N3mrQyo) - [CODEPEN](https://codepen.io/jangka44/pen/xxpMjYY?editors=0010) # 32-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 5강, Snackbar에 Alert 넣기](https://youtu.be/mBhRci5OPto) - [CODEPEN](https://codepen.io/jangka44/pen/xxpMjoJ?editors=0010) # 32-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 6강, Backdrop](https://youtu.be/YrcqOW5T3dg) - [CODEPEN](https://codepen.io/jangka44/pen/MWrLXwO?editors=0010) # 32-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 7강, Drawer](https://youtu.be/ZwlWsZJQrn4) - [CODEPEN](https://codepen.io/jangka44/pen/MWrLXaO?editors=0010) # 32-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 8강, TabMenu](https://youtu.be/3ShdESLr_VE) - [CODEPEN](https://codepen.io/jangka44/pen/xxpMzRm?editors=0010) # 챕터 33, 할일리스트에 MUI 적용 # 33-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 1강, 앱바](https://youtu.be/u7cibEI4qz4) - [to2.kr/dDN - 리액트 MUI 연습장](https://to2.kr/dDN) - [CODEPEN](https://codepen.io/jangka44/pen/yLprqNv?editors=0010) # 33-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 2강, 할일추가 폼](https://youtu.be/i8s6txcC_nY) - [CODEPEN](https://codepen.io/jangka44/pen/eYyojpj?editors=0010) # 33-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 3강, 할일추가 폼 꾸미기](https://youtu.be/5AyNGI5N0wA) - [CODEPEN](https://codepen.io/jangka44/pen/xxpeJwB?editors=0010) # 33-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 4강, 할일리스트](https://youtu.be/qeibYJSJrBY) - [CODEPEN](https://codepen.io/jangka44/pen/QWaPBGO?editors=0010) # 33-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 5강, 테스트 데이터 생성, 할일 3개](https://youtu.be/cSWmVq9pcmM) - [CODEPEN](https://codepen.io/jangka44/pen/gOoyjLw?editors=0010) # 33-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 6강, 할일리스트 꾸미기, Chip 적용](https://youtu.be/4C-F7dyf-to) - [CODEPEN](https://codepen.io/jangka44/pen/zYpXLrM?editors=0010) # 33-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 7강, 할일리스트 꾸미기, 본문 꾸미기](https://youtu.be/3RUOwqRKy3w) - [CODEPEN](https://codepen.io/jangka44/pen/NWXmBRv?editors=0010) # 33-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 8강, 멀티라인 텍스트 필드](https://youtu.be/DYA_spOxzWA) - [CODEPEN](https://codepen.io/jangka44/pen/gOoyqBb?editors=0010) # 챕터 34, MUI와 테일윈드 같이 사용 # 34-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 1강, 테일윈드 느낌표 기능으로 mui에서 정해놓은 스타일 수정, Chip 상단여백 조절](https://youtu.be/4-JA30Ozn8A) - [CODEPEN](https://codepen.io/jangka44/pen/MWrRLZE?editors=0010) # 34-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 2강, 할일리스트 최신순으로 정렬](https://youtu.be/InfZ-YiV4rg) - [CODEPEN](https://codepen.io/jangka44/pen/MWrRLZE?editors=0010) # 34-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 3강, MUI로 글자색을 primary 색상으로 변경](https://youtu.be/of6Tu1seOF8) - [CODEPEN](https://codepen.io/jangka44/pen/jOYRdow?editors=0010) # 34-강 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 4강, CSS 변수](https://youtu.be/of6Tu1seOF8) - [CODEPEN](https://codepen.io/jangka44/pen/XWVQQam?editors=1100) # 34-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 5강, 자바스크립트에서 정의된 색상을 CSS에서 사용하는 방법](https://youtu.be/InfZ-YiV4rg) - [CODEPEN](https://codepen.io/jangka44/pen/ExoJJby) # 34-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 6강, 테일윈드 JIT을 이용한 css 변수접근](https://youtu.be/Qxwd12u8tOM) - [CODEPEN](https://codepen.io/jangka44/pen/yLprrpB?editors=1100) - [테일윈드](https://tailwindcss.com/docs) - [테일윈드 - hover-focus-and-other-states](https://tailwindcss.com/docs/hover-focus-and-other-states) - [테일윈드 - jit](https://v2.tailwindcss.com/docs/just-in-time-mode) - [테일윈드 치트시트 - https://nerdcave.com/tailwind-cheat-sheet](https://nerdcave.com/tailwind-cheat-sheet) # 34-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 7강, 테일윈드의 다양한 조건적 스타일링](https://youtu.be/UJNCGSR_EgQ) - [CODEPEN](https://codepen.io/jangka44/pen/NWXmmmZ?editors=1000) # 34-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 8강, mui 테마 색상들을 CSS에서 사용할 수 있도록, CSS 변수화](https://youtu.be/7dF_Nwrm34M) - [CODEPEN](https://codepen.io/jangka44/pen/KKZYLKd?editors=0011) # 챕터 35, 할일리스트 좌측에 체크박스, 우측 옵션버튼 # 35-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 1강, 레이아웃](https://youtu.be/guVIuTlDVZc) - [CODEPEN](https://codepen.io/jangka44/pen/LYeoYXV?editors=0011) # 35-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 2강, 좌측에 버튼, 버튼내용물을 수직상단으로 정렬](https://youtu.be/KnYxtvPdBxk) - [CODEPEN](https://codepen.io/jangka44/pen/WNdBNPJ?editors=0011) - [테일윈드](https://tailwindcss.com/docs) - [테일윈드 - hover-focus-and-other-states](https://tailwindcss.com/docs/hover-focus-and-other-states) - [테일윈드 - jit](https://v2.tailwindcss.com/docs/just-in-time-mode) - [테일윈드 치트시트 - https://nerdcave.com/tailwind-cheat-sheet](https://nerdcave.com/tailwind-cheat-sheet) # 35-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 3강, 좌측 버튼의 border-radius 세부조정](https://youtu.be/oxgJW8xhCaM) - [CODEPEN - border-radius 실험](https://codepen.io/jangka44/pen/yLpWLrG) - [CODEPEN](https://codepen.io/jangka44/pen/oNpRNOx?editors=0011) # 35-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 4강, 체크박스 크기, 체크색상, 언체크색상](https://youtu.be/Q-iHVqm4OW0) - [CODEPEN](https://codepen.io/jangka44/pen/popmoMq?editors=0010) # 35-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 5강, 우측옵션버튼 꾸미기](https://youtu.be/sjmFEDBfAyU) - [CODEPEN](https://codepen.io/jangka44/pen/OJzYPJz?editors=0010) # 35-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 6강, 우측옵션버튼 border-radius 세부조정](https://youtu.be/PgduEWG3LsI) - [CODEPEN](https://codepen.io/jangka44/pen/gOoJbbX?editors=0010) # 35-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 7강, 좌측버튼의 내용물과 우측버튼의 내용물에 고정높이를 주어서 균형을 맞춤](https://youtu.be/cm06UPhOOKM) - [CODEPEN](https://codepen.io/jangka44/pen/ZEvNYGN?editors=0010) # 35-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 8강, 할일본문의 상단, 하단에 margin](https://youtu.be/KnEYrRvT07Q) - [CODEPEN](https://codepen.io/jangka44/pen/rNpgaVX?editors=0010) # 35-9강 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 9강, 좌측버튼 우측에 divider 넣기](https://youtu.be/yammX2kqGkU) - [CODEPEN](https://codepen.io/jangka44/pen/ExozaPj?editors=0010) # 35-10강 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 10강, 모바일이 아닌 환경에서도 모바일과 비슷한 느낌의 스크롤이 나오도록](https://youtu.be/5pQgXdgU92A) - [CODEPEN - overlay 스크롤바, ken 2707, 74강](https://codepen.io/jangka44/pen/wvpegzM?editors=0100) - [HTML, CSS, JS 실무팁 사이트 - slog.gg/p/2707](https://slog.gg/p/2707) - [CODEPEN](https://codepen.io/jangka44/pen/XWVwJdW?editors=0010) # 35-11강 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 11강, 모바일화면에서 화면축소방지](https://youtu.be/jjRED3RQRZE) - [CODEPEN](https://codepen.io/jangka44/pen/KKZLdxe?editors=0010) # 챕터 36, 옵션 드로어 # 36-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 1강, 옵션 드로어](https://youtu.be/8fcB8Jq43iU) - [CODEPEN](https://codepen.io/jangka44/pen/ExozaZV?editors=0010) - [MUI - drawer](https://mui.com/material-ui/react-drawer) # 36-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 2강, 각각의 컴포넌트로 분리](https://youtu.be/CELx7j_PoHo) - [CODEPEN](https://codepen.io/jangka44/pen/oNpRgBB?editors=0010) # 36-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 3강, 옵션버튼 누르면 드로어 나오도록](https://youtu.be/DsYI2GDFdOY) - [CODEPEN](https://codepen.io/jangka44/pen/NWXVPpE?editors=0010) # 36-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 4강, 드로어관련된 가독성 개선](https://youtu.be/EIpeMb0n1ek) - [CODEPEN](https://codepen.io/jangka44/pen/ZEvNYyz?editors=0010) # 36-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 5강, 옵션드로어 커스텀 훅](https://youtu.be/VXY5cd6b_NQ) - [CODEPEN](https://codepen.io/jangka44/pen/wvpbBeE?editors=0010) # 36-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 6강, TodoOptionDrawer 컴포넌트](https://youtu.be/8qnxL-pqg6A) - [CODEPEN](https://codepen.io/jangka44/pen/zYpQxEr?editors=0010) # 36-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 7강, SwipableDrawer로 교체](https://youtu.be/jej4jwqCeoE) - [CODEPEN](https://codepen.io/jangka44/pen/dyJEPVR?editors=0010) # 36-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 8강, 드로어의 내용으로 리스트 넣기](https://youtu.be/lVMeLZXyLBQ) - [CODEPEN](https://codepen.io/jangka44/pen/ExozabK?editors=0010) # 36-9강 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 9강, items-baseline, line-height 관련 실험](https://youtu.be/W2Hqzg0fhOg) - [CODEPEN](https://codepen.io/jangka44/pen/vYpwERp?editors=1100) # 36-10강 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 10강, 수정, 삭제버튼에 아이콘 넣기](https://youtu.be/HqNj66KoUQM) - [CODEPEN](https://codepen.io/jangka44/pen/yLpWyjB?editors=0110) # 챕터 37, 수정, 삭제기능 # 37-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 1강, 할일삭제, todoOptionDrawerStatus에서 Status를 State로 변경](https://youtu.be/rshX3kgdlPM) - [CODEPEN - removeTodoById 실험](https://codepen.io/jangka44/pen/rNpgVLy?editors=0011) - [CODEPEN](https://codepen.io/jangka44/pen/vYpwOGV?editors=0110) # 37-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 2강, 수정을 위한 모달](https://youtu.be/VZ8lzh42nJ4) - [CODEPEN](https://codepen.io/jangka44/pen/abErOJE?editors=0010) # 37-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 3강, 수정버튼을 누르면 모달이 나오도록](https://youtu.be/JZjvCkG0lP8) - [CODEPEN](https://codepen.io/jangka44/pen/XWVwbRa?editors=0010) # 37-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 4강, 할일수정모달 커스텀 훅](https://youtu.be/PMMRi2T9gCw) - [CODEPEN](https://codepen.io/jangka44/pen/NWXVqvq?editors=0010) # 37-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 5강, 할일수정모달을 별도의 컴포넌트로 분리](https://youtu.be/GyoSy10svjU) - [CODEPEN](https://codepen.io/jangka44/pen/yLpWNoV?editors=0010) # 37-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 6강, 할일수정 폼](https://youtu.be/sWVWZs-dv2M) - [CODEPEN](https://codepen.io/jangka44/pen/yLpWNoV?editors=0010) # 37-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 7강, 할일수정 폼 처리](https://youtu.be/gEfMRusvKUI) - [CODEPEN](https://codepen.io/jangka44/pen/YzYbXYB?editors=0010) # 37-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 8강, 할일삭제 전에 confirm](https://youtu.be/WIw0ujyTTBg) - [CODEPEN](https://codepen.io/jangka44/pen/MWrdwGm?editors=0010) # 37-9강 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 9강, 할일수정이 취소되거나 완료되면, 드로어까지 종료](https://youtu.be/3rAF701059M) - [CODEPEN](https://codepen.io/jangka44/pen/bGaydjE?editors=0010) # 챕터 38, 스낵바 # 38-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 38, 1강, 스낵바 알림](https://youtu.be/WixW16XMiog) - [CODEPEN](https://codepen.io/jangka44/pen/ZEvdOZq?editors=0010) # 38-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 38, 2강, NoticeSnackbar 컴포넌트](https://youtu.be/lAySTxPTxoo) - [CODEPEN](https://codepen.io/jangka44/pen/jOYjroz?editors=0010) # 38-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 38, 3강, useNoticeSnackbarState 커스텀 훅](https://youtu.be/0f-_BPKjtJk) - [CODEPEN](https://codepen.io/jangka44/pen/popXEEx?editors=0010) # 38-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 38, 4강, 할일의 추가/수정/삭제에 스낵바 알림 적용](https://youtu.be/RX_uRm-GAqo) - [CODEPEN](https://codepen.io/jangka44/pen/MWrMjpL?editors=0010) # 챕터 39, VS CODE 설치 # 39-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 39, 1강, VS CODE 깔끔한 삭제](https://youtu.be/AUS7oYvIdNk) - [바람코코 - VScode 초기화 시키기(완전 삭제)](https://oneday-haru.tistory.com/5) # 39-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 39, 2강, VS CODE 설치](https://youtu.be/3mCOAilXw3c) - [VS CODE 다운로드](https://code.visualstudio.com/) # 39-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 39, 3강, 필수 플러그인 설치](https://youtu.be/VXrQRK-GUbI) # 39-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 39, 4강, 필수 세팅](https://youtu.be/LDEgharTqCg) # 39-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 39, 5강, 정적 웹사이트 프로젝트 세팅](https://youtu.be/muAUiIaJMY8) - [리포지터리 - github.com/jhs512/class101_react_fullstack_exam__static_site_1](https://github.com/jhs512/class101_react_fullstack_exam__static_site_1) - [COMMIT - 프로젝트 세팅](https://github.com/jhs512/class101_react_fullstack_exam__static_site_1/commit/889c4c984b7343d7b045d9e1bf9a1baa1a91a834) # 챕터 40, nvm 으로 nodejs 설치 # 40-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 40, 1강, nvm 설치](https://youtu.be/iiut40i8t50) # 40-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 40, 2강, nvm을 이용해서 nodejs를 설치](https://youtu.be/bz8niXeTfV4) # 챕터 41, create-react-app@5 으로 리액트 프로젝트 세팅 # 41-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 41, 1강, create-react-app을 이용해서 리액트 프로젝트 생성](https://youtu.be/4mX1HgteQto) - [리포지터리 - github.com/jhs512/class101_react_fullstack_exam__cra_app_1](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_1) - [COMMIT - 프로젝트 세팅](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_1/commit/3f6ccfa55810d75a72edd2317de5924c43d1d404) - [COMMIT - App.js 변경](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_1/commit/151e6c01784ce79975044b1ed0d039a8f7481d99) - 주의사항 : `npx create-react-app ~` 명령이 안될경우 - `npx create-react-app@5 ~` 명령으로 진행해주세요. - ex : `npx create-react-app@5 exam1` # 41-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 41, 2강, 쓸데없는 프로젝트 제거](https://youtu.be/sNwdppA7TmI) - [COMMIT - 쓸데없는 파일과 소스코드들 삭제](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_1/commit/7588a5c490161c3f5f3b964a23a699905721bb88) # 챕터 42, GIT 기초 # 42-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 42, 1강, GIT 설치](https://youtu.be/7J1WNMt0Jvw) - [GIT - git-scm.com](https://git-scm.com/) - git 클라이언트 업그레이트 명령어 : git update-git-for-windows # 42-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 42, 2강, GITHUB 가입](https://youtu.be/u4MUBAKx8rk) - [GITHUB - github.com](https://github.com/) # 42-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 42, 3강, 필수적으로 수행해야할 GIT 튜토리얼 소개, slog.gg/p/1229](https://youtu.be/_8sftMiT1us) - [GIT 튜토리얼 - slog.gg/p/1229](https://slog.gg/p/1229) # 챕터 43, 상태관리가 필요한 이유 # 43-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 43, 1강, 안보이는 것과 없는것은 다르다](https://youtu.be/gJpYAtFVlY4) - [CODEPEN](https://codepen.io/jangka44/pen/dyJBxqO?editors=0010) # 43-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 43, 2강, useState의 실행이 끊임없이 계속 이어져야 데이터가 보존된다.](https://youtu.be/XlAIDGa0jdE) - [CODEPEN](https://codepen.io/jangka44/pen/NWXZQQE?editors=0010) # 43-3강 ## 부모의 no 상태에 따른 자식들(Sub3, Sub4)의 값 보존 여부 ### 1단계 : 부모의 no가 0 $$uml @startmindmap * App(no : 0) ** Sub3(실행안됨) ** Sub4(no : 0) @endmindmap $$ ### 2단계 : Sub4의 no를 10으로 변경 $$uml @startmindmap * App(no : 0) ** Sub3(실행안됨) ** Sub4(no : 10) @endmindmap $$ ### 3단계 : 부모의 no값을 1로 변경, Sub4는 이번턴에서 실행안됨 $$uml @startmindmap * App(no : 1) ** Sub3(no : 0) ** Sub4(실행안됨) @endmindmap $$ ### 4단계 : 부모의 no값을 2로 변경, Sub4가 다시 렌더링, 하지만 내부의 no는 다시 0부터 시작 $$uml @startmindmap * App(no : 2) ** Sub3(실행안됨) ** Sub4(no : 0) @endmindmap $$ ### 5단계 : 상태관리도구를 도입, Sub4가 없어진 동안에도, Sub4의 no값을 기억 $$uml @startmindmap * 저장소(sub3의 no, sub4의 no 값 기억) ** App(no : 2) *** Sub3(실행안됨) *** Sub4(no : 0) @endmindmap $$ - [영상 - 리액트풀스택, ken 5034, 챕터 43, 3강, 상태관리도구가 제공하는 주요기능 중 하나는 값 유지 입니다](https://youtu.be/hrvrTriNR78) # 챕터 44, 리코일 기초 # 44-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 1강, 리코일 개요](https://youtu.be/tCAeR1xt2ww) - [리코일js - recoiljs.org/ko/](https://recoiljs.org/ko/) # 44-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 2강, 리코일이 필요한 상황 만들기, 페이지1, 페이지2](https://youtu.be/DkBUAyg5MjY) - [CODEPEN](https://codepen.io/jangka44/pen/RwxXboM?editors=0010) # 44-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 3강, 리코일이 필요한 상황 만들기, 각 페이지에서 no값을 유지해야 하는 상황](https://youtu.be/HjwdSbKROtA) - [CODEPEN](https://codepen.io/jangka44/pen/GRyVKrG?editors=0010) # 44-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 4강, atom을 사용해서 각 페이지의 no값을 전역변수 화](https://youtu.be/WBm2gOW8Nj0) - [CODEPEN](https://codepen.io/jangka44/pen/wvpVwgR?editors=0010) # 44-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 5강, useRecoilValue, useSetRecoilState](https://youtu.be/Y0uTOypX7sY) - [CODEPEN](https://codepen.io/jangka44/pen/oNpKvoo?editors=0010) # 44-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 6강, 비슷한 atom을 여러개 만들어야 하는 상황](https://youtu.be/eEuG0KqYStk) - [CODEPEN](https://codepen.io/jangka44/pen/PoEMYEX?editors=0010) # 44-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 7강, 비슷한 atomFamily로 비슷한 atom을 동적으로 생성](https://youtu.be/e6NG0EqRFkE) - [CODEPEN](https://codepen.io/jangka44/pen/KKZOPQw?editors=0010) # 44-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 8강, 커스텀 훅 도입, 훅에서 atom 사용](https://youtu.be/WWjB2wVp1EM) - [CODEPEN](https://codepen.io/jangka44/pen/VwyoZQX?editors=0010) # 44-9강 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 9강, 훅에서 atomFamily를 사용하여, 각 페이지마다 고유의 값 유지가 안되는 버그 수정](https://youtu.be/eSuVxZ4_fZ0) - [CODEPEN](https://codepen.io/jangka44/pen/eYyqOKd?editors=0010) # 챕터 45, 리코일 적용 # 45-1강 ## 할일리스트의 구조 변천사 5단계 ### 1단계, 최초의 구조 $$uml @startmindmap * Root ** App(전역상태) @endmindmap $$ ### 2단계, NewTodoForm, TodoList로 나눠진 간단한 구조 $$uml @startmindmap * Root ** App(전역상태) ***[#Orange] NewTodoForm ***[#Orange] TodoList @endmindmap $$ ### 3단계, TodoList내부에서 TodoListItem를 분리한 구조 $$uml @startmindmap * Root ** App(전역상태) *** NewTodoForm *** TodoList ****[#Orange] TodoListItem ****[#Orange] TodoListItem ****[#Orange] TodoListItem @endmindmap $$ ### 4단계, BottomOptionDrawer와 EditTodoModal가 추가된 구조 $$uml @startmindmap * Root ** App(전역상태) *** NewTodoForm *** TodoList ****[#Orange] BottomOptionDrawer *****[#Orange] EditTodoModal ****[#lightgreen] TodoListItem1 ****[#lightgreen] TodoListItem2 @endmindmap $$ ### 5단계, NoticeSnackbar까지 추가된 구조 $$uml @startmindmap * Root ** App(전역상태) ***[#Orange] NoticeSnackbar ***[#lightgreen] NewTodoForm *** TodoList ****[#lightgreen] BottomOptionDrawer *****[#lightgreen] EditTodoModal **** TodoListItem1 **** TodoListItem2 @endmindmap $$ - [영상 - 리액트풀스택, ken 5034, 챕터 45, 1강, 현재 컴포넌트 구조](https://youtu.be/ngY_iBVDl9Y) - [CODEPEN - 38-4강](https://codepen.io/jangka44/pen/MWrMjpL?editors=0010) # 45-2강 ## 상태관리툴의 유무에 따른 todosState 관리방법 비교 ### 상태관리툴이 없을 경우, 직접, 자식 엘리먼트에게 전달한다. $$uml database "useTodosState()" autonumber Root -> App : 실행 "useTodosState()" -[#red]> App : todosState 주입 App -[#red]> NewTodoForm : 실행, todosState App -[#red]> TodoList : 실행, todosState TodoList -[#red]> TodoListItem__1 : 실행, todosState TodoList -[#red]> TodoListItem__2 : 실행, todosState $$ ### 상태관리툴이 도입된 경우, 필요한 엘리먼트에서 상태를 직접 주입받는다. $$uml database "useTodosState()" participant "useTodosState()" order 0 autonumber Root -> App : 실행 App -> NewTodoForm : 실행 "useTodosState()" -[#red]> NewTodoForm : todosState 주입 App -> TodoList : 실행 TodoList -> TodoListItem__1 : 실행 "useTodosState()" -[#red]> TodoListItem__1 : todosState 주입 TodoList -> TodoListItem__2 : 실행 "useTodosState()" -[#red]> TodoListItem__2 : todosState 주입 $$ - [영상 - 리액트풀스택, ken 5034, 챕터 45, 2강, todosState에 리코일 적용계획](https://youtu.be/gIOAkiiEFYM) - [CODEPEN - 38-4강](https://codepen.io/jangka44/pen/MWrMjpL?editors=0010) # 45-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 45, 3강, 커스텀 훅관련 문구 state를 status로 변경](https://youtu.be/T0Zzu3pT1kk) - [CODEPEN](https://codepen.io/jangka44/pen/gOoVOep?editors=0010) # 45-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 45, 4강, 리코일 import, todosAtom 도입](https://youtu.be/tPQASy4YXNM) - [CODEPEN](https://codepen.io/jangka44/pen/JjMgjvw?editors=0010) # 45-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 45, 5강, lastTodoIdAtom 도입](https://youtu.be/cs1gSWA-_WA) - [CODEPEN](https://codepen.io/jangka44/pen/LYewNod?editors=0010) # 45-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 45, 6강, NewTodoForm에서 직접 todosStatus를 주입받음](https://youtu.be/CISubqubKpY) - [CODEPEN](https://codepen.io/jangka44/pen/abEemZr?editors=0010) # 45-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 45, 7강, TodoList에서 직접 todosStatus를 주입받음](https://youtu.be/DCvh1Herwdc) - [CODEPEN](https://codepen.io/jangka44/pen/eYyqdEx?editors=0010) # 45-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 45, 8강, EditTodoModal에서 직접 todosStatus를 주입받음](https://youtu.be/Ac5FBDQlc2Q) - [CODEPEN](https://codepen.io/jangka44/pen/JjMgRMo?editors=0010) # 챕터 46, 리코일 퍼시스트 기초 # 46-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 46, 1강, 리코일 퍼시스트가 필요한 상황](https://youtu.be/3_1SQPpIgDI) - [CODEPEN - 44-4강](https://codepen.io/jangka44/pen/wvpVwgR?editors=0010) # 46-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 46, 2강, 로컬스토리지](https://youtu.be/XXEFjr50qNY) - [CODEPEN](https://codepen.io/jangka44/pen/rNpXMQX?editors=0012) # 46-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 46, 3강, 로컬스토리지에 객체 저장](https://youtu.be/ACFAUIQcEAo) - [CODEPEN](https://codepen.io/jangka44/pen/GRyVjaO?editors=0012) # 46-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 46, 4강, 리코일 퍼시스트](https://youtu.be/NUwncbVTdRE) - [CODEPEN](https://codepen.io/jangka44/pen/QWaeKXJ?editors=0010) # 챕터 47, 리코일 퍼시스트 적용 # 47-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 47, 1강, 할일리스트에 리코일 퍼시스트 적용](https://youtu.be/U70RJTTl8_g) - [CODEPEN - 45-7강](https://codepen.io/jangka44/pen/JjMgRMo?editors=0010) - [CODEPEN](https://codepen.io/jangka44/pen/QWaeGVL?editors=0010) # 47-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 47, 2강, 기본 할일 3개 생성](https://youtu.be/StjCDPPtWKY) - [JSON 뷰어 - jsonformatter.org/json-viewer](https://jsonformatter.org/json-viewer) - [CODEPEN](https://codepen.io/jangka44/pen/wvpVoYb?editors=0010) # 47-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 47, 3강, 스토리지 키 분리](https://youtu.be/ux9tL-2wJcw) - [CODEPEN](https://codepen.io/jangka44/pen/rNpXjZv?editors=0010) # 챕터 48, noticeSnackbarStatus 를 전역적으로 관리 # 48-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 48, 1강, noticeSnackbarStatus에 리코일 적용계획](https://youtu.be/wCZCzDlmQQI) - [CODEPEN - 47-3강](https://codepen.io/jangka44/pen/rNpXjZv?editors=0010) ## 상태관리툴의 유무에 따른 noticeSnackbarStatus 관리방법 비교 ### 상태관리툴이 없을 경우, 직접, 자식 엘리먼트에게 전달한다. $$uml database "useNoticeSnackbarState()" participant "useNoticeSnackbarState()" order 0 autonumber Root -> App : 실행 "useNoticeSnackbarState()" -[#red]> App : noticeSnackbarStatus 주입 App -> NewTodoForm : 실행, noticeSnackbarStatus App -> TodoList : 실행, noticeSnackbarStatus TodoList -> BottomOptionDrawer : 실행, noticeSnackbarStatus BottomOptionDrawer -> 삭제버튼 : 실행, noticeSnackbarStatus BottomOptionDrawer -> EditTodoModal : 실행, noticeSnackbarStatus $$ ### 상태관리툴이 도입된 경우, 필요한 엘리먼트에서 상태를 직접 주입받는다. $$uml database "useNoticeSnackbarStatus()" participant "useNoticeSnackbarStatus()" order 0 autonumber Root -> App : 실행 App -> NewTodoForm : 실행 "useNoticeSnackbarStatus()" -[#red]> NewTodoForm : noticeSnackbarStatus 주입 App -> TodoList : 실행 TodoList -> BottomOptionDrawer : 실행 "useNoticeSnackbarStatus()" -[#red]> BottomOptionDrawer : noticeSnackbarStatus 주입 BottomOptionDrawer -> 삭제버튼 : 실행 BottomOptionDrawer -> EditTodoModal : 실행 "useNoticeSnackbarStatus()" -[#red]> EditTodoModal : noticeSnackbarStatus 주입 $$ # 48-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 48, 2강, noticeSnackbarAtom 도입](https://youtu.be/0BbU-JluKgw) - [CODEPEN](https://codepen.io/jangka44/pen/QWaedYg?editors=0010) # 48-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 48, 3강, props 드릴링을 하지 않고, noticeSnackbarAtom를 필요로하는 컴폰너트에서 끌어다가 사용](https://youtu.be/8e-9D_u3mMY) - [CODEPEN](https://codepen.io/jangka44/pen/OJzKpVW?editors=0010) # 챕터 49, 페이지이동을 직접구현하려면 힘이 듭니다. # 49-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 49, 1강, url 값의 변화에 따라 page가 바뀌도록](https://youtu.be/pvYu1rHSuaE) - [CODEPEN](https://codepen.io/jangka44/pen/XWVvYLM?editors=0010) # 49-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 49, 2강, 디지인 꾸미기](https://youtu.be/IT1MsLEohUY) - [CODEPEN](https://codepen.io/jangka44/pen/oNpKyrq?editors=0010) # 49-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 49, 3강, 페이지 이동기록 히스토리](https://youtu.be/GIYTriPQPQ8) - [CODEPEN](https://codepen.io/jangka44/pen/LYewBPd?editors=0010) # 49-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 49, 4강, 이전 페이지로 이동, 다음 페이지로 이동](https://youtu.be/_E7pI840QPY) - [CODEPEN](https://codepen.io/jangka44/pen/Exoqpjw?editors=0010) # 49-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 49, 5강, 현재 위치를 보여주는 히스토리 지도](https://youtu.be/V_Lpcmuellg) - [CODEPEN](https://codepen.io/jangka44/pen/abEejvV?editors=0010) # 49-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 49, 6강, 히스토리 이동중에 새 페이지로 이동하면, 기존 기록의 일부는 없어집니다.](https://youtu.be/SPUvimXJH68) - [CODEPEN](https://codepen.io/jangka44/pen/GRyVBpe?editors=0010) # 챕터 50, 리액트 라우터 # 50-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 1강, 리액트라우터 소개](https://youtu.be/JlO6sZs1JxY) - [리액트라우터 - reactrouter.com](https://reactrouter.com/) # 50-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 2강, 리액트라우터 라이브러리 불러오기](https://youtu.be/NKW08WykloM) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/MWQgNYv?editors=0010) # 50-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 3강, 페이지 2개를 만들고 라우팅](https://youtu.be/6AzsAwZE7oE) - [CODEPEN](https://codepen.io/jangka44/pen/vYdBxXE?editors=0010) # 50-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 4강, useLocation을 이용해서 현재 주소에 접근](https://youtu.be/zwYfD7NtuXQ) - [CODEPEN](https://codepen.io/jangka44/pen/qBxWeOQ?editors=0010) # 50-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 5강, NavLink를 이용한 페이지이동](https://youtu.be/1bIWBkq8dYM) - [CODEPEN](https://codepen.io/jangka44/pen/JjpPgGe?editors=0110) # 50-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 6강, NavLink의 className 속성에 함수를 사용해서, 버튼의 활성화기능을 켜기](https://youtu.be/03Kk1-wnllY) - [CODEPEN](https://codepen.io/jangka44/pen/qBxWeNL?editors=0010) # 50-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 7강, useParams를 이용해서 url 파라미터 얻기](https://youtu.be/hwWzgYJ2uYU) - [CODEPEN](https://codepen.io/jangka44/pen/QWQWjLR?editors=0010) # 50-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 8강, 뒤로가기 버튼](https://youtu.be/BZQ671Rc7OQ) - [CODEPEN](https://codepen.io/jangka44/pen/RwQwWaJ?editors=0010) # 챕터 51, 간단한 멀티페이지 할일리스트 # 51-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 1강, 할일리스트, 할일등록페이지 라우팅](https://youtu.be/emmJhBzgFMA) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/qBxBJMN?editors=0010) # 51-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 2강, 할일작성 폼](https://youtu.be/xTHPIuFXFR4) - [CODEPEN](https://codepen.io/jangka44/pen/vYdYVVZ?editors=0010) # 51-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 3강, 할일작성 폼 처리](https://youtu.be/c6ChFGeEoNo) - [CODEPEN](https://codepen.io/jangka44/pen/GRQRYwO?editors=0010) # 51-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 4강, 상단 내비바에 리스트, 작성페이지 링크](https://youtu.be/gdUYeJCv2dk) - [CODEPEN](https://codepen.io/jangka44/pen/KKQKGjY?editors=0010) # 51-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 5강, 할일리스트](https://youtu.be/8_Yo7441auc) - [CODEPEN](https://codepen.io/jangka44/pen/XWZWxvm?editors=0010) # 51-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 6강, todosAtom 도입하여 페이지 이동시에도, 할일들 유지](https://youtu.be/mrjQXNYBNIA) - [CODEPEN](https://codepen.io/jangka44/pen/qBxBQEr?editors=0010) # 51-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 7강, lastTodoIdRef 도입하여 할일번호에 자동넘버링](https://youtu.be/SwV6iRhuk-0) - [CODEPEN](https://codepen.io/jangka44/pen/NWyWEqo?editors=0010) # 51-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 8강, 할일삭제](https://youtu.be/BFiH0PHyLlc) - [CODEPEN](https://codepen.io/jangka44/pen/YzezRyE?editors=0010) # 51-9강 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 9강, 할일 수정모드](https://youtu.be/jtDcVr9y18I) - [CODEPEN](https://codepen.io/jangka44/pen/yLvLQJL?editors=0010) # 51-10강 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 10강, 할일 수정폼](https://youtu.be/yMVBEwd-YRM) - [CODEPEN](https://codepen.io/jangka44/pen/xxYxQEq?editors=0010) # 51-11강 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 11강, 할일 수정폼 처리](https://youtu.be/Pp_PA4FyFGs) - [CODEPEN](https://codepen.io/jangka44/pen/OJQJaba?editors=0010) # 51-12강 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 12강, 할일수정을 별도의 페이지에서 처리하도록](https://youtu.be/gavenZgvhEw) - [CODEPEN](https://codepen.io/jangka44/pen/dydyQvJ?editors=0010) # 챕터 52, immer 적용하기 # 52-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 52, 1강, immer를 할일수정에 적용하기](https://youtu.be/DFSi5PKdCiI) - [immer](https://immerjs.github.io/immer/) - [immer - update-patterns](https://immerjs.github.io/immer/update-patterns/) - [CODEPEN](https://codepen.io/jangka44/pen/QWQbypj?editors=0010) # 52-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 52, 2강, immer를 할일삭제에 적용하기](https://youtu.be/Y_JnfQshew8) - [CODEPEN](https://codepen.io/jangka44/pen/PoQqZmr?editors=0010) # 52-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 52, 3강, immer를 할일추가에 적용하기](https://youtu.be/L9zF0ZIBAr0) - [CODEPEN](https://codepen.io/jangka44/pen/eYVNJGR?editors=0010) # 챕터 53, 리액트 프로젝트를 GITHUB에 저장, 리코일, 리액트 라우터 도입 # 53-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 53, 1강, 리액트 프로젝트 생성](https://youtu.be/XPU4hpMuDTM) - [리포지터리 - github.com/jhs512/class101_react_fullstack_exam__cra_app_2](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_2) - [COMMIT - 프로젝트 세팅](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_2/commit/4497320ef1ce6c09d463ded82323f3364221fcd5) # 53-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 53, 2강, 쓸데없는 파일들 제거](https://youtu.be/GiJDnxjXA6E) - [COMMIT](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_2/commit/04cc12d2b61d110a132b9357600cd6706f695bc4) # 53-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 53, 3강, Root 컴포넌트 도입](https://youtu.be/990YuS6JPqk) - [COMMIT](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_2/commit/78f4c6fee98174bd43f73245e0abc3d09de21718) # 53-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 53, 4강, ListPage, WritePage 추가](https://youtu.be/Yh3FNaWsby8) - [COMMIT](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_2/commit/91b7f6dfbf77d9df1c0d9cdea46a1ee10f7ec2b9) # 53-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 53, 5강, 리액트라우터 도입](https://youtu.be/h2u_ozuLB8k) - [COMMIT](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_2/commit/ea9fe8c34c6bf314e23ecd83fc6378aba1606005) # 53-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 53, 6강, 테일윈드 도입](https://youtu.be/MqQRWyYK6Sk) - [COMMIT](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_2/commit/7cd7e2cbb12e38612e097ceb6039f585b4d94b68) # 53-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 53, 7강, 리코일 도입](https://youtu.be/BsUNA1zL0Ig) - [COMMIT](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_2/commit/d1de09d9d0ce018b36691f11e40c47bae69f84d9) # 챕터 54, GIT BASH로 배우는 리눅스 기초 명령어 # 54-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 54, 1강, 파일 생성, 삭제, 수정](https://youtu.be/MhF5dtGAtk4) - 명령어 - touch a.txt : a.txt 파일생성 - echo 하이 : 모니터에 `하이` 출력 - echo 하이 > a.txt : a.txt파일 생성하고 그 안에 `하이` 출력 - rm a.txt : a.txt 삭제 # 54-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 54, 2강, VIM 기초 사용법](https://youtu.be/VgPfKlNZLmQ) - 명령어 - pwd : 현재 위치 표시 - ls : 현재 폴더안의 파일 리스팅 - ll : 현재 폴더안의 파일 리스팅(더 자세히) - vim a.txt : a.txt 파일생성 혹은 수정 - vim 일반모드(최초모드)에서 `a` 입력 : 입력모드로 변경 - vim 입력모드에서 `ESC` 키 입력 : 입력모드에서 일반모드로 변경 - vim 일반모드에서 `:` 키 입력 : 일반모드에서 명령행모드로 변경 - vim 명령행모드에서 `w` 키 입력 후 엔터 : vim에서 작업한 내용 저장 - vim 명령행모드에서 `q` 키 입력 후 엔터 : vim에서 작업한 내용을 저장하지 않고 vim 종료 - vim 명령행모드에서 `wq` 키 입력 후 엔터 : vim에서 작업한 내용을 저장 후 vim 종료 # 54-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 54, 3강, 리눅스 명령어 필수 명령어 강좌 소개](https://youtu.be/ECuMjmGJ8Qs) - [리눅스 필수 명령어 강좌 - slog.gg/p/1381](https://slog.gg/p/1381) # 챕터 55, 스쿼트 챌린지 앱 구현 # 55-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 55, 1강, 리액트라우터 세팅](https://youtu.be/SqROmCGXA48) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/yLvNqdy?editors=0010) # 55-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 55, 2강, 상단바에 내비게이션 버튼](https://youtu.be/2G6uSTOAEnM) - [CODEPEN](https://codepen.io/jangka44/pen/abqOaNw?editors=0010) # 55-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 55, 3강, 페이지 레이아웃작업하여, 텍스트를 화면중앙으로](https://youtu.be/a8aQkFVRc2E) - [CODEPEN](https://codepen.io/jangka44/pen/poaJONg?editors=0010) # 55-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 55, 4강, 스쿼트 횟수 표시](https://youtu.be/ong3fo8fIss) - [CODEPEN](https://codepen.io/jangka44/pen/abqOawL?editors=0010) - [CODEPEN - number format](https://codepen.io/jangka44/pen/abqOaGq?editors=0012) # 55-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 55, 5강, 기록 폼](https://youtu.be/qjc315_KX2k) - [CODEPEN](https://codepen.io/jangka44/pen/dydoqeg?editors=0010) # 55-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 55, 6강, 기록숫자 증감](https://youtu.be/cIY9jrczsv0) - [CODEPEN](https://codepen.io/jangka44/pen/PoQqdBM?editors=0010) # 55-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 55, 7강, 기록숫자 처리](https://youtu.be/AzAGqM6afKE) - [CODEPEN](https://codepen.io/jangka44/pen/MWQwqLo?editors=0010) # 챕터 56, canvas-confetti 라이브러리 활용 # 56-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 56, 1강, canvas-confetti 라이브러리 테스트](https://youtu.be/c4bA8jkeqOo) - [canvas-confetti 라이브러리 - npmjs](https://www.npmjs.com/package/canvas-confetti) - [canvas-confetti 라이브러리 - 리포지터리](https://github.com/catdad/canvas-confetti) - [canvas-confetti 라이브러리 - 사용법](https://github.com/catdad/canvas-confetti#readme) - [canvas-confetti 라이브러리 - 데모](https://www.kirilv.com/canvas-confetti/) - [CODEPEN](https://codepen.io/jangka44/pen/gOvawLQ?editors=0010) # 56-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 56, 2강, 캔버스 사이즈 조절](https://youtu.be/PSpIcgctUg4) - [CODEPEN](https://codepen.io/jangka44/pen/jOZbMBO?editors=0010) # 56-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 56, 3강, 라이브러리 사용법을보고 여러가지 옵션을 실험](https://youtu.be/UHi_OoRqDxk) - [CODEPEN](https://codepen.io/jangka44/pen/ZErbpJp?editors=0010) # 56-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 56, 4강, 버튼을 클릭하면 반응하도록](https://youtu.be/ZPyt0cqOgJk) - [CODEPEN](https://codepen.io/jangka44/pen/yLvYaPO?editors=0010) # 56-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 56, 5강, 관련 개념들 복습, 더 다양한 옵션활용](https://youtu.be/nNmF_OPt4P4) - [CODEPEN](https://codepen.io/jangka44/pen/LYQpyQo?editors=0011) # 챕터 57, js-confetti 라이브러리 활용 # 57-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 57, 1강, js-confetti 라이브러리 테스트](https://youtu.be/LfXDjqteHvY) - [js-confetti 라이브러리 - npmjs](https://www.npmjs.com/package/js-confetti) - [js-confetti 라이브러리 - 리포지터리](https://github.com/loonywizard/js-confetti) - [js-confetti 라이브러리 - 사용법](https://github.com/loonywizard/js-confetti#readme) - [js-confetti 라이브러리 - 데모](https://loonywizard.github.io/js-confetti/) - [CODEPEN](https://codepen.io/jangka44/pen/wvyKdYJ?editors=0010) # 57-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 57, 2강, 다양한 옵션값 테스트](https://youtu.be/tdqiBPwQh64) - [CODEPEN](https://codepen.io/jangka44/pen/qBxOmQz?editors=0010) # 57-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 57, 3강, canvas 엘리먼트를 직접 생성하는 방법](https://youtu.be/GLsfjtdQkWo) - [CODEPEN](https://codepen.io/jangka44/pen/oNEjWVN?editors=0010) # 챕터 58, 숫자 카운트 애니메이션 라이브러리 조사 # 58-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 58, 1강, react-animated-numbers 라이브러리 테스트](https://youtu.be/uYNu-pwFYpQ) - [react-animated-numbers 라이브러리 - skypack](https://www.skypack.dev/view/react-animated-numbers) - [react-animated-numbers 라이브러리 - 리포지터리](https://github.com/heyman333/react-animated-numbers) - [react-animated-numbers 라이브러리 - 메뉴얼](https://github.com/heyman333/react-animated-numbers#readme) - [react-animated-numbers 라이브러리 - 데모](https://optimistic-noyce-cf2473.netlify.app/) - [CODEPEN](https://codepen.io/jangka44/pen/JjpYNgg?editors=0010) # 58-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 58, 2강, use-count-up 라이브러리 테스트](https://youtu.be/1ca9Z0JjdC4) - [use-count-up 라이브러리 - npmjs](https://www.npmjs.com/package/use-count-up) - [use-count-up 라이브러리 - skypack](https://www.skypack.dev/view/use-count-up) - [use-count-up 라이브러리 - 리포지터리](https://github.com/vydimitrov/use-count-up) - [use-count-up 라이브러리 - 메뉴얼](https://github.com/vydimitrov/use-count-up#readme) - [use-count-up 라이브러리 - 데모](https://codesandbox.io/s/aged-monad-0mrfu?fontsize=14&file=/src/index.js) - [CODEPEN](https://codepen.io/jangka44/pen/ExQVXyq?editors=0010) # 58-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 58, 3강, countup.js 라이브러리 테스트](https://youtu.be/sRBwNQmYbQU) - [countup.js 라이브러리 - npmjs](https://www.npmjs.com/package/countup.js) - [countup.js 라이브러리 - skypack](https://www.skypack.dev/view/countup.js) - [countup.js 라이브러리 - 리포지터리](https://github.com/inorganik/countUp.js) - [countup.js 라이브러리 - 메뉴얼](https://github.com/inorganik/countUp.js#readme) - [countup.js 라이브러리 - 데모](https://inorganik.github.io/countUp.js/?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library) - [CODEPEN](https://codepen.io/jangka44/pen/ZErbyeP?editors=0010) # 챕터 59, useInterval로 스톱워치 구현하기 # 59-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 59, 1강, useInterval 도입](https://youtu.be/ENy-AnYycWI) - [CODEPEN](https://codepen.io/jangka44/pen/xxYwrYw?editors=0010) - [추천글 - mingule - React에서 setInterval 현명하게 사용하기(feat. useInterval)](https://mingule.tistory.com/65) - [추천글 - overreacted - Making setInterval Declarative with React Hooks](https://overreacted.io/making-setinterval-declarative-with-react-hooks/) - useInterval 소스코드 - ```js function useInterval(callback, delay) { const savedCallback = useRef(); useEffect(() => { savedCallback.current = callback; }); useEffect(() => { function tick() { savedCallback.current(); } if (delay !== null) { let id = setInterval(tick, delay); return () => clearInterval(id); } }, [delay]); } ``` # 59-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 59, 2강, useInterval의 작동을 일시정지](https://youtu.be/9pJbNqXPqp4) - [CODEPEN](https://codepen.io/jangka44/pen/JjpYJBK?editors=0010) # 챕터 60, 일반 라이브러리를 기반으로 리액트 라이브러리 직접 제작하기 # 60-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 60, 1강, countup.js 라이브러리를 리액트에서 사용](https://youtu.be/6INIUy2EJ1U) - [CODEPEN](https://codepen.io/jangka44/pen/RwQWgvj?editors=0010) # 60-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 60, 2강, CountNumber 컴포넌트](https://youtu.be/SbFsx10Sld4) - [CODEPEN](https://codepen.io/jangka44/pen/abqvwMZ?editors=0010) # 60-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 60, 3강, end 속성의 값이 변경되면 애니메이션이 다시 실행되도록](https://youtu.be/_vqrRmtTC6s) - [CODEPEN](https://codepen.io/jangka44/pen/zYRvdYB?editors=0010) # 60-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 60, 4강, end 속성값이 변경될 때 기존의 값으로 부터 변경되도록](https://youtu.be/QAlIg1db-kA) - [CODEPEN](https://codepen.io/jangka44/pen/XWZmaJd?editors=0010) # 챕터 61, 스쿼트 챌린지에 MUI 적용하여 새로 구현 # 61-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 1강, 오버레이 스크롤바](https://youtu.be/-EOAASoKfXY) - [CODEPEN](https://codepen.io/jangka44/pen/eYVpeGa?editors=0100) ```css /* 스크롤바 꾸미기 시작 */ :root { overflow-y: overlay; } ::-webkit-scrollbar-thumb { background-color: rgba(45, 45, 45, 0.3); border-radius: 0; } ::-webkit-scrollbar { width: 10px; height: 10px; } /* 스크롤바 꾸미기 끝 */ ``` # 61-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 2강, 로보토 모노스페이스 폰트](https://youtu.be/dfHlA3qrO0s) - [구글폰트](https://fonts.google.com) - [구글폰트 - 로보토 모노](https://fonts.google.com/specimen/Roboto+Mono?query=roboto+mono) - [CODEPEN - 일반폰트, 모노폰트 비교](https://codepen.io/jangka44/pen/MWQargW?editors=1100) - [CODEPEN - 로보토 모노](https://codepen.io/jangka44/pen/wvyKPVQ?editors=1100) ```html ``` # 61-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 3강, to2.kr/dE2 에서 시작, MUI 테마 커스터마이징](https://youtu.be/n-aPDAf60tQ) - [리액트 시작 소스코드(리코일, 리액트라우터, MUI), to2.kr/dE2](https://to2.kr/dE2) - [CODEPEN](https://codepen.io/jangka44/pen/oNEjpNw?editors=0010) # 61-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 4강, 화면 중앙에 목표숫자 두기](https://youtu.be/GChhIbJiCV4) - [CODEPEN](https://codepen.io/jangka44/pen/WNMQdvW?editors=0010) # 61-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 5강, CountNumber 라이브러리 적용, 숫자에 mono 폰트 적용](https://youtu.be/pOc3T1tL1AE) - [CODEPEN](https://codepen.io/jangka44/pen/BaYoJLM?editors=0010) # 61-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 6강, 숫자가 5자리를 유지하도록](https://youtu.be/JRH-8OtTiOM) - [CODEPEN](https://codepen.io/jangka44/pen/YzeyYZL?editors=0010) # 61-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 7강, 기록 모달 디자인](https://youtu.be/8MElbDrm2zU) - [CODEPEN](https://codepen.io/jangka44/pen/qBxOyJN?editors=0010) # 61-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 8강, 기록 증감](https://youtu.be/xtjwKKvuQDc) - [CODEPEN](https://codepen.io/jangka44/pen/MWQaBPd?editors=0010) # 61-9강 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 9강, 숫자 증가시, confetti 효과](https://youtu.be/dqgbZ3BpR88) - [CODEPEN](https://codepen.io/jangka44/pen/YzeyjMx?editors=0100) # 61-10강 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 10강, 기록저장](https://youtu.be/yZUSyRaBJFo) - [CODEPEN](https://codepen.io/jangka44/pen/OJQyovG?editors=0010) # 61-11강 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 11강, 수행한 횟수에 리코일 퍼시스트를 적용하여 영구적으로 기록](https://youtu.be/PZ4-UXNi1hc) - [CODEPEN](https://codepen.io/jangka44/pen/poagJbR?editors=0010) # 61-12강 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 12강, 기록시 notify](https://youtu.be/PgyHBWyfQo4) - [CODEPEN](https://codepen.io/jangka44/pen/eYVJNdG?editors=0010) # 챕터 62, 스쿼트 챌린지 히스토리 페이지 # 62-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 1강, 기록 저장시 히스토리도 저장](https://youtu.be/5iFGcjZjBvc) - [CODEPEN](https://codepen.io/jangka44/pen/NWyxqaR?editors=0010) # 62-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 2강, 히스토리 리스트 꾸미기](https://youtu.be/lZlcC14mgRE) - [CODEPEN](https://codepen.io/jangka44/pen/yLveNpo?editors=0010) # 62-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 3강, 명언 데이터 다루기](https://youtu.be/LSqGc-7M6Tc) - [명언 데이터 : https://jhs512.github.io/wise_saying/data.js](https://jhs512.github.io/wise_saying/data.js) - [CODEPEN](https://codepen.io/jangka44/pen/ExQPZex?editors=0012) # 62-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 4강, 명언 데이터관련 코드를 캡슐화](https://youtu.be/jetN_YT1aLU) - [CODEPEN](https://codepen.io/jangka44/pen/zYRrNmO?editors=0012) # 62-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 5강, 명언을 적용](https://youtu.be/0zQr1IIc3mU) - [CODEPEN](https://codepen.io/jangka44/pen/wvyMrJa?editors=1010) # 62-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 6강, 옵션드로어 도입준비](https://youtu.be/yuHGXXH0bvQ) - [CODEPEN](https://codepen.io/jangka44/pen/poayLZK?editors=0010) # 62-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 7강, 옵션드로어 도입](https://youtu.be/Vh4Z5A51c3M) - [CODEPEN](https://codepen.io/jangka44/pen/xxYVWyv?editors=0010) # 62-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 8강, 옵션드로어를 별도의 컴포넌트로](https://youtu.be/uvo1oZQZzJU) - [CODEPEN](https://codepen.io/jangka44/pen/oNExqmX?editors=0010) # 62-9강 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 9강, 히스토리 아이템 삭제](https://youtu.be/hhjccFjvy2g) - [CODEPEN](https://codepen.io/jangka44/pen/abqNYMe?editors=0010) # 62-10강 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 10강, 히스토리 아이템 삭제시, 전체 수행횟수도 감소](https://youtu.be/fHJEZfrcODQ) - [CODEPEN](https://codepen.io/jangka44/pen/abqNKwV?editors=0010) # 챕터 63, 스쿼트 챌린지 히스토리 페이지 수정기능 # 63-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 1강, RecordModal 밖으로 msg와, saveRecord를 뽑아내기](https://youtu.be/4pkFsYyRCQg) - [CODEPEN](https://codepen.io/jangka44/pen/zYRqLwm?editors=0010) # 63-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 2강, RecordAddModal 도입](https://youtu.be/8U51yOev3JI) - [CODEPEN](https://codepen.io/jangka44/pen/KKQzBvZ?editors=0010) # 63-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 3강, RecordModal의 recordCount의 기본값을 props로 전달받기](https://youtu.be/_EGCmmsgHi4) - [CODEPEN](https://codepen.io/jangka44/pen/MWQyqrN?editors=0010) # 63-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 4강, 소스코드 정리](https://youtu.be/q0YyrOzYcbg) - [CODEPEN](https://codepen.io/jangka44/pen/GRQZXdx?editors=0010) # 63-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 5강, RecordModifyModal 도입하고, 수정버튼누르면 열리도록](https://youtu.be/qMMfmg3ebFk) - [CODEPEN](https://codepen.io/jangka44/pen/eYVZPdB?editors=0010) # 63-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 6강, RecordModifyModal 열릴 때 수정할 기록의 카운트가 초기값으로 설정됨](https://youtu.be/HDvCeZzFvKM) - [CODEPEN](https://codepen.io/jangka44/pen/jOZqemb?editors=0010) # 63-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 7강, 기록수정](https://youtu.be/8tbmLu7xVLs) - [CODEPEN](https://codepen.io/jangka44/pen/mdXPzBv?editors=0010) # 63-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 8강, RecordModifyModal이 닫힐 때 RecordOptionDrawer도 같히 닫히도록](https://youtu.be/ZnFRsDkBs7E) - [CODEPEN](https://codepen.io/jangka44/pen/ZErWqre?editors=0010) # 63-9강 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 9강, 기록없음 표시, 기록의 최대값 지정](https://youtu.be/3M3MVOBDfT8) - [CODEPEN](https://codepen.io/jangka44/pen/abqNRKq?editors=0010) # 챕터 64, 할일 추가페이지 # 64-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 64, 1강, to2.kr/dE2 에서 시작](https://youtu.be/cgYPEGqsDNE) - [리액트 시작 소스코드(리코일, 리액트라우터, MUI), to2.kr/dE2](https://to2.kr/dE2) - [CODEPEN](https://codepen.io/jangka44/pen/ZErWwep?editors=0010) # 64-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 64, 2강, 할일이 비어있을 때의 메인화면에서 할일추가 버튼](https://youtu.be/cUmNdmQfQtc) - [CODEPEN](https://codepen.io/jangka44/pen/wvyGbJL?editors=0010) # 64-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 64, 3강, 할일 작성페이지 꾸미기](https://youtu.be/smKpqCGqIro) - [CODEPEN](https://codepen.io/jangka44/pen/dydXpzO?editors=0010) # 64-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 64, 4강, 할일폼 체크](https://youtu.be/YgMRmf5ID3E) - [CODEPEN](https://codepen.io/jangka44/pen/oNELzbb?editors=0010) # 64-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 64, 5강, 할일추가](https://youtu.be/qraBIg1_iEA) - [CODEPEN](https://codepen.io/jangka44/pen/eYVzdEw?editors=0010) # 64-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 64, 6강, 할일추가 후 알림](https://youtu.be/jIW1fxnRcAk) - [CODEPEN](https://codepen.io/jangka44/pen/gOvMwoo?editors=0010) # 챕터 65, 할일 리스트페이지 # 65-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 65, 1강, 할일리스트](https://youtu.be/6XMO22v13qo) - [CODEPEN](https://codepen.io/jangka44/pen/QWQEKVY?editors=0010) # 65-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 65, 2강, 할일완료여부 체크기능](https://youtu.be/zNRcJBk7Uf8) - [CODEPEN](https://codepen.io/jangka44/pen/JjpKRwb?editors=0010) # 65-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 65, 3강, 완료여부 필터링 탭메뉴](https://youtu.be/oTUuZ_LonnY) - [CODEPEN](https://codepen.io/jangka44/pen/oNELzRw?editors=0010) # 65-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 65, 4강, 탭메뉴에 따라 필터링 처리](https://youtu.be/sTbpRu-rNtY) - [CODEPEN](https://codepen.io/jangka44/pen/oNELYgG?editors=0010) # 챕터 66, 할일 수정페이지 # 66-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 66, 1강, 할일 수정페이지 추가](https://youtu.be/4coNQYi8EWI) - [CODEPEN](https://codepen.io/jangka44/pen/YzeWpZv?editors=0010) # 66-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 66, 2강, 할일추가와 할일수정페이지에서 상단바가 동일하게 나오도록](https://youtu.be/-KvUqTmUPQI) - [CODEPEN](https://codepen.io/jangka44/pen/abqZBww?editors=0010) # 66-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 66, 3강, 할일수정페이지의 입력요소들에게 기본값](https://youtu.be/s67HRlbpg-M) - [CODEPEN](https://codepen.io/jangka44/pen/poabNay?editors=0010) # 66-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 66, 4강, 할일수정](https://youtu.be/QAQGyJZL8Do) - [CODEPEN](https://codepen.io/jangka44/pen/dydXOgq?editors=0010) # 챕터 67, 할일리스트 정렬 # 67-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 67, 1강, 정렬 탭메뉴](https://youtu.be/bUSUpFrmAcw) - [CODEPEN](https://codepen.io/jangka44/pen/abqZpoG?editors=0010) # 67-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 67, 2강, 수행날짜 추가](https://youtu.be/eoqsfjcWAXU) - [CODEPEN](https://codepen.io/jangka44/pen/QWQEpGB?editors=0010) # 67-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 67, 3강, 일정이 급한순으로 정렬](https://youtu.be/Zg9rsv5koLk) - [CODEPEN](https://codepen.io/jangka44/pen/MWQeppx?editors=0010) # 67-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 67, 4강, 나머지 정렬기능들 구현](https://youtu.be/4S2Vrert7tQ) - [CODEPEN](https://codepen.io/jangka44/pen/BaYzWZY?editors=0010) # 67-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 67, 5강, 다음에 할래요 버튼에서 history back](https://youtu.be/MjimYs29D1M) - [CODEPEN](https://codepen.io/jangka44/pen/WNMxpZg?editors=0010) # 챕터 68, 할일리스트 1차 오픈 전, 최종수정 # 68-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 68, 1강, 여백조정, 반응형 여백](https://youtu.be/rzoH56G6mZ4) - [CODEPEN](https://codepen.io/jangka44/pen/jOZrpBB?editors=0010) # 68-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 68, 2강, 추가적인 여백조정](https://youtu.be/hIH4BGz6TIE) - [CODEPEN](https://codepen.io/jangka44/pen/BaYzPMp?editors=0010) # 68-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 68, 3강, 수정페이지에서 현재 몇번 할일을 수정하고 있는지 표시](https://youtu.be/tuWFw-B6Tsc) - [CODEPEN](https://codepen.io/jangka44/pen/GRQqzjB?editors=0010) # 챕터 69, 스쿼트챌린지 1차 오픈 전, 최종수정 # 69-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 69, 1강, persistAtomRecords 도입](https://youtu.be/ZY1NiK4-GkA) - [CODEPEN](https://codepen.io/jangka44/pen/eYVzjoL?editors=0010) # 69-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 69, 2강, 정렬 탭박스 추가](https://youtu.be/DZzpkhjwNPw) - [CODEPEN](https://codepen.io/jangka44/pen/XWZKBwo?editors=0010) # 69-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 69, 3강, 기록의 공유 id 추가](https://youtu.be/iF_iu7Brzz0) - [CODEPEN](https://codepen.io/jangka44/pen/gOvMdYL?editors=0010) # 69-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 69, 4강, 정렬](https://youtu.be/iuPAwFT9NSc) - [CODEPEN](https://codepen.io/jangka44/pen/yLvJxNq?editors=0010) # 69-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 69, 5강, 히스토리 없음 화면 꾸미기](https://youtu.be/ZzpVGVWT17I) - [CODEPEN](https://codepen.io/jangka44/pen/BaYzOKd?editors=0010) # 69-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 69, 6강, 여백조정, 반응형 여백](https://youtu.be/-2TcNB30pXY) - [CODEPEN](https://codepen.io/jangka44/pen/ExQyegB?editors=0010) # 챕터 70, 간단하게 배포하기 # 70-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 70, 1강, 할일앱, 깃허브 페이지를 통해서 배포](https://youtu.be/BTX0z6z0FoM) - [리포지터리 - github.com/jhs512/todo_2](https://github.com/jhs512/todo_2) - [서비스 주소 - https://jhs512.github.io/todo_2](https://jhs512.github.io/todo_2) # 70-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 70, 2강, 할일앱 수정 후 재배포, 전체소스코드 다시 업로드 하는 방법](https://youtu.be/B23A3KaxW9U) - [리포지터리 - github.com/jhs512/sqc](https://github.com/jhs512/sqc) # 70-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 70, 3강, 할일앱 수정 후 재배포, 깃허브에서 바로 수정하는 방법](https://youtu.be/q31VzePPkxI) - [리포지터리 - github.com/jhs512/sqc](https://github.com/jhs512/sqc) # 70-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 70, 4강, 스쿼트챌린지앱, 깃허브 페이지를 통해서 배포](https://youtu.be/CxOkwP75UnQ) - [리포지터리 - github.com/jhs512/sqc](https://github.com/jhs512/sqc) - [서비스 주소 - https://jhs512.github.io/sqc](https://jhs512.github.io/sqc) # 챕터 71, API, 비동기 관련 개념을 파악하는데 좋은 자료들 소개 # 71-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 71, 1강, 비동기 관련 개념을 파악하는데 좋은 자료들 소개](https://youtu.be/lMEYc7ErQ6E) - [클래스101 리액트풀스택 사전지식페이지 - 단계 11 : API 기초](https://slog.gg/p/4680#단계-11) - [클래스101 리액트풀스택 사전지식페이지 - 단계 12 : Promise와 Async, Await](https://slog.gg/p/4680#단계-12) # 챕터 72, Promise 개요 # 72-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 1강, 동기식 함수의 연속실행](https://youtu.be/bBdsxPZ81ko) - [CODEPEN](https://codepen.io/jangka44/pen/qBxaEWz?editors=0012) # 72-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 2강, 비동기식 함수들은 리턴을 통해서 값을 전달할 수 없다.](https://youtu.be/eCj_heC4Vxc) - [CODEPEN](https://codepen.io/jangka44/pen/LYQREPw?editors=0012) # 72-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 3강, 비동기식에서는 보통 콜백이라는 개념을 통해서 함수들의 실행 순서를 맞춘다.](https://youtu.be/f0ZHfi_U4Ts) - [CODEPEN](https://codepen.io/jangka44/pen/JjpRojQ?editors=0012) # 72-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 4강, 익명함수가 아닌 이름있는 함수를 사용하면 콜백을 안써도, 순차적인 비동기함수 실행이 가능](https://youtu.be/tLfhGfUlDDg) - [CODEPEN](https://codepen.io/jangka44/pen/MWQjYaB?editors=0012) # 72-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 5강, Promise객체 생성, reject는 then을 실행하고, reject는 catch를 실행한다.](https://youtu.be/WaNFCyGn7X0) - [CODEPEN](https://codepen.io/jangka44/pen/WNMGbOz?editors=0011) # 72-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 6강, Promise객체는 유튜버이고, then을 통해서 여러명의 구독자를 받을 수 있다.](https://youtu.be/irB76ZvQY4c) - [CODEPEN](https://codepen.io/jangka44/pen/KKQgwvx?editors=0011) # 72-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 7강, then을 체이닝하면 동기, 비동기 익명함수들을 순차적으로 실행하도록 만들기 쉽다.](https://youtu.be/u2dKIvKr0r8) - [CODEPEN](https://codepen.io/jangka44/pen/rNJMaGb?editors=0011) # 72-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 8강, 이름있는 비동기 함수들을의 연속실행에 Promise를 도입하여 구조개선](https://youtu.be/8VuwzMSE_do) - [CODEPEN](https://codepen.io/jangka44/pen/XWZjJZL?editors=0011) # 챕터 73, fetch 개요 # 73-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 73, 1강, 로렘 픽섬 API 소개, JSON VIEWER 소개](https://youtu.be/KWOX8sHUWQU) - [로렘 픽섬 - 무료 플레이스홀더 이미지 CDN 서비스](https://picsum.photos/) - [로렘 픽섬 - API - 이미지 리스트 - https://picsum.photos/v2/list?page=1&limit=100](https://picsum.photos/v2/list?page=2&limit=100) - [로렘 픽섬 - API - 이미지 단건(0번 이미지) - https://picsum.photos/id/0/info](https://picsum.photos/id/0/info) - [JSON VIEWER - 크롬 익스텐션](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ko) # 73-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 73, 2강, fetch를 사용해서 외부 데이터 불러오기](https://youtu.be/i4_9Mj5COB8) - [CODEPEN](https://codepen.io/jangka44/pen/bGLwNPx?editors=0012) # 73-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 73, 3강, fetch를 통해 불러온 데이터를 json화 하기](https://youtu.be/hsxgUwQuMUM) - [CODEPEN](https://codepen.io/jangka44/pen/JjpRdPR?editors=0012) # 73-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 73, 4강, 간단한 이미지 로드기능 구현](https://youtu.be/YuIi6mkJJ1g) - [CODEPEN](https://codepen.io/jangka44/pen/PoQGqoe) # 챕터 74, 리액트에서 fetch 사용 # 74-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 74, 1강, 리액트에서 fetch 사용](https://youtu.be/AFcd5bsa3nA) - [CODEPEN](https://codepen.io/jangka44/pen/YzeGXwE?editors=0011) # 74-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 74, 2강, useEffect를 통해서 쓸데없는 중복통신을 안하도록](https://youtu.be/4muV2nBq6Cw) - [CODEPEN](https://codepen.io/jangka44/pen/abqmONm?editors=0011) # 챕터 75, 프론트 실전배포를 위한 준비 # 75-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 75, 1강, 도메인 구매, DNS 세팅, 깃허브페이지에 도메인 연결](https://youtu.be/8Z1XJSg6ly0) - [몰입코딩 - 도메인 구매, DNS 세팅, 깃허브페이지에 도메인 연결 - slog.gg/p/5799](https://slog.gg/p/5799) # 챕터 76, React Query # 76-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 76, 1강, 리액트 쿼리 개요](https://youtu.be/Asb60X9AIto) - [리액트 쿼리 - React Query 공식사이트](https://react-query.tanstack.com/) # 76-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 76, 2강, 리액트 쿼리가 없는 상태에서 로딩과 예외처리](https://youtu.be/mz7ZypiAoq8) - [CODEPEN](https://codepen.io/jangka44/pen/gOvwPbw?editors=0010) # 76-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 76, 3강, 리액트 쿼리를 도입](https://youtu.be/NVdZwdj0nSA) - [CODEPEN](https://codepen.io/jangka44/pen/KKQgpZK?editors=0011) # 76-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 76, 4강, 통신로직이 포함된 PImg 컴포넌트](https://youtu.be/95VAVCpo5xY) - [CODEPEN](https://codepen.io/jangka44/pen/LYQRGPw?editors=0011) # 챕터 77, 백엔드, 인프라 관련 추천 공부자료 # 77-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 77, 1강, 백엔드, 인프라 관련 공부자료 추천](https://youtu.be/bGfhZCltZAg) - [클래스101 리액트풀스택 사전지식페이지 - 단계 13 : 관계형 데이터 모델링](https://slog.gg/p/4680#단계-13) - [클래스101 리액트풀스택 사전지식페이지 - 단계 14 : MySQL](https://slog.gg/p/4680#단계-14) - [클래스101 리액트풀스택 사전지식페이지 - 단계 15 : CentOS7로 웹서비스 환경 세팅](https://slog.gg/p/4680#단계-15) # 챕터 78, MySQL 개발환경세팅 # 78-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 78, 1강, MySQL 개발환경세팅](https://youtu.be/ve-FcgdmtKo) - [클래스101 리액트풀스택 사전지식페이지 - 단계 16 : MySQL 개발환경세팅](https://slog.gg/p/5531) # 챕터 79, MySQL 게시물 테이블, 단순한 버전 # 79-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 79, 1강, 관련개념설명](https://youtu.be/r1WpIAy9n20) # 79-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 79, 2강, 문제설명](https://youtu.be/3QQSPVImkmQ) - [CODEPEN](https://codepen.io/jangka44/pen/LYVEyye?editors=0010) # 79-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 79, 3강, 문제해설, 1부](https://youtu.be/X1tRgeTKUJ8) - [영상 - 리액트풀스택, ken 5034, 챕터 79, 3강, 문제해설, 2부](https://youtu.be/3QDjkLh2iC4) - [CODEPEN](https://codepen.io/jangka44/pen/XWbJRMN?editors=0010) # 79-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 79, 4강, 정리](https://youtu.be/CGItUYa_NkE) - [CODEPEN](https://codepen.io/jangka44/pen/XWbJRMN?editors=0010) # 챕터 80, MySQL 게시물 테이블, NOT NULL, AUTO_INCREMENT, 칼럼 순서 # 80-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 80, 1강, 관련개념설명](https://youtu.be/JTuXTaHj88U) # 80-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 80, 2강, 문제설명](https://youtu.be/r-fNgdFfV8E) - [CODEPEN](https://codepen.io/jangka44/pen/ExjapKL?editors=0010) # 80-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 80, 3강, 문제해설](https://youtu.be/tqtqM4AhiwQ) - [CODEPEN](https://codepen.io/jangka44/pen/MWwYByo?editors=0010) # 80-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 80, 4강, 정리](https://youtu.be/k9hwHojZDds) - [CODEPEN](https://codepen.io/jangka44/pen/MWwYByo?editors=0010) # 챕터 81, MySQL 부서, 사원 테이블, INNER JOIN # 81-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 81, 1강, 관련개념설명](https://youtu.be/VHjkR1G1EVg) # 81-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 81, 2강, 문제설명](https://youtu.be/_eNX5RyTOFY) - [CODEPEN](https://codepen.io/jangka44/pen/BaWLJzG?editors=0010) # 81-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 81, 3강, 문제해설](https://youtu.be/v288kyWHC6Q) - [CODEPEN](https://codepen.io/jangka44/pen/vYxXpKd?editors=0010) # 81-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 81, 4강, 정리](https://youtu.be/cFnGbBL9ads) - [CODEPEN](https://codepen.io/jangka44/pen/vYxXpKd?editors=0010) # 챕터 82, MySQL 부서, 사원 테이블, SUM, MAX, MIN, COUNT, GROUP BY # 82-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 82, 1강, 관련개념설명](https://youtu.be/RzDBYA0_R2k) # 82-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 82, 2강, 문제설명](https://youtu.be/W73r-ZaJn-c) - [CODEPEN](https://codepen.io/jangka44/pen/jOWrEmj?editors=0010) # 82-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 82, 3강, 문제해설, 1부](https://youtu.be/oLYlCbzky2g) - [영상 - 리액트풀스택, ken 5034, 챕터 82, 3강, 문제해설, 2부](https://youtu.be/i5pMd8Nas0o) - [CODEPEN](https://codepen.io/jangka44/pen/QWyEwvR?editors=0010) # 82-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 82, 4강, 정리](https://youtu.be/mwqYffX7NZk) - [CODEPEN](https://codepen.io/jangka44/pen/QWyEwvR?editors=0010) # 챕터 83, MySQL 부서, 사원 테이블, LEFT JOIN, UNION # 83-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 83, 1강, 관련개념설명](https://youtu.be/gWhVoWHRkHc) # 83-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 83, 2강, 문제설명](https://youtu.be/J8MT6kZuuqY) - [CODEPEN](https://codepen.io/jangka44/pen/NWpbZRj?editors=0010) # 83-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 83, 3강, 문제해설, 1부](https://youtu.be/agRQtuKo2pk) - [영상 - 리액트풀스택, ken 5034, 챕터 83, 3강, 문제해설, 2부](https://youtu.be/8tT6vqWZNsU) - [CODEPEN](https://codepen.io/jangka44/pen/zYZoVNM?editors=0010) # 83-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 83, 4강, 정리](https://youtu.be/IzhqamZZFlE) - [CODEPEN](https://codepen.io/jangka44/pen/zYZoVNM?editors=0010) # 챕터 84, MySQL 회원 테이블, INDEX, UNIQUE INDEX, SQL_NO_CACHE, EXPLAIN, UUID # 84-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 84, 1강, 관련개념설명](https://youtu.be/uAdQSS3zJCo) # 84-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 84, 2강, 문제설명](https://youtu.be/phQthH1DpKI) - [CODEPEN](https://codepen.io/jangka44/pen/RwpomGE?editors=0010) # 84-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 84, 3강, 문제해설, 1부](https://youtu.be/V9q6QBip-48) - [영상 - 리액트풀스택, ken 5034, 챕터 84, 3강, 문제해설, 2부](https://youtu.be/wbXATGS8kX0) - [CODEPEN](https://codepen.io/jangka44/pen/vYxywgQ?editors=0010) # 84-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 84, 4강, 정리](https://youtu.be/MaxqfL2I928) - [CODEPEN](https://codepen.io/jangka44/pen/vYxywgQ?editors=0010) # 챕터 85, 백엔드 실전배포를 위한 준비 # 85-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 85, 1강, 실전배포, 기본세팅, slog.gg/p/3045](https://youtu.be/EZ52AjUxviU) - [몰입코딩 - 실전배포, 기본세팅 - slog.gg/p/3045](https://slog.gg/p/3045) # 85-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 85, 2강, 실전배포, NGINX, slog.gg/p/3128](https://youtu.be/iGvPnhWLGsM) - [몰입코딩 - 실전배포, NGINX - slog.gg/p/3128](https://slog.gg/p/3128) # 85-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 85, 3강, 실전배포, 젠킨스, slog.gg/p/3144](https://youtu.be/IQKOg6SZRQY) - [몰입코딩 - 실전배포, 젠킨스 - slog.gg/p/3144](https://slog.gg/p/3144) # 챕터 86, express 기초 # 86-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 86, 1강, express 설치, hello world](https://youtu.be/RWK70qxb8zM) - [expressjs - 공식문서](https://expressjs.com/) - [expressjs - 공식문서 - hello-world](https://expressjs.com/en/starter/hello-world.html) - [리포지터리 - github.com/jhs512/express_exam_2022_05](https://github.com/jhs512/express_exam_2022_05) - [GIT](https://github.com/jhs512/express_exam_2022_05/commit/d95abd60adb9c6d85ad636373cd095d34a88f929) - express 설치 명령어 - npm i express - 꼭 프로젝트의 최상위 폴더에서 실행해야 합니다. - express를 사용해야하는 프로젝트 마다 각각 설치해야 합니다. - node_modules 폴더에 설치 됩니다. - .gitignore의 역할 - git 저장소에 쓸데없는 파일들이 저장되는 것을 막아준다. - git에 저장할 필요가 없는 파일들 : node_modules, package-lock.json - node_modules 폴더가 없을 때 복구하는 방법 - npm install - 이 명령어는 package.json 파일의 내용을 기초로 node_modules 폴더를 재 구성해줍니다. - .gitignore ``` # npm node_modules package-lock.json *.log *.gz # Coveralls .nyc_output coverage # Benchmarking benchmarks/graphs ``` - app.js ```js // app.js import express from "express"; const app = express(); const port = 3000; app.get("/", (req, res) => { res.send("Hello World!"); }); app.get("/about", (req, res) => { res.send("About!"); }); app.get("/setting", (req, res) => { res.send("Setting!"); }); app.listen(port, () => { console.log(`Example app listening on port ${port}`); }); ``` - package.json ```json // package.json { "dependencies": { "express": "^4.18.1" }, "type": "module" } ``` $$uml actor 개발자 control 크롬 control express autonumber 개발자 -> 크롬 : http://localhost:3000/wise_sayings 크롬 -> express : request(req) 발송 express -> express : /wise_sayings 에 해당하는 라우팅 함수 실행 express -> 크롬 : response(res) 응답 크롬 -> 개발자 : 눈으로 데이터 확인 $$ # 86-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 86, 2강, nodemon 적용](https://youtu.be/bZaWvFXPUtM) - [nodemon - 공식문서](https://nodemon.io/) - [GIT](https://github.com/jhs512/express_exam_2022_05/commit/000c19cecf6265eaa5cc0c21e714d1afa8e762b4) - nodemon 설치 명령어 - npm install -g nodemon - 꼭 프로젝트의 최상위 폴더에서 실행해야 합니다. # 86-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 86, 3강, json 응답](https://youtu.be/tNRkYEUlVvY) - [json viewer - 크롬 익스텐션 설치](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ko) - [GIT](https://github.com/jhs512/express_exam_2022_05/commit/b3c213b0b644329fa3cf77b2cec73e392a6fb6e4) # 챕터 87, express, DB 연동 # 87-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 87, 1강, 명언 DB 구현](https://youtu.be/xruHUxK4Rjk) - [GIT](https://github.com/jhs512/express_exam_2022_05/commit/ee5d1aeec6dbd2c4c426d1f849f17d17a9beace9) ```sql # DB 생성 DROP DATABASE IF EXISTS wise_saying; CREATE DATABASE wise_saying; USE wise_saying; # 테이블 생성 CREATE TABLE wise_saying ( id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, reg_date DATETIME NOT NULL, content VARCHAR(200) NOT NULL, author VARCHAR(50) NOT NULL ); # 데이터 생성 INSERT INTO wise_saying SET reg_date = NOW(), `content` = '나는 산적이다.', author = '임꺽정'; INSERT INTO wise_saying SET reg_date = NOW(), `content` = '나는 의적이다.', author = '홍길동'; INSERT INTO wise_saying SET reg_date = NOW(), `content` = '나는 조선의 국모다.', author = '명성황후'; ``` # 87-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 87, 2강, mysql2를 이용해서 DB 연동](https://youtu.be/upCs8X3qe7U) - [mysql2 - 공식문서](https://github.com/sidorares/node-mysql2/blob/master/documentation) - [mysql2 - 공식문서 - Promise-Wrapper, es7-async-await](https://github.com/sidorares/node-mysql2/blob/master/documentation/Promise-Wrapper.md#es7-async-await) - [GIT - app.get("/wise-sayings", ...) 부분](https://github.com/jhs512/express_exam_2022_05/commit/1293b249f4308058bd51d94f154e76ae37b5a02a) $$uml actor 개발자 control 크롬 control express database DB_wise_saying autonumber 개발자 -> 크롬 : http://localhost:3000/wise_sayings 크롬 -> express : request(req) 발송 express -> express : /wise_sayings 에 해당하는 라우팅 함수 실행 express -> DB_wise_saying : SELECT * FROM wise_saying ORDER BY id DESC 쿼리 실행 DB_wise_saying -> express : DB 데이터(압축본) express -> express : DB 데이터를 압축해제 => [{}, {}, {}, ...] express -> 크롬 : response(res) 응답 크롬 -> 개발자 : 눈으로 데이터 확인 $$ # 87-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 87, 3강, 1개의 명언 데이터 불러오는 API](https://youtu.be/ht4XHdzdLAs) - [GIT - app.get("/wise-saying", ...) 부분](https://github.com/jhs512/express_exam_2022_05/commit/1293b249f4308058bd51d94f154e76ae37b5a02a) # 87-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 87, 4강, 존재하지 않는 명언 번호가 입력되면 404](https://youtu.be/xsy9vmyHq5w) - [GIT - app.get("/wise-saying/:id", ...) 부분](https://github.com/jhs512/express_exam_2022_05/commit/1293b249f4308058bd51d94f154e76ae37b5a02a) # 87-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 87, 5강, 404로 결론이 났다면, 응답하고 함수종료](https://youtu.be/5rKmVMpDX0o) - [GIT](https://github.com/jhs512/express_exam_2022_05/commit/ee7f9ba8eb8251a5801e1f557ed57445ab45c55c) - HTTP Status 200 : 성공, 일반 - HTTP Status 404 : 실패, 못 찾음, 없음 # 챕터 88, express, 명언 수정, 삭제, 추가 # 88-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 88, 1강, postman 설치](https://youtu.be/5mq4FAMaTbY) - [POSTMAN - 공식사이트](https://www.postman.com/) - [POSTMAN - 다운로드](https://www.postman.com/downloads/) # 88-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 88, 2강, 워크스페이스, 콜렉션 생성](https://youtu.be/shf-EH9Jcz0) # 88-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 88, 3강, 명언 등록, POST](https://youtu.be/2mT7WD2g-rc) - [GIT](https://github.com/jhs512/express_exam_2022_05/commit/b8ac8c0385e3cacca15b29fb957fdd9cb549d60e) - HTTP Status 201 : 성공, 생성되었음 - HTTP Status 400 : 실패, 잘못된 입력, 예를들어 필수정보 누락 # 88-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 88, 4강, 명언 수정, PATCH](https://youtu.be/1Vlvim5h4Sg) - [GIT](https://github.com/jhs512/express_exam_2022_05/commit/2022eaaeb9f0105e86b0a12348b5f9fc44572b91) - HTTP Status 200 : 성공, 일반 - HTTP Status 404 : 실패, 못 찾음, 없음 - HTTP Status 400 : 실패, 잘못된 입력, 예를들어 필수정보 누락 # 88-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 88, 5강, 명언 삭제, DELETE](https://youtu.be/3aBkrRHzJbo) - [GIT](https://github.com/jhs512/express_exam_2022_05/commit/9487476bc916f69781e8506f089d41ca9ed1ab14) - HTTP Status 200 : 성공, 일반 - HTTP Status 404 : 실패, 못 찾음, 없음 # 챕터 89, VS CODE로 스쿼트 앱 구현 # 89-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 1강, 세팅](https://youtu.be/T2Wf3GESXFU) - [리포지터리 - github.com/jhs512/react_stc_2022](https://github.com/jhs512/react_stc_2022) - [GIT](https://github.com/jhs512/react_stc_2022/commit/5d6000845767a70126e16b20e084fa9432ac5bca) # 89-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 2강, 쓸데없는 파일 제거](https://youtu.be/yYYy2xW0fRw) - [GIT](https://github.com/jhs512/react_stc_2022/commit/12e5aef11423ca3b8f7c175538f6403d4f9afc50) # 89-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 3강, 지마켓 산스 폰트 적용](https://youtu.be/dpH3_7SU_Ws) - [GIT](https://github.com/jhs512/react_stc_2022/commit/d5a84538fe8fe153a6cf59c2f0c80f05ba7e07d9) # 89-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 4강, 테일윈드 설치](https://youtu.be/JLG-hO19uCo) - [GIT](https://github.com/jhs512/react_stc_2022/commit/01d22e9aeb269815ea08d687347416f7f0a0a168) # 89-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 5강, 리액트 앱 사이즈 전체화면으로](https://youtu.be/Hs6H09dFrk0) - [GIT](https://github.com/jhs512/react_stc_2022/commit/a2e795ce313f7fd6fbb87816f86b3797436b54a2) # 89-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 6강, MUI 설치](https://youtu.be/bD_QyDPf2Ro) - [GIT](https://github.com/jhs512/react_stc_2022/commit/34536855a5cca7273cb7efb833d9bb37c2b1291e) # 89-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 7강, MUI 테마 적용](https://youtu.be/9Yprp4xeceI) - [GIT](https://github.com/jhs512/react_stc_2022/commit/68f1e76db7590410e1088043997240706e774b49) # 89-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 8강, MUI 테마 색상을 css 변수화](https://youtu.be/p4DX0o-92O4) - [GIT](https://github.com/jhs512/react_stc_2022/commit/ff494076fe81cd3b9517881a5c219606494a5b3b) # 89-9강 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 9강, 폰트어썸 추가](https://youtu.be/CzOj86d--ME) - [GIT](https://github.com/jhs512/react_stc_2022/commit/16fe900015dabcd775d3061c983915e7d5060bd7) # 89-10강 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 10강, 리액트라우터, 리코일, classnames, immer 설치](https://youtu.be/tgHmmqa1Qpw) - [GIT](https://github.com/jhs512/react_stc_2022/commit/4cd7ea3c51070371269b3eea16e5c4f005a3b736) # 89-11강 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 11강, 명언데이터, react-countup, canvas-confetti 세팅](https://youtu.be/znv1tIuRAyY) - [GIT](https://github.com/jhs512/react_stc_2022/commit/a9e5e37820d977e367fecee0fa44212517c3aa00) # 89-12강 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 12강, 잘못 설치한 라이브러리 교체, 코드팬의 소스코드 가져와서 실행, 1부](https://youtu.be/c2qHFHTH3PY) - [영상 - 리액트풀스택, ken 5034, 챕터 89, 12강, 잘못 설치한 라이브러리 교체, 코드팬의 소스코드 가져와서 실행, 2부](https://youtu.be/iGiw3RWZigk) - [GIT](https://github.com/jhs512/react_stc_2022/commit/0eca1354ea2a9ec09cf1409a195273dc2b44d603) # 89-13강 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 13강, 소스코드에서 경고제거](https://youtu.be/WiDCF0hSOFw) - [GIT](https://github.com/jhs512/react_stc_2022/commit/4e1fc19f6f86e032d97e547844b01251cc9e4ef1) # 89-14강 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 14강, App.js에 있던 로직들을 각각의 파일들로 분리, 1부](https://youtu.be/zJe2r8PQ_j8) - [영상 - 리액트풀스택, ken 5034, 챕터 89, 14강, App.js에 있던 로직들을 각각의 파일들로 분리, 2부](https://youtu.be/V63benvIRcw) - [GIT](https://github.com/jhs512/react_stc_2022/commit/75fdbc88d6dfef485cd14190138aa58678123d68) # 챕터 90, next.js 기초 강좌 소개 # 90-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 90, 1강, next.js 입문, 1부, next.js 개요](https://youtu.be/3b01D6FSYoM) - [영상 - 리액트풀스택, ken 5034, 챕터 90, 1강, next.js 입문, 2부, next.js 설치, next.js 프로젝트 생성](https://youtu.be/lwnpXtm7l7c) - [영상 - 리액트풀스택, ken 5034, 챕터 90, 1강, next.js 입문, 3부, next.js 기초 강좌 소개](https://youtu.be/8nV1YPbeZUo) - [클래스101 리액트풀스택 사전지식페이지 - 단계 17 : next.js 강좌](https://slog.gg/p/4680#단계-17) # 챕터 91, 할일리스트 백엔드, DB설계, 리포지터리 연결 # 91-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 91, 1강, 리포지터리 생성, express 설치](https://youtu.be/oSZ2bhsYoyg) - [리포지터리 - github.com/jhs512/todo_backend_2022_05_25](https://github.com/jhs512/todo_backend_2022_05_25) - [GIT](https://github.com/jhs512/todo_backend_2022_05_25/commit/f5ac9427c7545854d34d1129da886c50dc0810cd) - express 설치 - npm i express # 91-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 91, 2강, Express, Hello World](https://youtu.be/pLb1UdVQH5g) - [익스프레스 - 헬로월드](https://expressjs.com/en/starter/hello-world.html) - [GIT](https://github.com/jhs512/todo_backend_2022_05_25/commit/f827196ec4952150f7c5de07afff7f83c5370e79) # 91-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 91, 3강, DB 구현](https://youtu.be/tY6uTMdNGSc) - [GIT](https://github.com/jhs512/todo_backend_2022_05_25/commit/d63b3f05a92029cb7e777a3e9bd2ce72d08706ff) ```sql # todo_2022_05_25 DB 생성 DROP DATABASE IF EXISTS todo_2022_05_25; CREATE DATABASE todo_2022_05_25; USE todo_2022_05_25; # todo 테이블 생성 CREATE TABLE todo ( id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, reg_date DATETIME NOT NULL, update_date DATETIME NOT NULL, user_code CHAR(50) NOT NULL, `no` INT UNSIGNED NOT NULL, perform_date DATETIME NOT NULL, content VARCHAR(200) NOT NULL, is_completed TINYINT UNSIGNED NOT NULL DEFAULT 0 ); # user_code와 no의 조합에 대해서 unique 설정 ALTER TABLE todo ADD UNIQUE INDEX(`user_code`, `no`); # 테스트용 데이터 생성 INSERT INTO todo SET reg_date = NOW(), update_date = NOW(), user_code = 'localhost', `no` = 1, perform_date = NOW(), content = '기상'; INSERT INTO todo SET reg_date = NOW(), update_date = NOW(), user_code = 'localhost', `no` = 2, perform_date = NOW(), content = '조깅'; INSERT INTO todo SET reg_date = NOW(), update_date = NOW(), user_code = 'localhost', `no` = 3, perform_date = NOW(), content = '식사'; ``` # 91-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 91, 4강, CORS 허용](https://youtu.be/9MsoHjbJ-_E) - [GIT](https://github.com/jhs512/todo_backend_2022_05_25/commit/aafa7a2759c13ab66c3c02340e6202d5f9cc7a11) - cors 미들웨어 설치 - npm i cors ```js // 모든 도메인에 대해서 CORS 허용해주도록 설정 import express from "express"; import cors from "cors"; const app = express(); app.use(cors()); ``` ```js // cdpn.io에서 들어오는 요청은 특별히 허용해주도록 설정 import express from "express"; import cors from "cors"; const app = express(); const corsOptions = { origin: "https://cdpn.io", optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204 }; app.use(cors(corsOptions)); ``` # 챕터 92, 할일리스트 조회, 생성, 삭제, 수정 # 92-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 92, 1강, 조회](https://youtu.be/sZtstdhe7d8) - [GIT](https://github.com/jhs512/todo_backend_2022_05_25/commit/daf96b31d2603f9d23f5f2fa0820288cd1d296e0) # 92-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 92, 2강, 단건조회](https://youtu.be/evbtyOwUtyM) - [GIT](https://github.com/jhs512/todo_backend_2022_05_25/commit/0031af1e6135a34ff71de66f113959e95127dd65) # 92-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 92, 3강, 삭제](https://youtu.be/CWR0y-b6oas) - [GIT](https://github.com/jhs512/todo_backend_2022_05_25/commit/e16bc743f5cbde40813ff94c71a67f9345cd8ae7) # 92-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 92, 4강, 생성](https://youtu.be/92C0UWgQypw) - [GIT](https://github.com/jhs512/todo_backend_2022_05_25/commit/297b063dde7bee7a520ee0aa335a4cd607bf8b9a) # 92-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 92, 5강, 수정](https://youtu.be/DbzGFEELv_w) - [GIT](https://github.com/jhs512/todo_backend_2022_05_25/commit/04ed57926914a6b080a6b36df209637149d65293) # 챕터 93, 할일리스트에 API 적용 # 93-1강 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 1강, id를 no로 변경](https://youtu.be/ugavVzM_ZaU) - [CODEPEN](https://codepen.io/jangka44/pen/ExQbKXX?editors=0010) # 93-2강 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 2강, todos와 관련된 리코일 퍼시스트 설정 제거](https://youtu.be/ij0EH5mez2s) - [CODEPEN](https://codepen.io/jangka44/pen/WNMXwXb?editors=0010) # 93-3강 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 3강, API에서 가져온 todos 보여주기](https://youtu.be/P2eYsD2E8p4) - [CODEPEN](https://codepen.io/jangka44/pen/poadypy?editors=0011) # 93-4강 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 4강, 할일작성 API 연결](https://youtu.be/2_71_V2os1o) - [CODEPEN](https://codepen.io/jangka44/pen/mdXqPjo?editors=0010) # 93-5강 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 5강, 할일작성 API와 관련된 함수들에 async 처리하여, 작성완료 스낵바 메시지가 잘 나오도록](https://youtu.be/GAmMrnfhdK4) - [CODEPEN](https://codepen.io/jangka44/pen/NWywNEG?editors=0010) # 93-6강 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 6강, 네트워크 혹은 서버이상으로 인한 오류발생시 관련오류 출력되도록 예외처리](https://youtu.be/s6lms5usdBQ) - [CODEPEN](https://codepen.io/jangka44/pen/yLvPOwM?editors=0010) # 93-7강 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 7강, 할일들이 아직 서버에서 로딩되지 않은 경우 로딩화면 표시](https://youtu.be/HV0c5mAlxcs) - [CODEPEN](https://codepen.io/jangka44/pen/JjpOXqB?editors=0010) # 93-8강 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 8강, 할일수정 API 연결](https://youtu.be/LRMtDJ1jTbg) - [CODEPEN](https://codepen.io/jangka44/pen/QWQOEjd?editors=0010) # 93-9강 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 9강, 할일로딩이 앱 시작시 한번만 수행되도록](https://youtu.be/r7HSZuhnjuc) - [CODEPEN](https://codepen.io/jangka44/pen/jOZaryw?editors=0011) # 93-10강 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 10강, 할일완료여부체크시 DB에도 반영되도록 API 연결](https://youtu.be/Zp01CmAK2ps) - [CODEPEN](https://codepen.io/jangka44/pen/ExQbyEG?editors=0010) # 93-11강 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 11강, 할일삭제 API 연결](https://youtu.be/PWNEvj_VD7A) - [CODEPEN](https://codepen.io/jangka44/pen/vYdWKaN?editors=0010)

게시글 상세