MUTSA_Front.archive
1.styled-components를 알아보자
1주차 노마드코더 React 마스터클래스 1~3강 수강 https://nomadcoders.co/react-masterclass ✍️styled components란? styled-components란 Javascript 파일 내에서 css를 사용할 수 있게 해주는
2.TYPESCRIPT를 알아보자
✍️ typescript Javascript를 기반으로 만들어진 똑똑한 언어 코드가 실행되기 전에 오류를 알려줌! ex) 변수 이름에 오타, 존재하지 않는 변수 등등... >설치 (두가지 방법~!) npx create-react-app ~앱이름~ --templat
3.CRYPTO TRACKER 클론코딩
2주차 과제 📌 노마드코더 react masterclass ch4 CRYPTO TRACKER 클론코딩 수강 ✍️React Router & React query 설치 > #### 설치 방법 터미널에 npm i react-router-dom react-query 입력
4.State Management(1)
3주차 과제 : 노마드코더 5. STATE MANAGEMENT 수강ThemeProvider를 index.tsx에서 App 컴포넌트로 끌고온 후, theme을 두개 각각 만들어주면 됨.이제 버튼을 하나 만들고 onClick으로 위 toggle함수를 지정해주면!그 버튼을
5.State Management(2)
Setup - Form 형성 일단 기본적으로 form을 만들어준다. typescript에서 form은 이렇게 해주면 됐었지~.~ 약간 형식?같은거인듯.. 걍 저렇게 하면 됨 저렇게 해주면 우리가 submit하는 값이 콘솔에 찍힌다.ㅇㅇ 그런데 코드가 너무 길고 지
6.State Management(3)
Recoil toDo 추가하기 todoState라는 atom을 만들자. 우리가 앞서 recoil에 대해 공부했을 때 배웠던 것이다. useRecoilValue를 사용하면 state값을 받아올 수 있고, useSetRecoilState를 사용하면 state를 수정할
7.TRELLO CLONE(1) - Selector get & set
5주차 과제: 노마드코더 React JS 마스터클래스 수강Selector안에서 atom에 접근하고 싶다면 get함수를 이용하면 됨.예를 들어이런식으로 작성해주면 hourSelector는 minuteState라는 atom에 접근해있는 상태가 된다.이제 이렇게 App을 작
8.TRELLO CLONE(2) - Drag and Drop
Drag and Drop을 만들어보자!React로 list를 만들기 위한 아름답고 접근 가능한 드래그 앤 드롭설치방법: 터미널에 npm i react-beautiful-dnd 입력우리는 typescript에서 사용할 것이므로 추가로 터미널에 npm i --save-de
9.TRELLO CLONE(3) - Drag and Drop 구체화
현재는 React JS에서 컴포넌트의 State가 변하면 해당 컴포넌트의 모든 children이 리렌더링된다. 그래서 드래그할때 가끔 떨리는 현상이 발생하는 것이다.그렇다면 왜 이런 현상이 발생하고 있을까?이건 리액트의 기본 성질이라고 보면 된다.부모컴포넌트의 stat
10.TRELLO CLONE(4) - Drag and drop에 form 추가
이제 list에 todo를 추가할 수 있는 form을 만들 것이다.즉, 이제 유저가 직접 todo를 쓰고 엔터를 쳐서 등록을 할 수 있게 만들어주자.일단 reference에 대해 알아보자.우리는 사실 이미 reference를 사용했다. (뭔지는 모르고)reference
11.PURE Redux: Counter
Redux : 기본적으로 Javascript application들의 state(상태)를 관리하는 방법 React와 많이 사용하면서 유명해졌으나, React에 의존하는 라이브러리는 아님. 이와는 별개로 Angular, Vue.js, Vanilla JS 등 JS 언어내의
12.PURE REDUX: To Do List
이번에는 바닐라JS에 리덕스를 이용하여 투두리스트를 만들어보자!우리가 이전에 배웠던 방식으로 이렇게 만들어주었다.이렇게 해주고 입력창에 "투두투두리덕스"라고 입력한 후 Add버튼을 클릭해보았다.콘솔창을 열어보면text로 잘 들어오는 것을 확인👌👌👌즉, 우리는 이제
13.React-Redux
💻 React Redux
14.Redux Toolkit
설치: 터미널에 npm install @reduxjs/toolkit 입력✍️ Redux Toolkit이란? 간단하게 말하면, 많은 지름길이 있는 package라고 보면 됨redux를 사용할 때, 보다 더 짧은 코드로 같은 기능을 하도록 도와준다!createAction
15.Animation(1)
📖 7주차 과제: 노마드코더 React JS 마스터클래스 8.animation 수강 🎈 Framer Motion Framer Motion : ReactJS용 production-ready 모션 라이브러리 https://www.framer.com/motion/
16.Animation(2)
🍕 MotionValues > 애니메이션 값의 상태(state)와 속도(velocity)를 추적 모든 모션 컴포넌트는 내부적으로 MotionValues를 사용하여 애니메이션 값의 상태와 속도를 추적 https://www.framer.com/docs/motionva