FE 이모저모 공부

지난 프로젝트에서 TanstackQuery의 캐싱를 사용하며 "TanstackQuery를 왜 사용해야 하나" 라고 든 생각이 계속해서 머리속에 남아 내 생각을 정리하고자 이 글을 쓰기로 했다. Tanstack Query가 뭔데?Tanstack Query(구  React-Query)는 Tanstack에서 출시한 강력한 비동기 상태 관리를 지원하는 도구이다.상태란?애플리케이션에 저장된 문자열, 배열, 객체 등의 다양한 형태의 데이터이며,페이지가 렌더링된 이후 사용자 상호작용의 모든 동작과 결과를 의미한다.  그럼 왜 사용하는데? React에서 로짓은 위의 사진과 같이 동작한다. View 컴포넌트를 화면에 표현하여(렌더링) 사용자에게 보여주고, Action 상호작용으로 사용자와의 상호작용을 구현, 이렇게 받은..

비즈니스와 기술적, 두 관점으로 나뉜다. 비즈니스적 관점1. 온라인 상의 상점이나 건물을 만드는 작업이다.이는 회사의 서비스를 소개, 고객에게 어필하여 고객이 유입 가능한 통로를 만드는 것. 2. 또한 퍼널 단계에서 사용자가 각 구매 단계별 적절한 UI를 단계별로 보여주고, 각 퍼널의 전환 비율과 이를 개선시키기 위한 고민을하는 것. 3. 최적화된 프로세스로 UI/UX 반영에서 Backend Service 까지 전달하는 것.  기술 관점크게 4가지가 있다.1. 퍼블리싱: 전반적인 웹 페이지의 화면을 만듬 => HTML 마크업, CSS 스타일링2. 재사용 가능한 UI 컴포넌트 제작(React), 디자인 시스템 구축(Storybook)3. 클라이언트와 서버 상태 관리: 각 상황에 맞는 데이터를 서버에서 가져..

요즘 다시 열심히 취업을 준비하면서 여러 회사의 공고문을 접하게되었다. 그런데 보는 공고문마다 자주 등장하는 문구가 있었는데.... 바로 오늘 다뤄볼 애자일(Agile) 개발론이다. 애자일 개발론이란 소프트웨어 개발 프로세스의 접근 방법 중 하나로, 변화에 유연하게 대응하고 효과적으로 작업을 수행하기 위해 강조되는 방법론이다. 간단히 풀어서 설명해보겠다. 장점 하나의 팀이 하나의 목표를 갖고 개발 중 소프트웨어의 상태를 자주 체크하고, 소비자(클라이언트)에게 얻은 비드백, 요구사항 등 변화사항을 실시간으로 적용해 나가며 개발하는 방식이라 생각된다. 이때 중요한 것은 한번에 프로덕트를 만드는 것이 아니라 여러개의 Interation을 통해 반복적이고 점진적인 개발을 주도해 나가는 것이다. 반복되는 Inte..

jest를 이용해 api를 테스트하기 위해 코드를 작성하고 테스트를 돌려보다가 제목과 같은 에러를 만났다... 위의 에러는 jest 환경에서 ES6 문법을 이용해 import할 때 발생한다고 한다. 특히 axios의 버전이 업그레이드 되어 컴파일 과정에서 ES Commonjs로 컴파일 되지 않으며 발생하는 문제이다. 이러한 문제를 해결하기 위해 StackOverflow의 글을 참고해 해결했다. 우선 @babel/core, @babel/preset-env, @babel/preset-react, babel-jest 를 설치해주자 npm install @babel/core @babel/preset-env @babel/preset-react babel-jest --save-dev 그리고 babel.config...

새로운 프로젝트를 진행하며 한 컴포넌트에서 많은 이미지를 사용해야하는 기능 구현을 하게되었다. 각 1번, 2번, 3번, 4번 선택지마다 적게는 5개의 이미지 파일, 많게는 7개의 이미지 파일을 사용자에게 보여주어야 한다. 이미지는 이미지 서버에서 GET 요청으로 가져오는 방식으로 구현하려 한다. 이번 프로젝트에서는 MSW를 이용해 테스트 환경을 구축해서 개발한다. http.get("/champions/duelist", async () => { return HttpResponse.json( { "champions": [ { "id": 1, "imageUrl": "https://대충 이미지 서버 주소/valorant/duelist/ZETT.webp" }, { "id": 2, "imageUrl": "https..

1. React-Query 란? React-Query란 서버의 데이터를 가져오거나, 캐싱, 값 동기화 및 업데이트, 에러 처리 등 비동기 과정을 쉽게 할 수 있도록 도와주는 라이브러리이다. 1.1 사용 이유 기존 상태 관리 라이브러리(redux 등)는 클라이언트 상태 관리에는 용이하지만, 서버 상태를 관리하기는 어렵다. 클라이언트에서 사용하는 상태가 변할 수 있는 서버의 상태와 다를 수 있기 때문이다. 즉, API 요청과 비동기 데이터 관리를 좀더 쉽게 하기위해 등장한 것이다. React-Query는 서버의 상태를 불러오고, 불러온 상태를 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와준다. 또한 기존 상태 관리 라이브러리를 이용하면 서버의 데이터와 클라이언트 데이터를 store에 공존하게 될..