Chunho’s DevLife

본 게시물은 https://pinokio0702.tistory.com/373 [Axios][업무][베트남🇻🇳] - Axios instance 생성하고 api 요청 함수 작성하는 방법 안녕하세요. 회사에서 베트남 시니어 개발자 코드를 통해 학습한 내용을 일부 기록한 글입니다. axios를 잘 정리해서 사용한 것 같아서 따라서 사용하고 있습니다. 이 코드를 보고 개발하는 프로 pinokio0702.tistory.com 블로그를 바탕으로 작성했으며, 추후 다시 확인후 사용하기 위함임. 디렉토리 구조는 위와 같다. api 폴더를 만들어준 뒤 그 안에 axios instance를 생성 할 core->index.ts를 생성해주고 이를 바탕으로 request를 보내는 hooks들이 있는 main.ts를 생성해준다. ..

타입스크립트에서 styled-components를 사용할 때 styled-components를 설치해준 뒤 npm i -D @types/styled-components 명령어를 사용하여 타입을 정의받은 후 사용한다. 위와 같이 디렉터리 구조를 잡고, GlobalStyles를 사용하여 전역적인 css를 지정해줄 수 있다. probs를 받을 땐 이처럼 타입을 지정해서 사용한다.

프로젝트를 clone한 뒤 실행시킬 때, 필요한 라이브러리와 모듈을 모두 설치해주어야 한다. 위와 같이 package.json에서 사용된 라이브러리를 모두 확인할 수 있고, 한번에 설치하고자 할 때 npm init npm install 위 명령어를 순서대로 입력해주면 된다.

useMutation hook 사용 중 사용자가 API서버에 생성 요청을 보낼 때, 생성이 완료 되어 리패칭이 일어나기 전까지의 시간동안 불편함을 겪을 수 있어 생성중이라는 문구를 띄워주기 위해 useMutation 이 반환하는 isLoading을 받아 사용하였다. useQuery를 사용한 useFetchHero가 반환하는 isLoading과 이름이 겹쳐 creatingHero라는 이름을 주어 사용하는데 정상적으로 작동하지 않는 문제가 발생했다. 요청을 보내는 코드를 비동기적으로 처리하지 않아 발생한 문제였다. 위와 같이 비동기적 작업을 처리하는 함수는 꼭 async와 await 등을 사용하여 비동기적으로 처리해주자!

styled-components를 사용하면 컴포넌트별로 스타일을 적용할 수 있다. css 내에서 변수를 사용하여 css를 동적으로 처리할 수 있으며, 해당 컴포넌트에 적용된 css를 쉽게 확인할 수 있어 가독성이 높아진다는 장점이 있다. 먼저 yarn add styled-components 명령어를 사용해 라이브러리를 설치해주었다. import를 해준 뒤 위와 같은 방식으로 스타일을 지정해 줄 수 있다. 스타일을 적용할 땐 적용 할 컴포넌트를 위와 같이 감싸주면 된다. 당연히 인자 또한 넘겨줄 수 있다. state와 삼항 연산자를 사용하면, 아래와 같이 js를 사용해 간단하게 css를 동적으로 처리할 수 있다. 다크모드 전환 & 해제

서버에서 데이터를 받아와 각 컴포넌트별로 delete 버튼을 추가해 뿌려준 뒤 delete를 클릭할 시 handleDelete 함수를 실행시켜 서버에 delete 요청을 보내는 코드를 작성하였다. 이를 처리하기 위해 handleDelete 함수를 컴포넌트에 넘겨주었고, Item 컴포넌트 안에서 클릭시 해당 컴포넌트의 id를 넘겨주는 handleDelete 함수가 실행되도록 하였다. 하지만 문제가 발생하였고 기존 데이터를 받아오는 코드조차 제대로 동작하지 않았다. 위와 같이 또다른 함수로 감싸 다시 실행시켜보았다. 정상적으로 작동하는 것을 확인할 수 있었다.

useQuery를 사용할 땐 아래와 같이 select: (data) => data.data select 옵션을 사용하여 받아온 데이터를 최대한 구조분해 해서 사용하는 것이 좋다. 데이터를 바로 사용할 경우 아래와 같이 가독성이 떨어질 뿐 아니라 같이 협업하는 동료가 불편함(?)을 겪을 수 있다. 또한 useMutation을 사용할 때도 위와 같이 useMutation이 반환한 객체를 최대한 구조분해한다. 이와 동시에 적절한 이름을 사용해준다. 이를 통해 useMutation이 반환한 mutation의 mutate 함수를 사용할 때 mutation.mutate가 아닌 createHero 를 사용하여 코드를 줄일 수 있을 뿐 아니라 직관적인 이름을 통해 가독성을 향상시킬 수 있다.

리액트는 브라우저에서 모든 컴포넌트가 준비됐을 때 DOM에 컴포넌트를 뿌려준다. 따라서 위와 같이 데이터를 서버에서 받아와 뿌려주는 코드가 있는 경우 해당 컴포넌트의 준비 시간 때문에 다른 컴포넌트까지 그려지지 못하는 경우가 발생할 수 있다. 이런 경우, 삼항 연산자를 사용하여 서버에서 데이터를 받아오는 시간은 loading 메시지를 표시하여 해당 컴포넌트 때문에 준비 된 컴포넌트가 (굳이..?) 대기를 하는 경우는 막아주는 것이 좋은 것 같다. 또한 위와 같은 코드는 피해야 하며, 중복되는 부분은 ITEM 컴포넌트를 따로 만든 후 probs로 id, name, skill 등을 넘겨주는 방향이 가독성과 성능 면에서 더 좋다.

React-Query를 사용하여 useMutation Hook을 만들고 API서버에 POST요청을 하여 데이터를 추가하였다. 이때 해당 키를 가지고 있는 쿼리를 무효화시키고 리패치를 하여 view에 바로 변경사항이 반영되도록 하기 위해 useMutation의 onSuccess 함수 안에 queryClient.invalidateQueries()를 사용하여 쿼리 무효화를 했다. 분명 devTool 에는 fresh, stale의 과정을 거치면서 쿼리가 무효화되고 리패칭이 되는 것을 확인했는데, view에는 변경사항이 바로 반영되지 않았으며, POST요청을 두 번 보냈을 때 변경사항이 반영되었다. 아마 시간차?의 문제라고 생각하고 위와 같이 POST요청 후 성공적으로 서버에 전송한 데이터를 Create 한 1초..

React-Query는 기존에 프로그래머가 직접 작성해야 했던 비동기 http 통신 로직을 쉽게 다룰 수 있게 해주는 라이브러리이다. 데이터를 항상 최신 상태로 유지해주며, loading, error, success 등 일렬의 컨트롤을 쉽게 할 수 있다. yarn add react-query 명령어를 사용하여 라이브러리를 설치해준 후 package.json 파일에서 정상적으로 설치가 된 것을 확인해준다. 이후 Context로 하위 컴포넌트를 감싼 후 queryClient를 내려보내 준다. queryClient는 비동기 요청을 알아서 처리하게 해주는 Background가 된다. 쿼리는 4가지의 상태를 가진다. 1. fresh: 새롭게 추가된 쿼리 인스턴스이며, active 상태의 시작이다. staleTim..