하루 한 걸음, 개발 블로그

리덕스 프로젝트 만들고 toolkit 추가 npx create-react-app [프로젝트 명] --template redux npm i redux npm i react-redux npm install @reduxjs/toolkit npm install styled-components npm install react-router-dom --save ESLint, Pretteir 설치 명령어 npm install eslint prettier --save-dev npx eslint --init npx install-peerdeps --dev eslint-config-airbnb npm install --save-dev eslint-plugin-prettier npm install --save-dev --sa..

[ Builder Callback 표기법 ] redux toolkit - thunk 를 이용해서 비동기 작업을 처리하는 방법 by 생활코딩 - 전체 코드 const status = useSelector(state => { return state.counter.status; }); const count = useSelector(state => { return state.counter.value; }); { dispatch(asyncUpFetch()); }}>+ async thunk {count} | {status} const asyncUpFetch = crateAsynckThunk( 'counterSlice/asyncUpFetch', async() => { const resp = await fetch('h..

Ch 10-1 리액트의 기본 React : 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리 1분 내로 React 추가하기 by React 공식 문서 1단계: HTML 파일에 DOM 컨테이너 설치 이 태그에 유일한 HTML 속성인 id를 부여해줍니다. 이를 통해 JavaScript가 태그를 찾고 찾은 태그 안에 React 컴포넌트를 표시할 수 있게됩니다. * 태그로 한 페이지에서도 독립적인 DOM 컨테이너를 원하는 만큼 추가할 수 있습니다. React가 DOM 컨테이너 안에 내용을 추가해줍니다. 2단계: 스크립트 태그 추가하기 3단계: React 컴포넌트 만들기 like_button.js 라는 이름으로 HTML 페이지 옆에 새 파일을 만듭니다. 'use strict'; const e ..

LifeCycle 리액트의 컴포넌트는 모두 라이프 사이클(Life cycle, 혹은 생명주기)을 가집니다. 라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 나타낸다. 리액트 훅이 나오기 전에는 이러한 라이프 사이클을 관리하기 위해서 주로 클래스형 컴포넌트를 사용했다. 라이프사이클은 크게 생성될 때(Mount), 업데이트할 때(Update), 제거할 때(Unmount) 세 단계이다. Mount : 처음 컴포넌트를 불러와서 생성하는 단계 Update : 아래 4가지 경우로 인해 데이터가 바뀌거나 부모 컴포넌트가 랜더링할 때 일어나는 단계 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때) 강제로 업데이트 했을 때 (forceU..

Prev KEYWORD 1. HTTP(Hypertext Transfer Protocol) - 상태가 없는(stateless) protocol : 데이터를 주고 받기 위한 각각의 데이터 요청이 서로 독립적. 이전 - 다음 데이터 요청이 서로 관련이 없다. *HTTP 프로토콜은 일반적으로 TCP/IP 통신 위에서 동작하며 기본 포트는 80번 URL(Uniform Resource Locators) : 서버에 자원을 요청하기 위해 입력하는 영문 주소 Http Request Methods - HTTP Verbs : url을 이용해서 Server에 특정 데이터를 요청할 때, 데이터에 특정 동작을 수행하기 위해 이용하는 것 - 주요 매서드 GET - read 데이터 조회할 때 값을 가져올 때 사용함 POST - cr..

리덕스 https://velog.io/@hwang-eunji/%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%A0%95%EB%A6%AC-redux-1 리덕스+리액트 Redux with React #1 설치와 리덕스 개념 리덕스 Redux 공식문서 스토어라는 가상공간에 데이터를 모아두어, 필요한 컴포넌트에서 데이터를 가져다 사용,변경 할수 있다.중간 컴포에게 데이터전달-전달-전달 하지 않고, 중앙관리되는 데 velog.io https://velog.io/@lchyung1998/React-Redux-Saga-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%EB%A5%BC-%EB%81%9D%EC%9E%A5%EB%82%B4%EB%B2%84%EB%A0%B8%EB%8B%A4#reducer..

https://todo-list-one-delta.vercel.app/ To-do List todo-list-one-delta.vercel.app https://github.com/123456soobin-choi/TodoList GitHub - 123456soobin-choi/TodoList: project_TodoList_React project_TodoList_React. Contribute to 123456soobin-choi/TodoList development by creating an account on GitHub. github.com React-redux 숙련 주차 개인 과제_TodoList v.2 - v2.0.0 수정 및 추가한 기능(과제 요구사항 외) 1. favicon 넣었음 - 북마..

🔑 Q. query parameter, query string, path variable * API의 endpoint를 어떻게 설계할지, GET method를 통해 데이터를 넘길 경우에 Path Variable 와 Query Parameter 중 뭐가 더 적합한가? 1. Query Parameter 함수에 사용되는 parameter인데 path parameter에 없는 파라미터 from fastapi import FastAPI app = FastAPI() fake_items_db = [{"item_name": "Foo"}, {"item_name": "Bar"}, {"item_name": "Baz"}] @app.get("/items/") async def read_item(skip: int = 0, lim..

🔑 Q. callback, promise, async/await 1. Callback이란? 다른 함수가 실행을 끝낸 뒤 실행되는 함수. 코드를 통해 명시적으로 호출하는 함수가 아니라 함수를 등록해놓은 후 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다. 파라미터로 함수를 전달 받아 함수의 내부에서 실행된다. callback ex) function add5(a, callback) { setTimeout(() => callback(a + 5), 100) // 100ms가 지난 후 함수로 입력받은 callback에 a + 10값을 다시 입력하여 callback함수 호출 } add5(10, function (res) { // add5가 입력받는 callback함수 정의 부분 ..

React 숙련 주차 개인 과제 react-router-dom, styled-components, redux를 사용해서 My Todo List 다시 만들기 - Requirement todos 데이터는 React-redux 를 사용해서 전역으로 상태를 관리 todo modules - Ducks pattern Todo 추가하면 제목과 내용 input 다시 빈 값이 되도록 구현 input에 값이 있는 경우에서 상세페이지로 이동하는 경우, input의 value가 초기화되도록 구현 상세보기 클릭하면 상세페이지, 이전으로 클릭하면 리스트 화면으로 되돌아가기 기능 및 요구사항 구현 완료 React 입문 주차 팀 과제 🔐 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사 배열의 각 요소를 수정하고 싶다면 어..