Jaymyong66

보호되어 있는 글입니다.

각각의 장단점과 어떨 때 무엇을 쓰면 좋을까?이전 우테코 프로젝트를 할때는 Emotion CSS를 사용한 바 있고, 해당 기술 사용을 결정할 때 조사했던 부분이 있다.(Github Wiki)그럼에도 CSS in JS의 기술적 기반, 배경에는 뭐가 있는지 명확히 알아보았다. 비슷한 볼륨의 프로젝트는 아니지만, SCSS 기반보다 Emotion CSS 기반 프로젝트가 초기 로딩 속도가 300ms 느린 것을 확인했다.왜 그럴까?각각의 장단점CSS in CSS장점초기 렌더링이 빠르다. CSS는 HTML 파싱 중 병렬로 로드되므로 렌더링을 차단하지 않는다.CSS 정적파일이므로 브라우저 캐싱이 쉽다. (재방문시 속도 빠름)스타일 적용 시점이 CSS 파일 로드 직후이다.따라서 런타임 비용이 없다모든 CSS 파일을 로딩..

1. Tanstack-query에 캐싱 기능이 필요한 이유Tanstack-query는 비동기 상태, 서버 상태를 관리해주는 라이브러리이다.브라우저와 서버 자체적으로도 캐시 관리를 할텐데, 서버의 상태를 관리하는 라이브러리에서도 캐싱이 필요한 이유가 궁금했다.클라이언트 측에서 서버의 상태를 알고 싶다면 항상 최신의 상태를 알도록 요청하고, 이에 대한 캐싱은 브라우저나 서버의 책임이지  tanstack-query의 책임이 아니지 않을까? 라는 생각이었다.  하지만 tanstack-query는 갖고 있는 서버 상태를 유효성 검사를 하며 네트워크 요청 자체를 효율적으로 관리하고자 했던 것이다. 간단히 정리하자면,네트워크 요청을 최소화한다. 동일한 데이터를 반복적으로 서버에 요청하지 않도록 한다. 이는 서버 부..

기본적이지만 가끔 까먹어서 다시 한번 정리해보고자 한다.결론은 의도에 맞는 연산자를 사용하자! 이다. `useQuery`와 `useSuspenseQuery`의 차이점은 초기값이 보장되는가에 있다. 만약 `useQuery`를 사용한다면 `undefined`가 타입에 적용되기에 지금까지 반환되는 `data`에 옵셔널 체이닝(?)이나 널 병합 연산자(??)를 사용했었다. 문제 상황은 코드리뷰를 하다가 동료가 `||` 연산자를 `data` 초기값에 넣어주었다. const { data } = useSomethingQuery();const name = data?.name ?? '기본값';// 또는const name = data?.name || '기본값'; 이때, || 연산자를 사용하면 어떤 문제가 있을까?상황에 따..

문제 상황코드잽 (https://code-zap.com/) 서비스에서 코드 템플릿을 업로드(POST)할 때 누르는 "저장"버튼이 있다.정보를 모두 작성하고 "저장" 버튼을 빠르게 두번 누르면 같은 템플릿이 두개 생겼다.  이를 막기 위해서 무엇부터 해볼까 생각해보았다. 우선 브라우저 네트워크 창을 보니 "저장" 버튼을 누른 횟수만큼 POST 요청이 갔다. '아니 이거 서버에서 막아야하지 않나요?' 할 수 있지만 아직 막지 않은 이유는 1) 같은 title로 생성되는 템플릿을 막을 것인가? 2) 어떤 데이터로 같은 템플릿이란 것을 구분할 것인가? 등의 논의가 있었다. 어떤 단위 시간동안 같은 title로 들어오는 생성 요청을 막는다던지... 하지만 사실 결제 기능같이 크리티컬한 부분은 아니었기에 이 부분은..

사실 과제테스트를 끝내고 회고를 하다보니, 아래의 예시는 useEffect, useLayoutEffect 둘 다 쓸 필요가 없는 상황이었다... ㅎㅎ하지만 이를 위해 useLayoutEffect에 대해 알아봤던게 아까워서 일단 글을 써본다! --- 엘리스 회사 과제테스트를 보다가 아래와 같은 UI에서 가격 필터링을 구현해야했다.해당 가격 필터링은 URL search params로 저장하며 새로고침해도 해당 필터링 값이 남아있어야했다.이를 구현은 했지만, 새로고침하면 처음에는 "무료" 필터링이 선택되지 않은 상태였다가 선택된 상태로 바뀌면서 화면 렌더링이 두번 되는 이른바 "깜빡"이는 현상이 발생했다. `react-router-dom`의 `useSearchParams` 훅을 선언했고, `setSearchP..