디벨롭per

BFF = Backend For Frontend 프론트엔드를 위한 백엔드? BFF는 마이크로서비스 구조의 패턴 중 하나다. 기존 모놀리식 구조에서 MSA 방식으로 전환되면서 큼지막한 서비스들은 각 기능마다 분리되었고, API와 UI도 서비스별로 나뉘게 됐다. BFF 개념 기존 우리가 생각하는 백엔드의 역할은 프론트가 정보를 요청하고, 값을 제공해주는 역할이라고 생각할 수 있다. 하지만 BFF는 프론트엔드를 위한 백엔드라는 개념이 더 강하기 때문에 주체가 프론트에 맞춰져 있다. AWS에서는 BFF 패턴을 이렇게 정의하고 있다. "BFF 패턴은 하나의 일반적인 목적을 가진 API-백엔드와는 달리 하 나의 사용자 경험에 맞춘 하나의 백엔드가 요구 되고 있다. 이 패턴이 사용되는 용도 중 하나를 예시로 들어본다..

Zustand란? Zustand는 상태관리 라이브러리로 간단한 API 기반 훅스의 구조를 가지고 있다. 또한 Zustand는 오픈 소스로 안정화를 위해 많은 개발자들이 현재 힘쓰고 있다. 우리가 흔히 들어본 Redux와 사용법이 다르다. Zustand는 간단하다는 장점이 있다. Redux는 store.js를 사용하기 위해 따로 설정해줘야 하는 코드가 많다. - createStore - combineReducer - Reducer... import { combineReducers } from "redux"; import nameTag from "./nameTag"; import location from "./location"; import excel from "./excelData"; const rootR..

Redux toolkit 공식문서에 따르면 RTK Query is powerful data fetching and caching tool 강력한 데이터 패칭과 캐싱 툴을 지원해주고 있다. 본인도 RTK를 한 3개월 정도 써본 결과 직접 느낀 장점들이 있었다. ❏ Api로부터 호출된 데이터가 캐싱된다. - RTK를 사용하지 않을 경우, 검색 조회조건이 변경될 때마다 api를 호출했을 것이다. 하지만 RTK를 쓰니, 이미 호출했던 조건으로 변경 했을 때 캐싱된 데이터가 있어, API 재호출을 안해주는 특징이 있었다. ❏ API 응답 상태를 따로 명시안해도 된다.Redux-thunk를 사용하게 되면 pending,fullfiled,rejected 를 제공해주어 비동기 처리가 가능한 점이있다. 하지만 loadi..

Intersection ObserverAPI를 사용하게 되면, 우린 특정 element가 viewport에 보일때 관찰이 가능하다. 주로 해당 기능을 페이지 성능 개선을 위해 Lazy Image loading에 사용하곤 한다. intersection observerAPi를 사용하지 않고, react.js, typescript를 사용하여 구현해보도록 하겠다. | 화면 크기 구하기 element가 viewport에 표시되는 것을 관찰하기 위해서는, window의 width, height를 먼저 알아내야한다. 유동적 화면 변화를 위해선 eventHandler를 사용하여 크기를 감시해야한다. useEffect(() => { handleObserveElement(); }, [handleObserveElement]..

line-break가 안되는 이유는 jsx에선 \n가 동작하지 않아 오류 출력이 나오게 된다. 이를 해결하기 위해서는 해당 text가 들어간 div에 white-space에 pre-line 속성을 줄경우 \n을 인식하여 line-break가 된다.

막대를 x축 방향으로 슬라이드를 통해 두개의 이미지를 보여지도록 개발했다. 1. 이미지 2개 겹치기 //이미지 1개 /** 막대 setPressed(true)} onMouseUp={() => setPressed(false)} > {""} **/ //이미지 2개 styled-components const Layout = styled.div` display: flex; justify-content: center; width: 100%; height: 100%; position: relative; overflow: hidden; border: 1px solid ${({ theme }) => theme.gray300}; div[class^="crop"] { position: absolute; width: 100..

폼을 저장할 때 버튼을 한번에 많이 눌렀을 경우 API 중복 호출이 일어나기 때문에, 이를 방지하기 위해서 throttle과 debounce를 사용할 수 있다. 1. throttle throttle은 버튼을 클릭했을 때 최초로 한번 실행하고, n초 동안을 실행 못하도록 해준다. 2. debounce debounce는 버튼을 클릭하고 n초동안 실행을 못하도록 방지해주고, 제한시간이 끝나고 나서야 api호출을 해준다.

구글 맵에서 기존에 있던 장소 마커를 지우고 싶을 경우 //커스텀 맵 스타일 선언 const mapStyle = [ { featureType: 'poi', //(물가, 교량..등 장소) elementType: 'labels.icon', stylers: [{ visibility: 'off' }], }, ... return( ) 위에 처럼 해주면 된다 참고 https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple Styled Map Types | Maps JavaScript API | Google Developers This example creates a new map type, which the us..

updateQueryData는 기존에 존재하는 패치작업을 쉽게 수행할 수 있다. 나같은 경우에는 드래그앤 드랍을 통해 order처리를 할 때 사용하게 됐다. 큰 틀은 이렇다. A,B,C라는 objectList에서 C를 A로 옮길 경우 order를 변환하는 API를 호출한다. 물론 update는 되지만 깜박이는 현상이 있었다. 문제 상황 1. C를 A로 드래그앤 드랍 : [C, A, B] 2. 업데이트 API가 호출 됨 3. 아직 API로부터 결과를 받지 않아 기존 list state때문에 다시 원복됨 [ A, B, C ] 4. 업데이트 된 API 결과를 다시 받아 LIST UPDATE함 [C,A,B] 그리하여 1과 3 사이 state때문에 깜박이는 현상이 존재했던 것이다. 이를 해결하기 위해서는 2번인 ..