쑥쑥자라기🌱

Mock API를 만들고 테스트하기 위해서는 POST MAN이라는 프로그램이 필요하다. https://www.postman.com/downloads/ [포스트맨 설치 링크] 1) Rest API란? REpresentational State Transfer API의 약어이다. 소프트웨어 개발 아키텍쳐의 한 형태로, 클라이언트와 서버 사이 통신 방식 중 하나이다. RESTful은 REST API를 제공하는 웹서비스를 말한다. REST 구성 자원: URI 행위: Http method(GET, POST, PUT, DELETE) 표현: JSON, XML, ...(대부분의 경우 JSON을 주고 받는다.) REST 특징 클라이언트 - 서버 구조 무상태성 캐시 처리 기능 자체 표현 구조 계층화 인터페이스 일관성 2) ..

1) 상태관리 흐름 (1) 리덕스 Store를 Component에 연결한다. (2) Component에서 상태 변화가 필요할 때 Action을 부른다. (3) Reducer를 통해서 새로운 상태 값을 만들고 (4) 새 상태값을 Store에 저장한다. (5) Component는 새로운 상태값을 받아온다.(props를 통해 받아오니까 다시 랜더링된다.) 2) Redux 리덕스는 상태관리 라이브러리이다. (전역 상태관리를 편하게 할 수 있다.) (1) State 리덕스에서는 저장하고 있는 상태값("데이터"라고 생각해도된다.)를 state라고 부른다. 딕셔너리 형태({key}: value) 형태로 보관한다. (2) Action 상태에 변화가 필요할 때(= 가지고 있는 데이터를 변경할 때) 발생하는 것. // 액..

1) React.createContext(): 데이터를 저장할 공간 만들기 const MyStore = React.createContext(); 2) 데이터를 가져다 쓰는 방법 - Context.Provider 데이터를 주입하기 Provider는 Context를 구독한 컴포넌트들에게 데이터가 변했다고 알려준다. 여러 컨텍스트가 있다면 중첩해서 사용해도 된다. - Context.Consumer 주입한 데이터를 구독하기 Consumer는 컴포넌트가 context를 구독하게 해준다. function App() { // Context의 Value는 App 컴포넌트에서 관리 const [name, setName] = useState("유정"); return ( {(value) => {return {value.na..

1) 상태관리란? 상태관리는 전역 데이터 관리이다. 렌더링과 연결된 데이터를 컴포넌트끼리 주고 받기는 생각보다 어렵다. 이런 번거로움을 줄여주기 위해 전역 데이터를 만들고 관리해주는 것이 리액트에서 말하는 상태관리이다. 형제 컴포넌트끼리 데이터를 주고 받기 위해서는 1. 부모 컴포넌트에서 state를 생성하고 자식 컴포넌트들에게 props로 데이터와 state를 변경할 함수를 넘겨준다. 2. 자식 컴포넌트에선는 props로 받아온 값을 참조해서 쓰고, 값 변경이 필요한 경우는 넘겨받은 함수로 해당 값을 변경해준다. 3. props drilling 많이 사용하는 상태관리 툴 ContextAPI() Redux Recoil zustand react-query mobx 2) 전역 저장소는 필요하지 않을 수 있다..

1. async 함수 앞에 async를 붙여서 사용한다. 항상 프라미스를 반환한다. (프라미스가 아닌 값이라도, 프라미스로 감싸서 반환해준다.) // async는 function 앞에 써준다. async function myFunc() { return "프라미스를 반환해요!"; // 프라미스가 아닌 것을 반환한다. } myFunc().then(result => {console.log(result)}); // 콘솔로 확인 2. await async와 함께 쓰인다. (async 없이는 못쓴다.) async 함수 안에서만 동작한다. await는 프라미스가 처리 될 때까지 기다렸다가 그 이후에 결과를 반환한다. async function myFunc(){ let promise = new Promise((reso..

1) 동기와 비동기 - 동기 하나 하나씩 처리되는 방식. 요청을 보내고 응답을 받은 후에 다음 일을 시작하는 방식. - 비동기 어떤 작업을 요청을 보낸 다음 그 작업을 다했다는 응답을 받을 때까지 기다리지 않고 바로 다음 일을 시작하는 방식 서버 등에서 데이터를 받아오는 등 시간이 필요한 작업을 해야한다면 응답을 받기까지 계속 기다릴 수 없기 때문에 비동기 처리를 한다. 2) 콜백이란? callback은 특정 함수에 매개변수로 전달된 함수이다. A()가 B()를 콜백으로 받았다면 A()안에서 B를 실행할 수 있다. 콜백 패턴은 자바스크립트가 비동기 처리를 하기 위한 패턴 중 하나이다. 전통적인 콜백 패턴은 일명 콜백 헬로 불리는 엄청난 중첩 문제가 생기기 쉽다. 1.콜백 헬 비동기 처리가 늘어나면 호출이..

(1) redux 설치 npm install redux react-redux (2) redux-thunk 설치 npm install redux-thunk (3) index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { BrowserRouter } from "react-router-dom"; import { Provider } from "react-redux"; import store from "./redux/store"; const root..

리덕스: state관리 리덕스 과정: UI에서 액션이 생기면 액션이 Dispatch로 간다. 그 액션은 Reducer로 가서 작업지시를 받아서 return을 하면 State에 반환이 된다. Redux의 단점 1. 모든 것을 동기적으로 처리하기 때문에 코드가 순차적으로 진행된다. 그렇기 때문에 비동기 작업은 리덕스로 할 수 없다. 예를 들면 API요청은 서버에 데이터를 요청하고 데이터를 받은 후에 처리해야 한다. 다음 코드를 기다리지 않고 바로 처리하는 것을 비동기 처리라고 한다. 리덕스에서 비동기 처리를 하기 위해 나온 것이 바로 리덕스 미들웨어이다. 리덕스 미들웨어 과정: UI에서 액션이 생기면 액션이 Dispatch로 간다. 그 액션은 Reducer로 바로 가는 것이 아니라 미들웨어에 들려서 미들웨어..