본문 바로가기
반응형

안뇽

전체 글
111

VSCode extensions 확장프로그램 추천 셋팅 내가 보려고 만든 확장팩 리스트! 일단 주 업무는 퍼블리싱이고 리액트개발을 자주 하는편이다. 자동 태그닫기, CSS클래스 자동완성, prettier, 드래그해서 태그 감싸기기능, 자동 import, color peek, 브라켓 컬러링 등 기초적인 확장팩을 정리해보았다. * 필수 확장팩은 파란색으로 표기를 해두었다. * 검정색으로 표기된 확장팩은 읽어보고 필요하면 설치하면 된다. HTML CSS Support: HTML 및 CSS 작업을 위한 지원 제공 Auto Close Tag: 태그를 자동으로 닫아주는 기능 Auto Import - ES6, TS, JSX, TSX: 자동으로 ES6, TypeScript, JSX, TSX 등을 가져오는 기능 Auto Rename Tag: 한 쌍의 태그를 바꿀 때 다른 쌍.. 2023. 12. 29.
Vite와 CRA Vite와 CRA Vite와 Create React App은 둘 다 JavaScript 및 TypeScript를 사용하여 React 애플리케이션을 빠르게 구성할 수 있는 도구입니다. 그러나 두 도구 간에는 몇 가지 차이점이 있습니다. Vite 장점 빠른 개발 서버: Vite는 빠른 개발 서버를 제공하여 코드 수정 사항을 빠르게 반영할 수 있습니다. 최신 모듈 시스템 활용: Vite는 ES 모듈을 사용하므로, 브라우저에서 필요한 파일만 로딩하여 빌드 시간이 단축됩니다. 효율적인 환경 구성: 미리 구성된 환경 설정이 간단하며, 필요한 경우 더 많은 세부적인 설정을 추가할 수 있습니다. Vue 및 React 지원: Vite는 Vue 및 React 프로젝트를 모두 지원하므로 선택의 폭이 넓습니다. 단점 초기 학.. 2023. 12. 28.
[React] 리액트 미들웨어 redux-saga 비동기 작업을 처리하는 미들웨어 redux-saga 사용하기 redux-saga redux-saga는 redux-thunk 다음으로 많이 사용하는 비동기작업 관련 미들웨어이다. redux-thunk는 함수형태의 액션을 디스패치하여 미들웨어에서 해당함수에 스토어의 dispatch와 getState를 파라미터로 넣어서 사용하는 원리이다. thunk함수 내부에서 원하는 API요청도 하고, 다른 액션을 디스패치하거나 현재 상태를 조회하기도 한다. 대부분의 경우 redux-thunk로도 충분히 기능을 구현할 수 있다. redux-saga는 좀 더 까다로운 상황에서 유용하다. 기존 요청을 취소 처리해야할 때(불필요한 중복 요청 방지) 특정 액션이 발생했을 때 다른 액션을 발생시키거나, API요청 등 리덕스와 관계 .. 2023. 12. 28.
[React] 리액트 미들웨어 redux-thunk 비동기 작업을 처리하는 미들웨어 사용 미들웨어는 여러가지 종류가 있다. redux-thunk: 비동기 작업을 처리할때 가장 많이 사용. 객체가 아닌 함수형태의 액션을 디스패치 할 수 있게 해준다. redux-saga: redux-thunk 다음으로 많이 사용되는 비동기작업관련 미들웨어 라이브러리. 특정액션이 디스패치 되었을때 정해진 로직에 따라 다른 액션을 디스패치시키는 규칙을 작성하여 비동기 작업을 처리할 수 있게 해준다. redux-thunk Thunk란 특정 작업을 나중에 할 수 있도록 미루기 위해 함수형태로 감싼것 의미. redux-thunk를 사용하면 thunk함수를 만들어서 디스패치 할 수 있다. 그러면 리덕스 미들웨어가 그 함수를 전달 받아 store의 dispatch와 getState를 파.. 2023. 12. 28.
[React] 리액트 미들웨어란? API 서버를 연동할때, 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야한다면 미들웨어를 사용하여 매우 효율적이고 편하게 상태관리를 할 수 있다. 작업환경준비 프로젝트 만들기 $ mkdir react-middleware $ cd react-middleware $ npm init vite $ npm install $ npm install react-redux redux-actions counter 리덕스 모듈 modules/counter.js import { createAction, handleActions } from "redux-actions"; const INCREASE = "counter/INCREASE"; const DECREASE = "counter/DECREASE"; export con.. 2023. 12. 28.
[Redux] 리덕스를 사용하여 상태 관리 작업환경설정 $ mkdir react-redux-tutorial $ cd react-redux-tutorial $ npm init vite $ npm install $ npm install redux react-redux (@reduxjs/toolkit은 사용안하는지 궁금하닷.. ) UI준비 리액트 프로젝트에서 리덕스를 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이터 컴포넌트를 분리하는 것. 프레젠테이셔널 컴포넌트: 주로 상태관리가 이루어지지 않고 props만 받아와서 화면에 UI를 보여주기만 하는 컴포넌트. UI관련 컴포넌트. src/components 경로 컨테이너 컴포넌트: 리덕스와 연동되어 있는 컴포넌트. 리덕스로부터 상태를 받아오기도 하고 리덕스 스토어에 액션을 디스패치 하기도 함... 2023. 12. 28.
[Redux] 리덕스 라이브러리 이해하기 리덕스는 가장 많이 사용하는 리액트 상태관리 라이브러리다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 단순 전역상태관리는 Context API를, 프로젝트의 규모가 클 경우에는 리덕스를 사용하는편이 좋다. 리덕스 장점 코드의 유지보수성 높여줌 작업효율 극대화 편리한 개발자도구 지원 미들웨어 기능 제공 -> 비동기 작업을 훨씬 효율적으로 관리 개념 미리 정리하기 액션 상태에 어떠한 변화가 필요하면 액션이 발생. 액션은 하나의 객체로 표현된다. 액션 객체는 type 필드를 반드시 가지고 있어야한다. 이값은 액션의 이름이라고 생각하면 된다. 그 외의 값들은 상ㅇ태 업데이트를 할때 참고할 값이며, 마음대로 넣을 수 있음. { type: 'AD.. 2023. 12. 28.
[React] Context API Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을때 유용한 기능이다. 사용자 로그인정보, 애플리케이션 환경 정보, 테마 등 여러 종류가 있다. 리액트 관련 라이브러리에서도 많이 사용되고 있다. 예를들어 리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API 기반으로 구현되어 있다. Context API를 사용한 전역 상태 관리 흐름 이해하기 컴포넌트간의 데이터를 props로 전달하기 위해 컴포넌트 여기저기서 필요한 데이터가 있을때는 주로 최상위 컴포넌트인 App의 state에 넣어서 관리했다. 그리고 App이 지니고 있는 state를 여러 컴포넌트를 거쳐서 전달해야했다. 이런 방식을 사용하면 유지보수성이 낮아진다. *Context API를.. 2023. 12. 28.
[React] immer를 사용해 쉽게 불변성 유지! 개요 불변성을 유지하면서 상태를 업데이트해야하는데 객체의 구조가 엄청나게 깊어지면 전개 연산자와 배열의 내장함수 만으로는 객체를 복사하고 새로운값을 덮어쓰는것을 매번하기가 힘들고 가독성이 좋지 않음. immer라는 라이브러리를 사용하면 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트 해 줄 수 있음. immer 설치와 사용법 프로젝트 준비 $ yarn create react-app immer-tutorial $ cd immer-tutorial $ yarn add immer immer 적용전 불변성 유지 import logo from './logo.svg'; import './App.css'; import {useCallback, useRef, useState} from .. 2023. 12. 28.
[React] 컴포넌트 성능 최적화(React.memo와 useCallback, useReducer) 리액트 컴포넌트 성능 최적화 흐름 많은 데이터 렌더링하기 크롬 개발자 도구를 통한 성능 모니터링 React.memo를 통한 컴포넌트 리렌더링 성능 최적화 함수가 새로워지는 현상 방지하기 react-virtualized를 사용한 렌더링 최적화 투두리스트앱을 가지고 테스트해보겠다. 많은 데이터 렌더링하기 랙lag을 경험할 수 있도록 많은 데이터 렌더링해보기 function App() { const createBulkTodos = () => { const array = []; for(let i = 1; i { setTodos(todos.filter(todo => todo.id !== id)); }, [todos], ) const onToggle = useCallback( (id) => { setTodos( t.. 2023. 12. 28.
[React] 뉴스뷰어 프로젝트(비동기작업 기초) 비동기작업의 이해 서버쪽 데이터가 필요할때 Ajax기법을 사용하여 서버의 API를 호출함으로써 데이터를 수신한다. 이과정에서 해당 작업을 비동기적으로 처리하게된다. 만약 작업을 동기적으로 처리한다면 요청이 끝날때까지 기다리는 동안 중지상태가 되기때문에 다른작업을 할 수 없다. *비동기적으로 처리한다면 웹 애플리케이션이 멈추지 않기때문에 동시에 여러가지 요청을 처리할 수 있고, 기다리는 과정에서 다른 함수도 호출 할 수 있다. * 서버 API 호출 외에도 작업을 비동기적으로 할때가 있는데, setTimeout함수를 사용하여 특정작업을 예약할 때이다. function printMe() { console.log("HELLO WORLD" } setTimeout(printMe, 3000); setTimeout이 .. 2023. 12. 28.
리덕스 툴킷과 많이 사용하는 미들웨어(redux-saga, redux-thunk 등) 리덕스 툴킷은 Redux를 편리하게 사용할 수 있도록 도와주는 도구이다. 여기에는 몇 가지 흔히 사용되는 미들웨어가 있다. redux-thunk 비동기 작업을 처리하기 위한 미들웨어로, 함수 형태의 액션을 생성하여 비동기 작업을 수행할 수 있다. const fetchData = () => { return async (dispatch) => { dispatch(fetchDataRequest()); try { const data = await api.fetchData(); dispatch(fetchDataSuccess(data)); } catch (error) { dispatch(fetchDataFailure(error)); } }; }; redux-logger 액션의 디스패치와 상태의 변화를 콘솔에 로깅하.. 2023. 12. 22.
반응형

최근댓글

최근글

© Copyright 2023 jngmnj

티스토리툴바