ReactJS_MasterClass
1.[ReactJS_MasterClass] #2 STYLED COMPONENTS
✍2.0 Why styled Components *1. cmd창에 코드 한줄만 입력하면 프로젝트 생성 완료* *2. cmd창에서 바로 vscode 실행* *3. 페이지 실행* *4. App.js와 index.js 제외하고 src에 있는 파일들 삭제, Ap
2.[ReactJS_MasterClass] #3 TYPESCRIPT
✍3.0 Introduction TypeScript란? JavaScript를 기반으로 한 프로그래밍 언어 프로그래밍 언어가 작동하기 전에 type을 확인하는 strongly-typed 언어이다. const plus = (a:number, b:number) => a+b;
3.[ReactJS_MasterClass] #4 REACT ROUTER V6
✍4.1 BrowserRouter react-router-dom 6.4 버전 설치 BrowserRouter 구현하는 방식이 조금 바뀌었는데, createBrowserRouter에서 다뤄본다(4.2) ✍4.2 createBrowserRouter createBrowse
4.[ReactJS_MasterClass] #5 CRYPTO TRACKER (1)
✍5.0 Setup > React Query 패키지는 편리한 방식으로 데이터를 fetch 시킬 수 있다. 리액트 쿼리를 배우기 전에 우리가 아는 방식으로 데이터를 fetch 시켜보자. ✔️react-query 설치 path="/:coinId"는 Router에게 U
5.[ReactJS_MasterClass] #5 CRYPTO TRACKER (2)
✍5.9 React Query part One react query 설치 react query를 쓰면 우리 스스로 실행하고 있었던 로직들을 축약해주고, react query를 사용하기 위해 첫 단계로 fetcher 함수를 만들어야 한다. Coins.tsx의 여러줄을
6.[ReactJS_MasterClass] #6 STATE MANAGEMENT (1)
✍6.0 Dark Mode part One Recoil은 React JS에서 사용할 수 있는 state management library state management가 무엇인지 알아보기 위해, state management를 사용하지 않고 일단 기능을 구현해보자.
7.[ReactJS_MasterClass] #6 STATE MANAGEMENT (2)
✍6.11 Add To Do TODO interface를 만드는데, 명시된 string 만을 가질 수 있다고 설정 해줄 수 있다. ✍6.12 Refactoring CreateToDo, ToDo, ToDoList로 컴포넌트를 분리 key 에러를 해결하기 위해 ToDo
8.[ReactJS_MasterClass] #7 TRELLO CLONE (1)
✍7.0 Get Selectors 만약 selector안에서 atom에 접근하고 싶다면 atom의 값을 가져오게끔 하는 get 함수를 사용하면 된다. 이 챕터에서 state는 minutes 하나 뿐이다. minutes과 hour 모두 state로 저장하지 않고 sel
9.[ReactJS_MasterClass] #7 TRELLO CLONE (2)
✍7.9 Same Board Movement ✅ 1. 수정이 일어난 보드만 복사 ✅ 2. 그 복사본을 기존 것들의 옆에 붙여주기 ✍7.10 Cross Board Movement 두개의 복사본을 만들어야하는데, source를 복사해와서 복사본에서 원하는 요소를 지워주고
10.[ReactJS_MasterClass] #8 ANIMATIONS (1)
✍8.0 Introduction 이번 섹션에서는 ReactJs용 라이브러리인Framer Motion을 사용해서 애니메이션을 만드는 방법을 배워보자. 📎https://www.framer.com/motion/ ✍8.1 Installation animate를 하기 원한
11.[ReactJS_MasterClass] #8 ANIMATIONS (2)
✍8.10 SVG Animation 📎https://fontawesome.com/ ✅fill="currentColor" 일 때 path는 svg의 color를 쓰게 된다. ✅pathLength는 현재 우리 위치까지의 path의 길이 마지막으로 특정 propert