프론트엔드 라이브러리 / 프레임워크 프론트엔드 라이브러리 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기위해서 정말 여러 라이브러리들 혹은 프레임워크들이 만들어졌습니다. 대표적으로 Angular, Ember, Backbone, Vue, React 등 라이브러리 / 프레임워크의 선택 Angular UI 를 구현하게 되면서, 앵귤러만의 문법같은 것들이 다양하게 존재합니다. 특정 기능을 구현 할 때, 편리하게 대신 해주는 것들이 많습니다. 라우터, HTTP 클라이언트 등 웹 프로젝트에서 필요한 대부분의 도구들이 프레임워크 안에 내장되어 있습니다. 앵귤러1의 경우 만들어진지 꽤 오래 됐고, 기업..

React-query 란 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 편리하게 제공해주는 라이브러리로 알려진 react-query에 관해 간단하게 공부해보았습니다. 기존 상태 관리 라이브러리 redux 및 RTK를 사용해오면서 비동기 로직을 처리 부분에서 클라이언트 데이터와 서버 데이터가 뒤섞이고 어느 순간 방대한 로직이 되어버려 로직 파악이 힘들어지고 state 관리가 힘들어지는 상황을 몇 번 직면하였습니다. 이에 대한 해결 방안으로 react-query가 사용된다고 하네요. react-query의 최대 강점이 서버, 클라이언트 데이터를 분리해주는 것으로 이해했습니다. 이외에도 react-qeury의 장점으로는 아래와 같이 있습니다. 캐싱 자동 refreshing get을 한 데이터에 대해 up..

💻 redux-saga를 이용한 비동기 액션처리 비동기 액션을 처리하는 라이브러리 리덕스에서 액션 처리후, 비동기 처리를 통해 상태값을 변경시키고 싶을 경우 사용 redux-thunk redux-observable (RxJS 패키지 기반) redux-saga : 제너레이터 기반, 활용도가 높고/ 테스트 코드 작성에 쉬움. 💡 제너레이터 제너레이터는 function*와 같이 작성. function* f1() { console.log('f1-1'); yield 10; console.log('f1-2'); yield 20; console.log('f1-3'); return 'finished'; } const gen = f1(); console.log(gen.next()); /* 실행구간 console.log(..

💻 react-redux 기존에 리액트에서 리덕스 사용 👉 useEffect 훅 & useReducer 훅을 사용하여 상태값을 업데이트 react-redux 👉 useSelector 훅으로 상태값 업데이트 , 자동으로 값 변경시에만 렌더링 가능 App 컴포넌트 Provider에 store를 넘겨 사용 : 액션 처리 시, 이벤트를 받아 하위 컴포넌트가 렌더링 되도록 import React from 'react'; import FriendMain from './friend/container/FriendMain'; import TimelineMain from './timeline/container/TimelineMain'; import { Provider } from 'react-redux'; import s..

💻 리덕스 란? 상태관리 라이브러리입니다. 자세한 내용은 이전 포스팅에서 다뤘기에 생략하겠습니다. https://keeper.tistory.com/27 [우아한 테크러닝 4기] redux 구현해보기 안녕하세요. 이번 포스팅에서는 제가 지금 참여하고 있는 우아한 테크러닝 4기에서 들었던 강의 내용을 다뤄보려 합니다! 이번 강의에서는 redux를 javaScript를 이용하여 간단하게 구현하면서, redux keeper.tistory.com 이 리덕스 사용의 장점은 아래와 같습니다. 컴포넌트 코드로부터 상태관리 코드 분리 미들웨어를 이용한 다양한 기능 추가 - ex) redux-saga - 로컬 스토리지에 데이터 저장 및 불러오기 SSR시 데이터 전달이 간편 리덕스 상태값은 하나의 객체로 표현가능하여, 해당..

💻 useEffect 활용법 ❗ 의존성 배열은 잘못 입력 시, 버그로 이어질 수 있어 되도록 사용하지 않는 것을 권장 💡 useEffect 내에서 사용되는 값은 의존성배열에 추가해주어야 변경사항이 적용됨. function Profile({ userId }) { const [user, setUser] = useState(); useEffect(() => { fetchUser(userId).then(data => setUser(data)); }, [userId]); } import { useState, useEffect } from "react"; export default function Profile({ userId }) { const [user, setUser] = useState(); // 여기서는 ..