본문 바로가기

분류 전체보기

 (95)
Today I am
[Redux 강의노트] Redux Middleware | logger, thunk 리덕스 미들웨어 액션이 디스패치될때 미들웨어에서 액션의 조건에 따라 무시처리 될 수 있다. - 주로 비동기 작업을 처리 할 때 사용된다. (API요청) **배울 내용 정리** - 리덕스 미들웨어 직접 만들기 - redux-logger 사용하기 : 액션, 상태를 출력해주는 라이브러리 사용해보기 - redux-thunk 사용하기 : 비동기 작업 처리 - redux-saga 사용하기 : 비동기 작업 처리 📌 리덕스 미들웨어 직접 만들기 1. 리덕스 프로젝트 생성하기 2. 리덕스 미들웨어 직접 만들기 리덕스 미들웨어는 하나의 함수이다. function middleware(store){ return function (next){ return function (action){ //하고 싶은 작업.. } } } - ..
[React - Project] 지출 기록 서비스 구현하기 | Issue & Solution 📚 구현한 기능 1. 오늘 날짜 표시 2. 지출 등록 3. 등록된 지출 삭제 4. 현재까지 등록된 지출의 총합 표시 5. 카테고리별 정렬 📚 Issue & Problem & Solution 1. item출력 시 category명이 select value로 받아와서 영어로만 출력되었다. → category 데이터 별 label을 지정하여 따로 데이터를 관리하기 const options = [ { label: '식사', value: 'meal' }, { label: '식료품', value: 'food' }, { label: '교통', value: 'traffic' }, { label: '생활', value: 'life' }, { label: '의료', value: 'medical' }, ]; export d..
[Redux강의노트] Redux Redux - react에서 가장 사용률이 높은 상태 관리 라이브러리이다. context API+useReducer 사용과 Redux의 차이점 1. Redux에는 미들웨어라는 개념이 있다. 미들웨어를 사용하면 비동기 작업을 더욱 체계적으로 관리 가능하다. 2. 리덕스 사용하면 유용한 함수와 hook 을 사용할 수 있다. (connect, useSelector, useDispatch, useStore) 3. 기본적인 최적화가 이미되어있다. 4. 하나의 커다란 상태 5. DevTools 6. 이미 사용중인 프로젝트가 많다 언제 써야할까? 프로젝트 규모가 큰경우 - Y : Redux / N : Context API 비동기 작업을 자주 하는 겨우 - Y : Redux / N : Context API 리덕스가 편..
[React 강의노트] react router SPA - 라우팅을 클라이언트가 담당 - 라우팅이란? 어떤 주소에 어떤 UI를 보여줄지? react-router - 컴포넌트 기반으로 라우팅 리액트 라우터에서 사용되는 주요 컴포넌트 BrowserRouter - HTML5 History API 사용 - 주소만 바꾸고 페이지는 다시 불러오진 않음 HashRouter - example.com/#/path/to/route - #을 사용함. 못생김, 옛날 브라우저 전용 MemoryRouter - 브라우저의 주소와 무관, 일체 건들이지 않음 - 테스트 환경, 임베디드 웹앱, 리액트 네이티브 등에서 사용 StaticRouter - 서버사이드 렌더링에서 사용하는 용도 Route - 라우트를 정의할 때 사용하는 컴포넌트 Link - 사용한 Router의 주소를 바꿈, ..
API 연동하기 (useState, useEffect, useReducer) 컴포넌트에서 api 요청하는 가장 기본적인 방법은 - useState와 useEffect로 데이터 로딩하기 or - useReducer로 데이터 로딩하기 사용 라이브러리 - axios 아래 상태를 관리하게 된다. 1. 요청의 결과 2. 로딩상태 3. 에러 1. useState로 데이터 받아오기 import React, { useState, useEffect } from "react"; import axios from "axios"; function Users() { //결과물, 1. 요청의 결과 const [users, setUsers] = useState(null); // API가 요청 중인지 아닌지, 2. 로딩상태 const [loading, setLoading] = useState(false); /..
GitBash - vi 에디터 평소 commit 작성시 제목만 간단하게 작성하는 스타일이었는데, 이번에 본문을 작성해야하는 commit이 생겨서 오랜만에 vi에디터 창으로 열어서 작성했다. 본문까지 commit 메세지 입력할때 → git commit 명령어 작성시 vi 에디터 창로 넘어간다. i - 쓰기 모드로 전환됨 (끼워넣기) 첫줄에 제목을 작성하고(가능한 50자이내, 72자이내까지는 줄바꿈 해당 안됨) (((한줄 비우고))) 본문에 작성할 내용 쓰기(72자이내) 작성이 끝나면 esc(완료) → :wq(나가기) → enter
gitignore 추가하기 github 프로젝트 업로드 시 제외하고 싶은 폴더나 파일이 있는 경우 gitignore파일을 사용한다. 나는 이미 github에 업로드되어있는 프로젝트라서, 앞으로 업로드하고 싶지 않은 파일을 gitignore에 추가 적용해야 했다. 1. gitignore 파일에 제외하고 싶은 폴더 또는 파일명 작성 + gitignore에 추가되어지는 파일 확인해보기 github/gitignore A collection of useful .gitignore templates. Contribute to github/gitignore development by creating an account on GitHub. github.com 2. 현재 repo 캐시 모두 삭제 git rm -r --cached . - 위 명령어가..
실행 컨텍스트 (Execution Context) Execution Context, 실행 컨텍스트란? - 자바스크립트 코드가 실행되는 환경을 의미한다. - 세 가지 타입의 실행 컨텍스트가 있다. (마지막 타입의 eval은 지금 공부하지 않는다.) 1. Global Execution Context - 자바스크립트 엔진이 실행될 때(코드가 없더라도) Global Execution Context가 생성된다. - 생성과정에서 전역 객체인 Window Obiect를 생성하고 this가 Window객체를 가리킨다. 2. Function Execution context - 함수가 호출될 때마다 함수에 대한 Execution context가 생성된다. Call stack - 코드가 실행되면서 생성되는 Execution context을 저장하는 자료구조이다. => 엔진..

티스토리툴바