$$config title: CLASS101 리액트 풀스택 강좌 keywords: - IT - CLASS101 리액트 풀스택 강좌 $$ # 페이지주소 : [slog.gg/p/4711](https://slog.gg/p/4711) # 관련링크 ## 유틸 - [소스코드 비교툴 - https://www.diffchecker.com/](https://www.diffchecker.com/) ## 강의 - [클래스101 리액트풀스택 사전지식페이지 - slog.gg/p/4680](https://slog.gg/p/4680) - [클래스101 리액트풀스택 페이지로 이동, https://to2.kr/dBO](https://to2.kr/dBO) - [클래스101 리액트풀스택 수업페이지(현재페이지) : https://slog.gg/p/4711](https://slog.gg/p/4711) - [클래스101 리액트풀스택 복습용페이지 : https://slog.gg/p/5034](https://slog.gg/p/5034) - [ken 5034, 유튜브 재생목록](https://www.youtube.com/playlist?list=PLE0hRBClSk5INU85nlyKhH0z_IGIKnG3K) # CLASS101 리액트 풀스택 강좌 # 챕터 WELCOME 시작 # 챕터 WELCOME, 리액트 풀스택 입문 클래스에 오신 걸 환영합니다! ## WELCOME-01 시작 ## WELCOME-01 : 반갑습니다, 15년 차 웹 개발자 장희성 입니다. $$ppt title: PPT-WELCOME-01 # 반갑습니다, 15년 차 웹 개발자 장희성 입니다.--o--t=1 # 이 강의를 듣는 여러분들을 개발자 지망생으로 가정합니다.[br /]물론 백엔드 개발자, 프론트엔드 개발자, 나만의 작품을 만들고 싶으신 분들도 환영합니다.--o--t=1 # 이 강좌는 프론트, 백, 인프라까지 다루는 풀스택 강좌입니다.[br /]서버세팅, 도메인연결, 배포 등등, 본인의 작품을 실제로 서비스하는 과정까지 담고 있습니다.--o--t=1 # 이 강좌는 HTML, CSS, JS 기초실력이 있으신 분들이 들을 수 있도록 설계되었습니다.[br /]저의 이전 강의인 웹코딩 강의를 추천합니다.[br /]https://to2.kr/dBN--o--t=1 # slog.gg/p/4680 이라는 무료페이지를 운영합니다.[br /](이것을 기본기 페이지라고 하겠습니다.)[br /]이 페이지에 이번 강좌에서 다루지 않지만 개발자가 되는데[br /]유용하거나 꼭 필요한 내용들이 정리되어 있습니다.[br /]--o--t=1 # 강좌 이용방법 $$uml 학습자 -> 기본기페이지 : 기본기 학습 시작 학습자 -> GITHUB : 공부기록 및 작품 남기기(이후 생략) 학습자 -> 위캔블로그 : 공부기록 및 작품 남기기(이후 생략) 기본기페이지 -> 학습자 : 더 이상 재미가 없다. 혹은 충분히 공부했다, 기본기 학습 중지 학습자 -> 강좌페이지 : 강좌 학습 시작 강좌페이지 -> 학습자 : 따라가기 어려운 지점까지 왔다, 강좌 학습 중지 학습자 -> 기본기페이지 : 기본기 학습 시작 기본기페이지 -> 학습자 : 더 이상 재미가 없다. 혹은 충분히 공부했다, 기본기 학습 중지 학습자 -> 강좌페이지 : 강좌 학습 시작 강좌페이지 -> 학습자 : 따라가기 어려운 지점까지 왔다, 강좌 학습 중지 학습자 -> 본인만의작품구현 : 더 이상 그 어떤 공부도 하기 싫은 지점까지 왔다. 이제 공부는 그만두고 뭔가를 만들어 봐야 겠다. 본인만의작품구현 -> 학습자 : 나만의 작품 완성!! 학습자 -> 강좌페이지 : 강좌 학습 시작(계속반복) $$end # 개발자가 되기위해서 이론과 실무능력을 둘다 닦아야 합니다.--o--t=1 # 보통 하루에 2, 3시간 정도 투자한다고 했을 때, 1년 정도의 시간이 걸립니다.--o--t=1 # 이 말에 굉장히 실망하실 분들이 많을거라고 생각합니다.--o--t=1 # 개발자가 되려면 여러분의 라이프스타일이 바뀌어야 합니다.--o--t=1 # 오랜 직업훈련학교 교사의 경험으로,[br /]여러분의 삶에 개발이 자연스럽게 녹아들도록 도와드리겠습니다.[br /]--o--t=1 # 이 강좌를 보기만 해서는 큰 도움이 되지 않습니다.--o--t=1 # 저를 믿고 제가 드리는 여러가지 지침들을 따라주시면[br /]개발자 취업이 충분히 가능합니다.--o--t=1 $$ --- ### 미션 1 : 이번 강좌를 통해 이루고 싶은 목표를 댓글로 남겨주세요. --- --- ## WELCOME-02 시작 ## WELCOME-02 : 개발툴 세팅 $$ppt title: PPT-WELCOME-02 # 개발툴 세팅을 시작해보겠습니다.--o--t=1 # codepen.io 이라는 툴을 사용합니다.--o--t=1 - [https://codepen.io](https://codepen.io) $$ --- ### 미션 1 : 코드팬으로 임의의 페이지를 생성(Ctrl +S) 한후 주소를 댓글로 남겨주세요. --- --- ## WELCOME-03 시작 ## WELCOME-03 : 효과적인 공부방법소개 및 코칭권 사용법 $$ppt title: PPT-WELCOME-03 # 효과적인 공부방법소개 및 코칭권 사용법--o--t=1 # 공부를 하시다가 보면 막히는 부분이 생깁니다.--o--t=1 # 학생분들이 너무나 많이 오해하고 있는 부분중 하나는,[br /]막히는 건 잘못 된 것이라고 생각하는 것 입니다.--o--t=1 # 이 부분에 대한 미스컨셉을 없애버려지 않으면[br /]절대로 개발자가 될 수 없거나 공부하는 동안 굉장히 힘이 듭니다.--o--t=1 # 개발실력은 오직 막힐 때만 늘어납니다.--o--t=1 # 우리는 최고의 개발자가 되는것을 목표로 하지 않습니다.--o--t=1 # 우리의 목표는 신입개발자가 되는 것 입니다.--o--t=1 # 우리에게 필요한 것은 획기적인 공부법이 아닙니다.--o--t=1 # 그것보다 공부량이 훨씬 중요합니다.[br /]여러분은 최대한 많이 시도해 보시고, 많이 망해보셔야 합니다.--o--t=1 # 망한 횟수가 곧 실력입니다.--o--t=1 # 이렇듯 실력을 늘리는 방법은 아주 간단합니다. 그냥 많이 하는 것 입니다.--o--t=1 # 하지만 많은 분들이 개발자를 포기하는 이유는,[br /]재능부족도 아니고 잘못된 공부방법도 아닙니다.--o--t=1 # 바로 개발공부에 대한 바른 이해가 없다는 것 입니다.--o--t=1 # 개발공부에 대한 대표적인 오해들을 소개해드리겠습니다.--o--t=1 # 대표적인 오해 1 > 이 문제를 해결하는데 6시간이나 걸렸네, 나는 재능이 없는걸까? - 이 생각은 너무나 크게 잘 못 되었습니다. - 개발실력향상은 운동실력향상과 거의 비슷합니다. - 헬스장에 가서 본인이 아슬아슬하게 실패할 지점을 목표로 연습하고 많이 실패해야 성장합니다. - 실패를 거듭해야 근육조직이 그 실패를 이겨내기 위해 더 좋은 구조로 재조직 됩니다. - 마찬가지로 여러분이 어떠한 문제에서 눈돌리지 않고, 그 문제와 함께 한 시간만큼 여러분은 성장합니다. - 여러분의 뇌의 시냅스 구조는 해당 실패를 기억하고, 그것을 이겨내기 위해 매일 재조직 됩니다. - 즉 코딩뇌로 바뀌는 것 입니다. - 앞으로 여러분은 뭔가가 잘 안될때 마다 웃으셔야 합니다. 그것은 여러분의 실력이 성장하는 현상입니다. # 대표적인 오해 2 > 이 문제를 이해하는데만 하루가 걸렸네, 이론 공부 열심히 해둘걸. - 이 생각도 너무나 크게 잘못되었습니다. - 아기는 걷기위해서 2천번의 실패를 겪습니다. - 아기가 걷기 전에, 걷기에 대한 이론을 마스터 하고 걸으려 했다면, 평생 걸을 수 없을 것 입니다. - 요리를 배울 때, 처음부터 가스레인지의 점화원리와, 불의 화학적 구조를 연구할 필요가 없습니다. - 개발도 마찬가지 입니다. - 이것은 단지 기술일 뿐입니다. - 여러분이 가진 시간의 10분의 1만 이론공부에 사용하시는게 좋습니다. - 이해가 안되시면, 해당부분이, `이런 상황에서 쓰는 구나` 라고 생각하시고 넘어가시면 됩니다. - 이해가 안된다고 스트레스를 받으시면 안됩니다. - 일단 해당 기술을 많이 사용해 보세요. - 기술에 숙달되면 이해는 나중에 자연스럽게 찾아옵니다. # 대표적인 오해 3 > 시간을 갈아넣었는데도, 실력이 오르는게 느껴지지 않네. 이 방식이 맞는걸까? - 개발실력은 실시간으로 향상되는걸 본인이 느끼게 되는 경우는 거의 없습니다. - 이 부분은 인내심을 가지고 이겨내셔야 합니다. - 다시 말씀드리지만, 방법은 중요하지 않습니다. - 중요한 것은 공부의 양입니다. 많이 망해보셔야 합니다. # 대표적인 오해 4 > 이렇게 구현하는게 맞는건가? 불안하네.. - 공부 중간에, 잠시 멈춰서, 소박하더라도 자신만의 프로그램을 만들어 보는게 중요합니다. - 이때 많은 분들이 본인의 구현방식에 쓸데없는 의문을 갖습니다. - 이런 고민은 구현을 다 하고 해도 늦지 않습니다. - 프로그램의 구조개선은 개발 이후에도 충분히 가능합니다. - 개발에는 정답이 없고, 여러분의 방식이 정답입니다. # 대표적인 오해 5 > 대체 나는 얼마나 더 배워야, 좋은 프로그램을 만들 수 있을까? - 특히 비전공자 분들이 이런 생각을 많이 하십니다. - 전공자는 뭔가 특별할 것을 알고 있고, 본인은 그 특별한 것을 배우지 않았기 때문에 부족하다는 생각을 많이 하십니다. - 그 특별한 뭔가는 정말로 환상입니다. - 좋은 프로그램을 만들려면 시간과 애정을 투자하면 됩니다. - 전공자만의 특별한 방법이라는 것은 없습니다. - 본인을 믿으셔야 합니다 # 대표적인 개발공부의 오해들을 소개해드렸습니다.[br /]이 미스컨셉을 없애버리셔서 즐거운 공부하시길 바랍니다.--o--t=1 # 코칭권에 대해서 설명드리겠습니다.--o--t=1 # 앞에서 제가 막힘은 축복이고 축하할 일이라고 설명드렸습니다.--o--t=1 # 그래도 우리가 사람인지라 너무나 답답하고 궁금한 것들이 있을 수 있습니다.--o--t=1 # 그럴때 코칭권을 사용해서 저에게 질문하실 수 있습니다.--o--t=1 # 코칭권 하나당 2가지 질문이 가능합니다.--o--t=1 # 답변은 질문작성일 순으로 순차적으로 진행됩니다.--o--t=1 # 20주 안에 자유롭게 사용가능하구요.--o--t=1 # 기간내 미사용은 환불되지 않습니다.--o--t=1 # codepen.io 에서 실제로 질문자료를 만드는 방법에 대해p서 설명드리겠습니다.--o--t=1 $$ ## 챕터미션, WELCOME - 이 문제를 풀 수 없다면, 다음챕터로 넘어가시면 안됩니다. ### 미션 1 : 백준문제 풀기 - 내용 : 백준문제를 하루에 2개씩 풀어주세요. - 해야하는 이유 1 : 백준을 하루에 2문제씩 푼 사람과, 그렇지 않은 사람하고는 3개월 뒤에 어마어마한 차이가 발생합니다. - 해야하는 이유 2 : 백준이, 본 강좌만으로 채워지지 않은 부분을 확실하게 채워줍니다. - 해야하는 이유 3 : 굉장히 재미있습니다. - 해야하는 이유 4 : 난이도가 적당합니다. 정 힘들면, 인터넷에서 정답을 검색해서 도움받을 수 있습니다. - [영상 - 클래스101, 리액트풀스택, 챕터 WELCOME, 미션 1, 1부, 소개, 백준 단계별문제 하루에 2문제씩 풀기](https://youtu.be/-O_rbfyOGxs) - [영 WELCOME, 미션 1, 2부, repl 사용법](https://youtu.be/on0U_O7W7bI) - [백준, 회원가입](https://www.acmicpc.net/register) - 가입 후 이메일인증 꼭 해주세요. - [백준, 단계별로 풀어보기](https://www.acmicpc.net/step) - [백준, 1000번문제 힌트](https://help.acmicpc.net/language/info) - [repl.it, 회원가입](https://replit.com/signup?from=landing) - 가입 후 이메일인증 꼭 해주세요. - [repl.it, 로그인](https://replit.com/login) - [repl.it, nodejs 연습장 - replit.com/new/nodejs](https://replit.com/new/nodejs) - ```js // 문장을 한줄 입력받은 후, 공백기준으로 나눠서, 정수화 const fs = require('fs'); const input = fs.readFileSync('/dev/stdin').toString().split(' '); const a = parseInt(input[0]); const b = parseInt(input[1]); console.log(a+b); ``` - repl.it에서 nodejs 실행법 - shell 탭으로 이동 - echo "입력값" | node indexjs - EX : echo "10 20" | node indexjs - shell 명령어 - ls : 파일목록 - clear : 화면지우기 - 방향키 위 : 이전에 입력했던 명령어 보기 - Ctrl + C : 현재 실행중인 프로그램 강제종료 --- --- --- # 챕터 01 시작 # 챕터 01, 리액트에 필요한 자바스크립트 최신문법 ## 01-01 시작 ## 01-01 : 개요와 자바스크립트 최신문법 $$ppt title: PPT-01-01 # 리액트에 필요한 자바스크립트 최신문법--o--t=1 # 최신문법[br /]필수준비운동--o--t=1 # Array Functions[br /]필수준비운동--o--t=1 # 불변성[br /]리액트의 동작원리를 이해하기 위함--o--t=1 $$ --- - [사전지식 페이지 - slog.gg/p/4680](https://slog.gg/p/4680) - [필수사전지식 - HTML, CSS](https://slog.gg/p/4680#단계-1-1-:-몰입코딩---HTML,-CSS-기초) - [필수사전지식 - Javscript, DOM](https://slog.gg/p/4680#단계-1-3-:-몰입코딩---Javascript,-DOM-기초) - [추천사전지식 - 모던 자바스크립트](https://slog.gg/p/4680#단계-3-1-:-드림코딩---모던-자바스크립트-기초) --- - [개념 - const와 let](https://codepen.io/jangka44/pen/PoEERma?editors=0012) - [개념 - 배열과 객체](https://codepen.io/jangka44/pen/QWaamwJ?editors=0012) - [개념 - 객체를 만드는 다양한 방법](https://codepen.io/jangka44/pen/vYppjdM?editors=0012) - [개념 - 삼항연산자](https://codepen.io/jangka44/pen/ExooQMx?editors=0012) - [개념 - falsy](https://codepen.io/jangka44/pen/VwyyXMM?editors=0012) - [개념 - 구조분해할당](https://codepen.io/jangka44/pen/mdppXow?editors=0012) --- ### 미션 1 : 문제를 전부 풀어주세요. 1. - [ ] [문제 - 배열에 과일이름들을 담아주세요, push 사용](https://codepen.io/jangka44/pen/abEppor?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/ExoZNqJ?editors=0102) - [정답](https://codepen.io/jangka44/pen/ExoZNqJ?editors=0012) 1. - [ ] [문제 - 배열안의 모든 숫자를 출력해주세요, for 사용](https://codepen.io/jangka44/pen/XWVppjw?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/WNdRRoJ?editors=0102) - [정답](https://codepen.io/jangka44/pen/WNdRRoJ?editors=0012) 1. - [ ] [문제 - 배열안의 모든 숫자를 출력해주세요, for 사용, 역순](https://codepen.io/jangka44/pen/PoEWWpK?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/popRRex?editors=0102) - [정답](https://codepen.io/jangka44/pen/popRRex?editors=0012) 1. - [ ] [문제 - 구구단 8단을 출력해주세요.](https://codepen.io/jangka44/pen/popPQKL?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/YzYVROX?editors=0102) - [정답](https://codepen.io/jangka44/pen/YzYVROX?editors=0012) 1. - [ ] [문제 - 사람객체를 6가지 방식으로 만들어주세요.](https://codepen.io/jangka44/pen/PoEQwLq?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/vYppygG?editors=0102) - [정답](https://codepen.io/jangka44/pen/vYppygG?editors=0012) 1. - [ ] [문제 - 삼항연산자로 문제를 해결해주세요.](https://codepen.io/jangka44/pen/bGaLNJe?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/WNddEgo?editors=0102) - [정답](https://codepen.io/jangka44/pen/WNddEgo?editors=0012) 1. - [ ] [문제 - falsy를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/QWaQbxQ?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/abEELwr?editors=0102) - [정답](https://codepen.io/jangka44/pen/abEELwr?editors=0012) 1. - [ ] [문제 - 구조분해할당을 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/MWrQwBP?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/GRyyMPE?editors=0102) - [정답](https://codepen.io/jangka44/pen/GRyyMPE?editors=0012) 1. - [ ] [문제 - 전개연산자를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/gOovpBm?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/rNppYNB?editors=0102) - [정답](https://codepen.io/jangka44/pen/rNppYNB?editors=0012) --- --- ## 01-02 시작 ## 01-02 : Array Functions - [개념 - 함수](https://codepen.io/jangka44/pen/oNppdKR?editors=0012) - [개념 - map](https://codepen.io/jangka44/pen/Vwyyxoo?editors=0012) - [개념 - filter](https://codepen.io/jangka44/pen/mdppKbJ?editors=0012) - [개념 - indexOf](https://codepen.io/jangka44/pen/RwxxJbN?editors=0012) --- ### 미션 1 : 문제를 전부 풀어주세요. 1. - [ ] [문제 - 함수를 다양한 형태로 선언해보세요, arrow function](https://codepen.io/jangka44/pen/vYpmPwG?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/yLpbwWq?editors=0102) - [정답](https://codepen.io/jangka44/pen/yLpbwWq?editors=0012) 1. - [ ] [문제 - join 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/mdpwJao?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/NWXgqeq?editors=0102) - [정답](https://codepen.io/jangka44/pen/NWXgqeq?editors=0012) 1. - [ ] [문제 - slice 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/qBpjaNE?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/ZEvypQV?editors=0102) - [정답](https://codepen.io/jangka44/pen/ZEvypQV?editors=0012) 1. - [ ] [문제 - indexOf 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/abEwmWb?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/yLpXagQ?editors=0102) - [정답](https://codepen.io/jangka44/pen/yLpXagQ?editors=0012) 1. - [ ] [문제 - lastIndexOf 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/PoEjGjJ?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/KKZqgmG?editors=0102) - [정답](https://codepen.io/jangka44/pen/KKZqgmG?editors=0012) 1. - [ ] [문제 - forEach 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/MWrojOx?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/abEwmLz?editors=0102) - [정답](https://codepen.io/jangka44/pen/abEwmLz?editors=0012) 1. - [ ] [문제 - every 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/mdpBKWM?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/bGaRwMj?editors=0102) - [정답](https://codepen.io/jangka44/pen/bGaRwMj?editors=0012) 1. - [ ] [문제 - some 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/popWKeG?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/KKZqgeJ?editors=0102) - [정답](https://codepen.io/jangka44/pen/KKZqgeJ?editors=0012) 1. - [ ] [문제 - filter 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/GRyMGmM?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/xxprEaV?editors=0102) - [정답](https://codepen.io/jangka44/pen/xxprEaV?editors=0012) 1. - [ ] [문제 - map 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/XWVVJYq?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/MWrEXmd?editors=0102) - [정답](https://codepen.io/jangka44/pen/MWrEXmd?editors=0012) 1. - [ ] [문제 - reduce 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/BaJJyVK?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/eYyGjjR?editors=0102) - [정답](https://codepen.io/jangka44/pen/eYyGjjR?editors=0012) 1. - [ ] [문제 - reduceRight 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/ZEvvYov?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/VwyMBEV?editors=0102) - [정답](https://codepen.io/jangka44/pen/VwyMBEV?editors=0012) 1. - [ ] [문제 - pop 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/KKZyLGb?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/gOooyLy?editors=0102) - [정답](https://codepen.io/jangka44/pen/gOooyLy?editors=0012) 1. - [ ] [문제 - push 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/bGaYymK?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/yLpzqQg?editors=0102) - [정답](https://codepen.io/jangka44/pen/yLpzqQg?editors=0012) 1. - [ ] [문제 - reverse 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/vYpWwVm?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/vYpeaQP?editors=0102) - [정답](https://codepen.io/jangka44/pen/vYpeaQP?editors=0012) 1. - [ ] [문제 - sort 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/PoEOvBO?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/popWZqR?editors=0102) - [정답](https://codepen.io/jangka44/pen/popWZqR?editors=0012) 1. - [ ] [문제 - splice 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/XWVzwYv?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/BaJmeYJ?editors=0102) - [정답](https://codepen.io/jangka44/pen/BaJmeYJ?editors=0012) 1. - [ ] [문제 - unshift 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/bGaaZKz?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/rNpYgvE?editors=0102) - [정답](https://codepen.io/jangka44/pen/rNpYgvE?editors=0012) --- --- ## 01-03 시작 ## 01-03 : 불변성 - [개념 - 레퍼런스](https://codepen.io/jangka44/pen/xxpYZNa?editors=0012) - [개념 - 불변성](https://codepen.io/jangka44/pen/qBpxbGQ?editors=0012) --- ### 미션 1 : 문제를 전부 풀어주세요. 1. - [ ] [문제 - 레퍼런스를 활용해서 원본값을 다른 함수에서도 수정할 수 있도록 해주세요, 배열이용](https://codepen.io/jangka44/pen/VwyyOLo?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/KKZZLMy?editors=0102) - [정답](https://codepen.io/jangka44/pen/KKZZLMy?editors=0012) 1. - [ ] [문제 - 레퍼런스를 활용해서 원본값을 다른 함수에서도 수정할 수 있도록 해주세요, 객체이용](https://codepen.io/jangka44/pen/wvppbWg?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/zYppQBM?editors=0102) - [정답](https://codepen.io/jangka44/pen/zYppQBM?editors=0012) 1. - [ ] [문제 - pop 함수 대신 불변성 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/gOooydO?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/RwxxOoE?editors=0102) - [정답](https://codepen.io/jangka44/pen/RwxxOoE?editors=0012) 1. - [ ] [문제 - push 함수 대신 불변성 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/XWVVQPZ?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/mdppgpY?editors=0102) - [정답](https://codepen.io/jangka44/pen/mdppgpY?editors=0012) 1. - [ ] [문제 - reverse 함수 대신 불변성 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/ExooJGR?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/PoEEgRY?editors=0102) - [정답](https://codepen.io/jangka44/pen/PoEEgRY?editors=0012) 1. - [ ] [문제 - sort 함수 대신 불변성 함수를 사용해서 문제를 해결해주세요.](https://codepen.io/jangka44/pen/jOYYoOw?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/MWrrRVm?editors=0102) - [정답](https://codepen.io/jangka44/pen/MWrrRVm?editors=0012) 1. - [ ] [문제 - map 함수를 사용해서 불변성을 유지시켜주세요, 배열이용](https://codepen.io/jangka44/pen/qBppGEv?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/oNppRgR?editors=0102) - [정답](https://codepen.io/jangka44/pen/oNppRgR?editors=0012) 1. - [ ] [문제 - flatMap을 이용해서 1부터 3까지 5번 반복되는 1차원 배열을 만들어주세요.](https://codepen.io/jangka44/pen/qBppGEv?editors=0012) - [정답예시](https://codepen.io/jangka44/pen/JjMMqWq?editors=0102) - [정답](https://codepen.io/jangka44/pen/JjMMqWq?editors=0012) --- --- ## 01-04 시작 ## 01-04 : 정리 ### 배열 API 치트시트 1, 표 | 함수 | 설명 | | --- | --- | | a1.concat(a2) | Return new array by joining arrays a1 and a2 together | | a1.join(separator) | Join all elements of array a1 into a string separated by separator arg | | a1.slice(start, end) | Extract a section from start to end of array a1 and return a new array | | a1.indexOf(obj) | Return first index of obj within array a1 | | a1.lastIndexOf(obj) | Return last index of obj within array a1 | | a1.forEach(fn) | Calls function fn for each element in the array a1 | | a1.every(fn) | Return true if every element in array a1 satisfies provided testing function fn | | a1.some(fn) | Return true if at least one element in array a1 satisfies provided testing function fn | | a1.filter(fn) | Create a new array with all elements of array a1 which pass the filtering function fn | | a1.map(fn) | Create a new array with results of calling function fn on every element in array a1 | | a1.reduce(fn) | Apply a function fn against an accumulator and each value (from left to right) of the array as to reduce it to a single value | | a1.reduceRight(fn) | Apply a function fn against an accumulator and each value (from right to left) of the array as to reduce it to a single value | | a1.pop() | Remove and return last element from array a1 | | a1.push(obj) | Add obj to end of array a1 and return new length | | a1.reverse() | Reverse order of elements of array a1 in place | | a1.sort() | Sort the elements of array a1 in place | | a1.splice(start, deleteCount, items) | Change content of array a1 by removing existing elements and/or adding new elements | | a1.unshift(obj) | Add obj to start of array a1 and return new length | | a1.toString() | Return a string representing array a1 and its elements (same as a1. join(',')) | | a1.toLocaleString() | Return a localized string representing array a1 and its elements (similar to a1.join(',')) | | Array.isArray(var) | Return true if var is an array | | a1.length | Return length of array a1 | | a1[0] | Access first element of array a1 | ### 배열 API 치트시트 2, 도형 ### Deriving a new Array from an existing Array ``` ['■','●','▲'].slice(1, 3) ⟼ ['●','▲'] ['■','●','■'].filter(x => x==='■') ⟼ ['■','■'] ['▲','●'].map(x => x+x) ⟼ ['▲▲','●●'] ['▲','●'].flatMap(x => [x,x]) ⟼ ['▲','▲','●','●'] ``` ### Computing a summary of an Array ``` ['■','●','▲'].some(x => x==='●') ⟼ true ['■','●','▲'].every(x => x==='●') ⟼ false ['■','●','▲'].join('-') ⟼ '■-●-▲' ['■','●'].reduce((result,x) => result+x, '▲') ⟼ '▲■●' ['■','●'].reduceRight((result,x) => result+x, '▲') ⟼ '▲●■' ``` ### Changing all of an Array (the input Array is modified and returned) ``` ['■','●','▲'].fill('●') ⟼ ['●','●','●'] ['■','●','▲'].reverse() ⟼ ['▲','●','■'] ['■','●','■'].sort() ⟼ ['■','■','●'] ``` ### Finding Array elements ``` ['■','●','■'].includes('■') ⟼ true ['■','●','■'].indexOf('■') ⟼ 0 ['■','●','■'].lastIndexOf('■') ⟼ 2 ['■','●','■'].find(x => x==='■') ⟼ '■' ['■','●','■'].findIndex(x => x==='■') ⟼ 0 ``` ### Listing elements (spreading via '...' is needed because the methods return iterables) ``` [...['■','●','▲'].keys()] ⟼ [0,1,2] [...['■','●','▲'].values()] ⟼ ['■','●','▲'] [...['■','●','▲'].entries()] ⟼ [[0,'■'],[1,'●'],[2,'▲']] ``` ### Adding or removing an element at either end of an Array ``` arr=['■','●']; arr.push('▲'); arr ⟼ ['■','●','▲'] arr=['■','●','▲']; arr.pop(); arr ⟼ ['■','●'] arr=['■','●']; arr.unshift('▲'); arr ⟼ ['▲','■','●'] arr=['▲','■','●']; arr.shift(); arr ⟼ ['■','●'] ``` ## 챕터미션, 01 - 이 문제를 풀 수 없다면, 다음챕터로 넘어가시면 안됩니다. ### 미션 1 : 배열함수를 이용하여 문제를 풀어주세요 - [영상 - 클래스101, 리액트풀스택, 챕터 1, 미션 1, 소개](https://youtu.be/gqsGW6FJX2U) - [배열함수를 이용하여 문제를 풀어주세요.](https://codepen.io/jangka44/pen/gOoEwgQ?editors=0012) - 정답의 15%는 공개되어 있습니다. - 나머지는 혼자힘으로 풀어주세요. - 구글검색과 실험(codepen.io/pen)을 많이 진행해주세요. - 실험은 codepen.io 에서 console.log 를 이용하는것을 말합니다. --- --- --- # 챕터 02 시작 # 챕터 02, 간단한 숫자 카운팅 기능 구현 ## 02-01 시작 ## 02-01 : 개요 $$ppt title: PPT-02-01 # 챕터 2, 간단한 숫자 카운팅 기능 구현--o--t=1 # 리액트의 기초를 배웁니다.--o--t=1 # 관련 개념들이 쉽게 이해되지는 않을 수 있습니다.--o--t=1 # 원리와 이해에 집중하지 마시고,[br /]구현력에 집중해주세요.--o--t=1 # 수업페이지를 기준으로 공부해주세요.[br /]주소 : slog.gg/p/4711--o--t=1 # 수업페이지의 문제의 개수와 퀄리티는[br /]강의 촬영이 끝나도 제가 계속 업데이트를 합니다.--o--t=1 $$ --- - 시작소스 : [https://to2.kr/dCa](https://to2.kr/dCa) - [개념 - 리액트 개발환경을 세팅해주세요.](https://to2.kr/dCa) - `import React from "https://cdn.skypack.dev/react@17";` - `import ReactDOM from "https://cdn.skypack.dev/react-dom@17";` - [위캔가입 : https://slog.gg/member/join](https://slog.gg/member/join) - 개발자 블로그, 위키 툴 - 입사지원할 때 필요 - 벨로그나, 티스토리를 사용하셔도 됩니다. --- ### 미션 1 : 위캔 가입 후, 위캔문서를 하나 생성하여, 주소를 댓글로 남겨주세요. --- ### 미션 2 : 튜토리얼 숫자 카운터 1. - [ ] 02-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 2, 1강, 버튼 클릭할때마다 콘솔로그](https://youtu.be/cZgv1YZ9Elw) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/gOoKwez?editors=0011) 1. - [ ] 02-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 2, 2강, 공부하는 방법, 엄청나게 중요합니다.](https://youtu.be/XnjSZ5cWK5c) 1. - [ ] 02-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 2, 3강, 숫자 증가](https://youtu.be/Op_dILG9ElA) - [CODEPEN](https://codepen.io/jangka44/pen/KKZegGO?editors=0010) 1. - [ ] 02-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 2, 4강, 다양한 증감 기능](https://youtu.be/2f-3i92fyK0) - [CODEPEN](https://codepen.io/jangka44/pen/mdpKraK?editors=0010) 1. - [ ] 02-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 2, 5강, 제가 사용하는 용어설명, 회귀, 턴, 기억전승, 주인공](https://youtu.be/Vw9QOTv_zJo) - [CODEPEN](https://codepen.io/jangka44/pen/XWVyPyP?editors=0011) 1. - [ ] 02-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 2, 6강, 제가 사용하는 용어설명, 회귀, 턴, 기억전승, 차원, 부모, 자식](https://youtu.be/jnIXW34d3DY) - [CODEPEN](https://codepen.io/jangka44/pen/JjMeaVq?editors=0011) --- --- ## 02-02 시작 ## 02-02 : 리액트를 사용하는 이유 $$ppt title: PPT-02-02 # 리액트를 사용하는 이유--o--t=1 # 웹은 페이지 이동시 특유의 깜박거림이 있습니다.--o--t=1 # 모바일앱은 페이지 이동시 부드럽고, 빠릅니다.--o--t=1 # 리액트는 모바일앱같은 웹을 만들 수 있습니다.--o--t=1 # 그래서 리액트로 고품질의 웹사이트를 만들 수 있습니다.[br /]아주 복잡한 UI를 가진 앱도 깔끔하게 만들 수 있도록[br /]도와주는 역할도 합니다.--o--t=1 # 또 모바일앱도 제작 가능합니다.--o--t=1 # 리액트 기반의 대표적인 앱이 배달의 민족과 토스가 있습니다.--o--t=1 # 리액트를 잘 활용하면 기업에서는 굉장한 비용절감을 할 수 있습니다.--o--t=1 $$ --- ### 미션 1 : 튜토리얼 각국의 인사말 - [문제 - 00, 시작](https://codepen.io/jangka44/pen/QWarvEy?editors=0010) - [문제 - 01, 영어식인사말태그, 인도식인사말태그를 정의해주세요.](https://codepen.io/jangka44/pen/vYpRmvO?editors=0010) - [문제 - 02, 여러번 사용해주세요.](https://codepen.io/jangka44/pen/VwyXbOL?editors=0010) - [문제 - 03, 영어인사말 색상변경](https://codepen.io/jangka44/pen/PoERmMW?editors=0010) - [문제 - 04, 개별색상](https://codepen.io/jangka44/pen/MWrVmNq?editors=0010) - [문제 - 05, 기본색상이 입력되지 않았다면 pink](https://codepen.io/jangka44/pen/mdpxweO?editors=0010) - [문제 - 06, big 속성값이 true 라면 글자를 크게](https://codepen.io/jangka44/pen/RwxMgoK?editors=0010) - [문제 - 07, children으로 인사말 뒤에 이름 넣기](https://codepen.io/jangka44/pen/BaJrZVx?editors=0010) --- --- ## 02-03 시작 ## 02-03 : Virtual DOM과 리랜더링 $$ppt title: PPT-02-03 # Virtual DOM과 리랜더링--o--t=1 # 예쁜 펜글씨 대회가 있다고 가정해보겠습니다.--o--t=1 # 그 대회에서는 수정액으로 잘못 쓴 글을 지울 수 있습니다.--o--t=1 # 누구나 사랑받을 자격[span style="color:red;"]은[/span] 있다.(x)[br /]누구나 사랑받을 자격[span style="color:green;"]이[/span] 있다.(o)--o--t=1 # 다시 그리는 것은 고생스럽지만 단순하고 쉬운 방법이다.--o--t=1 # 기존에 만들어진 것을 고치는 것은 덜 고생스럽지만,[br /]만드는 것과는 또 다른 스킬을 배워야 한다.--o--t=1 # 리액트 이전에는 앱의 상태변화에 따른 UI 변경을,[br /]고치는 것으로 해결했습니다. ```js const btn = document.getElementById('btn'); // 엘리먼트를 찾아서 btn.style.display = 'none'; // 상태를 직접 수정합니다. ``` # 버튼을 클릭했을 때, 팝업이 보여야 한다면,[br /]리액트는 변경하는 대신 [span style="color:red;"]리랜더링[/span]을 합니다. ```jsx // setVisible 함수를 호출하면, 함수가 재실행 됩니다. const [visible, setVisible] = useState(false); // 이 함수를 호출하면 팝업의 상태가 열리고, // 다시한번 호출하면 팝업이 닫힙니다. const togglePopup = () => setVisible(!visible); if ( !visible ) return

팝업열기

return

팝업...

``` # 질문 : 그러면 리액트는 굉장히 느리겠네요?[br /]살짝 고치는 문제인데도 항상 모든것을 지우고[br /]처음부터 다시 그리니까요.(리랜더링)--o--t=1 # 리액트는 가상돔을 사용하여[br /]속도문제를 해결합니다.--o--t=1 # 어떤 건물을 완성한 후, 입구의 색이 마음에[br /]안드는 상황이라고 가정해보겠습니다.--o--t=1 # 처음부터 건물을 다시 짓는다면 시간이 오래걸리겠지만,[br /]상상속(가상환경)에서는 어렵지 않습니다.--o--t=1 # 리액트는 가상DOM에서 작업을 합니다.[br /]그렇기 때문에 속도가 빠릅니다.--o--t=1 # 질문 : 그런데 결국 가상이 아니라[br /]현실에 반영되어야 하는 것 아닌가요?--o--t=1 # 가상돔이 알아서 현실에 빠르게 반영해 줍니다. ## 가상돔 ```jsx return

setVisible(!visible)}>팝업{visible ? '닫기' : '열기'}

; ``` ## 실제돔 ```html

팝업열기

팝업닫기

``` # 결론 1, 다시 그리는 것은 쉽지만 오래걸린다.--o--t=1 # 결론 2, 리액트는 변경사항이 있을때마다[br /]가상돔에서 다시 그린다.--o--t=1 # 결론 3, 가상돔은 자신에게 반영된 내용을[br /]현실에 빠르게 반영해준다.--o--t=1 # 결론 4, 리액트는 구현이 쉬운데도,[br /]처리속도가 빠르다.--o--t=1 $$ --- ### 미션 1 : 튜토리얼 입력상자 제어 1. - [ ] 03-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 3, 1강, 비제어 입력요소](https://youtu.be/bkQU30sErzg) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/yLpEadN?editors=0011) 1. - [ ] 03-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 3, 2강, 제어 입력요소와 onChange](https://youtu.be/Ih_nZ4R_Cak) - [CODEPEN](https://codepen.io/jangka44/pen/MWrXjMa?editors=0011) 1. - [ ] 03-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 3, 3강, 이벤트 객체](https://youtu.be/YvLeXlXBaK4) - [CODEPEN](https://codepen.io/jangka44/pen/BaJVLgM?editors=0011) - [추천영상 - 뉴렉처 - 자바스크립트 & DOM 프로그래밍 39강 - 이벤트와 이벤트 객체](https://youtu.be/lXeJSMGlRgE) 1. - [ ] 03-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 3, 4강, 제어요소에 변경허용](https://youtu.be/z5lBYOizPtw) - [CODEPEN](https://codepen.io/jangka44/pen/QWaxGwL?editors=0010) --- --- ## 02-04 시작 ## 02-04 : useState $$ppt title: PPT-02-04 # useState--o--t=1 # 복사본은 뒤늦게 원본이 바뀌어도, 변하지 않습니다. ```js let a = 10; console.log(a); // 출력 : 10 a = 50; // 이렇게 바꾼다고 해서 위에서 출력한 10이 50으로 바뀌지 않습니다. ``` # 복사본은 뒤늦게 원본이 바뀌어도, 변하지 않습니다. ```js function Hi() { let name = '홍길동'; setTimeout(() => name = '홍길순', 3000); return <>안녕하세요. 저의 이름은 {name} 입니다. } ``` ```html ``` # 리액트에서는 state 라는 개념이 있습니다. ```js function Hi() { // name 에는 '홍길동' 이 들어가고, setName은 name을 변경할 때 사용합니다. // 즉 state는 name = '홍길순'; // 이런식으로 값을 바꿀 수 없습니다. const [name, setName] = useState('홍길동'); setTimeout(() => setName('홍길순'), 3000); return <>안녕하세요. 저의 이름은 {name} 입니다. } ``` ```html ``` $$ --- ### 미션 1 : 튜토리얼 스톱워치 구현 1. - [ ] 06-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 06-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 6, 2강, 숫자가 자동 증가](https://youtu.be/BbTFb0cks2A) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/oNpyBPg?editors=0010) 1. - [ ] 06-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 6, 3강, 일시중지](https://youtu.be/L_KSotkyQ3I) - [CODEPEN](https://codepen.io/jangka44/pen/xxpzgav?editors=0010) 1. - [ ] 06-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 6, 4강, 재개](https://youtu.be/AIrlNiM_hLM) - [CODEPEN](https://codepen.io/jangka44/pen/jOYKyQx?editors=0010) 1. - [ ] 06-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 6, 5강, 재개 후 즉시 일시중지 버튼누르면 안되는 버그수정](https://youtu.be/VzJbSfELhUE) - [CODEPEN](https://codepen.io/jangka44/pen/zYpaNMX?editors=0010) --- --- ## 02-05 시작 ## 02-05 : 숫자 카운터 ### 미션 1 : 튜토리얼 숫자 카운터 1. - [ ] 07-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 07-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 7, 2강, if를 사용해서 짝수일 때만 짝수라는 문구가 나오도록](https://youtu.be/ngVtFQz4dzQ) - [CODEPEN](https://codepen.io/jangka44/pen/vYprWRN?editors=0010) 1. - [ ] 07-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 7, 3강, 8의 배수일경우 문구가 나오도록](https://youtu.be/bBW7DOR3qD4) - [CODEPEN](https://codepen.io/jangka44/pen/BaJVmxR?editors=0010) 1. - [ ] 07-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 7, 4강, and 연산자](https://youtu.be/ieSdKZSNgGU) - [CODEPEN](https://codepen.io/jangka44/pen/KKZeyBo?editors=0010) 1. - [ ] 07-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 7, 5강, or 연산자](https://youtu.be/t5v4T3AxQt8) - [CODEPEN](https://codepen.io/jangka44/pen/YzYvEJw?editors=0010) --- --- ## 02-06 시작 ## 02-06 : 정리 - 데이지UI 소개 - [영상 - 리액트풀스택, 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 ``` --- ### 미션 1 : 튜토리얼 숫자 카운터, 데이지 UI 1. - [ ] [문제 - 00, 시작](https://codepen.io/jangka44/pen/WNdJPNN?editors=0010) 1. - [ ] [문제 - 01, 입력상자](https://codepen.io/jangka44/pen/eYyrbdO?editors=0010) 1. - [ ] [문제 - 02, 데이지 UI](https://codepen.io/jangka44/pen/VwyxqVQ?editors=0010) 1. - [ ] [문제 - 03, 숫자 증가](https://codepen.io/jangka44/pen/vYpjvvj?editors=0010) 1. - [ ] [문제 - 04, 입력상자의 이벤트가 반응](https://codepen.io/jangka44/pen/LYemMvO?editors=0010) 1. - [ ] [문제 - 05, valueAsNumber](https://codepen.io/jangka44/pen/gOozZJZ?editors=0010) --- ### 미션 2 : 튜토리얼, 팝업 1. - [ ] 08-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 8, 1강, 팝업과 닫기버튼](https://youtu.be/LEjJz06WRbA) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/PoEageR?editors=0010) 1. - [ ] 08-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 8, 2강, 닫기버튼 누르면 팝업 제거](https://youtu.be/fKtyVz9qMMg) - [CODEPEN](https://codepen.io/jangka44/pen/oNpyOyZ?editors=0010) 1. - [ ] 08-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 8, 3강, 팝업열기버튼](https://youtu.be/kH8rt7ohijY) - [CODEPEN](https://codepen.io/jangka44/pen/WNdyWKL?editors=0010) 1. - [ ] 08-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 8, 4강, 팝업버튼관련 로직을 두줄에서 한줄로 줄이기](https://youtu.be/qJvJOJmJXbg) - [CODEPEN](https://codepen.io/jangka44/pen/JjMZVwb?editors=0010) --- ### 미션 3 : 튜토리얼, 상품리스트 1. - [ ] 09-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 09-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 2강, 상품명과 상품가격 추가](https://youtu.be/zGZ1ydOz7P8) - [CODEPEN](https://codepen.io/jangka44/pen/BaJPyEq?editors=0010) 1. - [ ] 09-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 3강, 품목을 3개로 늘림](https://youtu.be/6CKXH0_6R20) - [CODEPEN](https://codepen.io/jangka44/pen/wvpxBLQ?editors=0010) 1. - [ ] 09-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 4강, 상품명에 CSS 작업, 3번이나 작업해야 해서 힘듬](https://youtu.be/fyz9086Um7o) - [CODEPEN](https://codepen.io/jangka44/pen/wvpxawR?editors=0010) 1. - [ ] 09-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 5강, 상품리스트품목을 별도의 컴포넌트로 제작](https://youtu.be/r2zitw3hurI) - [CODEPEN](https://codepen.io/jangka44/pen/dyJjoZe?editors=0010) 1. - [ ] 09-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 6강, 이미지번호, 상품명, 상품가격을 별도의 변수로 분리](https://youtu.be/ll6VIU0V51U) - [CODEPEN](https://codepen.io/jangka44/pen/ExopjjN?editors=0010) 1. - [ ] 09-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 7강, 컴포넌트 호출시 속성을 사용하여 props로 데이터 전달](https://youtu.be/kTtBbsTGT4c) - [CODEPEN](https://codepen.io/jangka44/pen/eYyXgXm?editors=0010) 1. - [ ] 09-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 9, 8강, 구조분해할당의 여러가지 사용법](https://youtu.be/uQRgNfFI8nI) - [CODEPEN](https://codepen.io/jangka44/pen/rNprVLL?editors=0010) --- ### 미션 4 : 튜토리얼, 테일윈드로 구현하는 반응형 상품리스트 1. - [ ] 10-01 단계 - [영상 - 리액트풀스택, 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; } ``` 1. - [ ] 10-02 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 10-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 3강, 상품리스트 마크업, 크롬 개발자 도구의 요소탭 활용법](https://youtu.be/ffT_szFeBT8) - [CODEPEN](https://codepen.io/jangka44/pen/dyJjvZp?editors=0010) 1. - [ ] 10-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 4강, 테일윈드 적용](https://youtu.be/wKVmdhaauag) - [CODEPEN](https://codepen.io/jangka44/pen/xxpJqJZ?editors=0010) 1. - [ ] 10-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 5강, 화면이 넓을때 생기는 빈공간 채우기](https://youtu.be/fap79Ol3cWs) - [CODEPEN](https://codepen.io/jangka44/pen/gOojmKo?editors=0010) 1. - [ ] 10-06 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 10-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 7강, 반응형 상품리스트](https://youtu.be/6dK118stQEY) - [CODEPEN](https://codepen.io/jangka44/pen/KKZBWOj?editors=0010) 1. - [ ] 10-08 단계 - [영상 - 리액트풀스택, 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) ## 챕터미션, 02 - 이 문제를 풀 수 없다면, 다음챕터로 넘어가시면 안됩니다. ### 미션 1 : 튜토리얼을 진행해주세요. - [영상 - 클래스101, 리액트풀스택, 챕터 2, 미션 1, 소개](https://youtu.be/muTp0BuM3kI) #### 미션 1, 문제들 1. - [ ] 06-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 6, 5강, 재개 후 즉시 일시중지 버튼누르면 안되는 버그수정](https://youtu.be/VzJbSfELhUE) - [시작소스코드 - to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/zYpaNMX?editors=0010) 1. - [ ] 07-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 7, 5강, or 연산자](https://youtu.be/t5v4T3AxQt8) - [시작소스코드 - to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/YzYvEJw?editors=0010) 1. - [ ] 08-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 8, 4강, 팝업버튼관련 로직을 두줄에서 한줄로 줄이기](https://youtu.be/qJvJOJmJXbg) - [시작소스코드 - to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/JjMZVwb?editors=0010) 1. - [ ] 10-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 10, 8강, 테일윈드의 container 를 사용해서 내용이 너무 화면넓게 퍼지는 것을 막음](https://youtu.be/yVoYBLXAWKY) - [시작소스코드 - to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/MWrBrmZ?editors=0010) --- --- --- # 챕터 03 시작 # 챕터 03, 멀티체크박스 관리 기능 구현 ## 03-01 시작 ## 03-01 : 개요 $$ppt title: PPT-03-01 # 챕터 3, 멀티체크박스 관리 기능 구현--o--t=1 # 기초실력을 배양하는데 꼭 필요한 개념들과[br /]연습문제들이 다량으로 제공됩니다.--o--t=1 # 연습문제는 최대한 답을[br /]안보고 푸시는게 중요합니다.--o--t=1 # useRef, useState랑 비슷하지만[br /]리랜더링이 필요없는 경우에 사용 ```jsx const [no, setNo] = useState(0); // 기억과 리랜더링 발동 const noRef = useRef(0); // 기억 ``` # useEffect, 리랜더링시마다 실행되는 리액트에서,[br /]딱 1번만 실행되어야 하는 경우에 사용 ```jsx const a = 10; // 리랜더링 마다 실행 useEffect(() => { // 딱 한번 실행 }); ``` # useMemo, 리랜더링시마다 쓸데없는 계산을 하지 않고,[br /]한번 계산한 결과를 기억 ```jsx const key = 10; // key 변수의 값이 바뀌지 않는한 실제 계산은 반복되지 않는다. const rs = useMemo(() => { return 10 * 10 * 10 * 10 * 10; }, [key]); ``` # useCallback, 리랜더링시마다 함수를 만들지 않고,[br /]한번만든 함수를 기억 ```jsx const a = () => 10 + 20; // 매 랜더링마다 실행, 즉 함수생성 const b = useCallback(() => 10 + 20, []); // 매 랜더링시마다, 함수생성을 하지 않음 ``` # 수업페이지의 문제의 개수와 퀄리티는[br /]강의 촬영이 끝나도 제가 계속 업데이트를 합니다.--o--t=1 # 이 세상에는 이해하기는 어려워도 막상 해보면[br /]자연스럽게 이해되는 것들이 있습니다.--o--t=1 $$ --- ### 미션 1 : 리액트 관련 자주하는 실수 1. - [ ] 11-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 11-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 11, 2강, 직접만든 컴포넌트에는 className, style 등이 작동하지 않습니다, 전달을 꼭 해줘야 합니다.](https://youtu.be/TgMjDf7hppM) - [CODEPEN](https://codepen.io/jangka44/pen/popOMRa?editors=0010) 1. - [ ] 11-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 11, 3강, onClick에 매개변수가 필요한 함수는 바로 연결할 수가 없습니다.](https://youtu.be/lRURyVNVpp8) - [CODEPEN](https://codepen.io/jangka44/pen/OJzoKOp?editors=0010) 1. - [ ] 11-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 11, 4강, 한번의 함수실행에서, 여러번 실행된, setState의 결과가 전부 반영되는 방법](https://youtu.be/FLLlLqpSUVE) - [CODEPEN](https://codepen.io/jangka44/pen/popYmrw?editors=0010) 1. - [ ] 11-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 11, 5강, setState 함수에 인자로 새 상태를 반환하는 함수를 넘기면 좋은 경우, 첫번째](https://youtu.be/TL07MiruBPI) - [CODEPEN](https://codepen.io/jangka44/pen/ZEvZQYz?editors=0010) 1. - [ ] 11-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 11, 5강, setState 함수에 인자로 새 상태를 반환하는 함수를 넘기면 좋은 경우, 두번째](https://youtu.be/_VZYF_A9d8o) - [CODEPEN](https://codepen.io/jangka44/pen/bGaZKeE?editors=0010) --- ### 미션 2 : 데이지UI 1. - [ ] 12-01 단계 - [영상 - 리액트풀스택, 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 ``` --- ### 미션 3 : 숫자기록 1. - [ ] 13-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 13-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 2강, 배열 렌더링](https://youtu.be/Mn2OoHyFRTU) - [CODEPEN](https://codepen.io/jangka44/pen/ExoeRZK?editors=0010) 1. - [ ] 13-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 3강, 숫자가 교체되는게 아니라, 쌓이도록](https://youtu.be/9pAgcry0mQs) - [CODEPEN](https://codepen.io/jangka44/pen/mdpGKLK?editors=0010) 1. - [ ] 13-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 4강, 엘리먼트 배열](https://youtu.be/DJ3-RDJ5TKI) - [CODEPEN](https://codepen.io/jangka44/pen/oNpPyKq?editors=0010) 1. - [ ] 13-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 5강, 배열의 요소에 일괄작업을 해서 새로운 배열을 생성, map](https://youtu.be/MAQTvcwbnFg) - [CODEPEN](https://codepen.io/jangka44/pen/gOodjbE?editors=0010) 1. - [ ] 13-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 6강, 엘리먼트 배열을 map 함수로 만들때, 배열요소 엘리먼트에는 각각 고유한 key 속성이 부여](https://youtu.be/6IqfxHYnkLM) - [CODEPEN](https://codepen.io/jangka44/pen/ExoeBeL?editors=0010) 1. - [ ] 13-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 7강, 기록된 숫자들이 리스트 형태로 출력](https://youtu.be/3HIRUrZ0tag) - [CODEPEN](https://codepen.io/jangka44/pen/YzYOodb?editors=0010) 1. - [ ] 13-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 8강, 입력시 마다 기존의 입력창 값 초기화, 유효성 체크](https://youtu.be/QGe6eP_QXI8) - [CODEPEN](https://codepen.io/jangka44/pen/PoEdrrP?editors=0010) 1. - [ ] 13-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 9강, 엔터입력시 기록](https://youtu.be/-EyoOsA4f2Q) - [CODEPEN](https://codepen.io/jangka44/pen/ZEvMgYx?editors=0010) 1. - [ ] 13-10 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 13, 10강, 폼의 onSubmit을 이용한, 엔터입력시 기록](https://youtu.be/6Mu3OfFZMyI) - [CODEPEN](https://codepen.io/jangka44/pen/jOYvgWG?editors=0010) --- ### 미션 4 : form을 사용해서 dom 조작하기 1. - [ ] 14-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 14, 1강, form을 이용해서 dom 조작하기](https://youtu.be/v3TB17xEXyk) - [CODEPEN](https://codepen.io/jangka44/pen/yLpRBer?editors=0010) - DOM은 일단, 화면에 보여지는 객체들이라고 생각해주시면 됩니다. 1. - [ ] 14-02 단계 - [영상 - 리액트풀스택, 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은 일단, 화면에 보여지는 객체들이라고 생각해주시면 됩니다. --- --- ## 03-02 시작 ## 03-02 : useRef --- $$ppt title: PPT-03-02 # useRef의 두가지 용법,[br /]1st : DOM 조작 ```jsx const inputRef = useRef(null); return

``` # useRef의 두가지 용법,[br /]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으로 수정됨 ``` $$ --- ### 미션 1 : useRef 기초 1. - [ ] 15-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 15, 1강, useRef를 사용해서 dom 조작하기](https://youtu.be/gAXvTxke8SE) - [CODEPEN](https://codepen.io/jangka44/pen/WNdaejL?editors=0010) 1. - [ ] 15-02 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 15-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 15, 3강, useRef와 useState의 차이점](https://youtu.be/4djLEcGkuRM) - [CODEPEN](https://codepen.io/jangka44/pen/GRyYKyd?editors=0011) --- ### 미션 2 : 배열에서 특정요소를 제거 1. - [ ] 16-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 16, 1강, 배열에서 특정요소를 제거](https://youtu.be/89qUe7M1TRo) - [CODEPEN](https://codepen.io/jangka44/pen/oNpaZzr?editors=0010) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) 1. - [ ] 16-02 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 16-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 16, 3강, 숫자리스트에서, 특정 위치에 있는 숫자를 제거](https://youtu.be/-EClktYc0vs) - [CODEPEN](https://codepen.io/jangka44/pen/WNdapaM?editors=0010) 1. - [ ] 16-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 16, 4강, 숫자리스트항목에 삭제기능](https://youtu.be/FZBVfJHnCmA) - [CODEPEN](https://codepen.io/jangka44/pen/popxeGO?editors=0010) --- ### 미션 3 : 배열에서 특정요소를 수정 1. - [ ] 17-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 17, 1강, 배열에서 특정요소를 수정](https://youtu.be/ypQwyf78Xxg) - [CODEPEN](https://codepen.io/jangka44/pen/gOoBxWr?editors=0010) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) 1. - [ ] 17-02 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 17-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 17, 3강, 숫자리스트항목에 수정기능](https://youtu.be/XowkFhxL-1M) - [CODEPEN](https://codepen.io/jangka44/pen/XWVxaRx?editors=0010) --- --- ## 03-03 시작 ## 03-03 : useEffect --- $$ppt title: PPT-03-03 # useEffect, 리랜더링시마다 실행되는 리액트에서,[br /]딱 1번만 실행되어야 하는 경우에 사용 ```jsx const a = 10; // 리랜더링 마다 실행 useEffect(() => { // 딱 한번 실행 }); ``` # useMemo, 리랜더링시마다 쓸데없는 계산을 하지 않고,[br /]한번 계산한 결과를 기억 ```jsx const key = 10; // key 변수의 값이 바뀌지 않는한 실제 계산은 반복되지 않는다. const rs = useMemo(() => { return 10 * 10 * 10 * 10 * 10; }, [key]); ``` # React.memo, props가 바뀌지 않으면[br /]리랜더링 하지않는 컴포넌트 만들 때 ```jsx function OrderList() { /* 구현 */ } // 이 함수를 실행하면 결국 OrderList가 실행된다. // 아래 함수는 OrderList 함수보다 덜 민감하게 실행된다. const MemoizedOrderList = React.memo(OrderList); function App() { return ; } ``` # useCallback, 리랜더링시마다 함수를 만들지 않고,[br /]한번만든 함수를 기억 ```jsx const a = () => 10 + 20; // 매 랜더링마다 실행, 즉 함수생성 const b = useCallback(() => 10 + 20, []); // 매 랜더링시마다, 함수생성을 하지 않음 ``` $$ --- ### 미션 1 : 개발에 유용한 사이트 소개 1. - [ ] 18-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 18-02 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 18-03 단계 - [영상 - 리액트풀스택, 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) --- ### 미션 2 : 알림기능 구현 1. - [ ] 19-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 19-02 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 19-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 19, 3강, Alert 컴포넌트 옵션작업](https://youtu.be/khnZ18rccus) - [CODEPEN](https://codepen.io/jangka44/pen/JjMeRzQ?editors=0010) 1. - [ ] 19-04 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 19-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 19, 5강, 어떤함수가 재실행되어도, 함수의 특정부분은 재실행하지 않게 하는 방법](https://youtu.be/E2UZEWv87kk) - [CODEPEN](https://codepen.io/jangka44/pen/YzYRpZp?editors=0012) 1. - [ ] 19-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 19, 6강, 전역변수를 사용해서 함수의 특정부분 재실행 방지](https://youtu.be/3AmbhBHiZm4) - [CODEPEN](https://codepen.io/jangka44/pen/ExoONwx?editors=0011) 1. - [ ] 19-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 19, 7강, state를 사용해서 함수의 특정부분 재실행 방지](https://youtu.be/CJD95IoCJmw) - [CODEPEN](https://codepen.io/jangka44/pen/GRywNOM?editors=0011) --- ### 미션 3 : useEffect를 사용하여 한번 알림된 내용이 다시 알림되지 않도록 1. - [ ] 20-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 20, 1강, useEffect를 사용하여 함수의 특정부분 재실행 방지](https://youtu.be/OCsQ5Qo1Yno) - [CODEPEN](https://codepen.io/jangka44/pen/NWXEbYL?editors=0011) 1. - [ ] 20-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 20, 2강, 의존성 배열 인자를 제거하면, 매번 실행은 되지만 타이밍이 늦어진다.](https://youtu.be/Rhf4FfdsYow) - [CODEPEN](https://codepen.io/jangka44/pen/rNpQWbV?editors=0011) 1. - [ ] 20-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 20, 3강, 타이팅이 늦어져야 하는 경우, useRef, useEffect 조합](https://youtu.be/zwNb4xXiMPs) - [CODEPEN](https://codepen.io/jangka44/pen/XWVyNLX?editors=0010) 1. - [ ] 20-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 20, 4강, 자식이 리랜더링 되는것은 부모 관계없고, 부모가 리랜더링되면 자식도 리랜더링 됨](https://youtu.be/pa8ktG16uyM) - [CODEPEN](https://codepen.io/jangka44/pen/oNpQBNe?editors=0011) 1. - [ ] 20-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 20, 5강, useEffect의 의존성배열을 이용해서, 실행민감도 조절](https://youtu.be/pekyPhH11QQ) - [CODEPEN](https://codepen.io/jangka44/pen/bGaQgEZ?editors=0011) --- ### 미션 4 : 다크모드 구현 1. - [ ] 21-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 21, 1강, 제이쿼리 방식의 다크모드](https://youtu.be/4AZDwS36SYE) - [CODEPEN](https://codepen.io/jangka44/pen/VwyVPMx) 1. - [ ] 21-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 21, 2강, 리액트 방식으로 변경](https://youtu.be/8QSZGobmMns) - [CODEPEN](https://codepen.io/jangka44/pen/yLpQgKO?editors=1010) --- ### 미션 5 : useMemo 사용하여 쓸데없는 연산 줄이기 1. - [ ] 22-01 단계 - [영상 - 리액트풀스택, 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/자바스크립트_수행시간_측정) 1. - [ ] 22-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 22, 2강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현](https://youtu.be/kJI5zATW-5g) - [CODEPEN](https://codepen.io/jangka44/pen/QWaJpvp?editors=1010) 1. - [ ] 22-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 22, 3강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 state 적용](https://youtu.be/vQi0v3vqvnw) - [CODEPEN](https://codepen.io/jangka44/pen/eYyQeqR?editors=0011) 1. - [ ] 22-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 22, 4강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useEffect 적용](https://youtu.be/9iORosswWT8) - [CODEPEN](https://codepen.io/jangka44/pen/rNpQpOY?editors=0011) 1. - [ ] 22-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 22, 5강, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useMemo 적용](https://youtu.be/4zKDjavRKyg) - [CODEPEN](https://codepen.io/jangka44/pen/vYpQpKw?editors=0011) --- ### 미션 6 : React.memo 사용하여 쓸데없는 연산 줄이기 1. - [ ] 23-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 23, 1강, 실행이 오래걸리는 PrimeNosCount 컴포넌트 구현](https://youtu.be/eTxpHlDhD6Q) - [CODEPEN](https://codepen.io/jangka44/pen/KKZrZRX?editors=0010) 1. - [ ] 23-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 23, 2강, useEffect로 속도 최적화](https://youtu.be/0zwhZAf2cEI) - [CODEPEN](https://codepen.io/jangka44/pen/abEQRZg?editors=0011) 1. - [ ] 23-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 23, 3강, useMemo로 속도 최적화](https://youtu.be/jBxrV5uIm40) - [CODEPEN](https://codepen.io/jangka44/pen/qBpQJRE?editors=0011) 1. - [ ] 23-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 23, 4강, React.memo로 속도 최적화](https://youtu.be/IAlFTp1Owk4) - [CODEPEN](https://codepen.io/jangka44/pen/WNdYapz?editors=0011) --- ### 미션 7 : useCallback 으로 어이없는 리랜더링 막기 1. - [ ] 24-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 24, 1강, useCallback을 사용하기 위한 환경을 만들기](https://youtu.be/IAlFTp1Owk4) - [CODEPEN](https://codepen.io/jangka44/pen/RwxqeYg?editors=0011) 1. - [ ] 24-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 24, 2강, useCallback을 사용하여 어이없는 리랜더링 막기](https://youtu.be/FSBsd0KPoFg) - [CODEPEN](https://codepen.io/jangka44/pen/YzYRJvZ?editors=0011) --- --- ## 03-04 시작 ## 03-04 : 멀티체크박스 관리 기능 구현 --- ### 미션 1 : 음식주문시 옵션기능 1. - [ ] 25-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 1강, 음식옵션 리스트](https://youtu.be/0v87Krorc_8) - [CODEPEN](https://codepen.io/jangka44/pen/popQxOG?editors=0010) 1. - [ ] 25-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 2강, 음식옵션 리스트아이템 체크기능](https://youtu.be/c5YssZTD0aI) - [CODEPEN](https://codepen.io/jangka44/pen/jOYQeeX?editors=0010) 1. - [ ] 25-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 3강, 리스트아이템을 전부 체크하면, 전체 토글 체크박스도 체크 되도록](https://youtu.be/KLKkB_NCPag) - [CODEPEN](https://codepen.io/jangka44/pen/dyJQgQN?editors=0010) 1. - [ ] 25-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 4강, 전체 토글 체크박스를 클릭시 그 상태가 전체에 반영](https://youtu.be/cRG0yOcBCk4) - [CODEPEN](https://codepen.io/jangka44/pen/dyJQgwN?editors=0010) 1. - [ ] 25-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 5강, new Array().fill 기능으로 초기상태를 쉽게 만들기](https://youtu.be/2Qtf2sy-Bbo) - [CODEPEN](https://codepen.io/jangka44/pen/XWVyxOJ?editors=0010) 1. - [ ] 25-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 6강, 옵션의 선택개수표시](https://youtu.be/sz5nvkdtkPE) - [CODEPEN](https://codepen.io/jangka44/pen/xxpQyBV?editors=0010) 1. - [ ] 25-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 7강, useMemo 사용하여 옵션과 상관없는 변화에 의한 쓸데없는 옵션관련계산 없애기](https://youtu.be/YvfwTsC_T9Y) - [CODEPEN](https://codepen.io/jangka44/pen/gOoQByv?editors=0010) 1. - [ ] 25-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 8강, OrderMainFood, OrderOptions 컴포넌트로 나눔](https://youtu.be/103mCiZSXmY) - [CODEPEN](https://codepen.io/jangka44/pen/KKZrGLY?editors=0010) 1. - [ ] 25-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 25, 9강, React.memo, useCallback 사용하여 각각의 컴포넌트 자체가 필요할 경우에만 리랜더링 되도록](https://youtu.be/7YNczkx8xlc) - [CODEPEN](https://codepen.io/jangka44/pen/GRywwgx?editors=0011) --- --- ## 03-05 시작 ## 03-05 : 정리 --- ### 미션 1 : 음식주문시 옵션기능 1. - [ ] 26-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 26, 1강, 체크박스, 셀렉트박스, 라디오버튼](https://youtu.be/6MteJEAZ1-I) - [CODEPEN](https://codepen.io/jangka44/pen/JjMeqNj?editors=1000) 1. - [ ] 26-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 26, 2강, 체크박스 다루기](https://youtu.be/4V-X_ZgEu58) - [CODEPEN](https://codepen.io/jangka44/pen/rNpQQrj?editors=0010) 1. - [ ] 26-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 26, 3강, 라디오버튼 다루기](https://youtu.be/OUgReM-arBo) - [CODEPEN](https://codepen.io/jangka44/pen/XWVyyyR?editors=0010) 1. - [ ] 26-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 26, 4강, 반복문으로 라디오버튼 출력 후 관리](https://youtu.be/UboPKu_xxts) - [CODEPEN](https://codepen.io/jangka44/pen/MWrzzZj?editors=0010) 1. - [ ] 26-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 26, 5강, 셀렉트박스 다루기](https://youtu.be/g6pY9YyT-Uk) - [CODEPEN](https://codepen.io/jangka44/pen/mdpQQov?editors=0010) 1. - [ ] 26-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 26, 6강, 음식주문폼에 체크박스, 라디오버튼 도입, 상황에 따른 상태생성 위치 설명](https://youtu.be/-t5svhXqqVQ) - [CODEPEN](https://codepen.io/jangka44/pen/JjMeeQL?editors=0010) --- --- ## 챕터미션, 03 - 이 문제를 풀 수 없다면, 다음챕터로 넘어가시면 안됩니다. ### 미션 1 - [영상 - 클래스101, 리액트풀스택, 챕터 3, 미션 1, 소개](https://youtu.be/QBVpTuQH9cA) #### 미션 1, 문제들 1. - [ ] 20-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 20, 5강, useEffect의 의존성배열을 이용해서, 실행민감도 조절](https://youtu.be/pekyPhH11QQ) - [CODEPEN](https://codepen.io/jangka44/pen/bGaQgEZ?editors=0011) 1. - [ ] 21-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 21, 2강, 리액트 방식으로 변경](https://youtu.be/8QSZGobmMns) - [CODEPEN](https://codepen.io/jangka44/pen/yLpQgKO?editors=1010) 1. - [ ] 26-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 26, 6강, 음식주문폼에 체크박스, 라디오버튼 도입, 상황에 따른 상태생성 위치 설명](https://youtu.be/-t5svhXqqVQ) - [CODEPEN](https://codepen.io/jangka44/pen/JjMeeQL?editors=0010) --- --- --- # 챕터 04 시작 # 챕터 04, MUI로 앱을 예쁘게 꾸미기 ## 04-01 시작 ## 04-01 : 개요 $$ppt title: PPT-01 # Material UI(MUI)는 유명한 리액트 UI 라이브러리 입니다. ![img](https://i.imgur.com/3y21gas.png) # 쉬운 커스터마이징 ![img](https://i.imgur.com/GkzsBaZ.png) # 쉬운 사용 ![img](https://i.imgur.com/KIXiCa8.png) ```jsx ``` $$ --- ### 미션 1 : 위캔 사용법 1. - [ ] 4-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 4-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 4, 2강, 위키나 블로그를 꼭 해야 하는 이유](https://youtu.be/3bpV2MCrZ_w) - [추천영상 - EO - 지방대 개발 비전공자가 배달의민족 리드 개발자가 되기까지](https://youtu.be/V9AGvwPmnZU) 1. - [ ] 4-03 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 4-04 단계 - [영상 - 리액트풀스택, 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/) --- ### 미션 2 : 개발자가 되려면, 틈틈이 공부해야하는 좋은 자료들 보기 1. - [ ] 5-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 5, 1강, 개발자가 되려면, 틈틈이 공부해야하는 좋은 자료들 소개](https://youtu.be/NS5rjG4J4CA) - [몰입코딩 - 수업자료 모음 - slog.gg/p/4680](https://slog.gg/p/4680) 1. - [ ] 5-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 5, 2강, 깔끔한 모던 자바스크립트 강좌 소개](https://youtu.be/yuaHpyMmE5s) - [드림코딩 모던 자바스크립트 기초 - slog.gg/p/4710](https://slog.gg/p/4710) 1. - [ ] 5-03 단계 - [영상 - 리액트풀스택, 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의 전반적인 내용을 이해한다. 1. - [ ] 5-04 단계 - [영상 - 리액트풀스택, 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) - 튜토리얼 끝 1. - [ ] 5-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 5, 5강, 벨로퍼트와 함께하는 모던 리액트](https://youtu.be/XFwW5P5V_qA) - [벨로퍼트와 함께하는 모던 리액트](https://react.vlpt.us/) 1. - [ ] 5-06 단계 - [영상 - 리액트풀스택, 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) --- ### 미션 3 : 함수를 만들면 좋은 이유 1. - [ ] 27-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 27, 1강, 할일추가 함수를 만들면 그 이후가 편함](https://youtu.be/UD23QU93Gzs) - [CODEPEN](https://codepen.io/jangka44/pen/oNpJoyo?editors=0010) 1. - [ ] 27-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 27, 2강, 할일삭제 함수를 만들면 그 이후가 편함](https://youtu.be/TnkRUwe8zvE) - [CODEPEN](https://codepen.io/jangka44/pen/Vwyqrgx?editors=0010) 1. - [ ] 27-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 27, 3강, 할일수정 함수를 만들면 그 이후가 편함](https://youtu.be/1JdfakNDgu0) - [CODEPEN](https://codepen.io/jangka44/pen/zYpyPVw?editors=0010) --- ### 미션 4 : 객체배열의 CRUD 1. - [ ] 28-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 28, 1강, 객체형식의 할일을 추가하는 기능 구현](https://youtu.be/m_QsH-pn3lc) - [CODEPEN](https://codepen.io/jangka44/pen/QWazaBd?editors=0010) 1. - [ ] 28-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 28, 2강, 할일추가시 할일번호가 자동으로 1씩 증가되도록, useState 이용](https://youtu.be/fBPkr9CMWCA) - [CODEPEN](https://codepen.io/jangka44/pen/MWrZrBE?editors=0010) 1. - [ ] 28-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 28, 3강, 할일추가시 할일번호가 자동으로 1씩 증가되도록, useRef 이용](https://youtu.be/jSofs_VGIwA) - [CODEPEN](https://codepen.io/jangka44/pen/QWazaVd?editors=0010) 1. - [ ] 28-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 28, 4강, 할일삭제](https://youtu.be/YBYjXDwRHOU) - [CODEPEN](https://codepen.io/jangka44/pen/mdpapoy?editors=0012) 1. - [ ] 28-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 28, 5강, 리스트에서 특정요소객체의 일부속성만 불변성 있게 변경하는 방법](https://youtu.be/cfhsd-UL0f8) - [CODEPEN](https://codepen.io/jangka44/pen/yLpGpGz?editors=0010) 1. - [ ] 28-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 28, 6강, 할일수정](https://youtu.be/lfMzbLcHbcY) - [CODEPEN](https://codepen.io/jangka44/pen/PoEXEMN?editors=0010) --- ### 미션 5 : 커스텀 훅 1. - [ ] 29-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 29, 1강, 할일리스트앱을 상위(로직) 컴포넌트와 하위(UI) 컴포넌트로 분리](https://youtu.be/CYihsqgego8) - [CODEPEN](https://codepen.io/jangka44/pen/KKZbQRB?editors=0010) 1. - [ ] 29-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 29, 2강, 로직중에서도 UI 컴포넌트와 밀접한 것들은 UI 컴포넌트로 이동](https://youtu.be/IUMjnEdFxl0) - [CODEPEN](https://codepen.io/jangka44/pen/MWrZQXZ?editors=0010) 1. - [ ] 29-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 29, 3강, 커스텀 훅으로 UI와 관계없는 핵심 로직과 상태들을 묶을 수 있다](https://youtu.be/GjHl7JWkGPY) - [CODEPEN](https://codepen.io/jangka44/pen/OJzrQox?editors=0010) 1. - [ ] 29-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 29, 4강, 커스텀 상태를 구조분해 하지않고, 바로 자식에게 넘김](https://youtu.be/xcae3HVSksw) - [CODEPEN](https://codepen.io/jangka44/pen/oNpJEJx?editors=0010) 1. - [ ] 29-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 29, 5강, 자식이 커스텀 상태를 구조분해 하지않고, 바로 사용](https://youtu.be/Jlnu1j9CI2s) - [CODEPEN](https://codepen.io/jangka44/pen/YzYdeBN?editors=0010) ## 04-02 시작 ## 04-02 : 머터리얼 UI 기초 --- ### 미션 1 : 할일 리스트 1. - [ ] 30-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 1강, 새 할일 폼 만들기](https://youtu.be/xm0c_qLcCAE) - [CODEPEN](https://codepen.io/jangka44/pen/jOYXeJv?editors=0010) 1. - [ ] 30-02 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 30-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 3강, 쉬운개발을 위해 날짜를 문장형태로 저장](https://youtu.be/Gq7_UfbFLPE) - [CODEPEN](https://codepen.io/jangka44/pen/GRyPwZy?editors=0010) 1. - [ ] 30-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 4강, TodoList, TodoListItem 컴포넌트로 분리](https://youtu.be/k4FHp0cruGI) - [CODEPEN](https://codepen.io/jangka44/pen/qBpLQNa?editors=0010) 1. - [ ] 30-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 5강, 삭제기능](https://youtu.be/Tv3QFqnrkkk) - [CODEPEN](https://codepen.io/jangka44/pen/vYpvQXe?editors=0010) 1. - [ ] 30-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 6강, 수정모드로 변경하는 버튼](https://youtu.be/5u6mxuzsDhg) - [CODEPEN](https://codepen.io/jangka44/pen/JjMwebR?editors=0010) 1. - [ ] 30-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 7강, 수정모드에서 입력상자와 수정취소버튼, 수정취소버튼 노출](https://youtu.be/_kMwHjqkuV4) - [CODEPEN](https://codepen.io/jangka44/pen/PoEXxWe?editors=0010) 1. - [ ] 30-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 8강, 수정모드 입력상자의 기본값 적용](https://youtu.be/xYHfKgKD9So) - [CODEPEN](https://codepen.io/jangka44/pen/abEPQXW?editors=0010) 1. - [ ] 30-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 9강, 수정모드취소시, 입력상자의 값이 기본값으로 돌아가도록](https://youtu.be/zUpWnr2qYiE) - [CODEPEN](https://codepen.io/jangka44/pen/NWXeEpe?editors=0010) 1. - [ ] 30-10 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 30, 10강, 수정기능](https://youtu.be/YzaoJFct-lc) - [CODEPEN](https://codepen.io/jangka44/pen/BaJvGdq?editors=0010) --- ### 미션 2 : MUI 소개 1. - [ ] 31-01 단계 - [영상 - 리액트풀스택, 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/) 1. - [ ] 31-02 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 31-03 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 31-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 31, 4강, 컴포넌트 API 확인 방법](https://youtu.be/N327r856K74) - [MUI - Autocomplete API](https://mui.com/material-ui/api/autocomplete/) 1. - [ ] 31-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 31, 5강, MUI 테마 커스터마이징 하는 방법](https://youtu.be/IsquAs9AFkE) - [CODEPEN](https://codepen.io/jangka44/pen/vYpbdMX?editors=0010) --- ### 미션 3 : MUI 컴포넌트 1. - [ ] 32-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 32-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 2강, AppBar](https://youtu.be/n25Lo6Vs_BU) - [CODEPEN](https://codepen.io/jangka44/pen/wvpNmzj?editors=0010) 1. - [ ] 32-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 3강, AppBar, fixed](https://youtu.be/u7fgPeqb_-Y) - [CODEPEN](https://codepen.io/jangka44/pen/RwxvMKg?editors=0010) 1. - [ ] 32-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 4강, Snackbar](https://youtu.be/tDJ7N3mrQyo) - [CODEPEN](https://codepen.io/jangka44/pen/xxpMjYY?editors=0010) 1. - [ ] 32-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 5강, Snackbar에 Alert 넣기](https://youtu.be/mBhRci5OPto) - [CODEPEN](https://codepen.io/jangka44/pen/xxpMjoJ?editors=0010) 1. - [ ] 32-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 6강, Backdrop](https://youtu.be/YrcqOW5T3dg) - [CODEPEN](https://codepen.io/jangka44/pen/MWrLXwO?editors=0010) 1. - [ ] 32-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 7강, Drawer](https://youtu.be/ZwlWsZJQrn4) - [CODEPEN](https://codepen.io/jangka44/pen/MWrLXaO?editors=0010) 1. - [ ] 32-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 32, 8강, TabMenu](https://youtu.be/3ShdESLr_VE) - [CODEPEN](https://codepen.io/jangka44/pen/xxpMzRm?editors=0010) --- --- ## 04-03 시작 ## 04-03 : 머터리얼 UI 적용 ### 미션 1 : 할일리스트에 MUI 적용 1. - [ ] 33-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 33-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 2강, 할일추가 폼](https://youtu.be/i8s6txcC_nY) - [CODEPEN](https://codepen.io/jangka44/pen/eYyojpj?editors=0010) 1. - [ ] 33-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 3강, 할일추가 폼 꾸미기](https://youtu.be/5AyNGI5N0wA) - [CODEPEN](https://codepen.io/jangka44/pen/xxpeJwB?editors=0010) 1. - [ ] 33-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 4강, 할일리스트](https://youtu.be/qeibYJSJrBY) - [CODEPEN](https://codepen.io/jangka44/pen/QWaPBGO?editors=0010) 1. - [ ] 33-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 5강, 테스트 데이터 생성, 할일 3개](https://youtu.be/cSWmVq9pcmM) - [CODEPEN](https://codepen.io/jangka44/pen/gOoyjLw?editors=0010) 1. - [ ] 33-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 6강, 할일리스트 꾸미기, Chip 적용](https://youtu.be/4C-F7dyf-to) - [CODEPEN](https://codepen.io/jangka44/pen/zYpXLrM?editors=0010) 1. - [ ] 33-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 7강, 할일리스트 꾸미기, 본문 꾸미기](https://youtu.be/3RUOwqRKy3w) - [CODEPEN](https://codepen.io/jangka44/pen/NWXmBRv?editors=0010) 1. - [ ] 33-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 33, 8강, 멀티라인 텍스트 필드](https://youtu.be/DYA_spOxzWA) - [CODEPEN](https://codepen.io/jangka44/pen/gOoyqBb?editors=0010) --- ### 미션 2 : MUI와 테일윈드 같이 사용 1. - [ ] 34-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 1강, 테일윈드 느낌표 기능으로 mui에서 정해놓은 스타일 수정, Chip 상단여백 조절](https://youtu.be/4-JA30Ozn8A) - [CODEPEN](https://codepen.io/jangka44/pen/MWrRLZE?editors=0010) 1. - [ ] 34-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 2강, 할일리스트 최신순으로 정렬](https://youtu.be/InfZ-YiV4rg) - [CODEPEN](https://codepen.io/jangka44/pen/MWrRLZE?editors=0010) 1. - [ ] 34-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 3강, MUI로 글자색을 primary 색상으로 변경](https://youtu.be/of6Tu1seOF8) - [CODEPEN](https://codepen.io/jangka44/pen/jOYRdow?editors=0010) 1. - [ ] 34-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 4강, CSS 변수](https://youtu.be/of6Tu1seOF8) - [CODEPEN](https://codepen.io/jangka44/pen/XWVQQam?editors=1100) 1. - [ ] 34-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 5강, 자바스크립트에서 정의된 색상을 CSS에서 사용하는 방법](https://youtu.be/InfZ-YiV4rg) - [CODEPEN](https://codepen.io/jangka44/pen/ExoJJby) 1. - [ ] 34-06 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 34-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 7강, 테일윈드의 다양한 조건적 스타일링](https://youtu.be/UJNCGSR_EgQ) - [CODEPEN](https://codepen.io/jangka44/pen/NWXmmmZ?editors=1000) 1. - [ ] 34-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 34, 8강, mui 테마 색상들을 CSS에서 사용할 수 있도록, CSS 변수화](https://youtu.be/7dF_Nwrm34M) - [CODEPEN](https://codepen.io/jangka44/pen/KKZYLKd?editors=0011) --- --- ## 04-04 시작 ## 04-04 : 테일윈드 적용 ### 미션 1 : 할일리스트 좌측에 체크박스, 우측 옵션버튼 1. - [ ] 35-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 1강, 레이아웃](https://youtu.be/guVIuTlDVZc) - [CODEPEN](https://codepen.io/jangka44/pen/LYeoYXV?editors=0010) 1. - [ ] 35-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 2강, 좌측에 버튼, 버튼내용물을 수직상단으로 정렬](https://youtu.be/KnYxtvPdBxk) - [CODEPEN](https://codepen.io/jangka44/pen/WNdBNPJ?editors=0010) - [테일윈드](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) 1. - [ ] 35-03 단계 - [영상 - 리액트풀스택, 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=0010) 1. - [ ] 35-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 4강, 체크박스 크기, 체크색상, 언체크색상](https://youtu.be/Q-iHVqm4OW0) - [CODEPEN](https://codepen.io/jangka44/pen/popmoMq?editors=0010) 1. - [ ] 35-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 5강, 우측옵션버튼 꾸미기](https://youtu.be/sjmFEDBfAyU) - [CODEPEN](https://codepen.io/jangka44/pen/OJzYPJz?editors=0010) 1. - [ ] 35-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 6강, 우측옵션버튼 border-radius 세부조정](https://youtu.be/PgduEWG3LsI) - [CODEPEN](https://codepen.io/jangka44/pen/gOoJbbX?editors=0010) 1. - [ ] 35-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 7강, 좌측버튼의 내용물과 우측버튼의 내용물에 고정높이를 주어서 균형을 맞춤](https://youtu.be/cm06UPhOOKM) - [CODEPEN](https://codepen.io/jangka44/pen/ZEvNYGN?editors=0010) 1. - [ ] 35-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 8강, 할일본문의 상단, 하단에 margin](https://youtu.be/KnEYrRvT07Q) - [CODEPEN](https://codepen.io/jangka44/pen/rNpgaVX?editors=0010) 1. - [ ] 35-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 9강, 좌측버튼 우측에 divider 넣기](https://youtu.be/yammX2kqGkU) - [CODEPEN](https://codepen.io/jangka44/pen/ExozaPj?editors=0010) 1. - [ ] 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) 1. - [ ] 35-11 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 35, 11강, 모바일화면에서 화면축소방지](https://youtu.be/jjRED3RQRZE) - [CODEPEN](https://codepen.io/jangka44/pen/KKZLdxe?editors=0010) --- --- ## 04-05 시작 ## 04-05 : 정리 ### 미션 1 : 옵션 드로어 1. - [ ] 36-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 36-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 2강, 각각의 컴포넌트로 분리](https://youtu.be/CELx7j_PoHo) - [CODEPEN](https://codepen.io/jangka44/pen/oNpRgBB?editors=0010) 1. - [ ] 36-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 3강, 옵션버튼 누르면 드로어 나오도록](https://youtu.be/DsYI2GDFdOY) - [CODEPEN](https://codepen.io/jangka44/pen/NWXVPpE?editors=0010) 1. - [ ] 36-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 4강, 드로어관련된 가독성 개선](https://youtu.be/EIpeMb0n1ek) - [CODEPEN](https://codepen.io/jangka44/pen/ZEvNYyz?editors=0010) 1. - [ ] 36-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 5강, 옵션드로어 커스텀 훅](https://youtu.be/VXY5cd6b_NQ) - [CODEPEN](https://codepen.io/jangka44/pen/wvpbBeE?editors=0010) 1. - [ ] 36-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 6강, TodoOptionDrawer 컴포넌트](https://youtu.be/8qnxL-pqg6A) - [CODEPEN](https://codepen.io/jangka44/pen/zYpQxEr?editors=0010) 1. - [ ] 36-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 7강, SwipableDrawer로 교체](https://youtu.be/jej4jwqCeoE) - [CODEPEN](https://codepen.io/jangka44/pen/dyJEPVR?editors=0010) 1. - [ ] 36-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 8강, 드로어의 내용으로 리스트 넣기](https://youtu.be/lVMeLZXyLBQ) - [CODEPEN](https://codepen.io/jangka44/pen/ExozabK?editors=0010) 1. - [ ] 36-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 9강, items-baseline, line-height 관련 실험](https://youtu.be/W2Hqzg0fhOg) - [CODEPEN](https://codepen.io/jangka44/pen/vYpwERp?editors=1100) 1. - [ ] 36-10 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 36, 10강, 수정, 삭제버튼에 아이콘 넣기](https://youtu.be/HqNj66KoUQM) - [CODEPEN](https://codepen.io/jangka44/pen/yLpWyjB?editors=0110) --- ### 미션 2 : 수정, 삭제기능 1. - [ ] 37-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 37-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 2강, 수정을 위한 모달](https://youtu.be/VZ8lzh42nJ4) - [CODEPEN](https://codepen.io/jangka44/pen/abErOJE?editors=0010) 1. - [ ] 37-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 3강, 수정버튼을 누르면 모달이 나오도록](https://youtu.be/JZjvCkG0lP8) - [CODEPEN](https://codepen.io/jangka44/pen/XWVwbRa?editors=0010) 1. - [ ] 37-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 4강, 할일수정모달 커스텀 훅](https://youtu.be/PMMRi2T9gCw) - [CODEPEN](https://codepen.io/jangka44/pen/NWXVqvq?editors=0010) 1. - [ ] 37-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 5강, 할일수정모달을 별도의 컴포넌트로 분리](https://youtu.be/GyoSy10svjU) - [CODEPEN](https://codepen.io/jangka44/pen/yLpWNoV?editors=0010) 1. - [ ] 37-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 6강, 할일수정 폼](https://youtu.be/sWVWZs-dv2M) - [CODEPEN](https://codepen.io/jangka44/pen/yLpWNoV?editors=0010) 1. - [ ] 37-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 7강, 할일수정 폼 처리](https://youtu.be/gEfMRusvKUI) - [CODEPEN](https://codepen.io/jangka44/pen/YzYbXYB?editors=0010) 1. - [ ] 37-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 8강, 할일삭제 전에 confirm](https://youtu.be/WIw0ujyTTBg) - [CODEPEN](https://codepen.io/jangka44/pen/MWrdwGm?editors=0010) 1. - [ ] 37-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 9강, 할일수정이 취소되거나 완료되면, 드로어까지 종료](https://youtu.be/3rAF701059M) - [CODEPEN](https://codepen.io/jangka44/pen/bGaydjE?editors=0010) --- --- ## 챕터미션, 04 - 이 문제를 풀 수 없다면, 다음챕터로 넘어가시면 안됩니다. ### 미션 1 - [영상 - 클래스101, 리액트풀스택, 챕터 4, 미션 1, 소개](https://youtu.be/_DYLUFJM_do) #### 미션 1, 문제들 1. - [ ] 37-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 37, 9강, 할일수정이 취소되거나 완료되면, 드로어까지 종료](https://youtu.be/3rAF701059M) - [CODEPEN](https://codepen.io/jangka44/pen/bGaydjE?editors=0010) --- --- --- # 챕터 05 시작 # 챕터 05, 리코일로 상태관리하기 ## 05-01 시작 ## 05-01 : 개요 ### 미션 1 : 스낵바 알림을 만들어주세요. 1. - [ ] 38-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 38, 1강, 스낵바 알림](https://youtu.be/WixW16XMiog) - [CODEPEN](https://codepen.io/jangka44/pen/ZEvdOZq?editors=0010) 1. - [ ] 38-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 38, 2강, NoticeSnackbar 컴포넌트](https://youtu.be/lAySTxPTxoo) - [CODEPEN](https://codepen.io/jangka44/pen/jOYjroz?editors=0010) 1. - [ ] 38-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 38, 3강, useNoticeSnackbarState 커스텀 훅](https://youtu.be/0f-_BPKjtJk) - [CODEPEN](https://codepen.io/jangka44/pen/popXEEx?editors=0010) 1. - [ ] 38-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 38, 4강, 할일의 추가/수정/삭제에 스낵바 알림 적용](https://youtu.be/RX_uRm-GAqo) - [CODEPEN](https://codepen.io/jangka44/pen/MWrMjpL?editors=0010) --- ### 미션 2 : VS CODE 설치 1. - [ ] 39-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 39, 1강, VS CODE 깔끔한 삭제](https://youtu.be/AUS7oYvIdNk) - [바람코코 - VScode 초기화 시키기(완전 삭제)](https://oneday-haru.tistory.com/5) 1. - [ ] 39-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 39, 2강, VS CODE 설치](https://youtu.be/3mCOAilXw3c) - [VS CODE 다운로드](https://code.visualstudio.com/) 1. - [ ] 39-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 39, 3강, 필수 플러그인 설치](https://youtu.be/VXrQRK-GUbI) 1. - [ ] 39-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 39, 4강, 필수 세팅](https://youtu.be/LDEgharTqCg) 1. - [ ] 39-05 단계 - [영상 - 리액트풀스택, 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) --- ### 미션 3 : nvm 으로 nodejs 설치 1. - [ ] 40-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 40, 1강, nvm 설치](https://youtu.be/iiut40i8t50) 1. - [ ] 40-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 40, 2강, nvm을 이용해서 nodejs를 설치](https://youtu.be/bz8niXeTfV4) ## 05-02 시작 ## 05-02 : 상태관리 기초 ### 미션 1 : 상태관리가 필요한 이유 #### 부모의 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 $$ 1. - [ ] 43-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 43, 1강, 안보이는 것과 없는것은 다르다](https://youtu.be/gJpYAtFVlY4) - [CODEPEN](https://codepen.io/jangka44/pen/dyJBxqO?editors=0010) 1. - [ ] 43-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 43, 2강, useState의 실행이 끊임없이 계속 이어져야 데이터가 보존된다.](https://youtu.be/XlAIDGa0jdE) - [CODEPEN](https://codepen.io/jangka44/pen/NWXZQQE?editors=0010) 1. - [ ] 43-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 43, 3강, 상태관리도구가 제공하는 주요기능 중 하나는 값 유지 입니다](https://youtu.be/hrvrTriNR78) --- ### 미션 2 : create-react-app@5 로 리액트 프로젝트 세팅 1. - [ ] 41-01 단계 - [영상 - 리액트풀스택, 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` 1. - [ ] 41-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 41, 2강, 쓸데없는 프로젝트 제거](https://youtu.be/sNwdppA7TmI) - [COMMIT - 쓸데없는 파일과 소스코드들 삭제](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_1/commit/7588a5c490161c3f5f3b964a23a699905721bb88) --- ## 05-03 시작 ## 05-03 : 리코일 기초 ## 미션 1 : 리코일 기초 1. - [ ] 44-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 1강, 리코일 개요](https://youtu.be/tCAeR1xt2ww) - [리코일js - recoiljs.org/ko/](https://recoiljs.org/ko/) 1. - [ ] 44-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 2강, 리코일이 필요한 상황 만들기, 페이지1, 페이지2](https://youtu.be/DkBUAyg5MjY) - [CODEPEN](https://codepen.io/jangka44/pen/RwxXboM?editors=0010) 1. - [ ] 44-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 3강, 리코일이 필요한 상황 만들기, 각 페이지에서 no값을 유지해야 하는 상황](https://youtu.be/HjwdSbKROtA) - [CODEPEN](https://codepen.io/jangka44/pen/GRyVKrG?editors=0010) 1. - [ ] 44-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 4강, atom을 사용해서 각 페이지의 no값을 전역변수 화](https://youtu.be/WBm2gOW8Nj0) - [CODEPEN](https://codepen.io/jangka44/pen/wvpVwgR?editors=0010) 1. - [ ] 44-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 5강, useRecoilValue, useSetRecoilState](https://youtu.be/Y0uTOypX7sY) - [CODEPEN](https://codepen.io/jangka44/pen/oNpKvoo?editors=0010) 1. - [ ] 44-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 6강, 비슷한 atom을 여러개 만들어야 하는 상황](https://youtu.be/eEuG0KqYStk) - [CODEPEN](https://codepen.io/jangka44/pen/PoEMYEX?editors=0010) 1. - [ ] 44-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 7강, 비슷한 atomFamily로 비슷한 atom을 동적으로 생성](https://youtu.be/e6NG0EqRFkE) - [CODEPEN](https://codepen.io/jangka44/pen/KKZOPQw?editors=0010) 1. - [ ] 44-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 8강, 커스텀 훅 도입, 훅에서 atom 사용](https://youtu.be/WWjB2wVp1EM) - [CODEPEN](https://codepen.io/jangka44/pen/VwyoZQX?editors=0010) 1. - [ ] 44-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 44, 9강, 훅에서 atomFamily를 사용하여, 각 페이지마다 고유의 값 유지가 안되는 버그 수정](https://youtu.be/eSuVxZ4_fZ0) - [CODEPEN](https://codepen.io/jangka44/pen/eYyqOKd?editors=0010) ## 05-04 시작 ## 05-04 : 리코일 적용 ### 미션 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 $$ #### 상태관리툴의 유무에 따른 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 주입 $$ 1. - [ ] 45-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 45, 1강, 현재 컴포넌트 구조](https://youtu.be/ngY_iBVDl9Y) - [CODEPEN - 38-4강](https://codepen.io/jangka44/pen/MWrMjpL?editors=0010) 1. - [ ] 45-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 45, 2강, todosState에 리코일 적용계획](https://youtu.be/gIOAkiiEFYM) - [CODEPEN - 38-4강](https://codepen.io/jangka44/pen/MWrMjpL?editors=0010) 1. - [ ] 45-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 45, 3강, 커스텀 훅관련 문구 state를 status로 변경](https://youtu.be/T0Zzu3pT1kk) - [CODEPEN](https://codepen.io/jangka44/pen/gOoVOep?editors=0010) 1. - [ ] 45-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 45, 4강, 리코일 import, todosAtom 도입](https://youtu.be/tPQASy4YXNM) - [CODEPEN](https://codepen.io/jangka44/pen/JjMgjvw?editors=0010) 1. - [ ] 45-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 45, 5강, lastTodoIdAtom 도입](https://youtu.be/cs1gSWA-_WA) - [CODEPEN](https://codepen.io/jangka44/pen/LYewNod?editors=0010) 1. - [ ] 45-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 45, 6강, NewTodoForm에서 직접 todosStatus를 주입받음](https://youtu.be/CISubqubKpY) - [CODEPEN](https://codepen.io/jangka44/pen/abEemZr?editors=0010) 1. - [ ] 45-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 45, 7강, TodoList에서 직접 todosStatus를 주입받음](https://youtu.be/DCvh1Herwdc) - [CODEPEN](https://codepen.io/jangka44/pen/eYyqdEx?editors=0010) 1. - [ ] 45-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 45, 8강, EditTodoModal에서 직접 todosStatus를 주입받음](https://youtu.be/Ac5FBDQlc2Q) - [CODEPEN](https://codepen.io/jangka44/pen/JjMgRMo?editors=0010) ## 05-05 시작 ## 05-05 : 리코일 퍼시스트 ### 미션 1, 리코일 퍼시스트 기초 1. - [ ] 46-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 46, 1강, 리코일 퍼시스트가 필요한 상황](https://youtu.be/3_1SQPpIgDI) - [CODEPEN - 44-4강](https://codepen.io/jangka44/pen/wvpVwgR?editors=0010) 1. - [ ] 46-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 46, 2강, 로컬스토리지](https://youtu.be/XXEFjr50qNY) - [CODEPEN](https://codepen.io/jangka44/pen/rNpXMQX?editors=0012) 1. - [ ] 46-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 46, 3강, 로컬스토리지에 객체 저장](https://youtu.be/ACFAUIQcEAo) - [CODEPEN](https://codepen.io/jangka44/pen/GRyVjaO?editors=0012) 1. - [ ] 46-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 46, 4강, 리코일 퍼시스트](https://youtu.be/NUwncbVTdRE) - [CODEPEN](https://codepen.io/jangka44/pen/QWaeKXJ?editors=0010) --- ### 미션 2, 리코일 퍼시스트 적용 1. - [ ] 47-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 47-02 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 47-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 47, 3강, 스토리지 키 분리](https://youtu.be/ux9tL-2wJcw) - [CODEPEN](https://codepen.io/jangka44/pen/rNpXjZv?editors=0010) --- --- ## 05-06 시작 ## 05-06 : 정리 ### 미션 1, noticeSnackbarStatus에 리코일 적용 #### 상태관리툴의 유무에 따른 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 주입 $$ 1. - [ ] 48-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 48, 1강, noticeSnackbarStatus에 리코일 적용계획](https://youtu.be/wCZCzDlmQQI) - [CODEPEN - 47-3강](https://codepen.io/jangka44/pen/rNpXjZv?editors=0010) 1. - [ ] 48-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 48, 2강, noticeSnackbarAtom 도입](https://youtu.be/0BbU-JluKgw) - [CODEPEN](https://codepen.io/jangka44/pen/QWaedYg?editors=0010) 1. - [ ] 48-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 48, 3강, props 드릴링을 하지 않고, noticeSnackbarAtom를 필요로하는 컴폰너트에서 끌어다가 사용](https://youtu.be/8e-9D_u3mMY) - [CODEPEN](https://codepen.io/jangka44/pen/OJzKpVW?editors=0010) --- ### 미션 2 GIT 기초 1. - [ ] 42-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 42, 1강, GIT 설치](https://youtu.be/7J1WNMt0Jvw) - [GIT - git-scm.com](https://git-scm.com/) - git 클라이언트 업그레이트 명령어 : git update-git-for-windows 1. - [ ] 42-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 42, 2강, GITHUB 가입](https://youtu.be/u4MUBAKx8rk) - [GITHUB - github.com](https://github.com/) 1. - [ ] 42-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 42, 3강, 필수적으로 수행해야할 GIT 튜토리얼 소개, slog.gg/p/1229](https://youtu.be/_8sftMiT1us) - [GIT 튜토리얼 - slog.gg/p/1229](https://slog.gg/p/1229) --- --- ## 챕터미션, 05 - 이 문제를 풀 수 없다면, 다음챕터로 넘어가시면 안됩니다. ### 미션 1 - [영상 - 클래스101, 리액트풀스택, 챕터 5, 미션 1, 소개](https://youtu.be/Kuu9joQYrbg) #### 미션 1, 문제들 1. - [ ] 48-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 48, 3강, props 드릴링을 하지 않고, noticeSnackbarAtom를 필요로하는 컴폰너트에서 끌어다가 사용](https://youtu.be/8e-9D_u3mMY) - [CODEPEN](https://codepen.io/jangka44/pen/OJzKpVW?editors=0010) --- --- --- # 챕터 06 시작 # 챕터 06, 리액트라우터로 한 페이지에서 벗어나기 ## 06-01 시작 ## 06-01 : 개요 $$ppt title: PPT-06-01 # 리액트는 SPA를 만드는 툴 입니다.--o--t=1 # SPA는 Single Page Application의 약자입니다.--o--t=1 # 리액트에서 Multi Page Application을 만들려면,[br /]추가적인 구현이 필요합니다.--o--t=1 # 추가적인 구현을 직접 만들 수 도 있고,[br /]리액트라우터와 같은[br /]미리 만들어진 라이브러리를 사용해도 됩니다.--o--t=1 $$ --- ### 미션 1 : 페이지이동을 직접구현해 봅니다. 1. - [ ] 49-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 49, 1강, url 값의 변화에 따라 page가 바뀌도록](https://youtu.be/pvYu1rHSuaE) - [CODEPEN](https://codepen.io/jangka44/pen/XWVvYLM?editors=0010) 1. - [ ] 49-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 49, 2강, 디지인 꾸미기](https://youtu.be/IT1MsLEohUY) - [CODEPEN](https://codepen.io/jangka44/pen/oNpKyrq?editors=0010) 1. - [ ] 49-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 49, 3강, 페이지 이동기록 히스토리](https://youtu.be/GIYTriPQPQ8) - [CODEPEN](https://codepen.io/jangka44/pen/LYewBPd?editors=0010) 1. - [ ] 49-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 49, 4강, 이전 페이지로 이동, 다음 페이지로 이동](https://youtu.be/_E7pI840QPY) - [CODEPEN](https://codepen.io/jangka44/pen/Exoqpjw?editors=0010) 1. - [ ] 49-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 49, 5강, 현재 위치를 보여주는 히스토리 지도](https://youtu.be/V_Lpcmuellg) - [CODEPEN](https://codepen.io/jangka44/pen/abEejvV?editors=0010) 1. - [ ] 49-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 49, 6강, 히스토리 이동중에 새 페이지로 이동하면, 기존 기록의 일부는 없어집니다.](https://youtu.be/SPUvimXJH68) - [CODEPEN](https://codepen.io/jangka44/pen/GRyVBpe?editors=0010) --- --- ## 06-02 시작 ## 06-02 : 리액트 라우터 기초 ### 미션 1 : 리액트 라우터 기초 사용법 익히기 1. - [ ] 50-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 1강, 리액트라우터 소개](https://youtu.be/JlO6sZs1JxY) - [리액트라우터 - reactrouter.com](https://reactrouter.com/) 1. - [ ] 50-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 2강, 리액트라우터 라이브러리 불러오기](https://youtu.be/NKW08WykloM) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/MWQgNYv?editors=0010) 1. - [ ] 50-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 3강, 페이지 2개를 만들고 라우팅](https://youtu.be/6AzsAwZE7oE) - [CODEPEN](https://codepen.io/jangka44/pen/vYdBxXE?editors=0010) 1. - [ ] 50-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 4강, useLocation을 이용해서 현재 주소에 접근](https://youtu.be/zwYfD7NtuXQ) - [CODEPEN](https://codepen.io/jangka44/pen/qBxWeOQ?editors=0010) 1. - [ ] 50-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 5강, NavLink를 이용한 페이지이동](https://youtu.be/1bIWBkq8dYM) - [CODEPEN](https://codepen.io/jangka44/pen/JjpPgGe?editors=0110) 1. - [ ] 50-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 6강, NavLink의 className 속성에 함수를 사용해서, 버튼의 활성화기능을 켜기](https://youtu.be/03Kk1-wnllY) - [CODEPEN](https://codepen.io/jangka44/pen/qBxWeNL?editors=0010) 1. - [ ] 50-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 7강, useParams를 이용해서 url 파라미터 얻기](https://youtu.be/hwWzgYJ2uYU) - [CODEPEN](https://codepen.io/jangka44/pen/QWQWjLR?editors=0010) 1. - [ ] 50-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 50, 8강, 뒤로가기 버튼](https://youtu.be/BZQ671Rc7OQ) - [CODEPEN](https://codepen.io/jangka44/pen/RwQwWaJ?editors=0010) --- --- ## 06-03 시작 ## 06-03 : 리액트 라우터 적용 ### 미션 1 : 간단한 멀티페이지 할일리스트 1. - [ ] 51-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 1강, 할일리스트, 할일등록페이지 라우팅](https://youtu.be/emmJhBzgFMA) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/qBxBJMN?editors=0010) 1. - [ ] 51-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 2강, 할일작성 폼](https://youtu.be/xTHPIuFXFR4) - [CODEPEN](https://codepen.io/jangka44/pen/vYdYVVZ?editors=0010) 1. - [ ] 51-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 3강, 할일작성 폼 처리](https://youtu.be/c6ChFGeEoNo) - [CODEPEN](https://codepen.io/jangka44/pen/GRQRYwO?editors=0010) 1. - [ ] 51-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 4강, 상단 내비바에 리스트, 작성페이지 링크](https://youtu.be/gdUYeJCv2dk) - [CODEPEN](https://codepen.io/jangka44/pen/KKQKGjY?editors=0010) 1. - [ ] 51-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 5강, 할일리스트](https://youtu.be/8_Yo7441auc) - [CODEPEN](https://codepen.io/jangka44/pen/XWZWxvm?editors=0010) 1. - [ ] 51-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 6강, todosAtom 도입하여 페이지 이동시에도, 할일들 유지](https://youtu.be/mrjQXNYBNIA) - [CODEPEN](https://codepen.io/jangka44/pen/qBxBQEr?editors=0010) 1. - [ ] 51-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 7강, lastTodoIdRef 도입하여 할일번호에 자동넘버링](https://youtu.be/SwV6iRhuk-0) - [CODEPEN](https://codepen.io/jangka44/pen/NWyWEqo?editors=0010) 1. - [ ] 51-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 8강, 할일삭제](https://youtu.be/BFiH0PHyLlc) - [CODEPEN](https://codepen.io/jangka44/pen/YzezRyE?editors=0010) 1. - [ ] 51-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 9강, 할일 수정모드](https://youtu.be/jtDcVr9y18I) - [CODEPEN](https://codepen.io/jangka44/pen/yLvLQJL?editors=0010) 1. - [ ] 51-10 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 10강, 할일 수정폼](https://youtu.be/yMVBEwd-YRM) - [CODEPEN](https://codepen.io/jangka44/pen/xxYxQEq?editors=0010) 1. - [ ] 51-11 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 11강, 할일 수정폼 처리](https://youtu.be/Pp_PA4FyFGs) - [CODEPEN](https://codepen.io/jangka44/pen/OJQJaba?editors=0010) 1. - [ ] 51-12 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 51, 12강, 할일수정을 별도의 페이지에서 처리하도록](https://youtu.be/gavenZgvhEw) - [CODEPEN](https://codepen.io/jangka44/pen/dydyQvJ?editors=0010) --- --- ## 06-04 시작 ## 06-04 : 정리 $$ppt title: PPT-06-04 # 리액트는 SPA를 만드는 툴 입니다.--o--t=1 # SPA는 Single Page Application의 약자입니다.--o--t=1 # 리액트에서 Multi Page Application을 만들려면,[br /]추가적인 구현이 필요합니다.--o--t=1 # 추가적인 구현을 직접 만들 수 도 있고,[br /]리액트라우터와 같은[br /]미리 만들어진 라이브러리를 사용해도 됩니다.--o--t=1 # 멀티페이지를 적용하기 시작하면[br /]바로 문제가 되는것이, 상태의 불연속성입니다.--o--t=1 # 멀티페이지를 적용하기 시작하면[br /]상태를 따로 관리해주는, 상태관리툴이 필수입니다.--o--t=1 $$ --- ### 미션 1 : immer 적용하기 1. - [ ] 52-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 52-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 52, 2강, immer를 할일삭제에 적용하기](https://youtu.be/Y_JnfQshew8) - [CODEPEN](https://codepen.io/jangka44/pen/PoQqZmr?editors=0010) 1. - [ ] 52-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 52, 3강, immer를 할일추가에 적용하기](https://youtu.be/L9zF0ZIBAr0) - [CODEPEN](https://codepen.io/jangka44/pen/eYVNJGR?editors=0010) --- --- ## 챕터미션, 06 - 이 문제를 풀 수 없다면, 다음챕터로 넘어가시면 안됩니다. ### 미션 1 - [영상 - 클래스101, 리액트풀스택, 챕터 6, 미션 1, 소개](https://youtu.be/3Dnq7yyX-SE) #### 미션 1, 문제들 1. - [ ] 52-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 52, 3강, immer를 할일추가에 적용하기](https://youtu.be/L9zF0ZIBAr0) - [CODEPEN](https://codepen.io/jangka44/pen/eYVNJGR?editors=0010) --- --- --- # 챕터 07 시작 # 챕터 07, 스쿼트 챌린지 앱 구현 ## 07-01 : 시작 ## 07-01 : 개요 $$ppt title: PPT-07-01 # VS CODE로 리액트 프로젝트를 수행하기 위한 세팅법--o--t=1 # 윈도우 키 누른 후, [span style="color:red;"]cmd[/span] 입력 후 [span style="color:red;"]엔터를[/span][br /]누르면 명령 프롬프트 창이 뜹니다.--o--t=1 # [span style="color:red;"]cd 폴더명\폴더명[/span] 명령어를 이용해서[br /]원하는 폴더로 이동할 수 있습니다.--o--t=1 # [span style="color:red;"]npx create-react-app@5 exam1[/span][br /]명령으로 exam1 이라는 폴더에[br /]새 리액트 프로젝트를 세팅할 수 있습니다.--o--t=1 # [span style="color:red;"]cd exam1[/span] 명령으로 해당 폴더로 들어갈 수 있습니다.--o--t=1 # [span style="color:red;"]code .[/span] 명령으로 해당 폴더를[br /]VSCODE로 열 수 있습니다.--o--t=1 $$ --- ### 미션 1 : 리액트 프로젝트를 GITHUB에 저장, 리코일, 리액트 라우터 도입 1. - [ ] 53-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 53-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 53, 2강, 쓸데없는 파일들 제거](https://youtu.be/GiJDnxjXA6E) - [COMMIT](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_2/commit/04cc12d2b61d110a132b9357600cd6706f695bc4) 1. - [ ] 53-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 53, 3강, Root 컴포넌트 도입](https://youtu.be/990YuS6JPqk) - [COMMIT](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_2/commit/78f4c6fee98174bd43f73245e0abc3d09de21718) 1. - [ ] 53-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 53, 4강, ListPage, WritePage 추가](https://youtu.be/Yh3FNaWsby8) - [COMMIT](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_2/commit/91b7f6dfbf77d9df1c0d9cdea46a1ee10f7ec2b9) 1. - [ ] 53-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 53, 5강, 리액트라우터 도입](https://youtu.be/h2u_ozuLB8k) - [COMMIT](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_2/commit/ea9fe8c34c6bf314e23ecd83fc6378aba1606005) 1. - [ ] 53-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 53, 6강, 테일윈드 도입](https://youtu.be/MqQRWyYK6Sk) - [COMMIT](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_2/commit/7cd7e2cbb12e38612e097ceb6039f585b4d94b68) 1. - [ ] 53-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 53, 7강, 리코일 도입](https://youtu.be/BsUNA1zL0Ig) - [COMMIT](https://github.com/jhs512/class101_react_fullstack_exam__cra_app_2/commit/d1de09d9d0ce018b36691f11e40c47bae69f84d9) --- ### 미션 2 : GIT BASH로 배우는 리눅스 기초 명령어 1. - [ ] 54-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 54, 1강, 파일 생성, 삭제, 수정](https://youtu.be/MhF5dtGAtk4) - 명령어 - touch a.txt : a.txt 파일생성 - echo 하이 : 모니터에 `하이` 출력 - echo 하이 > a.txt : a.txt파일 생성하고 그 안에 `하이` 출력 - rm a.txt : a.txt 삭제 1. - [ ] 54-02 단계 - [영상 - 리액트풀스택, 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 종료 1. - [ ] 54-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 54, 3강, 리눅스 명령어 필수 명령어 강좌 소개](https://youtu.be/ECuMjmGJ8Qs) - [리눅스 필수 명령어 강좌 - slog.gg/p/1381](https://slog.gg/p/1381) --- --- ## 07-02 : 시작 ## 07-02 : 스쿼트 챌린지 앱 구현 1 ### 미션 1 : 스쿼트 챌린지 앱, 로직위주로 기능 만들기 1. - [ ] 55-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 55, 1강, 리액트라우터 세팅](https://youtu.be/SqROmCGXA48) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/jangka44/pen/yLvNqdy?editors=0010) 1. - [ ] 55-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 55, 2강, 상단바에 내비게이션 버튼](https://youtu.be/2G6uSTOAEnM) - [CODEPEN](https://codepen.io/jangka44/pen/abqOaNw?editors=0010) 1. - [ ] 55-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 55, 3강, 페이지 레이아웃작업하여, 텍스트를 화면중앙으로](https://youtu.be/a8aQkFVRc2E) - [CODEPEN](https://codepen.io/jangka44/pen/poaJONg?editors=0010) 1. - [ ] 55-04 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 55-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 55, 5강, 기록 폼](https://youtu.be/qjc315_KX2k) - [CODEPEN](https://codepen.io/jangka44/pen/dydoqeg?editors=0010) 1. - [ ] 55-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 55, 6강, 기록숫자 증감](https://youtu.be/cIY9jrczsv0) - [CODEPEN](https://codepen.io/jangka44/pen/PoQqdBM?editors=0010) 1. - [ ] 55-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 55, 7강, 기록숫자 처리](https://youtu.be/AzAGqM6afKE) - [CODEPEN](https://codepen.io/jangka44/pen/MWQwqLo?editors=0010) --- --- ## 07-03 : 시작 ## 07-03 : 스쿼트 챌린지 앱 구현 2 ### 미션 1 : canvas-confetti 라이브러리 활용 1. - [ ] 56-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 56-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 56, 2강, 캔버스 사이즈 조절](https://youtu.be/PSpIcgctUg4) - [CODEPEN](https://codepen.io/jangka44/pen/jOZbMBO?editors=0010) 1. - [ ] 56-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 56, 3강, 라이브러리 사용법을보고 여러가지 옵션을 실험](https://youtu.be/UHi_OoRqDxk) - [CODEPEN](https://codepen.io/jangka44/pen/ZErbpJp?editors=0010) 1. - [ ] 56-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 56, 4강, 버튼을 클릭하면 반응하도록](https://youtu.be/ZPyt0cqOgJk) - [CODEPEN](https://codepen.io/jangka44/pen/yLvYaPO?editors=0010) 1. - [ ] 56-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 56, 5강, 관련 개념들 복습, 더 다양한 옵션활용](https://youtu.be/nNmF_OPt4P4) - [CODEPEN](https://codepen.io/jangka44/pen/LYQpyQo?editors=0011) --- ### 미션 2 : js-confetti 라이브러리 활용 1. - [ ] 57-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 57-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 57, 2강, 다양한 옵션값 테스트](https://youtu.be/tdqiBPwQh64) - [CODEPEN](https://codepen.io/jangka44/pen/qBxOmQz?editors=0010) 1. - [ ] 57-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 57, 3강, canvas 엘리먼트를 직접 생성하는 방법](https://youtu.be/GLsfjtdQkWo) - [CODEPEN](https://codepen.io/jangka44/pen/oNEjWVN?editors=0010) --- --- ## 07-04 : 시작 ## 07-04 : 스쿼트 챌린지 앱 구현 3 ### 미션 1 : 숫자 카운트 애니메이션 라이브러리 조사 1. - [ ] 58-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 58-02 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 58-03 단계 - [영상 - 리액트풀스택, 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) --- ### 미션 2 : useInterval로 스톱워치 구현하기 1. - [ ] 59-01 단계 - [영상 - 리액트풀스택, 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]); } ``` 1. - [ ] 59-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 59, 2강, useInterval의 작동을 일시정지](https://youtu.be/9pJbNqXPqp4) - [CODEPEN](https://codepen.io/jangka44/pen/JjpYJBK?editors=0010) --- ### 미션 3 : 일반 라이브러리를 기반으로 리액트 라이브러리 직접 제작하기 1. - [ ] 60-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 60, 1강, countup.js 라이브러리를 리액트에서 사용](https://youtu.be/6INIUy2EJ1U) - [CODEPEN](https://codepen.io/jangka44/pen/RwQWgvj?editors=0010) 1. - [ ] 60-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 60, 2강, CountNumber 컴포넌트](https://youtu.be/SbFsx10Sld4) - [CODEPEN](https://codepen.io/jangka44/pen/abqvwMZ?editors=0010) 1. - [ ] 60-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 60, 3강, end 속성의 값이 변경되면 애니메이션이 다시 실행되도록](https://youtu.be/_vqrRmtTC6s) - [CODEPEN](https://codepen.io/jangka44/pen/zYRvdYB?editors=0010) 1. - [ ] 60-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 60, 4강, end 속성값이 변경될 때 기존의 값으로 부터 변경되도록](https://youtu.be/QAlIg1db-kA) - [CODEPEN](https://codepen.io/jangka44/pen/XWZmaJd?editors=0010) --- --- ## 07-05 : 시작 ## 07-05 : 스쿼트 챌린지 앱 구현 4 ### 미션 1 : 스쿼트 챌린지에 MUI 적용하여 새로 구현 1. - [ ] 61-01 단계 - [영상 - 리액트풀스택, 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; } /* 스크롤바 꾸미기 끝 */ ``` 1. - [ ] 61-02 단계 - [영상 - 리액트풀스택, 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 ``` 1. - [ ] 61-03 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 61-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 4강, 화면 중앙에 목표숫자 두기](https://youtu.be/GChhIbJiCV4) - [CODEPEN](https://codepen.io/jangka44/pen/WNMQdvW?editors=0010) 1. - [ ] 61-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 5강, CountNumber 라이브러리 적용, 숫자에 mono 폰트 적용](https://youtu.be/pOc3T1tL1AE) - [CODEPEN](https://codepen.io/jangka44/pen/BaYoJLM?editors=0010) 1. - [ ] 61-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 6강, 숫자가 5자리를 유지하도록](https://youtu.be/JRH-8OtTiOM) - [CODEPEN](https://codepen.io/jangka44/pen/YzeyYZL?editors=0010) 1. - [ ] 61-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 7강, 기록 모달 디자인](https://youtu.be/8MElbDrm2zU) - [CODEPEN](https://codepen.io/jangka44/pen/qBxOyJN?editors=0010) 1. - [ ] 61-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 8강, 기록 증감](https://youtu.be/xtjwKKvuQDc) - [CODEPEN](https://codepen.io/jangka44/pen/MWQaBPd?editors=0010) 1. - [ ] 61-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 9강, 숫자 증가시, confetti 효과](https://youtu.be/dqgbZ3BpR88) - [CODEPEN](https://codepen.io/jangka44/pen/YzeyjMx?editors=0100) 1. - [ ] 61-10 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 10강, 기록저장](https://youtu.be/yZUSyRaBJFo) - [CODEPEN](https://codepen.io/jangka44/pen/OJQyovG?editors=0010) 1. - [ ] 61-11 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 11강, 수행한 횟수에 리코일 퍼시스트를 적용하여 영구적으로 기록](https://youtu.be/PZ4-UXNi1hc) - [CODEPEN](https://codepen.io/jangka44/pen/poagJbR?editors=0010) 1. - [ ] 61-12 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 61, 12강, 기록시 notify](https://youtu.be/PgyHBWyfQo4) - [CODEPEN](https://codepen.io/jangka44/pen/eYVJNdG?editors=0010) --- --- ## 07-06 : 시작 ## 07-06 : 정리 ### 미션 1 : 스쿼트 챌린지 히스토리 페이지 1. - [ ] 62-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 1강, 기록 저장시 히스토리도 저장](https://youtu.be/5iFGcjZjBvc) - [CODEPEN](https://codepen.io/jangka44/pen/NWyxqaR?editors=0010) 1. - [ ] 62-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 2강, 히스토리 리스트 꾸미기](https://youtu.be/lZlcC14mgRE) - [CODEPEN](https://codepen.io/jangka44/pen/yLveNpo?editors=0010) 1. - [ ] 62-03 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 62-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 4강, 명언 데이터관련 코드를 캡슐화](https://youtu.be/jetN_YT1aLU) - [CODEPEN](https://codepen.io/jangka44/pen/zYRrNmO?editors=0012) 1. - [ ] 62-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 5강, 명언을 적용](https://youtu.be/0zQr1IIc3mU) - [CODEPEN](https://codepen.io/jangka44/pen/wvyMrJa?editors=1010) 1. - [ ] 62-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 6강, 옵션드로어 도입준비](https://youtu.be/yuHGXXH0bvQ) - [CODEPEN](https://codepen.io/jangka44/pen/poayLZK?editors=0010) 1. - [ ] 62-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 7강, 옵션드로어 도입](https://youtu.be/Vh4Z5A51c3M) - [CODEPEN](https://codepen.io/jangka44/pen/xxYVWyv?editors=0010) 1. - [ ] 62-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 8강, 옵션드로어를 별도의 컴포넌트로](https://youtu.be/uvo1oZQZzJU) - [CODEPEN](https://codepen.io/jangka44/pen/oNExqmX?editors=0010) 1. - [ ] 62-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 9강, 히스토리 아이템 삭제](https://youtu.be/hhjccFjvy2g) - [CODEPEN](https://codepen.io/jangka44/pen/abqNYMe?editors=0010) 1. - [ ] 62-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 9강, 히스토리 아이템 삭제](https://youtu.be/hhjccFjvy2g) - [CODEPEN](https://codepen.io/jangka44/pen/abqNYMe?editors=0010) 1. - [ ] 62-10 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 10강, 히스토리 아이템 삭제시, 전체 수행횟수도 감소](https://youtu.be/fHJEZfrcODQ) - [CODEPEN](https://codepen.io/jangka44/pen/abqNKwV?editors=0010) --- --- ## 챕터미션, 07 - 이 문제를 풀 수 없다면, 다음챕터로 넘어가시면 안됩니다. ### 미션 1 - [영상 - 클래스101, 리액트풀스택, 챕터 7, 미션 1, 소개](https://youtu.be/zBkVk4gnvtw) #### 미션 1, 문제들 1. - [ ] 62-10 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 62, 10강, 히스토리 아이템 삭제시, 전체 수행횟수도 감소](https://youtu.be/fHJEZfrcODQ) - [CODEPEN](https://codepen.io/jangka44/pen/abqNKwV?editors=0010) --- --- --- # 챕터 08 시작 # 챕터 08, 할일리스트 앱 구현 ## 08-01 시작 ## 08-01 : 개요 ### 미션 1 : 스쿼트 챌린지 히스토리 페이지 수정기능 1. - [ ] 63-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 1강, RecordModal 밖으로 msg와, saveRecord를 뽑아내기](https://youtu.be/4pkFsYyRCQg) - [CODEPEN](https://codepen.io/jangka44/pen/zYRqLwm?editors=0010) 1. - [ ] 63-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 2강, RecordAddModal 도입](https://youtu.be/8U51yOev3JI) - [CODEPEN](https://codepen.io/jangka44/pen/KKQzBvZ?editors=0010) 1. - [ ] 63-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 3강, RecordModal의 recordCount의 기본값을 props로 전달받기](https://youtu.be/_EGCmmsgHi4) - [CODEPEN](https://codepen.io/jangka44/pen/MWQyqrN?editors=0010) 1. - [ ] 63-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 4강, 소스코드 정리](https://youtu.be/q0YyrOzYcbg) - [CODEPEN](https://codepen.io/jangka44/pen/GRQZXdx?editors=0010) 1. - [ ] 63-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 5강, RecordModifyModal 도입하고, 수정버튼누르면 열리도록](https://youtu.be/qMMfmg3ebFk) - [CODEPEN](https://codepen.io/jangka44/pen/eYVZPdB?editors=0010) 1. - [ ] 63-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 6강, RecordModifyModal 열릴 때 수정할 기록의 카운트가 초기값으로 설정됨](https://youtu.be/HDvCeZzFvKM) - [CODEPEN](https://codepen.io/jangka44/pen/jOZqemb?editors=0010) 1. - [ ] 63-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 7강, 기록수정](https://youtu.be/8tbmLu7xVLs) - [CODEPEN](https://codepen.io/jangka44/pen/mdXPzBv?editors=0010) 1. - [ ] 63-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 8강, RecordModifyModal이 닫힐 때 RecordOptionDrawer도 같히 닫히도록](https://youtu.be/ZnFRsDkBs7E) - [CODEPEN](https://codepen.io/jangka44/pen/ZErWqre?editors=0010) 1. - [ ] 63-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 63, 9강, 기록없음 표시, 기록의 최대값 지정](https://youtu.be/3M3MVOBDfT8) - [CODEPEN](https://codepen.io/jangka44/pen/abqNRKq?editors=0010) --- --- ## 08-02 시작 ## 08-02 : 할일리스트 앱 구현 1 ### 미션 1 : 할일 추가페이지 1. - [ ] 64-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 64-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 64, 2강, 할일이 비어있을 때의 메인화면에서 할일추가 버튼](https://youtu.be/cUmNdmQfQtc) - [CODEPEN](https://codepen.io/jangka44/pen/wvyGbJL?editors=0010) 1. - [ ] 64-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 64, 3강, 할일 작성페이지 꾸미기](https://youtu.be/smKpqCGqIro) - [CODEPEN](https://codepen.io/jangka44/pen/dydXpzO?editors=0010) 1. - [ ] 64-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 64, 4강, 할일폼 체크](https://youtu.be/YgMRmf5ID3E) - [CODEPEN](https://codepen.io/jangka44/pen/oNELzbb?editors=0010) 1. - [ ] 64-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 64, 5강, 할일추가](https://youtu.be/qraBIg1_iEA) - [CODEPEN](https://codepen.io/jangka44/pen/eYVzdEw?editors=0010) 1. - [ ] 64-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 64, 6강, 할일추가 후 알림](https://youtu.be/jIW1fxnRcAk) - [CODEPEN](https://codepen.io/jangka44/pen/gOvMwoo?editors=0010) --- --- ## 08-03 시작 ## 08-03 : 할일리스트 앱 구현 2 ### 미션 1 : 할일 리스트페이지 1. - [ ] 65-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 65, 1강, 할일리스트](https://youtu.be/6XMO22v13qo) - [CODEPEN](https://codepen.io/jangka44/pen/QWQEKVY?editors=0010) 1. - [ ] 65-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 65, 2강, 할일완료여부 체크기능](https://youtu.be/zNRcJBk7Uf8) - [CODEPEN](https://codepen.io/jangka44/pen/JjpKRwb?editors=0010) 1. - [ ] 65-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 65, 3강, 완료여부 필터링 탭메뉴](https://youtu.be/oTUuZ_LonnY) - [CODEPEN](https://codepen.io/jangka44/pen/oNELzRw?editors=0010) 1. - [ ] 65-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 65, 4강, 탭메뉴에 따라 필터링 처리](https://youtu.be/sTbpRu-rNtY) - [CODEPEN](https://codepen.io/jangka44/pen/oNELYgG?editors=0010) --- --- ## 08-04 시작 ## 08-04 : 할일리스트 앱 구현 3 ### 미션 1 : 할일 수정페이지 1. - [ ] 66-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 66, 1강, 할일 수정페이지 추가](https://youtu.be/4coNQYi8EWI) - [CODEPEN](https://codepen.io/jangka44/pen/YzeWpZv?editors=0010) 1. - [ ] 66-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 66, 2강, 할일추가와 할일수정페이지에서 상단바가 동일하게 나오도록](https://youtu.be/-KvUqTmUPQI) - [CODEPEN](https://codepen.io/jangka44/pen/abqZBww?editors=0010) 1. - [ ] 66-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 66, 3강, 할일수정페이지의 입력요소들에게 기본값](https://youtu.be/s67HRlbpg-M) - [CODEPEN](https://codepen.io/jangka44/pen/poabNay?editors=0010) 1. - [ ] 66-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 66, 4강, 할일수정](https://youtu.be/QAQGyJZL8Do) - [CODEPEN](https://codepen.io/jangka44/pen/dydXOgq?editors=0010) --- --- ## 08-05 시작 ## 08-05 : 할일리스트 앱 구현 4 ### 미션 1 : 할일 리스트 정렬 1. - [ ] 67-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 67, 1강, 정렬 탭메뉴](https://youtu.be/bUSUpFrmAcw) - [CODEPEN](https://codepen.io/jangka44/pen/abqZpoG?editors=0010) 1. - [ ] 67-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 67, 2강, 수행날짜 추가](https://youtu.be/eoqsfjcWAXU) - [CODEPEN](https://codepen.io/jangka44/pen/QWQEpGB?editors=0010) 1. - [ ] 67-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 67, 3강, 일정이 급한순으로 정렬](https://youtu.be/Zg9rsv5koLk) - [CODEPEN](https://codepen.io/jangka44/pen/MWQeppx?editors=0010) 1. - [ ] 67-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 67, 4강, 나머지 정렬기능들 구현](https://youtu.be/4S2Vrert7tQ) - [CODEPEN](https://codepen.io/jangka44/pen/BaYzWZY?editors=0010) 1. - [ ] 67-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 67, 5강, 다음에 할래요 버튼에서 history back](https://youtu.be/MjimYs29D1M) - [CODEPEN](https://codepen.io/jangka44/pen/WNMxpZg?editors=0010) --- --- ## 08-06 시작 ## 08-06 : 정리 ### 미션 1 : 할일리스트 1차 오픈 전, 최종수정 1. - [ ] 68-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 68, 1강, 여백조정, 반응형 여백](https://youtu.be/rzoH56G6mZ4) - [CODEPEN](https://codepen.io/jangka44/pen/jOZrpBB?editors=0010) 1. - [ ] 68-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 68, 2강, 추가적인 여백조정](https://youtu.be/hIH4BGz6TIE) - [CODEPEN](https://codepen.io/jangka44/pen/BaYzPMp?editors=0010) 1. - [ ] 68-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 68, 3강, 수정페이지에서 현재 몇번 할일을 수정하고 있는지 표시](https://youtu.be/tuWFw-B6Tsc) - [CODEPEN](https://codepen.io/jangka44/pen/GRQqzjB?editors=0010) --- ### 미션 2 : 스쿼트챌린지 1차 오픈 전, 최종수정 1. - [ ] 69-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 69, 1강, persistAtomRecords 도입](https://youtu.be/ZY1NiK4-GkA) - [CODEPEN](https://codepen.io/jangka44/pen/eYVzjoL?editors=0010) 1. - [ ] 69-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 69, 2강, 정렬 탭박스 추가](https://youtu.be/DZzpkhjwNPw) - [CODEPEN](https://codepen.io/jangka44/pen/XWZKBwo?editors=0010) 1. - [ ] 69-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 69, 3강, 기록의 공유 id 추가](https://youtu.be/iF_iu7Brzz0) - [CODEPEN](https://codepen.io/jangka44/pen/gOvMdYL?editors=0010) 1. - [ ] 69-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 69, 4강, 정렬](https://youtu.be/iuPAwFT9NSc) - [CODEPEN](https://codepen.io/jangka44/pen/yLvJxNq?editors=0010) 1. - [ ] 69-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 69, 5강, 히스토리 없음 화면 꾸미기](https://youtu.be/ZzpVGVWT17I) - [CODEPEN](https://codepen.io/jangka44/pen/BaYzOKd?editors=0010) 1. - [ ] 69-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 69, 6강, 여백조정, 반응형 여백](https://youtu.be/-2TcNB30pXY) - [CODEPEN](https://codepen.io/jangka44/pen/ExQyegB?editors=0010) --- --- ## 챕터미션, 08 - 이 문제를 풀 수 없다면, 다음챕터로 넘어가시면 안됩니다. ### 미션 1 - [영상 - 클래스101, 리액트풀스택, 챕터 8, 미션 1, 소개](https://youtu.be/Ok34kT45iIg) #### 미션 1, 문제들 1. - [ ] 68-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 68, 3강, 수정페이지에서 현재 몇번 할일을 수정하고 있는지 표시](https://youtu.be/tuWFw-B6Tsc) - [CODEPEN](https://codepen.io/jangka44/pen/GRQqzjB?editors=0010) 1. - [ ] 69-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 69, 6강, 여백조정, 반응형 여백](https://youtu.be/-2TcNB30pXY) - [CODEPEN](https://codepen.io/jangka44/pen/ExQyegB?editors=0010) --- --- --- # 챕터 09 시작 # 챕터 09, 리액트쿼리로 API 통신 ## 09-01 : 개요 $$ppt title: PPT-09-01 # API란 무엇일까요?--o--t=1 # API란 점원(서버)에게[br /]음식주문을 하는 방법입니다.--o--t=1 # 키오스크접수, 점원접수 등[br /]몇몇 방법이 존재하지만[br /]핵심 흐름은 가게마다 크게 다르지는 않습니다.--o--t=1 # 점원과 나누는 대화는[br /]보통 [span style="color:red;"]두가지[/span] 유형으로[br /]분류할 수 있습니다.--o--t=1 # 하나는[br /][span style="color:red;"]물어보기(GET)[/span] 입니다.--o--t=1 # 다른 하나는[br /][span style="color:red;"]결정사항 알려주기(POST, PUT, DELETE)[/span] 입니다.--o--t=1 # GET : 조회[br /]POST : 생성[br /]PUT(OR PATCH) : 수정[br /]DELETE : 삭제--o--t=1 # GET : 주문서[br /]해석 : 주문서 주세요.--o--t=1 # POST : 감자튀김,3개[br /]해석 : 감자튀김 3개 추가요(생성)--o--t=1 # PUT : 3번주문,감자튀김,2개[br /]해석 : 3번주문에서 감자튀김의 개수를 2개로 수정할게요.--o--t=1 # DELETE : 3번주문[br /]해석 : 3번주문에서 취소할게요(삭제)--o--t=1 # 그리고 손님(리액트)과 점원(서버)이[br /] 대화를 주고받을 때 사용하는 언어는[br /]한국어가 아닌 보통 [span style="color:red;"]JSON[/span]을 사용합니다.--o--t=1 # 동기와 비동기는 무엇일까요?--o--t=1 # 동기는 전화입니다.--o--t=1 # 동기는 쉽습니다.--o--t=1 # 동기의 단점은, 비동시성입니다.--o--t=1 # 동기적으로 하면 좋은 일은, 중요하고 복잡한 일 입니다.--o--t=1 # 대표적으로 음악연주, 중요한 전화통화가 있습니다.--o--t=1 # 비동기는 카톡입니다.--o--t=1 # 비동기는 복잡한 요리입니다.--o--t=1 # 비동기는 어렵습니다.--o--t=1 # 비동기의 단점은, 순서 맞추기 입니다.--o--t=1 # 비동기적으로 하면 좋은 일은,[br /]시간이 오래걸리는 일 입니다.--o--t=1 # 대표적으로 펜팔과,[br /]외국에 사는 사람에게 소포보내기 입니다.[br /]빨래도 있습니다.--o--t=1 $$ --- ## 추천링크 - [클래스101 리액트풀스택 사전지식페이지 - 단계 11 : API 기초](https://slog.gg/p/4680#단계-11) - [클래스101 리액트풀스택 사전지식페이지 - 단계 12 : Promise와 Async, Await](https://slog.gg/p/4680#단계-12) --- ### 미션 1 : 간단하게 배포하기 1. - [ ] 70-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 70-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 70, 2강, 할일앱 수정 후 재배포, 전체소스코드 다시 업로드 하는 방법](https://youtu.be/B23A3KaxW9U) - [리포지터리 - github.com/jhs512/todo_2](https://github.com/jhs512/todo_2) 1. - [ ] 70-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 70, 3강, 할일앱 수정 후 재배포, 깃허브에서 바로 수정하는 방법](https://youtu.be/q31VzePPkxI) - [리포지터리 - github.com/jhs512/todo_2](https://github.com/jhs512/todo_2) 1. - [ ] 70-04 단계 - [영상 - 리액트풀스택, 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) --- ### 미션 2 : API, 비동기 관련 개념을 파악하는데 좋은 자료들 소개 1. - [ ] 71-01 단계 - [영상 - 리액트풀스택, 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) --- --- ## 09-02 : fetch ### 미션 1 : Promise 개요 1. - [ ] 72-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 1강, 동기식 함수의 연속실행](https://youtu.be/bBdsxPZ81ko) - [CODEPEN](https://codepen.io/jangka44/pen/qBxaEWz?editors=0012) 1. - [ ] 72-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 2강, 비동기식 함수들은 리턴을 통해서 값을 전달할 수 없다.](https://youtu.be/eCj_heC4Vxc) - [CODEPEN](https://codepen.io/jangka44/pen/LYQREPw?editors=0012) 1. - [ ] 72-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 3강, 비동기식에서는 보통 콜백이라는 개념을 통해서 함수들의 실행 순서를 맞춘다.](https://youtu.be/f0ZHfi_U4Ts) - [CODEPEN](https://codepen.io/jangka44/pen/JjpRojQ?editors=0012) 1. - [ ] 72-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 4강, 익명함수가 아닌 이름있는 함수를 사용하면 콜백을 안써도, 순차적인 비동기함수 실행이 가능](https://youtu.be/tLfhGfUlDDg) - [CODEPEN](https://codepen.io/jangka44/pen/MWQjYaB?editors=0012) 1. - [ ] 72-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 5강, Promise객체 생성, reject는 then을 실행하고, reject는 catch를 실행한다.](https://youtu.be/WaNFCyGn7X0) - [CODEPEN](https://codepen.io/jangka44/pen/WNMGbOz?editors=0011) 1. - [ ] 72-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 6강, Promise객체는 유튜버이고, then을 통해서 여러명의 구독자를 받을 수 있다.](https://youtu.be/irB76ZvQY4c) - [CODEPEN](https://codepen.io/jangka44/pen/KKQgwvx?editors=0011) 1. - [ ] 72-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 7강, then을 체이닝하면 동기, 비동기 익명함수들을 순차적으로 실행하도록 만들기 쉽다.](https://youtu.be/u2dKIvKr0r8) - [CODEPEN](https://codepen.io/jangka44/pen/rNJMaGb?editors=0011) 1. - [ ] 72-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 72, 8강, 이름있는 비동기 함수들을의 연속실행에 Promise를 도입하여 구조개선](https://youtu.be/8VuwzMSE_do) - [CODEPEN](https://codepen.io/jangka44/pen/XWZjJZL?editors=0011) --- ### 미션 2 : fetch 개요 1. - [ ] 73-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 73-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 73, 2강, fetch를 사용해서 외부 데이터 불러오기](https://youtu.be/i4_9Mj5COB8) - [CODEPEN](https://codepen.io/jangka44/pen/bGLwNPx?editors=0012) 1. - [ ] 73-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 73, 3강, fetch를 통해 불러온 데이터를 json화 하기](https://youtu.be/hsxgUwQuMUM) - [CODEPEN](https://codepen.io/jangka44/pen/JjpRdPR?editors=0012) 1. - [ ] 73-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 73, 4강, 간단한 이미지 로드기능 구현](https://youtu.be/YuIi6mkJJ1g) - [CODEPEN](https://codepen.io/jangka44/pen/PoQGqoe) --- ### 미션 3 : 리액트에서 fetch 사용 1. - [ ] 74-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 74, 1강, 리액트에서 fetch 사용](https://youtu.be/AFcd5bsa3nA) - [CODEPEN](https://codepen.io/jangka44/pen/YzeGXwE?editors=0011) 1. - [ ] 74-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 74, 2강, useEffect를 통해서 쓸데없는 중복통신을 안하도록](https://youtu.be/4muV2nBq6Cw) - [CODEPEN](https://codepen.io/jangka44/pen/abqmONm?editors=0011) --- --- ## 09-03 : 리액트 쿼리로 구조 개선 ### 미션 1 : React Query 도입 1. - [ ] 76-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 76, 1강, 리액트 쿼리 개요](https://youtu.be/Asb60X9AIto) - [리액트 쿼리 - React Query 공식사이트](https://react-query.tanstack.com/) 1. - [ ] 76-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 76, 2강, 리액트 쿼리가 없는 상태에서 로딩과 예외처리](https://youtu.be/mz7ZypiAoq8) - [CODEPEN](https://codepen.io/jangka44/pen/gOvwPbw?editors=0010) 1. - [ ] 76-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 76, 3강, 리액트 쿼리를 도입](https://youtu.be/NVdZwdj0nSA) - [CODEPEN](https://codepen.io/jangka44/pen/KKQgpZK?editors=0010) 1. - [ ] 76-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 76, 4강, 통신로직이 포함된 PImg 컴포넌트](https://youtu.be/95VAVCpo5xY) - [CODEPEN](https://codepen.io/jangka44/pen/LYQRGPw?editors=0011) ### 미션 2 : 프론트 실전배포를 위한 준비 1. - [ ] 75-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 75, 1강, 도메인 구매, DNS 세팅, 깃허브페이지에 도메인 연결](https://youtu.be/8Z1XJSg6ly0) - [몰입코딩 - 도메인 구매, DNS 세팅, 깃허브페이지에 도메인 연결 - slog.gg/p/5799](https://slog.gg/p/5799) --- --- ## 09-04 : 정리 $$ppt title: PPT-09-04 # 프로미스에 대해서 알아보겠습니다.--o--t=1 # 프로미스는 유튜버 입니다. ```js new Promise(함수); ``` # 프로미스 함수에서 유튜버가[br /]어떻게 일할지 정할 수 있습니다. ```js new Promise((resolve, reject) => { resolve('성공'); // or reject(new Error('실패')); }); ``` # 유튜버는 오직[br /]하나의 행위만 할 수 있습니다. ```js new Promise((resolve, reject) => { resolve('성공 1'); resolve('성공 2'); // 이미 위에서 `성공 1`이 발송 되어서 실행안됨 reject(new Error('실패')); // 이미 위에서 `성공 1`이 발송 되어서 실행안됨 }); ``` # then 함수로 구독자를 추가할 수 있습니다. ```js const promise = new Promise(함수); promise.then(구독자); promise.then(구독자); promise.then(구독자); ``` # 구독자는 함수입니다. ```js const promise = new Promise(함수); promise.then((data) => { console.log(data); }); ``` # 구독자가 언제 실행될지는 모릅니다. ```js const promise = new Promise((resolve, reject) => { setTimeout(() => resolve('영상1'), 30000); }); promise.then((data) => { console.log(data); // 영상1 출력 }); ``` # 뒤늦게 구독한 구독자도[br /]이미 발송된 영상을 볼 수 있습니다. ```js const promise = new Promise((resolve, reject) => { setTimeout(() => resolve('영상1'), 30000); }); setTimeout(() => { promise.then((data) => { console.log(data); // 영상1 출력 }); }, 50000); ``` # then을 체이닝하면[br /]순차적으로 실행됩니다. ```js const promise = new Promise((resolve, reject) => { setTimeout(() => resolve(10), 30000); }); promise // 이 함수는 resolve가 끝난 후 실행됩니다. // 이 함수는 data로 10을 받고 20을 리턴합니다. .then((data) => { return data + 10; }) // 이 함수는 위 함수가 끝난 후 실행됩니다. // 이 함수는 data로 20을 받고 30을 리턴합니다. .then((data) => { return data + 10; }) ``` # then을 체이닝하면[br /]순차적으로 실행됩니다. ```js const promise = new Promise((resolve, reject) => { setTimeout(() => resolve(10), 30000); }); promise // 이 함수는 resolve가 끝난 후 실행됩니다. // 이 함수는 data로 10을 받고 20을 리턴합니다. .then((data) => { return new Promise((resolve, reject) => resolve(data + 10)); }) // 이 함수는 위 함수가 끝난 후 실행됩니다. // 이 함수는 data로 20을 받고 30을 리턴합니다. .then((data) => { return data + 10; }) ``` # then을 체이닝하면[br /]순차적으로 실행됩니다. ```js const promise = new Promise((resolve, reject) => { setTimeout(() => resolve(10), 30000); }); promise // 이 함수는 resolve가 끝난 후 실행됩니다. // 이 함수는 data로 10을 받고 20을 리턴합니다. .then((data) => { return new Promise((resolve, reject) => { setTimeout(() => resolve(data + 10), 5000); }); }) // 이 함수는 위 함수가 끝난 후 실행됩니다. // 이 함수는 data로 20을 받고 30을 리턴합니다. .then((data) => { return data + 10; }) ``` # fetch에 대해서 알아보겠습니다.--o--t=1 # fetch는 Promise 객체를 반환합니다. ```js fetch('API_주소') .then(구독자); ``` # fetch를 사용하실 때는[br /]한번 전처리를 해주세요. ```js fetch('API_주소') .then(data => data.json()) .then(data => setData(data)); ``` # fetch를 리액트에서 사용하실 때는[br /]useEffect로 감싸주셔야 합니다. ```js useEffect(() => { fetch('API_주소') .then(data => data.json()) .then(data => setData(data)); }, []); ``` # fetch를 하실 때 보통[br /]isLoading 도 같이 만듭니다. ```js const [data, setData] = useState([]); const [isLoading, setIsLoading] = useState(true); useEffect(() => { fetch('API_주소') .then(data => data.json()) .then(data => setData(data)) .then(() => setIsLoading(false)); }, []); ``` # fetch를 하실 때 보통[br /]isLoading과 error 도 같이 만듭니다. ```js const [data, setData] = useState([]); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch('API_주소') .then(data => data.json()) .then(data => setData(data)) .then(() => setIsLoading(false)) .catch(() => setError(new Error(404))); }, []); ``` # useQuery에 대해서 알아보겠습니다.--o--t=1 # useQuery 함수는 리액트 쿼리에서 제공하는 함수입니다. ```js import { QueryClient, QueryClientProvider, useQuery } from "https://cdn.skypack.dev/react-query"; const queryClient = new QueryClient(); ``` # 리액트 쿼리를 사용하시려면[br /]QueryClientProvider 로 감싸야 합니다. ```jsx ``` # fetch를 하실 때 보통[br /]isLoading과 error 도 같이 만듭니다. ```js const [data, setData] = useState([]); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch('API_주소') .then(data => data.json()) .then(data => setData(data)) .then(() => setIsLoading(false)) .catch(() => setError(new Error(404))); }, []); ``` # useQuery를 사용하면[br /]속시원하게 소스코드가 줄어듭니다. ```js const { isLoading, error, data } = useQuery(`API_주소`, () => fetch(`API_주소`).then((data) => data.json()) ); ``` $$ --- --- ## 챕터미션, 09 - 이 문제를 풀 수 없다면, 다음챕터로 넘어가시면 안됩니다. ### 미션 1 - [영상 - 클래스101, 리액트풀스택, 챕터 9, 미션 1, 소개](https://youtu.be/hMDFu7x11zw) #### 미션 1, 문제들 1. - [ ] 75-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 75, 4강, 통신로직이 포함된 PImg 컴포넌트](https://youtu.be/95VAVCpo5xY) - [CODEPEN](https://codepen.io/jangka44/pen/LYQRGPw?editors=0011) # 10 MySQL로 데이터 관리 ## 10-01 : 개요 $$ppt title: PPT-10-01 # MariaDB와 DBMS에 대해서 알아보겠습니다.--o--t=1 # MariaDB은 MySQL의 정통성을 계승한[br /]새로운 MySQL이라고 보시면 됩니다.--o--t=1 # MariaDB는 MySQL과[br /]거의 100% 호환이 됩니다.--o--t=1 # 지금은 그냥 MariaDB가 MySQL과[br /]같은것 이라고 생각하셔도 됩니다.--o--t=1 # MariaDB는 DBMS의 한 종류 입니다.[br /]가장 많이 사용되는 DBMS이기도 합니다.--o--t=1 # 또 다른 DBMS로는[br /]오라클, MSSQL, POSTGRESQL[br /]등이 있습니다.--o--t=1 # DBMS는[br /]DataBase Management System[br /]의 약자입니다.--o--t=1 # 즉 MariaDB는 DB가 아니고,[br /]여러개의 DB들을 관리하는 프로그램 입니다.--o--t=1 # DB에 대해서 알아보겠습니다.--o--t=1 # 데이터베이스는 폴더입니다.--o--t=1 # 폴더에는 파일들이 들어있듯이[br /]데이터베이스에는 표들이 들어있습니다.--o--t=1 # 표는 이렇게 생겼습니다. | 번호 | 이름 | 나이 | | --- | --- | --- | | 2 | 홍길동 | 33 | | 1 | 홍길동 | 22 | # 표에서 맨 위쪽 한줄을[br /]칼럼(column), 열이라고 합니다. | 번호 | 이름 | 나이 | | --- | --- | --- | | 2 | 홍길동 | 33 | | 1 | 홍길동 | 22 | # 표에서 데이터 한줄을[br /]로우(row), 행이라고 합니다. | 번호 | 이름 | 나이 | | --- | --- | --- | | 2 | 홍길동 | 33 | | 1 | 홍길동 | 22 | # 현재 표에서는[br /]3개의 칼럼이 있고,[br /]2개의 로우가 있습니다. | 번호 | 이름 | 나이 | | --- | --- | --- | | 2 | 홍길동 | 33 | | 1 | 홍길동 | 22 | # 즉 테이블은[br /]엑셀의 표와 거의 유사한 개념으로[br /]볼 수 있습니다.--o--t=1 # 다만 엑셀과 달리[br /]테이블의 데이터는[br /]SQL 이라는 언어를 이용해서[br /]조작할 수 있습니다.--o--t=1 # SQL은 크게 DDL과 DML로 나뉩니다.--o--t=1 # DDL은[br /]Data Definition Language[br /]의 약자 입니다.--o--t=1 # DDL 테이블의 구조를[br /]다루는 SQL 입니다.--o--t=1 # 번호칼럼을 지우거나,[br /]날짜 칼럼을 추가하거나,[br /]이름칼럼의 용량을 늘리리는 작업을[br /]테이블의 구조를 다루는 작업[br /]이라고 합니다. | 번호 | 이름 | 나이 | | --- | --- | --- | | 2 | 홍길동 | 33 | | 1 | 홍길동 | 22 | # DML은[br /]Data Manipulation Language[br /]의 약자 입니다.--o--t=1 # DML 테이블의 데이터를[br /]다루는 SQL 입니다.--o--t=1 # 1번 데이터를 삭제하거나[br /]3번 데이터를 추가하거나[br /]2번 데이터의 이름을 고길동으로 수정하는 작업을[br /]데이터를 다루는 작업[br /]이라고 합니다. | 번호 | 이름 | 나이 | | --- | --- | --- | | 2 | 홍길동 | 33 | | 1 | 홍길동 | 22 | $$ --- ### 미션 1 : 백엔드, 인프라 관련 추천 공부자료 1. - [ ] 77-01 단계 - [영상 - 리액트풀스택, 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) --- ### 미션 2 : MySQL 개발환경세팅 1. - [ ] 78-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 78, 1강, MySQL 개발환경세팅](https://youtu.be/ve-FcgdmtKo) - [클래스101 리액트풀스택 사전지식페이지 - 단계 16 : MySQL 개발환경세팅](https://slog.gg/p/5531) --- ### 미션 3 : MySQL 게시물 테이블, 단순한 버전 1. - [ ] 79-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 79, 1강, 관련개념설명](https://youtu.be/r1WpIAy9n20) 1. - [ ] 79-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 79, 2강, 문제설명](https://youtu.be/3QQSPVImkmQ) - [CODEPEN](https://codepen.io/jangka44/pen/LYVEyye?editors=0010) 1. - [ ] 79-03 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 79-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 79, 4강, 정리](https://youtu.be/CGItUYa_NkE) - [CODEPEN](https://codepen.io/jangka44/pen/XWbJRMN?editors=0010) --- --- ## 10-02 : DDL ### 미션 1 : MySQL 게시물 테이블, NOT NULL, AUTO_INCREMENT, 칼럼 순서 1. - [ ] 80-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 80, 1강, 관련개념설명](https://youtu.be/JTuXTaHj88U) 1. - [ ] 80-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 80, 2강, 문제설명](https://youtu.be/r-fNgdFfV8E) - [CODEPEN](https://codepen.io/jangka44/pen/ExjapKL?editors=0010) 1. - [ ] 80-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 80, 3강, 문제해설](https://youtu.be/tqtqM4AhiwQ) - [CODEPEN](https://codepen.io/jangka44/pen/MWwYByo?editors=0010) 1. - [ ] 80-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 80, 4강, 정리](https://youtu.be/k9hwHojZDds) - [CODEPEN](https://codepen.io/jangka44/pen/MWwYByo?editors=0010) --- ### 미션 2 : MySQL 부서, 사원 테이블, INNER JOIN 1. - [ ] 81-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 81, 1강, 관련개념설명](https://youtu.be/VHjkR1G1EVg) 1. - [ ] 81-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 81, 2강, 문제설명](https://youtu.be/_eNX5RyTOFY) - [CODEPEN](https://codepen.io/jangka44/pen/BaWLJzG?editors=0010) 1. - [ ] 81-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 81, 3강, 문제해설](https://youtu.be/v288kyWHC6Q) - [CODEPEN](https://codepen.io/jangka44/pen/vYxXpKd?editors=0010) 1. - [ ] 81-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 81, 4강, 정리](https://youtu.be/cFnGbBL9ads) - [CODEPEN](https://codepen.io/jangka44/pen/vYxXpKd?editors=0010) --- --- ## 10-03 : DML ### 미션 1 : MySQL 부서, 사원 테이블, SUM, MAX, MIN, COUNT, GROUP BY 1. - [ ] 82-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 82, 1강, 관련개념설명](https://youtu.be/RzDBYA0_R2k) 1. - [ ] 82-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 82, 2강, 문제설명](https://youtu.be/W73r-ZaJn-c) - [CODEPEN](https://codepen.io/jangka44/pen/jOWrEmj?editors=0010) 1. - [ ] 82-03 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 82-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 82, 4강, 정리](https://youtu.be/mwqYffX7NZk) - [CODEPEN](https://codepen.io/jangka44/pen/QWyEwvR?editors=0010) --- --- ## 10-04 : 인덱스, 서브쿼리, 조인 $$ppt title: PPT-10-04 # 사전에서 단어를 찾을 때[br /]색인(INDEX)를 이용합니다.--o--t=1 # DB에서 INDEX라는[br /]기능이 있습니다.--o--t=1 # 우리가 자주 사용하는 INDEX는[br /]PRIMARY KEY 입니다.--o--t=1 # 게시물 테이블에 게시물이 10만개가[br /]있다고 가정해보겠습니다.--o--t=1 # 그 중에서 id가 50인 게시물을 찾는다면[br /]SQL은 다음과 같습니다. ```sql SELECT * FROM article WHERE id = 50; ``` # 만약에 id 칼럼에 primary key가 설정되어 있지 않다면,[br /]10만번의 비교연산을 수행해야 합니다. ```sql SELECT * FROM article WHERE id = 50; ``` # 만약에 id 칼럼에 primary key가 설정되어 있다면,[br /]10번정도의 연산만으로 찾을 수 있습니다. ```sql SELECT * FROM article WHERE id = 50; ``` $$ ### 미션 1 : MySQL 부서, 사원 테이블, LEFT JOIN, UNION 1. - [ ] 83-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 83, 1강, 관련개념설명](https://youtu.be/gWhVoWHRkHc) 1. - [ ] 83-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 83, 2강, 문제설명](https://youtu.be/J8MT6kZuuqY) - [CODEPEN](https://codepen.io/jangka44/pen/NWpbZRj?editors=0010) 1. - [ ] 83-03 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 83-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 83, 4강, 정리](https://youtu.be/IzhqamZZFlE) - [CODEPEN](https://codepen.io/jangka44/pen/zYZoVNM?editors=0010) --- --- ## 10-05 : 정리 $$ppt title: PPT-10-05 # 조인에는 INNER JOIN과[br /]OUTER JOIN이 있습니다.--o--t=1 # INNER JOIN ```sql SELECT E.*, D.name AS deptName FROM emp AS E INNER JOIN dept AS D ON E.deptId = D.id ``` # OUTER JOIN ```sql SELECT E.*, D.name AS deptName FROM emp AS E LEFT OUTER JOIN dept AS D ON E.deptId = D.id ``` # 서브쿼리 ```sql SELECT * FROM ( SELECT 1 UNION SELECT 2 UNION SELECT 3 ) AS NUM ``` # 인덱스 ```sql CREATE TABLE `member` ( id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, loginId CHAR(100) NOT NULL UNIQUE, ... ); ``` $$ --- ### 미션 1 : MySQL 회원 테이블, INDEX, UNIQUE INDEX, SQL_NO_CACHE, EXPLAIN, UUID 1. - [ ] 84-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 84, 1강, 관련개념설명](https://youtu.be/uAdQSS3zJCo) 1. - [ ] 84-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 84, 2강, 문제설명](https://youtu.be/phQthH1DpKI) - [CODEPEN](https://codepen.io/jangka44/pen/RwpomGE?editors=0010) 1. - [ ] 84-03 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 84-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 84, 4강, 정리](https://youtu.be/MaxqfL2I928) - [CODEPEN](https://codepen.io/jangka44/pen/vYxywgQ?editors=0010) --- ### 미션 2 : 백엔드 실전배포를 위한 준비 1. - [ ] 85-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 85, 1강, 실전배포, 기본세팅, slog.gg/p/3045](https://youtu.be/EZ52AjUxviU) - [몰입코딩 - 실전배포, 기본세팅 - slog.gg/p/3045](https://slog.gg/p/3045) 1. - [ ] 85-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 85, 2강, 실전배포, NGINX, slog.gg/p/3128](https://youtu.be/iGvPnhWLGsM) - [몰입코딩 - 실전배포, NGINX - slog.gg/p/3128](https://slog.gg/p/3128) 1. - [ ] 85-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 85, 3강, 실전배포, 젠킨스, slog.gg/p/3144](https://youtu.be/IQKOg6SZRQY) - [몰입코딩 - 실전배포, 젠킨스 - slog.gg/p/3144](https://slog.gg/p/3144) --- --- ## 챕터미션, 10 - 이 문제를 풀 수 없다면, 다음챕터로 넘어가시면 안됩니다. ### 미션 1 - [영상 - 클래스101, 리액트풀스택, 챕터 10, 미션 1, 소개](https://youtu.be/EPyVkN1f2XE) #### 미션 1, 문제들 1. - [ ] 83-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 83, 2강, 문제설명](https://youtu.be/J8MT6kZuuqY) - [CODEPEN](https://codepen.io/jangka44/pen/NWpbZRj?editors=0010) 1. - [ ] 84-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 84, 2강, 문제설명](https://youtu.be/phQthH1DpKI) - [CODEPEN](https://codepen.io/jangka44/pen/RwpomGE?editors=0010) --- --- --- # 11 EXPRESS로 API 구현 ## 11-01 : 개요 ### 미션 1 : express 기초 1. - [ ] 86-01 단계 - [영상 - 리액트풀스택, 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" } ``` 1. - [ ] 86-02 단계 - [영상 - 리액트풀스택, 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 - 꼭 프로젝트의 최상위 폴더에서 실행해야 합니다. 1. - [ ] 86-03 단계 - [영상 - 리액트풀스택, 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) $$uml actor 개발자 control 크롬 control express autonumber 개발자 -> 크롬 : http://localhost:3000/wise_sayings 크롬 -> express : request(req) 발송 express -> express : /wise_sayings 에 해당하는 라우팅 함수 실행 express -> 크롬 : response(res) 응답 크롬 -> 개발자 : 눈으로 데이터 확인 $$ --- --- ## 11-02 : mysql2 ### 미션 1 : express, DB 연동 1. - [ ] 87-01 단계 - [영상 - 리액트풀스택, 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 = '명성황후'; ``` 1. - [ ] 87-02 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 87-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 87, 3강, 1개의 명언 데이터 불러오는 API](https://youtu.be/ht4XHdzdLAs) - [GIT - app.get("/wise-saying/:id", ...) 부분](https://github.com/jhs512/express_exam_2022_05/commit/1293b249f4308058bd51d94f154e76ae37b5a02a) 1. - [ ] 87-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 87, 4강, 존재하지 않는 명언 번호가 입력되면 404](https://youtu.be/xsy9vmyHq5w) - [GIT](https://github.com/jhs512/express_exam_2022_05/commit/1cd9df025e00474a936e043845b7fd10967b59df) 1. - [ ] 87-05 단계 - [영상 - 리액트풀스택, 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 : 실패, 못 찾음, 없음 $$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) 응답 크롬 -> 개발자 : 눈으로 데이터 확인 $$ --- --- ## 11-03 : 정리 ### 미션 1 : express, 명언 수정, 삭제, 추가 1. - [ ] 88-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 88, 1강, postman 설치](https://youtu.be/5mq4FAMaTbY) - [POSTMAN - 공식사이트](https://www.postman.com/) - [POSTMAN - 다운로드](https://www.postman.com/downloads/) 1. - [ ] 88-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 88, 2강, 워크스페이스, 콜렉션 생성](https://youtu.be/shf-EH9Jcz0) 1. - [ ] 88-03 단계 - [영상 - 리액트풀스택, 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 : 실패, 잘못된 입력, 예를들어 필수정보 누락 1. - [ ] 88-04 단계 - [영상 - 리액트풀스택, 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 : 실패, 잘못된 입력, 예를들어 필수정보 누락 1. - [ ] 88-05 단계 - [영상 - 리액트풀스택, 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 : 실패, 못 찾음, 없음 --- --- ## 챕터미션, 11 - 이 문제를 풀 수 없다면, 다음챕터로 넘어가시면 안됩니다. ### 미션 1 - [영상 - 클래스101, 리액트풀스택, 챕터 11, 미션 1, 소개](https://youtu.be/_UxxMXNFgjM) #### 미션 1, 문제들 1. - [ ] 87-05 단계 - [영상 - 리액트풀스택, 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 : 실패, 못 찾음, 없음 1. - [ ] 88-05 단계 - [영상 - 리액트풀스택, 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 : 실패, 못 찾음, 없음 --- --- --- # 12 할일리스트 앱에 API 적용 ## 12-01 : 개요 ### 미션 1 : VS CODE로 스쿼트 앱 구현 1. - [ ] 89-01 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 89-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 2강, 쓸데없는 파일 제거](https://youtu.be/yYYy2xW0fRw) - [GIT](https://github.com/jhs512/react_stc_2022/commit/12e5aef11423ca3b8f7c175538f6403d4f9afc50) 1. - [ ] 89-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 3강, 지마켓 산스 폰트 적용](https://youtu.be/dpH3_7SU_Ws) - [GIT](https://github.com/jhs512/react_stc_2022/commit/d5a84538fe8fe153a6cf59c2f0c80f05ba7e07d9) 1. - [ ] 89-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 4강, 테일윈드 설치](https://youtu.be/JLG-hO19uCo) - [GIT](https://github.com/jhs512/react_stc_2022/commit/01d22e9aeb269815ea08d687347416f7f0a0a168) 1. - [ ] 89-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 5강, 리액트 앱 사이즈 전체화면으로](https://youtu.be/Hs6H09dFrk0) - [GIT](https://github.com/jhs512/react_stc_2022/commit/a2e795ce313f7fd6fbb87816f86b3797436b54a2) 1. - [ ] 89-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 6강, MUI 설치](https://youtu.be/bD_QyDPf2Ro) - [GIT](https://github.com/jhs512/react_stc_2022/commit/34536855a5cca7273cb7efb833d9bb37c2b1291e) 1. - [ ] 89-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 7강, MUI 테마 적용](https://youtu.be/9Yprp4xeceI) - [GIT](https://github.com/jhs512/react_stc_2022/commit/68f1e76db7590410e1088043997240706e774b49) 1. - [ ] 89-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 8강, MUI 테마 색상을 css 변수화](https://youtu.be/p4DX0o-92O4) - [GIT](https://github.com/jhs512/react_stc_2022/commit/ff494076fe81cd3b9517881a5c219606494a5b3b) 1. - [ ] 89-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 9강, 폰트어썸 추가](https://youtu.be/CzOj86d--ME) - [GIT](https://github.com/jhs512/react_stc_2022/commit/16fe900015dabcd775d3061c983915e7d5060bd7) 1. - [ ] 89-10 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 10강, 리액트라우터, 리코일, classnames, immer 설치](https://youtu.be/tgHmmqa1Qpw) - [GIT](https://github.com/jhs512/react_stc_2022/commit/4cd7ea3c51070371269b3eea16e5c4f005a3b736) 1. - [ ] 89-11 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 11강, 명언데이터, react-countup, canvas-confetti 세팅](https://youtu.be/znv1tIuRAyY) - [GIT](https://github.com/jhs512/react_stc_2022/commit/a9e5e37820d977e367fecee0fa44212517c3aa00) 1. - [ ] 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) 1. - [ ] 89-13 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 89, 13강, 소스코드에서 경고제거](https://youtu.be/WiDCF0hSOFw) - [GIT](https://github.com/jhs512/react_stc_2022/commit/4e1fc19f6f86e032d97e547844b01251cc9e4ef1) 1. - [ ] 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) --- ### 미션 2 : next.js 기초 강좌 소개 1. - [ ] 90-01 단계 - [영상 - 리액트풀스택, 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) --- --- ## 12-02 : API 구현 1 ### 미션 1 : 할일리스트 백엔드, DB설계, 리포지터리 연결 1. - [ ] 91-01 단계 - [영상 - 리액트풀스택, 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 1. - [ ] 91-02 단계 - [영상 - 리액트풀스택, 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) 1. - [ ] 91-03 단계 - [영상 - 리액트풀스택, 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 = '식사'; ``` 1. - [ ] 91-04 단계 - [영상 - 리액트풀스택, 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)); ``` --- --- ## 12-03 : API 구현 2 ### 미션 1 : 할일리스트 조회, 생성, 삭제, 수정 1. - [ ] 92-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 92, 1강, 조회](https://youtu.be/sZtstdhe7d8) - [GIT](https://github.com/jhs512/todo_backend_2022_05_25/commit/daf96b31d2603f9d23f5f2fa0820288cd1d296e0) 1. - [ ] 92-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 92, 2강, 단건조회](https://youtu.be/evbtyOwUtyM) - [GIT](https://github.com/jhs512/todo_backend_2022_05_25/commit/0031af1e6135a34ff71de66f113959e95127dd65) 1. - [ ] 92-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 92, 3강, 삭제](https://youtu.be/CWR0y-b6oas) - [GIT](https://github.com/jhs512/todo_backend_2022_05_25/commit/e16bc743f5cbde40813ff94c71a67f9345cd8ae7) 1. - [ ] 92-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 92, 4강, 생성](https://youtu.be/92C0UWgQypw) - [GIT](https://github.com/jhs512/todo_backend_2022_05_25/commit/297b063dde7bee7a520ee0aa335a4cd607bf8b9a) 1. - [ ] 92-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 92, 5강, 수정](https://youtu.be/DbzGFEELv_w) - [GIT](https://github.com/jhs512/todo_backend_2022_05_25/commit/04ed57926914a6b080a6b36df209637149d65293) --- --- ## 12-04 : 기존 할일리스트에 적용 ### 미션 1 : # 챕터 93, 할일리스트에 API 적용 1. - [ ] 93-01 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 1강, id를 no로 변경](https://youtu.be/ugavVzM_ZaU) - [CODEPEN](https://codepen.io/jangka44/pen/ExQbKXX?editors=0010) 1. - [ ] 93-02 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 2강, todos와 관련된 리코일 퍼시스트 설정 제거](https://youtu.be/ij0EH5mez2s) - [CODEPEN](https://codepen.io/jangka44/pen/WNMXwXb?editors=0010) 1. - [ ] 93-03 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 3강, API에서 가져온 todos 보여주기](https://youtu.be/P2eYsD2E8p4) - [CODEPEN](https://codepen.io/jangka44/pen/poadypy?editors=0011) 1. - [ ] 93-04 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 4강, 할일작성 API 연결](https://youtu.be/2_71_V2os1o) - [CODEPEN](https://codepen.io/jangka44/pen/mdXqPjo?editors=0010) 1. - [ ] 93-05 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 5강, 할일작성 API와 관련된 함수들에 async 처리하여, 작성완료 스낵바 메시지가 잘 나오도록](https://youtu.be/GAmMrnfhdK4) - [CODEPEN](https://codepen.io/jangka44/pen/NWywNEG?editors=0010) 1. - [ ] 93-06 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 6강, 네트워크 혹은 서버이상으로 인한 오류발생시 관련오류 출력되도록 예외처리](https://youtu.be/s6lms5usdBQ) - [CODEPEN](https://codepen.io/jangka44/pen/yLvPOwM?editors=0010) 1. - [ ] 93-07 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 7강, 할일들이 아직 서버에서 로딩되지 않은 경우 로딩화면 표시](https://youtu.be/HV0c5mAlxcs) - [CODEPEN](https://codepen.io/jangka44/pen/JjpOXqB?editors=0010) 1. - [ ] 93-08 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 8강, 할일수정 API 연결](https://youtu.be/LRMtDJ1jTbg) - [CODEPEN](https://codepen.io/jangka44/pen/QWQOEjd?editors=0010) 1. - [ ] 93-09 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 9강, 할일로딩이 앱 시작시 한번만 수행되도록](https://youtu.be/r7HSZuhnjuc) - [CODEPEN](https://codepen.io/jangka44/pen/jOZaryw?editors=0011) 1. - [ ] 93-10 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 10강, 할일완료여부체크시 DB에도 반영되도록 API 연결](https://youtu.be/Zp01CmAK2ps) - [CODEPEN](https://codepen.io/jangka44/pen/ExQbyEG?editors=0010) 1. - [ ] 93-11 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 11강, 할일삭제 API 연결](https://youtu.be/PWNEvj_VD7A) - [CODEPEN](https://codepen.io/jangka44/pen/vYdWKaN?editors=0010) --- --- ## 챕터미션, 12 - 이 문제를 풀 수 없다면, 다음챕터로 넘어가시면 안됩니다. ### 미션 1 - [영상 - 클래스101, 리액트풀스택, 챕터 12, 미션 1, 소개](https://youtu.be/Y01SECrhzBo) #### 미션 1, 문제들 1. - [ ] 93-11 단계 - [영상 - 리액트풀스택, ken 5034, 챕터 93, 11강, 할일삭제 API 연결](https://youtu.be/PWNEvj_VD7A) - [CODEPEN](https://codepen.io/jangka44/pen/vYdWKaN?editors=0010) --- --- --- # OUTRO 완강을 축하합니다. ## OUTRO-01 : 이제 당신도 리액트 풀스택 개발자 입니다. $$ppt title: PPT-OUTRO-01 # 초보자에게[br /]간단한 예제를 외울 때까지[br /]반복해보는 것 만큼[br /]좋은 실력향상 방법은 없습니다.--o--t=1 # 우리는 지식과잉시대에 살고 있습니다.--o--t=1 # 개발자를 준비하시는 분들이, 개발자가 되려면[br /]많은 지식이 있어야 한다고 생각하십니다.--o--t=1 # 하지만 이것은 틀렸습니다.[br /]개발자에게 필요한 것은 지혜 입니다.--o--t=1 # 지혜는 응용된 지식입니다.[br /]지식에 매몰되지 마세요.--o--t=1 # 미련하게 공부하세요.[br /]반복해서 만들어보세요.[br /]소박한 목표부터 시작하세요.--o--t=1 # 자료가 중요하지 않습니다.[br /]중요한 것은 응용여부입니다.--o--t=1 # 이 강좌는 철저하게 튜토리얼 방식입니다.[br /]--o--t=1 # 제 강좌와 자료가 어려분에게[br /]도움이 되었기를 바랍니다.[br /]--o--t=1 # 고생많으셨습니다.--o--t=1 # 수업페이지의 내용은 계속 업데이트 될 예정입니다.--o--t=1 # 배포, next.js 등 좀 더 자세히 다루고[br /]싶은 내용들이 계속 추가될 예정입니다.--o--t=1 # https://to2.kr/dJg[br /]TypeScript 활용 풀스택 개발--o--t=1 $$ --- # 영상제작 완료 체크리스트 1. - [x] WELCOME-01 : 반갑습니다, 15년 차 웹 개발자 장희성 입니다. 1. - [x] WELCOME-02 : 개발툴 세팅 1. - [x] WELCOME-03 : 코칭권 사용법 1. - [x] 01-10 : 개요 1. - [x] 01-02 : Array Functions 1. - [x] 01-03 : 불변성 1. - [x] 01-04 : 정리 1. - [x] 02-01 : 개요 1. - [x] 02-02 : 리액트를 사용하는 이유 1. - [x] 02-03 : Virtual DOM과 리랜더링 1. - [x] 02-04 : useState 1. - [x] 02-05 : 숫자 카운터 1. - [x] 02-06 : 정리 1. - [x] 03-01 : 개요 1. - [x] 03-02 : useRef 1. - [x] 03-03 : useEffect 1. - [x] 03-04 : 멀티체크박스 관리 기능 구현 1. - [x] 03-05 : 정리 1. - [x] 04-01 : 개요 1. - [x] 04-02 : 머터리얼 UI 기초 1. - [x] 04-03 : 머터리얼 UI 적용 1. - [x] 04-04 : 테일윈드 적용 1. - [x] 04-05 : 정리 1. - [x] 05-01 : 개요 1. - [x] 05-02 : 상태관리 기초 1. - [x] 05-03 : 리코일 기초 1. - [x] 05-04 : 리코일 적용 1. - [x] 05-05 : 리코일 퍼시스트 1. - [x] 05-06 : 정리 1. - [x] 06-01 : 개요 1. - [x] 06-02 : 리액트 라우터 기초 1. - [x] 06-03 : 리액트 라우터 적용 1. - [x] 06-04 : 정리 1. - [x] 07-01 : 개요 1. - [x] 07-02 : 스쿼트 챌린지 앱 구현 1 1. - [x] 07-03 : 스쿼트 챌린지 앱 구현 2 1. - [x] 07-04 : 스쿼트 챌린지 앱 구현 3 1. - [x] 07-05 : 스쿼트 챌린지 앱 구현 4 1. - [x] 07-06 : 정리 1. - [x] 08-01 : 개요 1. - [x] 08-02 : 할일리스트 앱 구현 1 1. - [x] 08-03 : 할일리스트 앱 구현 2 1. - [x] 08-04 : 할일리스트 앱 구현 3 1. - [x] 08-05 : 할일리스트 앱 구현 4 1. - [x] 08-06 : 정리 1. - [x] 09-01 : 개요 1. - [x] 09-02 : fetch 1. - [x] 09-03 : 리액트쿼리로 구조 개선 1. - [x] 09-04 : 정리 1. - [x] 10-01 : 개요 1. - [x] 10-02 : DDL 1. - [x] 10-03 : DML 1. - [x] 10-04 : 인덱스, 서브쿼리, 조인 1. - [x] 10-05 : 정리 1. - [x] 11-01 : 개요 1. - [x] 11-02 : mysql2 1. - [x] 11-03 : 정리 1. - [x] 12-01 : 개요 1. - [x] 12-02 : API 구현 1 1. - [x] 12-03 : API 구현 2 1. - [x] 12-04 : 기존 할일리스트에 적용 1. - [x] OUTRO-01 : 이제 당신도 리액트 풀스택 개발자 입니다. --- # 스케쥴 ## 04월 22일 1. - [x] WELCOME 1. - [x] 01 1. - [x] 02 1. - [x] 03 ## 04월 29일 1. - [x] 04 1. - [x] 05 ## 05월 06일 1. - [x] 06 1. - [x] 07 ## 05월 13일 1. - [x] 08 1. - [x] 09 ## 05월 20일 1. - [x] 10 1. - [x] 11 ## 05월 27일 1. - [x] 12 1. - [x] OUTRO --- $$hide # 제작가이드 ## 관련링크 - [본 강좌 전용 가이드](https://class101.notion.site/Presto-Plus-X-101-e2adc58fa9a341918f6f311296907a90) - [영상편집 가이드](https://class101.notion.site/77a9c89db95b4870b46bce0242e3b002) $$