본문 바로가기
SMALL

분류 전체보기527

Node) 노드 기능 알아보기 - REPL, 모듈 사용하기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [Node.js 교과서]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 노드 기능 알아보기 REPL 사용하기 REPL 입력한 코드를 읽고 (Read) 해석하고 (Eval) 결과물을 반환하고 (Print) 종료할 때까지 반복 (Loop) 노드의 REPL을 사용하기 위해 터미널을 열어줍니다. (ctrl + `) $ node Welcome to Node.js v18.12.1. Type ".help" for more information. 프롬프트가 > 모양으로 바뀌었다면 자바스크립트 코드를 입력할 수 있습니다. > const str = 'Hello world, Hello node'; undefined > console.log(str); Hello world, .. 2022. 12. 27.
React) 리덕스 미들웨어를 통한 비동기 작업 관리 - 미들웨어란? 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리덕스 미들웨어를 통한 비동기 작업 관리 리액트 웹 애플리케이션에서 API 서버를 연동할 때는 상태 관리를 잘 해줘야 합니다. 요청이 시작되었을 때는 로딩 중임을, 요청이 성공/실패했을 때는 로딩이 끝났음을 명시해주어야 합니다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러 상태를 관리합니다. 리덕스 사용 시 이 같은 비동기 작업을 관리해야 한다면, 미들웨어를 사용해 효율적으로 관리할 수 있습니다. 작업 환경 준비 CRA 사용해 리액트 프로젝트 생성 $ yarn create react-app learn-redux-middlewar.. 2022. 12. 19.
React) 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 ④ - Hooks를 사용하여 컨테이너 컴포넌트 만들기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 Hooks를 사용하여 컨테이너 컴포넌트 만들기 리덕스 스토어와 연동된 컨테이너 컴포넌트 생성 시, connect 대신 react-redux에서 제공하는 Hook을 이용할 수 있습니다. useSelector로 상태 조회하기 useSelector Hook은 connect 함수를 사용하지 않고도 리덕스의 상태를 조회할 수 있습니다. (connect 함수 - 컴포넌트를 리덕스와 연결시켜주는 역할) 예시 const 결과 = useSelector(상태 선택 함수); 상태 선택 함수는 mapStateToProps와 형태가 같습니다. Counter.. 2022. 12. 16.
React) 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 ③ - 리덕스 더 편하게 사용하기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 리덕스 더 편하게 사용하기 액션 생성 함수, 리듀서를 작성할 땐 redux-actions 라이브러리 / immer 라이브러리를 사용하여 편하게 사용 가능! redux-actions 액션 생성 함수를 더 짧은 코드로 작성 가능 리듀서 작성 시에도 switch/case 문이 아닌 handleActions 함수를 사용 $ yarn add redux-actions counter 모듈에 적용하기 modules/counter.js import { createAction } from 'redux-actions'; ... ... // 액션 생성 함.. 2022. 12. 16.
React) 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 ② - 리액트 애플리케이션에 리덕스 적용하기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 리액트 애플리케이션에 리덕스 적용하기 스토어를 생성하고 리액트 애플리케이션에 리덕스를 작용하는 작업은 src/index.js에서 이루어집니다. 스토어 만들기 src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { createStore } from 'redux'; import rootReducer from './modules'; const store.. 2022. 12. 15.
React) 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 ① - 준비 과정 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 리액트에서 리덕스 사용 시, 상태 업데이트 관련 로직을 모듈로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는 데 도움이 된다고 배웠습니다. 이외에도 여러 컴포넌트에서 동일한 상태를 공유할 때 유용하고, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 최적화 해줄 수도 있습니다. 이전 포스팅에서는 store.dispatch와 store.subscribe를 사용했지만, 리액트에서 리덕스를 사용할 땐 react-redux 라이브러리에서 제공하는 connect와 Provider를 사용합니다. 작업 환경 설정 $ y.. 2022. 12. 9.
LIST

티스토리툴바