React

리액트를 다시 처음부터 공부하기 위하여 create-react-app을 실행하다가 오류가 발생했다.분명히.. 엊그제만 해도 잘되던 게 왜 또...!!!원래 모든건 한번에 되는 법이 없는지라(ㅋㅋㅋㅋㅋ) 에러문구처럼 차근차근 진행해보기로 했다.npm uninstall -

SSR로 되어있던 프로젝트를 CSR로 렌더링 하는 방식으로 전환하는 작업을 하고 있다.그래서 SPA로 개발을 하게 되었는데 개발하기 전에 용어를 정확히 알고 가자!SEO초기요청 속도초기요청 이후 페이지 전환 속도이전 회사에서도 그렇고 대부분의 프로젝트가 SSR로 되어

이번 리액트 프로젝트를 진행하며 작성했던 로직을 기록해보고자 한다.정말 별거 아닌 것 같았던 로직이었는데 받아오는 데이터의 length가 정해져있지 않아서 테스트를 많이 했었다.받아오는 데이터의 갯수가 몇개인지 모르기 때문에 유연한 로직을 짰어야했다.첫 화면이 로드 되

Hook이란, class를 작성하지 않고도 React의 기능들을 사용할 수 있게 해주고, 함수 컴포넌트에서 생명주기 기능을 할 수 있게 해주는 함수이다.(이전 React에서 상태 관리를 할 때는 Class 컴포넌트에서 setState를 통해 상태 구현을 했지만, Hoo

컴포넌트에서 바뀌는 값을 관리할 때 리액트의 Hooks 중 하나인 useState를 사용하게 된다.요즘 Hooks을 이용한 여러가지 예제를 많이 만들어 보고 있다.useState의 첫번째 원소는 현재 상태, 두번째 원소는 Setter이다.일단 api에서 받은 name필

프로젝트를 진행하다가 원하는 시점에 조회하고 싶은 데이터가 있었는데 queryKey값을 제대로 작성하지 않아서 원하는 시점에 조회를 못 하게 됐던 상황이 생겼었다.문제해결을 하면서 간단하게 useQuery에 대해서 글을 작성해본다.React Query를 사용하여 서버로

👩🏻‍💻 Promise JavaScript는 비동기 처리가 가능하도록 설계되어있다. Promise 객체는 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 비동기의 결과를 객체화 시킨다는 점이 Promise의 가장 큰 장점이다. 비동기에 대한 예제를

데이터 구조에서 원하는 데이터만 뽑아서 배열을 만들고 싶었다.처음에는 map이용하여 배열을 만들었지만 뽑아내야하는 데이터의 배열의 갯수가 2개 이상이 되어서 reduce 함수를 이용하여 한꺼번에 처리하였다.함수를 실행하고 하나의 결과값을 얻는다. 그리고 두개의 인자와

리팩토링을 진행하면서 forEach문을 reduce함수를 이용하여 수정하였다.저번에 reduce함수에 대해서 다뤘으니 이번 글에서는 예시문만 작성해보려고 한다.이게 얼마나 바보같은 코드인가...useRef와 reduce를 이용하면 가독성도 좋고 성능도 좋아질텐데!!re

처음 리액트에서 작업을 시작했을 때 컴포넌트 분리하는 기준을 정확히 몰라서 일단 한 페이지에 만들어놓고 분리를 진행했었다. > 공통 컴포넌트를 만들때는 로직 스타일 철저히 분리하고 퓨어하게 마크업만 있는 컴포넌트를 쓰는게 좋다. 위에 말을 공감하는게 이번 프로젝트를

useQuery 훅을 사용하여 데이터를 가져오고 캐싱하는 로직을 구현하다가 리팩토링을 하게 되어 기록으로 남겨본다.useQuery는 React Query 라이브러리의 일부로서, 데이터를 관리하고 최적화된 캐싱과 리프레시 로직을 제공하고 이 훅은 cacheKey, fet

맡고 있던 프로젝트의 좋아요 기능에 성능개선할 일이 생겼다.그러다가 알게된 낙관적 UI (Optimistic UI)스켈레톤과 같은 로딩중에 발생하는 UI는 이미 사용중이었는데 옵티미스틱 UI는 이번에 알게 되었다.낙관적 UI는 실패확률이 거의 없는, 성공이 확실한 요청

프로젝트에서 @tanstack/react-query를 v4 쓰고 있다가 이번에 v5로 변경하였다.제일 큰 변화점은 v5부터는 객체 형식만 지원한다는 점이다.참고 https://tanstack.com/query/v5/docs/react/reference/Quer

api를 3개를 호출 받고 각각 컴포넌트를 그리고 있었다.그래서 최상위 페이지에 Query 옵션을 suspense: true; 추가 했었는데 문제는 사용자의 액션에따라 재랜더링이 한 컴포넌트에서만 이루워져야하는데 3개의 컴포넌트에서 재랜더링이 이루어지고 있어서 분리 작

- state 초기값 함수형과 기본값의 할당 차이는 무엇일까요? > - 왜 함수형으로 setState를 할까? > - setter의 batch란? state에 대해서 깊에 공부하다가 동료분이 남겨준 질문 3개를 깊게 고민해 봤다. useState를 사용할 때는 컴포넌

왜 함수형으로 setState를 할까?setter의 batch란?상태관리를 어떻게 하면 좋을까?를 생각하다가 평소에 깊이 생각하지 않았던 부분을 생각하게 되었다. setState는 업데이트 할 부분을 포함하는 객체를 인자로 받는다.상태를 변경할 때 !state 대신에

현재 pnpm으로 모노레포를 구성중이다.패키지를 설치하면서 기존에는 생각하지 못했던 부분들을 고민하다가 Peer Dependencies라는 것을 알게 되었다.공통으로 사용하는 부분은 모노레포에서 packages/common에 작업을 하고 해당 루트에서 install하여