이전 직장에서 오만가지. 상태를 관리해야하는 대규모 프론트엔드 프로젝트를 경험했습니다.그 과정에서 상태 관리가 단순한 구현 문제가 아니라,서비스의 성능과 사용성, 그리고 확장성까지 좌우하는 뼈대와 같은 요소라는 점을 깊이 체감하게 되었습니다. 특히 UI를 기준으로 상태를 지나치게 잘게 모델링하면서디자인 변경에 대한 의존성은 점점 커지고,반대로 도메인 자체의 응집력은 약해졌던 지난 과오들을 돌아보게 되었습니다. subscribe 남용이나 useEffect로 얽힌 복잡한 상태 흐름처럼,유지보수성과 예측 가능성을 해치는 패턴들도 직접 경험하면서이후에는 컴포넌트 하나를 개발하더라도 상태 관리 구조부터 고민하게 되었습니다. 이러한 시행착오를 통해 쌓이게 된View Model에 대한 고민과, 지향하게 된 상태 관..

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

요즘 JS사용에서 TS로 추세가 넘어가고 있다더라고요. 특히 리액트와 타입스크립트 조합이 매우 유용하다해서 저도 공부를 시작했습니다! 타입스크립트 언어의 기본 사용법과 문법은 자바스크립트와 동일 💡 왜 타입스크립트를 사용하나요? 동적인 자바스크립트를 정적으로 → 타입 선언으로 컴파일 시, 에러를 사전에 잡아준다. 디버깅의 편의 : 에러 메시지가 구체적이고 자세하게 나온다. 이러한 이유로, 현재 TS를 사용하는 추세가 이어지고 있다고 합니다. React + TS react+ts는 기존 리액트와 구조는 동일합니다. 여기서 state, props, function, event 등에 타입을 선언해준다는 점이 기존 리액트와의 차이점입니다. 각각 리액트에서 어떻게 사용되는지 설명해보겠습니다. State 우선 리액트..

소셜 로그인 중 가장 대표적으로 사용되는 것이 카카오 로그인입니다. 개발 문서도 자세히 나와있어서, 저도 카카오 로그인을 택했습니다 다만 보안 강화를 위해서 JWT를 추가적으로 이용하였습니다 :-D 카카오 로그인 토큰 Access Token 사용자를 인증합니다. Android, iOS : 12시간 JavaScript: 2 시간 REST API : 6시간 Refresh Token 일정 기간 동안 다시 인증 절차를 거치지 않고도 액세스 토큰 발급을 받을 수 있게 해 줍니다. 2달 유효기간 1달 남은 시점부터 갱신 가능 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers...

💻 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..