# 수업페이지 - [페이지 : https://www.slog.gg/p/13275/live](https://www.slog.gg/p/13275/live) # 관련링크 - [새 코드팬, codepen.io/pen](https://codepen.io/pen) $$hide - [리액트 시작소스코드, to2.kr/ekF](https://to2.kr/ekF) $$ - [리액트 시작소스코드](https://codepen.io/sangwon7242/pen/rNPEqwE) # 필수 사전지식 - [필수사전지식 - HTML, CSS](https://www.slog.gg/p/12593) - [필수사전지식 - Javscript, JQuery](https://www.slog.gg/p/12975) # 챕터 01 시작 # 01-01, 개요와 기본세팅 ### 코드펜 세팅 - [영상 - 23 12 09, scode 13275, 리액트&안드로이드 수업, 1강, 개요](https://youtu.be/_0ocTeDqZG0) - [영상 - 23 12 09, scode 13275, 리액트&안드로이드 수업, 2강, CODEPEN 세팅](https://youtu.be/-LDMHJcYSdc) - [새 코드팬, codepen.io/pen](https://codepen.io/pen) ### 안드로이드 수업에서 리액트 선택한 이유 - [영상 - 23 12 09, scode 13275, 리액트&안드로이드 수업, 3강, 안드로이드 수업에서 리액트 선택한 이유](https://youtu.be/b9J0UsFeITQ) # 챕터 02 시작 # 02-01, 자바스크립트 기초문법 ## 기초 출력, 문장형, 숫자형 - [영상 - 23 12 09, scode 13275, 리액트&안드로이드 수업, 4강, 자바스크립트 기초 출력, 숫자형, 문자형 설명](https://youtu.be/q7rBndXmHjY) - [CODEPNE - 문장형, 숫자형](https://codepen.io/sangwon7242/pen/poGYPWg) ## 자바스크립트 변수 - [영상 - 23 12 09, scode 13275, 리액트&안드로이드 수업, 5강, 자바스크립트 변수](https://youtu.be/jZu7jNoEvKg) - [CODEPEN - 변수 개념](https://codepen.io/sangwon7242/pen/YzBgVeO?editors=0012) ``` 변수의 특징 1. 변수는 선언(정의) 되어야만 사용 가능하다. 2. 변수는 값을 저장할 수 있는 공간이다. 3. 변수에 어떤 값을 넣냐에 따라서 변수에 데이터 타입이 정해진다. 4. 변수는 대입연산자를 기준으로 좌측에 있을 때는 변수이고, 우측에 있을 때는 값으로 작용한다. 5. 변수는 중복선언이 금지되어 있다. (단, 변수 선언시 어떤 식으로 선언하냐에 따라서 달라진다.) 6. 변수는 재활용이 가능하다. (단, 변순 선언시 어떤 식으로 선언하냐에 따라서 달라진다.) 7. 변수에는 값을 오직 하나밖에 넣지 못한다. -------- // 변수 선언 방식 var : 변수의 중복선언이 가능. 단, 잘 안쓴다. let : 변수의 중복선언이 불가능 const : 변수의 중복선언 불가능, 변수 재활용 불가능. ``` ## 연산자(사칙연산자, 비교연산자, 논리연산자) - [영상 - 23 12 09, scode 13275, 리액트&안드로이드 수업, 6강, 자바스크립트 연산자 개념](https://youtu.be/OgGj4Y04rDg) - [CODEPEN - 연산자](https://codepen.io/sangwon7242/pen/NWoJjOq?editors=0012) ``` 연산자 : 사칙(산술)연산자, 비교연산자, 논리연산자 사칙연산자 : +, -, *, /(나눈 몫), %(나눈 나머지) 비교연산자 : 결과 값(true, false) >= (이상), > (초과), <= (이하), < (미만), == (같다), != (같지않다) ===, !== (데이터타입 까지 고려한 연산) 논리연산자 : &&(and), ||(or) && : 양쪽의 비교한 결과 값이 둘다 true인 경우 그 결과가 true이다. - 양쪽의 비교한 결과 값 중 하나라도 false이면 그 결과가 false이다. || : 양쪽의 비교한 결과 값이 둘다 false인 경우 그 결과가 false이다. - 양쪽의 비교한 결과 값 중 하나라도 true이면 그 결과가 true이다. 연산자 우선순위 산술연산자 > 비교연산자 > 논리연산자 ``` - [거짓같은 값 : 거짓 같은 값(Falsy, falsey로 쓰이기도 함) 값은 Boolean 문맥에서 false로 평가되는 값입니다.](https://developer.mozilla.org/ko/docs/Glossary/Falsy) ```js if (false) { // 도달할 수 없습니다. } if (null) { // 도달할 수 없습니다. } if (undefined) { // 도달할 수 없습니다. } if (0) { // 도달할 수 없습니다. } if (-0) { // 도달할 수 없습니다. } if (0n) { // 도달할 수 없습니다. } if (NaN) { // 도달할 수 없습니다. } if ("") { // 도달할 수 없습니다. } ``` ## 반복문(while, for) - [영상 - 23 12 09, scode 13275, 리액트&안드로이드 수업, 7강, 반복문(while, for)](https://youtu.be/mcd2b2Km5jY) - [CODEPEN - 반복문(while, for)](https://codepen.io/sangwon7242/pen/poGYPqN?editors=0012) ## 함수(함수 정의, 실행, 매개변수) - [영상 - 23 12 09, scode 13275, 리액트&안드로이드 수업, 8강, 함수(함수 정의, 실행, 매개변수)](https://youtu.be/FbHXZ14uA-4) - [CODEPEN - 함수 정의, 실행, 매개변수, 1부](https://codepen.io/sangwon7242/pen/poGYPmR?editors=0012) - [CODEPEN - 함수 정의, 실행, 매개변수, 2부](https://codepen.io/sangwon7242/pen/OJdqmeJ?editors=0012) ``` 함수의 특징 - 함수는 정의(선언)를 해야지 사용가능하다. - 함수는 정의를 했으면 반드시 실행을 해야 한다. 일반지역변수와 매개변수의 차이 - 일반 지역변수는 함수 내부에서 값이 정해지는 반면 매개변수는 함수 외부에서 값이 정해진다. ``` ## 함수(함수 리턴) - [영상 - 23 12 09, scode 13275, 리액트&안드로이드 수업, 9강, 함수(함수 리턴)](https://youtu.be/UqErZKYL2lU) - [CODEPEN - 함수 리턴](https://codepen.io/sangwon7242/pen/WNPmOex?editors=0012) ## 함수를 정의하는 여러가지 방법 - [영상 - 23 12 09, scode 13275, 리액트&안드로이드 수업, 10강, 함수를 정의하는 여러가지 방법](https://youtu.be/AWd6aygdAxM) - [CODEPEN - 함수를 정의하는 여러가지 방법](https://codepen.io/sangwon7242/pen/PoVLjqw?editors=0012) # 챕터 03 시작 ## 03-01, 리액트 사용하는 이유 ``` # 리액트를 사용하는 이유 # 웹은 페이지 이동시 특유의 깜박거림이 있습니다. # 모바일앱은 페이지 이동시 부드럽고, 빠릅니다. # 리액트는 모바일앱같은 웹을 만들 수 있습니다. # 그래서 리액트로 고품질의 웹사이트를 만들 수 있습니다.아주 복잡한 UI를 가진 앱도 깔끔하게 만들 수 있도록 도와주는 역할도 합니다. # 또 모바일앱도 제작 가능합니다. # 리액트 기반의 대표적인 앱이 배달의 민족과 토스가 있습니다. # 리액트를 잘 활용하면 기업에서는 굉장한 비용절감을 할 수 있습니다. ``` ## 03-02, 리액트 개발환경 세팅 및 설명 ### 코드펜에 리액트 개발환경 세팅 - [영상 - 23 12 09, scode 13275, 리액트&안드로이드 수업, 11강, 코드펜에 리액트 개발환경 세팅](https://youtu.be/IzERYpsEYDE) - [CODEPEN - 코드펜에 리액트 개발환경 세팅](https://codepen.io/sangwon7242/pen/gOqERPb?editors=0010) ### 리액트 세팅, 빠른버전 설명 - [영상 - 23 12 09, scode 13275, 리액트&안드로이드 수업, 12강, 리액트 세팅, 빠른버전 설명](https://youtu.be/XxkzDqx4sms) - [리액트 시작소스코드, to2.kr/ekF](https://to2.kr/ekF) ### 리액트 추가 교육자료 - [영상 - 23 12 09, scode 13275, 리액트&안드로이드 수업, 13강, 리액트 추가 교육자료](https://youtu.be/b8B-ztPLS5o) - [리액트 공식문서, https://ko.reactjs.org/](https://ko.reactjs.org/) - [리액트 공식문서, 자습서(실전파에게 추천), https://ko.reactjs.org/tutorial/tutorial.html](https://ko.reactjs.org/tutorial/tutorial.html) - [리액트 공식문서, 단계별 가이드(이론파에게 추천), https://ko.reactjs.org/docs/hello-world.html](https://ko.reactjs.org/docs/hello-world.html) - [리액트 기초, 코딩애플](https://www.youtube.com/playlist?list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy) ## 03-03, 리액트 시작, 실습하기 ### 미션 1 : 새 태그 만들어보기 - [영상 - 23 12 10, scode 13275, 리액트 수업&안드로이드 수업, 14강, 리액트로 새 태그 만들기](https://youtu.be/kMZk5LRSE2M) - [CODEPEN - 새 태그 만들어보기](https://codepen.io/sangwon7242/pen/rNPRZKB?editors=0010) ### 미션 2 : 새 태그 만들어보기, CSS style 적용 #### 설명 2-1 - [영상 - 23 12 10, scode 13275, 리액트 수업&안드로이드 수업, 15강, 새 태그 만들어보기, CSS style 적용, 1부, 문제](https://youtu.be/phOxza_ZA_c) - [CODEPEN - CSS style 적용](https://codepen.io/sangwon7242/pen/bGzZxjj?editors=0010) - [영상 - 23 12 10, scode 13275, 리액트 수업&안드로이드 수업, 16강, 새 태그 만들어보기, CSS style 적용, 2부, 정답](https://youtu.be/GUcsA4eWRPw) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/qBgvMJa?editors=0010) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/qBgvMJa) #### 설명 2-2 - [영상 - 23 12 10, scode 13275, 리액트 수업&안드로이드 수업, 17강, 단순하게 설명하면, 리액트로 새로운 태그를 만들 수 있다](https://youtu.be/YbNabHEcb9M) ### 미션3 : className을 이용하셔 CSS style 적용 - [영상 - 23 12 10, scode 13275, 리액트 수업&안드로이드 수업, 18강, CSS style 적용, className](https://youtu.be/tPo_aLAytdA) - [CODEPEN - className을 이용하셔 CSS style 적용](https://codepen.io/sangwon7242/pen/jOdJvXJ?editors=0010) # 챕터 04 시작 ## 04-01, useState 개념 - [영상 - 23 12 10, scode 13275, 리액트 수업&안드로이드 수업, 19강, useState 개념, 1부, 일반변수의 한계](https://youtu.be/Xr7uzGb74cU) - [CODEPEN - 일반변수는 바뀌어도 변함이 없음](https://codepen.io/sangwon7242/pen/yLZwxrm?editors=0011) - [영상 - 23 12 10, scode 13275, 리액트 수업&안드로이드 수업, 20강, useState 개념, 2부, useState를 활영하여 관련된 내용 한번에 업데이트](https://youtu.be/mwoWkjRw46Y) - [CODEPEN - useState를 사용한 변수는 바뀌었을 때 관련된 것들이 같이 바뀜](https://codepen.io/sangwon7242/pen/yLZwxdm?editors=0011) ## 04-02, 리액트의 뷰 갱신 원리 - [영상 - 23 12 10, scode 13275, 리액트 수업&안드로이드 수업, 21강, 리액트의 뷰 갱신 원리, 재벌처럼 매번 버리고 새로 구매한다.](https://youtu.be/-dDozxR4Z8I) # 챕터 05 시작 ## 05-01 시작, 간단한 숫자 카운팅 기능 구현 ## 미션 1, 숫자 카운팅 기초 1. - [ ] 01-01단계, 숫자 카운팅(리액트, 제이쿼리, php 방식) - [영상 - 23 12 10, scode 13275, 리액트 수업&안드로이드 수업, 22강, 숫자 카운팅, 증가, 감소, 1부, 리액트 방식](https://youtu.be/GI1O1iAAQUA) - [CODEPEN - 요즘(리액트) 방식](https://codepen.io/sangwon7242/pen/jOdJePj?editors=0010) - HTML과 자바스크립트가 합쳐져 있어서 소스코드 전체로직을 파악할 때 편하다. - state 변수를 변경하기만 하면 관련된 뷰영역들이 자동으로 갱신된다.(마치 엑셀 계산수식이 걸려 있는 셀 처럼) - 갱신속도는 브라우저 문서를 매번 버리고 새로 만드는 서버사이드렌더링 보다는 빠르다. - [영상 - 23 12 10, scode 13275, 리액트 수업&안드로이드 수업, 23강, 숫자 카운팅, 증가, 감소, 2부, 제이쿼리 방식](https://youtu.be/D1daYu8n1dE) - [CODEPEN - 예전(제이쿼리) 방식](https://codepen.io/jangka44/pen/OJxddOz?editors=0010) - HTML과 자바스크립트가 나눠져 있어서 소스코드 전체로직을 파악할 때 귀찮다. - state 변수를 변경하고, 따로 수동으로 관련된 뷰영역들을 일일이 갱신해줘야 한다. - 갱신속도는 브라우저 문서를 매번 버리고 새로 만드는 서버사이드렌더링 보다는 빠르다. - [영상 - 23 12 10, scode 13275, 리액트 수업&안드로이드 수업, 24강, 숫자 카운팅, 증가, 감소, 3부, php 방식](https://youtu.be/WFrsy5orW3g) - [예전(서버사이드렌더링) 방식](https://codepen.io/jangka44/debug/XWeOOQb) - HTML과 자바스크립트가 합쳐져 있어서 소스코드 전체로직을 파악할 때 편하다. - state 변수를 변경하기만 하면 관련된 뷰영역들이 자동으로 갱신된다.(마치 엑셀 계산수식이 걸려 있는 셀 처럼) - 갱신속도는 느리다. 왜냐하면 매 요청마다 전체 문서를 PHP에서 다시 그리기 때문이다. 1. - [ ] 01-02단계, 단계, 숫자 기록 - [영상 - 23 12 10, scode 13275, 리액트 수업&안드로이드 수업, 25강, 숫자기록](https://youtu.be/GQtX98HXU0E) - [CODEPEN - 숫자 기록](https://codepen.io/sangwon7242/pen/rNPRqyM?editors=0010) 1. - [ ] 01-03단계, 단계, 숫자 기록 삭제 - [영상 - 23 12 10, scode 13275, 리액트 수업&안드로이드 수업, 26강, 숫자 기록 삭제](https://youtu.be/HcmqP7dnYvE) - [CODEPEN - 숫자 기록 삭제](https://codepen.io/sangwon7242/pen/MWLxPEy?editors=0010) 1. - [ ] 01-04 단계, 전개구문 - [영상 - 23 12 16, scode 13275, 리액트 수업&안드로이드 수업, 27강, 전개구문](https://youtu.be/S8gnOHhBOAs) - [CODEPEN](https://codepen.io/sangwon7242/pen/YzOyZoj?editors=0012) 1. - [ ] 01-05 단계, 숫자 기록을 여러개로 - [영상 - 23 12 16, scode 13275, 리액트 수업&안드로이드 수업, 28강, 숫자 기록을 여러개로](https://youtu.be/q4vN1pnakB0) - [CODEPEN](https://codepen.io/sangwon7242/pen/MWLMPOx?editors=0010 1. - [ ] 01-05 단계, 숫자기록을 여러개로, map - [영상 - 23 12 16, scode 13275, 리액트 수업, 29강, 숫자기록을 여러개로, map, 1부](https://youtu.be/ZqSiSmFZHDQ) - [영상 - 23 12 16, scode 13275, 리액트 수업, 29강, 숫자기록을 여러개로, map, 2부](https://youtu.be/HP0_PDVybzk) - [CODEPEN](https://codepen.io/sangwon7242/pen/xxMoyjZ?editors=0012) 1. - [ ] 01-06 단계, 숫자기록을 여러개로, map을 활용해서 리스트로 출력 - [영상 - 23 12 16, scode 13275, 리액트 수업, 30강, 숫자기록을 여러개로, map을 활용해서 리스트로 출력](https://youtu.be/kl3UxF2RmvA) - [CODEPEN](https://codepen.io/sangwon7242/pen/xxMoyJZ?editors=0010) 1. - [ ] 01-07 단계, 감소, 취소, 기록전체삭제 버튼추가 - [영상 - 23 12 16, scode 13275, 리액트 수업, 31강, 감소, 취소, 기록전체삭제 버튼추가](https://youtu.be/rAEzTWcsL7c) - [CODEPEN](https://codepen.io/sangwon7242/pen/zYeVmVr?editors=0010) 1. - [ ] 01-08 단계, filter를 이용한 배열요소 삭제, 불변성 유지 - [영상 - 23 12 16, scode 13275, 리액트 수업, 32강, filter를 이용한 배열요소 삭제, 불변성 유지](https://youtu.be/Eux6xPXvwWw) - [CODEPEN](https://codepen.io/sangwon7242/pen/xxMoQxR?editors=0012) 1. - [ ] 01-09 단계, 아이템 삭제기능 - [영상 - 23 12 16, scode 13275, 리액트 수업, 33강, 아이템 삭제기능](https://youtu.be/GoE0hNmbSis) - [CODEPEN](https://codepen.io/sangwon7242/pen/NWoZEWo?editors=0010) 1. - [ ] 01-10 단계, 함수의 매개변수 유무에 따른 바인딩 방법차이 - [영상 - 23 12 16, scode 13275, 리액트 수업, 34강, 함수의 매개변수 유무에 따른 바인딩 방법차이](https://youtu.be/F3l-HRW3oOU) - [CODEPEN](https://codepen.io/sangwon7242/pen/vYbqQKR?editors=0012) 1. - [ ] 01-11 단계, 레코드 폼과 레코드 리스트로 컴포넌트 분리 - [영상 - 23 12 17, scode 13275, 리액트 수업, 35강, 레코드 폼과 레코드 리스트로 컴포넌트 분리](https://youtu.be/uPO5Ycsht18) - [CODEPEN](https://codepen.io/sangwon7242/pen/vYboEyw?editors=0010) 1. - [ ] 01-12 단계, 함수 분리와 매개변수에 대한 복습 - [영상 - 23 12 17, scode 13275, 리액트 수업, 36강, 함수 분리와 매개변수에 대한 복습](https://youtu.be/MB4bfyE2TPA) - [CODEPEN](https://codepen.io/sangwon7242/pen/gOqVbxb?editors=0012) 1. - [ ] 01-13 단계, NumberRecorderListItem 컴포넌트로 분리 - [영상 - 23 12 17, scode 13275, 리액트 수업, 37강, NumberRecorderListItem 컴포넌트로 분리](https://youtu.be/UsK1VCKKv1I) - [CODEPEN](https://codepen.io/sangwon7242/pen/OJdKPjy?editors=0010) ## 미션 2, 숫자 기록 수정모드 1. - [ ] 02-01 단계, 수정화면과 보기화면 토글 - [영상 - 23 12 17, scode 13275, 리액트 수업, 38강, 수정화면과 보기화면 토글](https://youtu.be/UkjSCwAoPnM) - [CODEPEN](https://codepen.io/sangwon7242/pen/Exrqawp?editors=0010) 1. - [ ] 02-02 단계, NumberRecorderListItem에 수정모드 UI - [영상 - 23 12 17, scode 13275, 리액트 수업, 39강, NumberRecorderListItem에 수정모드 UI](https://youtu.be/2KNcexFUbig) - [CODEPEN](https://codepen.io/sangwon7242/pen/zYegxjJ?editors=0010) 1. - [ ] 02-03 단계, NumberRecorderListItem에 수정모드 UI, 입력상자 값 변경 허용 - [영상 - 23 12 17, scode 13275, 리액트 수업, 40강, NumberRecorderListItem에 수정모드 UI, 입력상자 값 변경 허용](https://youtu.be/ngM8r__ycKA) - [CODEPEN](https://codepen.io/sangwon7242/pen/xxMvbJm?editors=0010) 1. - [ ] 02-04 단계, NumberRecorderListItem에 수정모드 UI, 입력상자 값 변경 허용 후 수정 - [영상 - 23 12 17, scode 13275, 리액트 수업, 41강, NumberRecorderListItem에 수정모드 UI, 입력상자 값 변경 허용 후 수정](https://youtu.be/T5iewJRn0Bo) 1. - [ ] 02-05 단계, 35강에 수정기능 추가, 재구현 - [영상 - 23 12 17, scode 13275, 리액트 수업, 42강, 35강에 수정기능 추가, 재구현](https://youtu.be/9UOlOE02_6k) - [CODEPEN](https://codepen.io/sangwon7242/pen/rNPXabq?editors=0010) ## 03-02 시작 ## 03-02 : CSS 프레임워크 테일윈드 & 데이지 UI 소개 - 테일윈드 & 데이지UI 소개 - [영상 - 23 12 23, scode 13275, 리액트 수업 43강, 테일윈드 & 데이지 UI 소개](https://youtu.be/dFTUxVEzHaU) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/sangwon7242/pen/mdQOqNL?editors=1010) - [테일윈드 CSS 프레임워크](https://tailwindcss.com/) - [데이지UI 컴포넌트](https://daisyui.com/components/) - 데이지UI 로드, 데이지UI를 사용하시려면, 테일윈드도 필요합니다. ```html ``` ### 미션 1 : 튜토리얼 숫자 카운터, 데이지 UI 1. - [ ] [문제 - 00, 시작](https://codepen.io/jangka44/pen/WNdJPNN?editors=0010) 2. - [ ] [문제 - 01, 입력상자](https://codepen.io/jangka44/pen/eYyrbdO?editors=0010) 3. - [ ] [문제 - 02, 데이지 UI](https://codepen.io/jangka44/pen/VwyxqVQ?editors=0010) 4. - [ ] [문제 - 03, 숫자 증가](https://codepen.io/jangka44/pen/vYpjvvj?editors=0010) 5. - [ ] [문제 - 04, 입력상자의 이벤트가 반응](https://codepen.io/jangka44/pen/LYemMvO?editors=0010) 6. - [ ] [문제 - 05, valueAsNumber](https://codepen.io/jangka44/pen/gOozZJZ?editors=0010) 7. - [ ] [문제 정답](https://codepen.io/sangwon7242/pen/KKrNZMK) - [영상 - 23 12 23, scode 13275, 리액트 수업, 44강, 튜토리얼 숫자 카운터, 테일윈드 & 데이지 UI](https://youtu.be/dhjinxoL7S0) # 챕터 6 시작 # 챕터 6, 할일 리스트 기능 구현 및 꾸미기 ## 미션 1, 할일 리스트 1. - [ ] 01-01 단계, 5초마다 자동으로 할일이 추가되도록 작업 - [영상 - 23 12 23, scode 13275, 리액트 수업, 45강, 5초마다 자동으로 할일이 추가되도록 작업](https://youtu.be/xg8NXlvbRPc) - [CODEPEN](https://codepen.io/sangwon7242/pen/PoLoagW?editors=0011) 1. - [ ] 01-02 단계, 할일추가 폼 - [영상 - 23 12 23, scode 13275, 리액트 수업, 46강, 할일추가 폼](https://youtu.be/IXvFpg1MkxU) - [CODEPEN](https://codepen.io/sangwon7242/pen/XWGWYwO?editors=0011) 1. - [ ] 01-03 단계, 할일추가 폼을 별도의 컴포넌트로 분리 - [영상 - 23 12 23, scode 13275, 리액트 수업 47강, 할일추가 폼을 별도의 컴포넌트로 분리](https://youtu.be/5Lif0jBR8Cw) - [CODEPEN](https://codepen.io/sangwon7242/pen/bGZGKXo?editors=0010) 1. - [ ] 01-04 단계, 할일리스트를 ul, li 로 표현 - [영상 - 23 12 23, scode 13275, 리액트 수업 48강, 할일리스트를 ul, li 로 표현](https://youtu.be/6kssxj-jzVw) - [CODEPEN](https://codepen.io/sangwon7242/pen/abMbjog?editors=0010) 1. - [ ] 01-05 단계, 할일리스트를 별도의 컴포넌트로 분리 - [영상 - 23 12 23, scode 13275, 리액트 수업 49강, 할일리스트를 별도의 컴포넌트로 분리](https://youtu.be/ladr478tZXE) - [CODEPEN](https://codepen.io/sangwon7242/pen/NWJWBWX?editors=0010) 1. - [ ] 01-06 단계, 할일리스트아이템 삭제 - [영상 - 23 12 23, scode 13275, 리액트 수업 50강, 할일리스트아이템 삭제](https://youtu.be/gCQijK9QUjw) - [CODEPEN](https://codepen.io/sangwon7242/pen/dyryjGG?editors=0011) ## 미션 2. 할일 리스트 최적화 방법 ### 02-01, 여태까지 만든 구조 설명 - [영상 - 23 12 23, scode 13275, 리액트 수업 51강, 여태까지 만든 구조 설명](https://youtu.be/MXJjjYceMes) $$uml map App { todos => [] setTodos => 세터 addTodo => setTodos 이용 } map TodoWriteForm { newTodoTitle => '' setNewTodoTitle => 세터 addTodo => _addTodo 이용 } map TodoList { todos.map => todo } map TodoListItem_0 { removeTodo => setTodos 이용 } map TodoListItem_1 { removeTodo => setTodos 이용 } map TodoListItem_2 { removeTodo => setTodos 이용 } App --> TodoWriteForm : addTodo:_addTodo App --> TodoList : todos,\nsetTodos TodoList --> TodoListItem_0 : todo,\nindex,\ntodos,\nsetTodos TodoList --> TodoListItem_1 : todo,\nindex,\ntodos,\nsetTodos TodoList --> TodoListItem_2 : todo,\nindex,\ntodos,\nsetTodos $$ ### 02-02, 함수와 데이터는 최대한 하류에서 생성, 꼭 필요한 것만 상류에서 생성 - [영상 - 23 12 23, scode 13275, 리액트 수업 52강, 함수와 데이터는 최대한 하류에서 생성, 꼭 필요한 것만 상류에서 생성](https://youtu.be/uUI06LABQbA) ### 02-03, newTodoTitle, nsetNewTodoTitle 을 TodoWriteForm 에서 생성 - [영상 - 23 12 23, scode 13275, 리액트 수업 53강, newTodoTitle, nsetNewTodoTitle 을 TodoWriteForm 에서 생성](https://youtu.be/09CmqaNi-jY) - [CODEPEN](https://codepen.io/sangwon7242/pen/RwdwBpp?editors=0011) ### 02-04, App에서 addTodo를 만들 때 더 단순하게 만들기 - [영상 - 23 12 23, scode 13275, 리액트 수업 54강, App에서 addTodo를 만들 때 더 단순하게 만들기](https://youtu.be/pj67bMlGVJ0) - [CODEPEN](https://codepen.io/sangwon7242/pen/poYoZPQ?editors=0011) ### 02-05, 구조분해할당의 리네임 문법으로 TodoWriteForm에서 addTodo 함수를 생성할 수 있도록 허용 - [영상 - 23 12 23, scode 13275, 리액트 수업 55강, 구조분해할당의 리네임 문법으로 TodoWriteForm에서 addTodo 함수를 생성할 수 있도록 허용](https://youtu.be/Pe15d_Wb-eA) - [CODEPEN](https://codepen.io/sangwon7242/pen/oNVNMwL?editors=0010) $$uml map App { todos => [] setTodos => 세터 addTodo => setTodos 이용 } map TodoWriteForm { newTodoTitle => '' nsetNewTodoTitle => 세터 addTodo => _addTodo 이용 } map TodoList { todos.map => todo } map TodoListItem_0 { removeTodo => setTodos 이용 } map TodoListItem_1 { removeTodo => setTodos 이용 } map TodoListItem_2 { removeTodo => setTodos 이용 } App --> TodoWriteForm : addTodo:_addTodo App --> TodoList : todos,\nsetTodos TodoList --> TodoListItem_0 : todo,\nindex,\ntodos,\nsetTodos TodoList --> TodoListItem_1 : todo,\nindex,\ntodos,\nsetTodos TodoList --> TodoListItem_2 : todo,\nindex,\ntodos,\nsetTodos $$ ### 02-06, 상류에서는 최대한 원육를 가공하고, 하류에서 꼭 필요한 부분만 넘겨주세요. - [영상 - 23 12 24, scode 13275, 리액트 수업, 56강, 상류에서는 최대한 원육를 가공하고, 하류에서 꼭 필요한 부분만 넘겨주세요.](https://youtu.be/hdd9r6K6F5I) ### 02-07, removeTodo를 상류에서 생성하여 하류로 보내줌 - [영상 - 23 12 24, scode 13275, 리액트 수업, 57강, removeTodo를 상류에서 생성하여 하류로 보내줌](https://youtu.be/ROly3icQ03I) - [CODEPEN](https://codepen.io/sangwon7242/pen/JjzjqqQ?editors=0010) ## 미션 3. setState 함수 시작 ### 03-01, setState 함수를 호출해도 함수가 즉시 다시 실행되지는 않는다 - [영상 - 23 12 24, scode 13275, 리액트 수업, 58강, setState 함수를 호출해도 함수가 즉시 다시 실행되지는 않는다]() - [CODEPEN](https://codepen.io/sangwon7242/pen/VwRwJZL?editors=1011) ### 03-02, setState 함수를 사용하는 2가지 방법 - [영상 - 23 12 24, scode 13275, 리액트 수업, 59강, setState 함수를 사용하는 2가지 방법](https://youtu.be/rUeM4rK773Y) - [CODEPEN](https://codepen.io/sangwon7242/pen/eYXYwOQ?editors=0011) ### 03-03, setState 함수를 사용하는 2가지 방법의 차이점 - [영상 - 23 12 24, scode 13275, 리액트 수업, 60강, setState 함수를 사용하는 2가지 방법의 차이점](https://youtu.be/Qg70vSxkXyU) - [CODEPEN](https://codepen.io/sangwon7242/pen/LYaYKEY?editors=0010) ### 03-04, todo list에 setState 콜백세팅 형태 적용할 곳 찾아보기 - [영상 - 23 12 24, scode 13275, 리액트 수업, 61강, todo list에 setState 콜백세팅 형태 적용할 곳 찾아보기](https://youtu.be/BcaTYxdJGV0) - [CODEPEN](https://codepen.io/sangwon7242/pen/wvOvLvq?editors=0010) ## 미션 4. 할일 리스트 아이템 수정 1. - [ ] 04-01 단계, 아이템 수정UI 레이아웃 작성 - [영상 - 23 12 24, scode 13275, 리액트 수업, 62강, 아이템 수정UI 레이아웃 작성](https://youtu.be/odLZos9__LY) - [CODEPEN](https://codepen.io/sangwon7242/pen/RwdwzrG?editors=0010) 1. - [ ] 04-02 단계, 아이템 수정모드일 때 입력창 보임 - [영상 - 23 12 24, scode 13275, 리액트 수업, 63강, 아이템 수정모드일 때 입력창 보임](https://youtu.be/huWrG3Q4opw) - [CODEPEN](https://codepen.io/sangwon7242/pen/RwdwzrG?editors=0010) 1. - [ ] 04-03 단계, 아이템 수정모드 취소버튼 - [영상 - 23 12 24, scode 13275, 리액트 수업, 64강, 아이템 수정모드 취소버튼](https://youtu.be/D8zA-2nyATM) - [CODEPEN](https://codepen.io/sangwon7242/pen/WNmNqwM?editors=0010) 1. - [ ] 04-04 단계, 아이템 수정모드 취소 후 다시 수정모드 진입시 value 값 초기화 - [영상 - 23 12 24, scode 13275, 리액트 수업, 65강, 아이템 수정모드 취소 후 다시 수정모드 진입시 value 값 초기화](https://youtu.be/hdbg1h0nTbE) - [CODEPEN](https://codepen.io/sangwon7242/pen/WNmNqwM?editors=0010) 1. - [ ] 04-05 단계, 아이템 수정기능 완료 - [영상 - 23 12 24, scode 13275, 리액트 수업, 66강, 아이템 수정기능 완료](https://youtu.be/u3V9QkjoB_o) - [CODEPEN](https://codepen.io/sangwon7242/pen/PoLorGj?editors=0010) # 챕터 7 시작 # 챕터 7, 업그레이드 된 TODOLIST 구현 하기 ## 미션 1, 업그레이드 된 TODOLIST 구현 ### 01-01, 다음 버전의 TODOLIST 기능들 소개 - [영상 - 23 12 24, scode 13275, 리액트 수업, 67강, 다음 버전의 TODOLIST 기능들 소개](https://youtu.be/xHM5XiXWBFc) ### 미션 2, 2차원 데이터로 이루어진 TODOLIST 구현 1. - [ ] 02-01 단계, 다시 시작, 새 할일 입력받고, 리스팅하기 - [영상 - 23 12 24, scode 13275, 리액트 수업, 68강, 다시 시작, 새 할일 입력받고, 리스팅하기](https://youtu.be/lw0Pn5c3YnU) - [CODEPEN](https://codepen.io/sangwon7242/pen/gOEONgR?editors=0010) 1. - [ ] 02-02 단계, 새 할일 등록시 번호 증가 - [영상 - 23 12 24, scode 13275, 리액트 수업, 69강, 새 할일 등록시 번호 증가](https://youtu.be/JYlPpgZBDWQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/LYaYKLG?editors=0010) 1. - [ ] 02-03 단계, 새 할일 등록 함수 매개변수 구조 변경 - [영상 - 23 12 24, scode 13275, 리액트 수업, 70강, 새 할일 등록 함수 매개변수 구조 변경](https://youtu.be/JyVHML3Ci2o) - [CODEPEN](https://codepen.io/sangwon7242/pen/Rwdwzgp?editors=0010) 1. - [ ] 02-04 단계, 할일 목록 UI 구현, 아이템 삭제 - [영상 - 23 12 24, scode 13275, 리액트 수업, 71강, 할일 목록 UI 구현, 아이템 삭제](https://youtu.be/YBu7Fi556Rk) - [CODEPEN](https://codepen.io/sangwon7242/pen/rNRNEwg?editors=0010) 1. - [ ] 02-05 단계, 아이템 수정 UI - [영상 - 23 12 24, scode 13275, 리액트 수업, 72강, 아이템 수정 UI](https://youtu.be/QHevWN9zU0M) - [CODEPEN](https://codepen.io/sangwon7242/pen/eYXYwea?editors=0010) 1. - [ ] 02-06 단계, 아이템 수정 UI의 입력창 값 다루기 - [영상 - 23 12 24, scode 13275, 리액트 수업, 73강, 아이템 수정 UI의 입력창 값 다루기](https://youtu.be/PARtd8AoWTY) - [CODEPEN](https://codepen.io/sangwon7242/pen/GReRbQv?editors=0010) 1. - [ ] 02-07 단계, 아이템 수정 완료 - [영상 - 23 12 24, scode 13275, 리액트 수업, 74강, 아이템 수정 완료](https://youtu.be/1VeeJdlTd_Y) - [CODEPEN](https://codepen.io/sangwon7242/pen/poYoXaq?editors=0010) 1. - [ ] 02-08단계, 관련된 state를 한 덩어리로 묶기 - [영상 - 23 12 30, scode 13275, 리액트 수업, 75강, 관련된 state를 한 덩어리로 묶기](https://youtu.be/BcpaREJPA4U) - [CODEPEN](https://codepen.io/sangwon7242/pen/abMOXej?editors=0010) ## 미션 3, immer ### 03-01, immer 소개 - [영상 - 23 12 30, scode 13275, 리액트 수업, 76강, immer 소개](https://youtu.be/gDCa_2VqplQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/QWobojv?editors=0010) ```js import immer, { produce } from "https://cdn.skypack.dev/immer"; ``` ### 03-02, immer 적용 - [영상 - 23 12 30, scode 13275, 리액트 수업, 77강, immer 적용](https://youtu.be/qx8Spo4_SGk) - [CODEPEN](https://codepen.io/sangwon7242/pen/vYPOPXY?editors=0010) ## 미션 4, useRef ### 미션 1 : useRef 기초 1. - [ ] 01-01 단계, useRef를 사용해서 dom 조작하기 - [영상 - 23 12 30, scode 13275, 리액트 수업, 78강, useRef를 사용해서 dom 조작하기](https://youtu.be/n8e3YkEZfuk) - [CODEPEN](https://codepen.io/sangwon7242/pen/YzgXgNz?editors=0010) 1. - [ ] 01-02 단계, 숫자기록입력상자에 useRef를 이용하여 dom 조작 - [영상 - 23 12 30, scode 13275, 리액트 수업, 79강, 숫자기록입력상자에 useRef를 이용하여 dom 조작](https://youtu.be/zMFWI1M4p2M) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/YzgXgNz?editors=0010) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/ZEPGPeo?editors=0011) 1. - [ ] 01-03 단계, useRef와 useState의 차이점 - [영상 - 23 12 30, scode 13275, 리액트 수업, 80강, useRef와 useState의 차이점](https://youtu.be/7gt17UPXWdQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/oNVXVeK?editors=0011) ### useRef의 두가지 용법 1st : DOM 조작 ```jsx const inputRef = useRef(null); return

``` ### useRef의 두가지 용법 2nd : 기억 ```jsx const noRef = useRef(10); return

액션

``` ### 불변성을 유지하면서 삭제 ```jsx const arr = [10, 20, 30]; const newArr = arr.filter((el, index) => index != 0); // [20, 30] ``` ### 불변성을 유지하면서 수정 ```jsx const arr = [10, 20, 30]; const newArr = arr.map((el, index) => index == 0 ? 100 : el); // [100, 20, 30] // index 0 자리에있던 10이 100으로 수정됨 ``` ## 05-03 시작 ## 05-03 : useEffect, useMemo, React,momo, useCallback ### 미션 1 : useEffect 기초 1. - [ ] 01-01 단계, useEffect를 사용하여 함수의 특정부분 재실행 방지 - [영상 - 23 12 30, scode 13275, 리액트 수업, 81강, useEffect를 사용하여 함수의 특정부분 재실행 방지](https://youtu.be/t3odiM4GOS0) - [CODEPEN](https://codepen.io/sangwon7242/pen/mdoJoXP?editors=0011) 1. - [ ] 01-02 단계, 의존성 배열 인자를 제거하면, 매번 실행은 되지만 타이밍이 늦어진다. - [영상 - 23 12 30, scode 13275, 리액트 수업, 82강, 의존성 배열 인자를 제거하면, 매번 실행은 되지만 타이밍이 늦어진다.](https://youtu.be/V02K_8ft6ls) - [CODEPEN](https://codepen.io/sangwon7242/pen/JjzdzpQ?editors=0011) 1. - [ ] 01-03 단계, 타이팅이 늦어져야 하는 경우, useRef, useEffect 조합 - [영상 - 23 12 30, scode 13275, 리액트 수업, 83강, 타이팅이 늦어져야 하는 경우, useRef, useEffect 조합](https://youtu.be/eUzchPztXso) - [CODEPEN](https://codepen.io/sangwon7242/pen/qBvdvoe?editors=0010) 1. - [ ] 01-04 단계, 자식이 리랜더링 되는것은 부모 관계없고, 부모가 리랜더링되면 자식도 리랜더링 됨 - [영상 - 23 12 30, scode 13275, 리액트 수업, 84강, 자식이 리랜더링 되는것은 부모 관계없고, 부모가 리랜더링되면 자식도 리랜더링 됨](https://youtu.be/gZhgd57GO2c) - [CODEPEN](https://codepen.io/sangwon7242/pen/MWxwxXB?editors=0011) ``` - 자식 안에서 리랜더링 되면 그게 부모 컴포넌트에게 영향을 끼치지 않는다. - 하지만 부모가 리랜더링 되면 거기에 딸린 자식 컴포넌트는 리랜더린 된다. ``` 1. - [ ] 01-05 단계, useEffect의 의존성배열을 이용해서, 실행민감도 조절 - [영상 - 23 12 30, scode 13275, 리액트 수업, 85강, useEffect의 의존성배열을 이용해서, 실행민감도 조절](https://youtu.be/Z6jERfak2FA) - [CODEPEN](https://codepen.io/sangwon7242/pen/LYaVaJY?editors=0011) ## useEffect, 리랜더링시마다 실행되는 리액트에서, 딱 1번만 실행되어야 하는 경우에 사용 ```jsx const a = 10; // 리랜더링 마다 실행 useEffect(() => { // 딱 한번 실행 }); ``` ### 미션 2 : useMemo 사용하여 쓸데없는 연산 줄이기 1. - [ ] 02-01 단계, useMemo를 하기 위한 준비, 실행이 완료되는데 엄청 오래 걸리는 함수 구현 - [영상 - 23 12 31, scode 13275, 리액트 수업, 86강, useMemo를 하기 위한 준비, 실행이 완료되는데 엄청 오래 걸리는 함수 구현](https://youtu.be/IsN-wvciHG4) - [CODEPEN](https://codepen.io/sangwon7242/pen/qBvOEGj?editors=0011) - [제타위키 - https://zetawiki.com/wiki/자바스크립트_수행시간_측정](https://to2.kr/eCb) 1. - [ ] 02-02 단계, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현 - [영상 - 23 12 31, scode 13275, 리액트 수업, 87강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현](https://youtu.be/1kZCbhhNbO8) - [CODEPEN](https://codepen.io/sangwon7242/pen/oNVjgRG?editors=0010) 1. - [ ] 02-03 단계, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 state 적용 - [영상 - 23 12 31, scode 13275, 리액트 수업, 88강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 state 적용](https://youtu.be/LQCkxAu8QqU) - [CODEPEN](https://codepen.io/sangwon7242/pen/WNmQveq?editors=0010) 1. - [ ] 02-04 단계, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useEffect 적용 - [영상 - 23 12 31, scode 13275, 리액트 수업, 89강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useEffect 적용](https://youtu.be/N4SHaHhHsSQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/gOEapbB?editors=0011) 1. - [ ] 02-05 단계, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useMemo 적용 - [영상 - 23 12 31, scode 13275, 리액트 수업, 90강, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useMemo 적용](https://youtu.be/XmmlguONDio) - [CODEPEN](https://codepen.io/sangwon7242/pen/xxBwGGr?editors=0011) ### 미션 3 : React.memo 사용하여 쓸데없는 연산 줄이기 1. - [ ] 03-01 단계, 실행이 오래걸리는 PrimeNosCount 컴포넌트 구현 - [영상 - 23 12 31, scode 13275, 리액트 수업, 91강, 실행이 오래걸리는 PrimeNosCount 컴포넌트 구현](https://youtu.be/SjFuLPANmF0) - [CODEPEN](https://codepen.io/sangwon7242/pen/BaboNob?editors=0010) 1. - [ ] 03-02 단계, useEffect로 속도 최적화 - [영상 - 23 12 31, scode 13275, 리액트 수업, 92강, useEffect로 속도 최적화](https://youtu.be/373sCOzLw3M) - [CODEPEN](https://codepen.io/sangwon7242/pen/LYapVGO?editors=0010) 1. - [ ] 03-03 단계, useMemo로 속도 최적화 - [영상 - 23 12 31, scode 13275, 리액트 수업, 93강, useMemo로 속도 최적화](https://youtu.be/0MHQPta401M) - [CODEPEN](https://codepen.io/sangwon7242/pen/LYapVNe?editors=0010) 1. - [ ] 03-04 단계, React.memo로 속도 최적화 - [영상 - 23 12 31, scode 13275, 리액트 수업, 94강, React.memo로 속도 최적화](https://youtu.be/wiNZFzyx4g8) - [CODEPEN](https://codepen.io/sangwon7242/pen/bGZVdpP?editors=0111) ### 미션 4 : useCallback 으로 어이없는 리랜더링 막기 1. - [ ] 04-01 단계, useCallback을 사용하기 위한 환경을 만들기 - [영상 - 23 12 31, scode 13275, 리액트 수업, 95강, useCallback을 사용하기 위한 환경을 만들기](https://youtu.be/n_S0ZsqQh0o) - [CODEPEN](https://codepen.io/sangwon7242/pen/xxBwGgX?editors=0011) 1. - [ ] 04-02 단계, useCallback을 사용하여 어이없는 리랜더링 막기 - [영상 - 23 12 31, scode 13275, 리액트 수업, 96강, useCallback을 사용하여 어이없는 리랜더링 막기](https://youtu.be/fgK7BicNPBw) - [CODEPEN](https://codepen.io/sangwon7242/pen/mdoeJWQ?editors=0011) ## 05-04 시작 ## 05-04 : 멀티체크박스 관리 기능 구현 ### 미션 1 : 음식주문시 옵션기능 1. - [ ] 01-01 단계, 음식옵션 리스트 - [영상 - 23 12 31, scode 13275, 리액트 수업, 97강, 음식옵션 리스트](https://youtu.be/Pk0fDoSpgwQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/NWJGqaW?editors=0010) 1. - [ ] 01-02 단계, 음식옵션 리스트아이템 체크기능 - [영상 - 24 01 06, scode 13275, 리액트 수업, 98강, 음식옵션 리스트아이템 체크기능](https://youtu.be/4-VN064fj-g) - [CODEPEN](https://codepen.io/sangwon7242/pen/MWxyyYd?editors=0010) 1. - [ ] 01-03 단계, 리스트아이템을 전부 체크하면, 전체 토글 체크박스도 체크 되도록 - [영상 - 24 01 06, scode 13275, 리액트 수업, 99강, 리스트아이템을 전부 체크하면, 전체 토글 체크박스도 체크 되도록](https://youtu.be/iFmMckK7wrM) - [CODEPEN](https://codepen.io/sangwon7242/pen/NWJNNqL?editors=0010) 1. - [ ] 01-04 단계, 전체 토글 체크박스를 클릭시 그 상태가 전체에 반영 - [영상 - 24 01 06, scode 13275, 리액트 수업, 100강, 전체 토글 체크박스를 클릭시 그 상태가 전체에 반영](https://youtu.be/mQcUkAdDB-A) - [CODEPEN](https://codepen.io/sangwon7242/pen/dyrMMYN?editors=0010) 1. - [ ] 01-05 단계, new Array().fill 기능으로 초기상태를 쉽게 만들기 - [영상 - 24 01 06, scode 13275, 리액트 수업, 101강, new Array().fill 기능으로 초기상태를 쉽게 만들기](https://youtu.be/oajEtz7cMUs) - [CODEPEN](https://codepen.io/sangwon7242/pen/OJqNNMZ?editors=0010) 1. - [ ] 01-06 단계, 옵션의 선택개수표시 - [영상 - 24 01 06, scode 13275, 리액트 수업, 102강, 옵션의 선택개수표시](https://youtu.be/9Rx5RW57kGY) - [CODEPEN](https://codepen.io/sangwon7242/pen/dyrMMMv?editors=0010) 1. - [ ] 01-07 단계, useMemo 사용하여 옵션과 상관없는 변화에 의한 쓸데없는 옵션관련계산 없애기 - [영상 - 24 01 06, scode 13275, 리액트 수업, 103강, useMemo 사용하여 옵션과 상관없는 변화에 의한 쓸데없는 옵션관련계산 없애기](https://youtu.be/lewM63F2DcM) - [CODEPEN](https://codepen.io/sangwon7242/pen/eYXZZzO?editors=0011) 1. - [ ] 01-08 단계, OrderMainFood, OrderOptions 컴포넌트로 나눔 - [영상 - 24 01 06, scode 13275, 리액트 수업, 104강, OrderMainFood, OrderOptions 컴포넌트로 나눔](https://youtu.be/DDSy9jBW8ec) - [CODEPEN](https://codepen.io/sangwon7242/pen/BabKKWO?editors=0011) 1. - [ ] 01-09 단계, React.memo, useCallback 사용하여 각각의 컴포넌트 자체가 필요할 경우에만 리랜더링 되도록 - [영상 - 24 01 06, scode 13275, 리액트 수업, 105강, React.memo, useCallback 사용하여 각각의 컴포넌트 자체가 필요할 경우에만 리랜더링 되도록](https://youtu.be/t6Zmrpj2PwU) - [영상 - 24 01 06, scode 13275, 리액트 수업, 105강, React.memo, useCallback 사용하여 각각의 컴포넌트 자체가 필요할 경우에만 리랜더링 되도록(수령 증가, 감소시 함수 리랜더링 문제 해결)]() - [CODEPEN](https://codepen.io/sangwon7242/pen/YzgqqYY?editors=0011) ## 05-05 시작 ## 05-05 : 정리 ### 미션 1 : 음식주문시 옵션기능 1. - [ ] 01-01 단계, 체크박스, 셀렉트박스, 라디오버튼 - [영상 - 23 01 06, scode 13275, 리액트 수업, 106강, 체크박스, 셀렉트박스, 라디오버튼](https://youtu.be/nWoPLP0W6RI) - [CODEPEN](https://codepen.io/sangwon7242/pen/PoLNNdx?editors=1111) 1. - [ ] 01-02 단계, 체크박스 다루기 - [영상 - 23 01 06, scode 13275, 리액트 수업, 107강, 체크박스 다루기](https://youtu.be/ewtJD-8riDU) - [CODEPEN](https://codepen.io/sangwon7242/pen/OJqNNor?editors=0010) 1. - [ ] 01-03 단계, 라디오버튼 다루기 - [영상 - 23 01 06, scode 13275, 리액트 수업, 108강, 라디오버튼 다루기](https://youtu.be/Ma0b0jPQAaA) - [CODEPEN](https://codepen.io/sangwon7242/pen/PoLNNVX?editors=0010) 1. - [ ] 01-04 단계, 반복문으로 라디오버튼 출력 후 관리 - [영상 - 23 01 06, scode 13275, 리액트 수업, 109강, 반복문으로 라디오버튼 출력 후 관리](https://youtu.be/vro005LOs7s) - [CODEPEN](https://codepen.io/sangwon7242/pen/rNReebW?editors=0010) 1. - [ ] 01-05 단계, 셀렉트박스 다루기 - [영상 - 23 01 07, scode 13275, 리액트 수업, 110강, 셀렉트박스 다루기](https://youtu.be/05DIqdbXZ50) - [CODEPEN](https://codepen.io/sangwon7242/pen/YzgqrOe?editors=0110) 1. - [ ] 01-06 단계, 음식주문폼에 체크박스, 라디오버튼 도입, 상황에 따른 상태생성 위치 설명 - [영상 - 23 01 07, scode 13275, 리액트 수업, 111강, 음식주문폼에 체크박스, 라디오버튼 도입, 상황에 따른 상태생성 위치 설명](https://youtu.be/czDSDvkiIes) - [CODEPEN](https://codepen.io/sangwon7242/pen/XWGdeyK?editors=0010) # 챕터 6 시작 ## 06-01, 리액트 개발환경 세팅 1. - [ ] 01-01 단계, GIT 설치하고 VS CODE 다운로드 및 기본세팅 - [영상 - 23 01 07, scode 13275, 리액트 수업, 112강, GIT 설치하고 VS CODE 다운로드 및 기본세팅](https://youtu.be/i7eFzG5kWVg) - [GIT](https://git-scm.com/) - [VS CODE](https://code.visualstudio.com/) - [d2coding 폰트](https://github.com/naver/d2codingfont/releases) 1. - [ ] 01-02 단계, nodejs 개념과 nvm 설치 - [영상 - 23 01 07, scode 13275, 리액트 수업, 113강, nodejs 개념과 nvm 설치](https://youtu.be/eCCWisD5FAE) - [nvm 다운로드](https://github.com/coreybutler/nvm-windows/releases) 1. - [ ] 01-03 단계, nvm으로 최신버전의 nodejs 설치 - [영상 - 23 01 07, scode 13275, 리액트 수업, 114강, nvm으로 최신버전의 nodejs 설치](https://youtu.be/WPChPEG_mIM) ``` nvm install 20.10.0 # 버전 변경 nvm ls --> 여러 버전 확인 nvm use 18.15.0 --> nodejs 버전을 18.15.0로 변경하겠다. ``` 1. - [ ] 01-04 단계, nextjs 개요 - [영상 - 23 01 07, scode 13275, 리액트 수업, 115강, nextjs 개요](https://youtu.be/36irRhkPUTA) - [NextJS](https://nextjs.org/) 1. - [ ] 01-05 단계, nextjs 프로젝트 생성 - [영상 - 23 01 07, scode 13275, 리액트 수업, 116강, nextjs 프로젝트 생성](https://youtu.be/udfbyPh_Uc0) ``` npx create-next-app@latest ``` ![nextjs 설치](https://ifh.cc/g/d3CD6W.jpg) ![nextjs 설치2](https://ifh.cc/g/4pd2KV.jpg) 1. - [ ] 01-06 단계, git 리포지터리 세팅 - [영상 - 23 01 07, scode 13275, 리액트 수업, 117강, git 리포지터리 세팅](https://youtu.be/Ui6fEWN8cwE) - [강사 GIT](https://github.com/SangWon7242/todoapp_2023_01_17) - [GIT 첫 커밋](https://github.com/SangWon7242/todoapp_2023_01_17/commit/42f265ae12120eb081208ea0121c0285bcba1648) 1. - [ ] 01-07 단계, 프로젝트에 MUI 추가 - [영상 - 23 01 07, scode 13275, 리액트 수업, 118강, 프로젝트에 MUI 추가](https://youtu.be/685K0up4KH4) - [강사 GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/ce02d12341230de11c65b3d61c2385eabbe85287) ``` npm install @mui/material @emotion/react @emotion/styled ``` ``` 1. vscode를 열어서 F1을 누른다. 2. json이라고 검색을 하면Open User Setting(JSON)이 있다. 들어가서 다음과 같이 입력한다! "emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.syntaxProfiles": { "javascript": "jsx" }, 3. div 태그를 쓸 수 있다!!! ``` 1. - [ ] 01-08 단계, GITHUB에 올린 프로젝트 GIT Clone 해서 작업환경 이어가기! - [영상 - 23 01 13, scode 13275, 리액트 수업, 119강, GITHUB에 올린 프로젝트 GIT Clone 해서 작업환경 이어가기!](https://youtu.be/VhEsftTmQEo) ``` ex) git clone https://github.com/SangWon7242/todoapp_2023_01_17 todoapp2 git clone "리포지터리 주소" "폴더명" clone 후 프로젝트 열고 터미널 창에 'npm install' 입력 ``` 1. - [ ] 01-09 단계, NEXT.JS 폴더 구조 설명, 자동 정렬 플러그인 prettier 설치 및 적용 - [영상 - 23 01 13, scode 13275, 리액트 수업, 120강, NEXT.JS 폴더 구조 설명, 자동 정렬 플러그인 prettier 설치 및 적용](https://youtu.be/ss_i8vTGGRg) - [강사 GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/77a087a28ce9be6b7158a101baeff20833d574fb) ``` - 프로젝트에 프리티어(자동정렬 플러그인) 도구 설치 npm add --dev --exact prettier echo {}> .prettierrc.json .prettierrc.json 파일에 추가 { "printWidth": 100, "tabWidth": 2, "singleQuote": true, "trailingComma": "all", "jsxBracketSameLine": true } ``` 1. - [ ] 01-10 단계, 테일윈드 mui 충돌시 해결방안 - [영상 - 23 01 13, scode 13275, 리액트 수업, 121강, 테일윈드 mui 충돌시 해결방안](https://youtu.be/bNX_JEeArwk) - [강사 GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/74900c4072197f79a454601c4bdfc9a7229e78f8) # 챕터 7 시작 ## 미션 1 : MUI 소개 및 사용법 설명 1. - [ ] 01-01 단계, 컴포넌트 설명서 보는 방법 - [영상 - 23 01 13, scode 13275, 리액트 수업, 122강, 컴포넌트 설명서 보는 방법](https://youtu.be/vn2Lrig704w) - [MUI - all components](https://mui.com/material-ui/all-components/) 1. - [ ] 01-02 단계, 컴포넌트 API 확인 방법 - [영상 - 23 01 13, scode 13275, 리액트 수업, 123강, 컴포넌트 API 확인 방법](https://youtu.be/d3vSlcNCVSk) 1. - [ ] 01-03 단계, MUI 테마 커스터마이징 하는 방법 - [영상 - 23 01 13, scode 13275, 리액트 수업, 123강, MUI 테마 커스터마이징 하는 방법](https://youtu.be/EoVLmVm9nDM) - [https://bareynol.github.io/mui-theme-creator/](https://bareynol.github.io/mui-theme-creator/) ## 미션 2 : MUI 컴포넌트 1. - [ ] 02-01 단계, MUI 컴포넌트, Button - [영상 - 23 01 13, scode 13275, 리액트 수업, 124강, MUI 컴포넌트, Button](https://youtu.be/2i88fMkkj9M) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/7fe890e6ed29ea1d926ecc4d3931c1834d840b13) - [https://react-icons.github.io/react-icons/](https://react-icons.github.io/react-icons/) ``` 리액트 아이콘 사용 npm install react-icons --save ``` ```jsx import { MdDelete } from 'react-icons/md'; export default function App() { return ( <> ); } ``` 1. - [ ] 02-02 단계, MUI 컴포넌트, AppBar - [영상 - 24 01 13, scode 13275, 리액트 수업, 125강, MUI 컴포넌트, AppBar](https://youtu.be/6-uNnx_IVAQ) - [CODEPEN](https://github.com/SangWon7242/todoapp_2023_01_17/commit/a784e1f1c06d8b3449268eefd53f963872fdabd8) 1. - [ ] 02-03 단계, MUI 컴포넌트, AppBar, fixed - [영상 - 24 01 13, scode 13275, 리액트 수업, 126강, MUI 컴포넌트, AppBar, fixed](https://youtu.be/OVaEVooGi3k) - [CODEPEN](https://github.com/SangWon7242/todoapp_2023_01_17/commit/967502a4c7c5b1b17bf399c46286fbd5a4708979) 1. - [ ] 02-04 단계, MUI 컴포넌트, Snackbar에 Alert 넣기 - [영상 - 24 01 14, scode 13275, 리액트 수업, 127강, MUI 컴포넌트, Snackbar에 Alert 넣기](https://youtu.be/oywg2korTWQ) - [CODEPEN](https://github.com/SangWon7242/todoapp_2023_01_17/commit/f6609722ba572cd62b0ec4aa9b65036fa0acc61f) 1. - [ ] 02-05 단계, MUI 컴포넌트, Backdrop - [영상 - 24 01 14, scode 13275, 리액트 수업, 128강, MUI 컴포넌트, Backdrop](https://youtu.be/luv3RWkUPS8) - [CODEPEN](https://github.com/SangWon7242/todoapp_2023_01_17/commit/dcd34a132d2f5be073bc75e87a1d25689c2399f8) 1. - [ ] 02-06 단계, MUI 컴포넌트, Drawer - [영상 - 24 01 14, scode 13275, 리액트 수업, 129강, MUI 컴포넌트, Drawer](https://youtu.be/yAKYb2285qY) - [CODEPEN](https://github.com/SangWon7242/todoapp_2023_01_17/commit/cf627f05c3e6eb54a66655d50405718ff9ccff47) 1. - [ ] 02-07 단계, MUI 컴포넌트, Drawer - [영상 - 24 01 14, scode 13275, 리액트 수업, 130강, MUI 컴포넌트, TabMenu](https://youtu.be/GjQgRO1RST8) - [CODEPEN](https://github.com/SangWon7242/todoapp_2023_01_17/commit/764ea52da42b47d2c4d0d1527e12939380b6c448) ## 미션 3 : 할일리스트에 MUI 적용 1. - [ ] 03-01 단계, 할일추가 폼 - [영상 - 24 01 14, scode 13275, 리액트 수업, 131강, 할일리스트에 MUI 적용, 할일 추가 폼](https://youtu.be/Nr562w2ZnH0) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/386167adaa4c4a0bc2486e5971790b6edc35ec95) 1. - [ ] 03-02 단계, dateToStr를 모듈화 하여 App에 적용, 테마를 App에서 분리한 뒤 공통 테마 적용 - [영상 - 24 01 14, scode 13275, 리액트 수업, 132강, 할일리스트에 MUI 적용, dateToStr를 모듈화 하여 App에 적용, 테마를 App에서 분리한 뒤 공통 테마 적용](https://youtu.be/fdbFnSTSYnY) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/06d42dd6a4801e696a5ce13f23557d9734cb4e0c) 1. - [ ] 03-03 단계, 할일추가 폼 꾸미기 - [영상 - 24 01 14, scode 13275, 리액트 수업, 133강, 할일리스트에 MUI 적용, 할일추가 폼 꾸미기](https://youtu.be/TXwhObNg2o4) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/83dd05dcad966c6022a4d82abaf5cda7c6e54777) 1. - [ ] 03-04 단계, 할일리스트 - [영상 - 24 01 14, scode 13275, 리액트 수업, 134강, 할일리스트에 MUI 적용, 할일 리스트](https://youtu.be/6mWqpuOKnU0) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/b8d31a72ec78aa238c9d3e762bf9cfcc0869d127) 1. - [ ] 03-05 단계, 할일리스트 꾸미기, Chip 적용 - [영상 - 24 01 14, scode 13275, 리액트 수업, 135강, 할일리스트에 MUI 적용, Chip 적용](https://youtu.be/EpXMAshrOvo) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/2d3cfa86f1620302bd423d8e9ad96b585a5da048) 1. - [ ] 03-06 단계, 할일리스트 꾸미기, 본문 꾸미기 - [영상 - 24 01 14, scode 13275, 리액트 수업, 136강, 할일리스트에 MUI 적용, 본문 꾸미기](https://youtu.be/eL56GazZtsk) - [영상 - 24 01 14, scode 13275, 리액트 수업, 136강, 할일리스트에 MUI 적용, 본문 꾸미기, 작동 다시 확인](https://youtu.be/kKqF5f7dvmo) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/90861cf87d13f31a1213501f13ac9b44f4053d86) 1. - [ ] 03-07 단계, 테스트 데이터 생성, 할일 3개 - [영상 - 24 01 20, scode 13275, 리액트 수업, 137강, 할일리스트에 MUI 적용, 테스트 데이터 생성, 할일 3개](https://youtu.be/jNRCDF25w8s) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/8bd5ee45e411139c3381304f5fba8bcf056d9094) 1. - [ ] 03-08 단계, 멀티라인 텍스트 필드 - [영상 - 24 01 20, scode 13275, 리액트 수업, 138강, 할일리스트에 MUI 적용, 멀티라인 텍스트 필드](https://youtu.be/uQ0ivPvTcYg) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/f261caf25a2aa9a9ce83e8749f1bc96c6bc16001) ## 미션 4 : MUI와 테일윈드 같이 사용 1. - [ ] 04-01 단계, 테일윈드 느낌표 기능으로 mui에서 정해놓은 스타일 수정, Chip 상단여백 조절 - [영상 - 24 01 20, scode 13275, 리액트 수업, 139강, MUI와 테일윈드, 테일윈드로 mui에서 정해놓은 스타일 수정, Chip 상단여백 조절](https://youtu.be/-BV2sp5DC6o) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/34e73a582be37e45bb739ab2e172e91df3fc3f4d) 1. - [ ] 04-02 단계, 할일리스트 최신순으로 정렬 - [영상 - 24 01 20, scode 13275, 리액트 수업, 140강, MUI와 테일윈드, 할일리스트 최신순으로 정렬](https://youtu.be/RBwD3oJW9_w) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/5ccfd03466816ea7945939d9d1ff5deeab033069) 1. - [ ] 04-03 단계, MUI로 글자색을 primary 색상으로 변경 - [영상 - 24 01 20, scode 13275, 리액트 수업, 141강, MUI와 테일윈드, MUI로 글자색을 primary 색상으로 변경](https://youtu.be/8WsT_JvZpcg) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/d0ddfb3d4a8976ce94de6a28939eb85134c7a4d2) 1. - [ ] 04-04 단계, CSS 변수 - [영상 - 24 01 20, scode 13275, 리액트 수업, 142강, MUI와 테일윈드, CSS 변수](https://youtu.be/9Mqic9n4GW8) - [CODEPEN](https://codepen.io/sangwon7242/pen/YzgVozo?editors=1100) 1. - [ ] 04-05 단계, 자바스크립트에서 정의된 색상을 CSS에서 사용하는 방법 - [영상 - 24 01 20, scode 13275, 리액트 수업, 143강, MUI와 테일윈드, 자바스크립트에서 정의된 색상을 CSS에서 사용하는 방법](https://youtu.be/0TI9F0yRm-0) - [CODEPEN](https://codepen.io/sangwon7242/pen/poYPXJr?editors=0111) 1. - [ ] 04-06 단계, 테일윈드 JIT을 이용한 css 변수접근 - [영상 - 24 01 20, scode 13275, 리액트 수업, 144강, MUI와 테일윈드, 테일윈드 JIT을 이용한 css 변수접근](https://youtu.be/yAl3XdswgfI) - [CODEPEN](https://codepen.io/sangwon7242/pen/YzgVozo?editors=1100) 1. - [ ] 04-07 단계, 테일윈드의 다양한 조건적 스타일링 - [영상 - 24 01 20, scode 13275, 리액트 수업, 145강, MUI와 테일윈드, 테일윈드의 다양한 조건적 스타일링](https://youtu.be/G2cB87vF_KE) - [CODEPEN](https://codepen.io/sangwon7242/pen/zYbwVKJ?editors=1100) 1. - [ ] 04-08 단계, mui 테마 색상들을 CSS에서 사용할 수 있도록, CSS 변수화 - [영상 - 24 01 20, scode 13275, 리액트 수업, 146강, mui 테마 색상들을 CSS에서 사용할 수 있도록, CSS 변수화](https://youtu.be/U3HK9hCh5j0) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/ef62a7823abf0676e50648705434474bb2fd5374) ## 미션 5 : 할일리스트 좌측에 체크박스, 우측 옵션버튼 - [ ] 05-01 단계. 레이아웃 - [영상 - 24 01 20, scode 13275, 리액트 수업, 147강, 레이아웃](https://youtu.be/UmzyvRjTozE) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/09b052f43c65562c0a81d98ecd8a8b284b9353df) - [ ] 05-02 단계. 버튼내용물을 수직상단 정렬하고, border-radius 세부조정 - [영상 - 24 01 20, scode 13275, 리액트 수업, 148강, 버튼내용물을 수직상단 정렬하고, border-radius 세부조정](https://youtu.be/DKvfXOUn-_g) - [CODEPEN - border-radius 실험](https://codepen.io/pen) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/dc045a9afc7db3d018f0be1547ce5a1a4581478c) - [ ] 05-03 단계. 체크박스 크기, 체크색상, 언체크색상 - [영상 - 24 01 20, scode 13275, 리액트 수업, 149강, 체크박스 크기, 체크색상, 언체크색상](https://youtu.be/YI6R9qQlWAg) - [classNames 공식문서](https://github.com/JedWatson/classnames) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/647502a9c4097d93036a51e06ca58e324c6788d1) ``` npm install classnames ``` - [ ] 05-04 단계. 우측옵션버튼 꾸미기 - [영상 - 24 01 20, scode 13275, 리액트 수업, 150강, 우측옵션버튼 꾸미기](https://youtu.be/Vyo8kBXhVnI) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/c9320b78ab22f68ece84d7a990bf379ac4e7d0bc) - [ ] 05-05 단계, 할일 본문을 감싸는 박스에 높이 부여 - [영상 - 24 01 21, scode 13275, 리액트 수업, 151강, 할일 본문을 감싸는 박스에 높이 부여 및 본문에 padding을 이용해 간격 부여](https://youtu.be/s4xIk_uvPlI) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/f311b791e75310b49939532d3ee0b300e9017f44) - [ ] 05-06 단계, 좌측버튼 우측에 divider 넣기 - [영상 - 24 01 21, scode 13275, 리액트 수업, 152강, 좌측버튼 우측에 divider 넣기](https://youtu.be/5YRmF5d0ygU) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/08c97029c3a89cd78f7feaea23e5d435c36138eb) - [ ] 05-07 단계, 모바일이 아닌 환경에서도 모바일과 비슷한 느낌의 스크롤이 나오도록 - [영상 - 24 01 21, scode 13275, 리액트 수업, 153강, 모바일이 아닌 환경에서도 모바일과 비슷한 느낌의 스크롤이 나오도록](https://youtu.be/0DufdQp5fo0) - [CODEPEN - overlay 스크롤바](https://codepen.io/sangwon7242/pen/xxBrRmj?editors=0100) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/bc3fde4c6cbebbb446e0da76e6fc4fb65a5c641b) ![image](https://ifh.cc/g/NxqWth.jpg) ## 미션 6 : 옵션드로어 구현 - [ ] 06-01 단계, 옵션 드로어 - [영상 - 24 01 21, scode 13275, 리액트 수업, 154강, 옵션 드로어](https://youtu.be/I3GcGIxEczw) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/ca03d131f09c1fe03c6c21103b87ab956657e0c1) - [ ] 06-02 단계, 각각의 컴포넌트로 분리 - [영상 - 24 01 21, scode 13275, 리액트 수업, 155강, 각각의 컴포넌트로 분리](https://youtu.be/o8NHp_6AHOI) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/c6a05e81d1481d7a5ca94c48182d2ca010ccc48e) - [ ] 06-03 단계, 옵션버튼 누르면 해당 드로어 나오도록 - [영상 - 24 01 21, scode 13275, 리액트 수업, 156강, 옵션버튼 누르면 해당 드로어 나오도록](https://youtu.be/V4vhm3Fu618) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/40367e0f8e42bf7bbd663433fe7f8de99a5f60f5) - [ ] 06-04 단계, 드로어관련된 가독성 개선 - [영상 - 24 01 21, scode 13275, 리액트 수업, 157강, 드로어관련된 가독성 개선](https://youtu.be/K8jXLl-1LgA) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/d7b6f9a3e7d39adf0978f93a1f0d932f88728b17) - [ ] 06-05 단계, 옵션드로어 커스텀 훅 - [영상 - 24 01 21, scode 13275, 리액트 수업, 158강, 옵션드로어 커스텀 훅](https://youtu.be/P8WkYJK1QOI) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/e4b9564f848460283e434483e938a63e3fe8ea75) - [ ] 06-06 단계, TodoOptionDrawer 컴포넌트 - [영상 - 24 01 21, scode 13275, 리액트 수업, 159강, TodoOptionDrawer 컴포넌트](https://youtu.be/MypA0Tpj_po) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/34cb48605d56ceb23cd67c32def6ae717595b21f) - [ ] 06-07 단계, SwipableDrawer로 교체 - [영상 - 24 01 21, scode 13275, 리액트 수업, 160강, SwipeableDrawer도입후 드로어의 리스트로 내용 넣기](https://youtu.be/EzDzzfS3jKk) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/061e136abb4628ee1ea840407e15d87f31573596) - [ ] 06-08 단계, items-baseline, line-height 관련 실험 - [영상 - 24 01 21, scode 13275, 리액트 수업, 161강, items-baseline, line-height 관련 실험](https://youtu.be/RoHjVqk9GMA) - [CODEPEN](https://codepen.io/sangwon7242/pen/GReErEp) - [ ] 06-09 단계, 수정, 삭제버튼에 아이콘 넣기 - [영상 - 24 01 21, scode 13275, 리액트 수업, 162강, 수정, 삭제버튼에 아이콘 넣기]() - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/061e136abb4628ee1ea840407e15d87f31573596) ## 미션 7 : 수정, 삭제기능 - [ ] 07-01 단계, 수정을 위한 모달창 구현 - [영상 - 24 01 27, scode 13275, 리액트 수업, 163강, 수정을 위한 모달창 구현](https://youtu.be/ntrISwtuZ1o) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/b00cc9d12d7b7d6c48855bcc71aca0641fd958a2) - [ ] 07-02 단계, 수정버튼을 누르면 모달이 나오도록 - [영상 - 24 01 27, scode 13275, 리액트 수업, 164강, 수정버튼을 누르면 모달이 나오도록](https://youtu.be/rRjdOzNdYF8) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/22c75dcd24e9c7a698000753ba3970ade79f3aec) - [ ] 07-03 단계, 할일수정모달 커스텀 훅 도입 - [영상 - 24 01 27, scode 13275, 리액트 수업, 165강, 할일수정모달 커스텀 훅 도입](https://youtu.be/5ISrC6ywbxs) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/056d887b3c5dff5ed2fd70fd83408af0c6363fba) - [ ] 07-04 단계, 할일수정모달을 별도의 컴포넌트로 분리, 할일 수정 폼 구현 - [영상 - 24 01 27, scode 13275, 리액트 수업, 166강, 할일수정모달을 별도의 컴포넌트로 분리, 할일 수정 폼 구현](https://youtu.be/_sW_Uwiuubg) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/720936b40f9bd9306ed9b47aff7b256eb3fb751d) - [ ] 07-05 단계, 할일수정 폼 처리 - [영상 - 24 01 27, scode 13275, 리액트 수업, 167강, 할일수정 폼 처리](https://youtu.be/z0li2PdSPQE) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/3cd2f4adc9cff578a95443dd5a531e0e034f2c9c) - [ ] 07-06 단계, 할일 삭제 처리, 삭제 및 수정 후 드로어까지 종료 - [영상 - 24 01 27, scode 13275, 리액트 수업, 168강, 할일 삭제 처리, 삭제 및 수정 후 드로어까지 종료](https://youtu.be/jh0mNqVmnTw) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/841ea7bb0620ce0cc2cc986ea2f866fd45fe486e) ## 미션 8 : 스낵바 알림을 만들어주세요. - [ ] 08-01 단계, 스낵바 알림 - [영상 - 24 01 27, scode 13275, 리액트 수업, 169강, 스낵바 알림](https://youtu.be/Iph0pgzs5xA) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/53206ed1914f712a62a2532596b01fa7cbf6eeec) - [ ] 08-02 단계, NoticeSnackbar 컴포넌트 - [영상 - 24 01 27, scode 13275, 리액트 수업, 170강, NoticeSnackbar 컴포넌트](https://youtu.be/QP0WDvH0CQk) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/0c8aa216342d5687990374671cb199ec3134dafd) - [ ] 08-03 단계, useNoticeSnackbarState 커스텀 훅 - [영상 - 24 01 27, scode 13275, 리액트 수업, 171강, useNoticeSnackbarState 커스텀 훅](https://youtu.be/1SpbevbVTGg) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/ea2f012c64f649b0080cad98273312a891af43e5) - [ ] 08-04 단계, 할일의 추가/수정/삭제에 스낵바 알림 적용 - [영상 - 24 01 27, scode 13275, 리액트 수업, 172강, 할일의 추가/수정/삭제에 스낵바 알림 적용](https://youtu.be/oIPMZAhyOH0) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/150b32103986c7db730a0af0de8402b63935e7e9) # 챕터 8 시작 # 챕터 8, 리코일로 상태관리하기 ## 미션 1 : 리코일 기초 - [ ] 01-01 단계, 리코일 개요 - [영상 - 24 01 27, scode 13275, 리액트 수업, 173강, 리코일 개요](https://youtu.be/MqYUYkSGkiw) - [ ] 01-02 단계, 리코일이 필요한 상황 만들기, 페이지1, 페이지2 - [영상 - 24 01 27, scode 13275, 리액트 수업, 174강, 리코일이 필요한 상황 만들기, 페이지1, 페이지2](https://youtu.be/4y8GbGdkgiY) - [CODEPEN](https://codepen.io/sangwon7242/pen/RwdjJrK?editors=0010) - [ ] 01-03 단계, 리코일이 필요한 상황 만들기, 각 페이지에서 no값을 유지해야 하는 상황 - [영상 - 24 01 27, scode 13275, 리액트 수업, 175강, 리코일이 필요한 상황 만들기, 각 페이지에서 no값을 유지해야 하는 상황](https://youtu.be/dFc7r7cqpD4) - [CODEPEN](https://codepen.io/sangwon7242/pen/KKEyeMx?editors=0010) - [ ] 01-04 단계, useRecoilValue, useSetRecoilState - [영상 - 24 01 27, scode 13275, 리액트 수업, 176강, useRecoilValue, useSetRecoilState](https://youtu.be/T6zWUWFiRx4) - [CODEPEN](https://codepen.io/sangwon7242/pen/zYbPaKg?editors=0010) - [ ] 01-05 단계, 비슷한 atom을 여러개 만들어야 하는 상황 - [영상 - 24 01 28, scode 13275, 리액트 수업, 177강, 비슷한 atom을 여러개 만들어야 하는 상황](https://youtu.be/3vxZgG6sAmU) - [CODEPEN](https://codepen.io/sangwon7242/pen/YzgEmoy?editors=0010) - - [ ] 01-06 단계, 비슷한 atomFamily로 비슷한 atom을 동적으로 생성 - [영상 - 24 01 28, scode 13275, 리액트 수업, 179강, 비슷한 atomFamily로 비슷한 atom을 동적으로 생성](https://youtu.be/Y0Jua37ukNw) - [CODEPEN](https://codepen.io/sangwon7242/pen/VwRyZZv?editors=0010) - [ ] 01-07 단계, 커스텀 훅 도입, 훅에서 atom 사용 - [영상 - 24 01 28, scode 13275, 리액트 수업, 180강, 커스텀 훅 도입, 훅에서 atom 사용](https://youtu.be/JaxcZVvDyaE) - [CODEPEN](https://codepen.io/sangwon7242/pen/WNmdeNd?editors=0010) - [ ] 01-08 단계, 훅에서 atomFamily를 사용하여, 각 페이지마다 고유의 값 유지가 되도록 - [영상 - 24 01 28, scode 13275, 리액트 수업, 181강, 훅에서 atomFamily를 사용하여, 각 페이지마다 고유의 값 유지가 되도록](https://youtu.be/ZiyJsBvbpw8) - [CODEPEN](https://codepen.io/sangwon7242/pen/ZEPvzbm?editors=0010) ## 미션 2 : 할일리스트에 리코일 적용 #### 할일리스트의 구조 변천사 5단계 ##### 1단계, 최초의 구조 ![image](http://www.plantuml.com/plantuml/svg/SoWkIImgoStCIybDBE3IKWZApo_Xqj9IS2meq7YpeENDzBLlcXlVDi_Hv7981Qg1g0C0) ##### 2단계, NewTodoForm, TodoList로 나눠진 간단한 구조 ![image](http://www.plantuml.com/plantuml/svg/SoWkIImgoStCIybDBE3IKWZApo_Xqj9IS2meq7YpeENDzBLlcXlVDi_H10fgHIlx5oNcfQV6AlYbbeVaf-IxvHVbeag0H7qoYqku75A1HaAC1G00) ##### 3단계, TodoList내부에서 TodoListItem를 분리한 구조 ![image](http://www.plantuml.com/plantuml/svg/SoWkIImgoStCIybDBE3IKWZApo_Xqj9IS2meq7YpeENDzBLlcXlVDi_H10fgAVYbbeVaf-IxvHVbWlaWZazcCKY7bbQqidzHObvwQYnSsBCaDPTCAOTKe8iWhW80) ##### 4단계, BottomOptionDrawer와 EditTodoModal가 추가된 구조 ![image](http://www.plantuml.com/plantuml/svg/SoWkIImgoStCIybDBE3IKWZApo_Xqj9IS2meq7YpeENDzBLlcXlVDi_H10fgAVYbbeVaf-IxvHVbWlaWZazcCKY7bbQqidzHObvwQgo2Ktv9INwkVq59PdwUIr5YUMeHM06I2jUKp1AGPj_ybCGSgEwSpFICalIYrDIyMBZ1dYMfkOO4v8su75A1peTu0G00) ##### 5단계, NoticeSnackbar까지 추가된 구조 ![image](http://www.plantuml.com/plantuml/svg/SoWkIImgoStCIybDBE3IKWZApo_Xqj9IS2meq7YpeENDzBLlcXlVDi_H10fgHIlx5oNcfQV6AlZbbsGcfmRd9IPd9oKMGUHoCjCpIjABKbFpWFAfvI7vAVbk-KMv84a54CSdinXaDBfI1QVyafByNF-2aipyF9UYnF9Ki7aOobnJCaj0nlZcfoJcW5N0JVKiISqrn1Goud981VeBuZS0) #### 상태관리툴의 유무에 따른 todosState 관리방법 비교 ##### 상태관리툴이 없을 경우, 직접, 자식 엘리먼트에게 전달한다. ![image](http://www.plantuml.com/plantuml/svg/IqaiIKnAB4vLK2ejJWt9Jyal3Yv9B4dLq5JYuaeiBSdFAyrDIYtY2ihFBr7GjLDmB2XGi59uqxtaxRHEBWmj2hhHoaMfAR4mTJPf-Nab2idvEVb5ja1nknAuOXjza9ITmfl5UzxCQ-K2AOVhzKij1vdgbb-K2xTBXx1Pg8Q0JF39B2uXoGIu9WnZF4jIS-FZ3QbgcX4ffW40) ##### 상태관리툴이 도입된 경우, 필요한 엘리먼트에서 상태를 직접 주입받는다. ![image](http://www.plantuml.com/plantuml/svg/IqaiIKnAB4vLK2ejJWt9Jyal3Yv9B4dLq5JYAaWiAibCpYn8p2l1b5N8Bqf9BL8muE9AB2t9polDJKejuWhApozHqBLJS2meKB1IUDEzvEsqJYuG1oZcbreECi0jloWN8OTfh6wqSb5gIYowUfkqVA0halDpyejiWV9s9N1DDleWAJk5Dultl9dN2hCDfDKdixW4OHLS14dMioGrDpxUa2ZtOEeXsasuhJOYmseZ4gm60000) - [ ] 02-01 단계, 현재 컴포넌트 구조 - [영상 - 24 01 28, scode 13275, 리액트 수업, 182강, 현재 컴포넌트 구조](https://youtu.be/-_fSnp-WPCg) - [ ] 02-02 단계, todosState에 리코일 적용계획 - [영상 - 24 01 28, scode 13275, 리액트 수업, 183강, todosState에 리코일 적용계획, 커스텀 훅관련 문구 state를 status로 변경](https://youtu.be/rsQCh7dvz1E) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/cead82fe6946a5b55e646d2fd9ea811d893a2420) - [ ] 02-03 단계, 리코일 import, todosAtom 도입 - [ Recoil js 시작하기](https://recoiljs.org/ko/docs/introduction/getting-started/) - [영상 - 24 01 28, scode 13275, 리액트 수업, 184강, 리코일 import, todosAtom 도입](https://youtu.be/RG-Uu6SaalM) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/23bcdef0cf7c0b05e5ef19c6b146ffaed3f3f4fa) ``` npm install recoil ``` - [ ] 02-04 단계, lastTodoIdAtom 도입 - [영상 - 24 01 28, scode 13275, 리액트 수업, 185강, lastTodoIdAtom 도입](https://youtu.be/oDkrA79D0tY) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/f248da1f463f1a681ee30c610d76fb8485c11fe5) - [ ] 02-05 단계,NewTodoForm에서 직접 todosStatus를 주입받음 - [영상 - 24 01 28, scode 13275, 리액트 수업, 186강, NewTodoForm에서 직접 todosStatus를 주입받음](https://youtu.be/9xrXG2sOSs4) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/4690f8bd953d56d42804173a474f55679aeb67bd) - [ ] 02-06 단계, TodoList, TodoOptionDrawer에 직접 todoStatus를 주입 - [영상 - 24 01 28, scode 13275, 리액트 수업, 187강, TodoList, TodoOptionDrawer에 직접 todoStatus를 주입](https://youtu.be/1AoDWdCfJDs) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/28c8c7ca4914a339996198074cdcd06d95d8b59a) - [ ] 02-07 단계, EditTodoModal에서 직접 todosStatus를 주입받음 - [영상 - 24 01 28, scode 13275, 리액트 수업, 188강, EditTodoModal에서 직접 todosStatus를 주입받음](https://youtu.be/NM4XF4-YeBw) - [GIT](https://github.com/SangWon7242/todoapp_2023_01_17/commit/c296b2eb8ad78b4c5b126bcc63340e15debd1309) ## 미션 3 : 리코일 퍼시스트 ### 미션 03-01 : 리코일 퍼시스트 기초 - [ ] 03-01 단계, 리코일 퍼시스트가 필요한 상황 - [영상 - 24 01 28, scode 13275, 리액트 수업, 189강, 리코일 퍼시스트가 필요한 상황](https://youtu.be/bKfojDUD-Dk) - [ ] 03-02 단계, 로컬스토리지 - [영상 - 24 01 28, scode 13275, 리액트 수업, 190강, 로컬스토리지](https://youtu.be/8SFNWDL1xcE) - [CODEPEN](https://codepen.io/sangwon7242/pen/vYPpBWx?editors=0011) - [ ] 03-03 단계, 로컬스토리지에 객체 저장 - [영상 - 24 01 28, scode 13275, 리액트 수업, 191강, 로컬스토리지에 객체 저장](https://youtu.be/e1l3QELroJs) - [CODEPEN](https://codepen.io/sangwon7242/pen/dyrJbJp?editors=0011) - [ ] 03-04 단계, 리코일 퍼시스트 - [영상 - 24 01 28, scode 13275, 리액트 수업, 192강, 리코일 퍼시스트 테스트](https://youtu.be/CmOh3Yxko1U) - [CODEPEN](https://codepen.io/sangwon7242/pen/VwRyZdp?editors=0010) # 안드로이드 스튜디오 설치 및 캐퍼시터 연동 - [ ] 01-01 단계, 안드로이드 스튜디오 설치 - [영상 - 24 01 28, scode 13275, 리액트 프로젝트 안드로이드 연동, 1강, 안드로이드 스튜디오 설치](https://youtu.be/HWteWVnThIE) - [ ] 01-02 단계, 프로젝트에 캐퍼시터 추가, 안드로이드 프로젝트 생성 및 프로젝트 실행 - [영상 - 24 01 28, scode 13275, 리액트 프로젝트 안드로이드 연동, 2강, 프로젝트에 캐퍼시터 추가, 안드로이드 프로젝트 생성 및 프로젝트 실행](https://youtu.be/y8iIdicA7mI) ``` npm install @capacitor/core @capacitor/cli @capacitor/android npx cap init npx cap add android ``` - [ ] 01-03 단계, 안드로이드 가상머신에서 앱 실행 - [영상 - 24 01 28, scode 13275, 리액트 프로젝트 안드로이드 연동, 3강, 안드로이드 가상머신에서 앱 실행](https://youtu.be/uDIfWEqgEJM)

게시글 상세