applecoding4

• 

  무한 props 없애기 Redux Redux가 뭔데 왜 쓰는데 Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리이다. store.js에 state들을 보관하고 다른 컴포넌트에 쏴줄수있다. 사이트가 커지면 유용하게 써먹을 수 있다. Redux 설치 및 셋팅 Redux 설치 아래의 코드를 터미널에 입력하면된다. npm install @reduxjs/toolkit react-redux redux toolkit이라는 라이브러리를 사용할 건데 redux의 문법을 쉽게 만드는 라이브러리이다. 설치하기전에 "react" "react-dom" 의 버전이 18.1.x 이상인지 확인하자. 확인법은 package.json에서 확인가능하다. Redux 셋팅 아무곳에 store.js 파일을 만들고 아래 코드에 복붙해준다. 여기가 바.. 개발/React 2023. 8. 23.

• 

  props가 귀찮다면 Context API (이거보단 Redux가 좋아) props는 무조건 부모에서 자식으로 자료를 옮겨줘야하는데 컴포넌트가 많아진다면 복잡해 질 수 있다. 그래서 Context API 문법을 쓰거나 Redux 같은 외부 라이브러리 쓰면 되는데 여기선 Context API을 사용해보자. 사용법 세팅법 createContext를 import를 해준다. React.createContext()함수를 가져와서 context1으로 만들어준다. context는 state보관 창고라고 생각하면된다. (App.js) import { useState, createContext } from "react"; export let Context1 = React.createContext(); function App(){ let [재고, 재고변경] = useState([10,11,12.. 개발/React 2023. 8. 23.

• 

  tap 만들기 강의를 듣다가 tap을 만드는 과제를 주어졌는데 bootstrap를 사용해서 css를 만들고 구현을 했는데 나는 bootstrap을 사용하기가 싫어서 직접 styled-component를 사용해서 만들어보았다. (기능구현위주라서 css는 대충 만들었다.) react, styled-component 사용 UI를 만드는 단계 applecoding에서 배운 ui를 만드는 단계는 크게 3단계로 나뉘어져 있다. 1. html css로 디자인 미리 완성 2. UI의 현재 상태를 저장할 state 하나 만듬 3. state에 따라서 UI가 어떻게 보일지 작성 그래서 이걸 토대로 tap을 만들어보자. html css로 디자인 미리 완성 전체적인 button을 모아놓은 content를 모아놓은 를 통해 디자인만 미리 만.. 개발/개발일지 2023. 8. 23.

• 

  서버통신하려면 ajax (axios) 서버에서 데이터 받을때 서버는 데이터를 달라고하면 주고 수정해달라고 하면 수정해주고 그냥 데이터 저장소이다. 데이터를 요청할 때는 그에맞는 규격에 맞춰서 요청을 해야한다. 1. 어떤 데이터인지 (URL 형식으로) 2. 어떤 방법으로 요청할지 (대부분 GET or POST 두가지 쓴다.) 데이터를 가져올 때는 보통 GET 고르면 되고 데이터를 서버로 보낼 때는 POST 고르면 된다. 더보기 요청 메소드 종류 GET : 리소스 조회 POST: 요청 데이터 처리, 주로 등록에 사용 PUT : 리소스를 대체(덮어쓰기), 해당 리소스가 없으면 생성 PATCH : 리소스 부분 변경 (PUT이 전체 변경, PATCH는 일부 변경) DELETE : 리소스 삭제 예를들어 post 요청을 보내고 싶다면 아래 코드처럼 쓰면.. 개발 2023. 8. 18.