분류 전체보기
-
원하는 시점에 useQuery를 사용해보자카테고리 없음 2023. 12. 13. 22:35
기본적으로 useQuery는 선언적으로 동작합니다. 예를 들어 useQuery(['getPhoneNumberByUserId', {userId}], queryFn) 와 같은 쿼리가 있습니다. 위 쿼리는 userId가 변경되면 "알아서 " queryFn을 실행합니다. 문제 하지만 원하는 시점에 queryFn을 실행하고 싶은 경우가 종종 있습니다. 복잡한 form을 다루다보면 이런 선언적인 방식이 오히려 코드의 가독성을 해치는 경우도 있습니다. 또한 위의 코드에서는 userId가 같다면 queryFn을 호출하지 않습니다. 하지만 userId가 같더라도 항상 queryFn을 호출하고 싶은 경우가 있습니다. 해결 방법 queryClient.fetchQuery를 활용해볼 수 있습니다. 이미 useQuery로 인해 ..
-
타입스크립트의 is 키워드에 대해 알아보고 활용해보자기타 2023. 11. 29. 22:08
typescript의 Is 키워드는 type guard를 위해 사용할 수 있습니다.함수가 boolean을 반환할때 함수의 argument 타입의 추론을 도와줄 수 있는데요, 쉬운 예시부터 차근차근 알아가보겠습니다. 쉬운 예시검색을 해보면 아래와 같은 예시를 가장 흔하게 볼 수 있습니다.const isNumber = (x: any): x is number => { return typeof x === 'number';} 여기서 is keyword가 없으면 어떻게 될까요? const isNumber = (x: any) => { return typeof x === "number";}const doSomething = (x: any) => { if (isNumber(x)) { return x + 1; ..
-
axios get 요청시 원하는 대로 인코딩 되지 않을 때기타 2023. 11. 12. 13:19
문제 axios에서 get 요청을 할 때 parameter를 사용할 수 있습니다. 이때 예상과는 다르게 동작했던 부분이 있는데요, 바로 “[” square bracket이 encoding 되지 않는것이었습니다. 저는 관습적으로 axios요청시 알아서 encode되어 나갔기에 서버문제인줄 알았는데요, swagger상에서 실행을 해보니 정상적으로 동작했습니다. 이 문제를 해결하기 위해 axios 라이브러리를 찾아보았는데요, encodeURIComponent를 통해 encode된것을 다시 replace하는것을 볼 수 있습니다. encode function 왜 이렇게 구현했을까? URL의 최신 RFC3986에 따르면 IPv6지원에 따라 대괄호는 예약어로 지정되어있습니다. [aa12::16ac:27ff:fe43:..
-
Next.js 13과 ecr + eks로 배포하면서 느낀점 (feat middleware, api route)Next.js 2023. 8. 29. 20:58
프로젝트를 진행하면서 Next.js(v13.1.1) middleware와 api route를 사용하면서 느낀점을 적어보려합니다. api route 왜 썼는가? 인증 관련 처리를 하면서 next-auth 또는 iron-session과 같은 써드파티 라이브러리를 고려하게 되었는데요 그러면서 자연스레 api route또한 고민하게 되었습니다. 인증관련 처리뿐만 아니라 쿠키설정을 어떻게 할지도 고민이 되었는데요, next.js server에서 쿠키설정을 하고 싶은 마음이 있었습니다. 위의 두가지가 가장 큰 동기가 되었고, 추가로 api route를 사용하면서 api 관련 로직들을 api route를 통해 모으기로 했습니다. 조금 더 자세히 이야기 하자면 팀에 백엔드 개발자들이 있어 api route를 통해 직접..
-
브라우저 탭간에 데이터를 공유하는 방법기타 2023. 7. 27. 21:48
탭간에 데이터를 공유해야하는 요구사항이 있었습니다. 이때 전제조건은 아래와 같습니다. 탭간에 데이터를 공유해야한다. 브라우저가 모두 닫혔을때는 데이터도 사라져야한다. 이제 어떻게 구현할지 생각해볼까요? 1.window.localStorage 첫번째 조건만 봤을때는 localStorage를 통해 데이터를 저장하고 eventListener를 통해 탭간에 데이터를 받을 수 있을것 같습니다. 하지만 브라우저가 닫혔을때 데이터가 사라져야하고 이를 수행하기 위해서는 또 다른 코드들을 만들어야합니다. 뭔가 더 나은 대안이 있을것 같습니다 2. window.postMessage postMessage로 데이터를 송수신하는 방법을 생각해보았습니다. 다만 postMessage의 경우 아래의 상황에서만 사용할 수 있었기 때문..
-
Toast Editor toolbar 에러React 2022. 5. 12. 15:17
🌱에러 Toast Editor를 사용하면서 툴바가 나오지 않는 에러를 만나게 되었습니다. mvp일정에 맞춰 개발을 하다 보니 코드 리뷰를 할 시간이 많이 없었고, 그러다 보니 이러한 에러가 발생했다는 것을 나중에 발견하게 되었습니다. 사진 1처럼 툴바가 잘 나와야 되는데, 사진 2처럼 툴바가 나오지 않는 문제였습니다. 🌱의식의 흐름 1. 다크 모드를 건드리다가 color 속성을 잘못 설정했을 것이다. 1번 생각은 다크모드를 지우고 다시 실행해보았지만 여전히 같은 문제가 발생했습니다. 따라서 Toast의 예시와 비교하면서 어떤 것이 빠져있는지 확인해보기로 했습니다. 2. reset css에서 어딘가가 잘못되었다. Toast에서 toolbar가 어떤 방법으로 렌더링 되는지 확인해보았습니다. Toast에서는 ..
-
yarn berry 사용하기기타 2022. 4. 16. 22:23
프로젝트를 진행하면서 유령 의존성 때문에 고생을 한 적이 있었습니다. 왜 이런 문제들이 발생했는지 알아보던 도중 yarn berry에 대해 알게 되었습니다. berry의 장점들에 대해서는 다른 블로그들에서 자세히 설명해주고 있기 때문에 건너뛰도록 하겠습니다. https://yarnpkg.com/getting-started/migration 다음 페이지에서는 migration하는 법에 대해 자세히 설명하고 있습니다. yarn berry를 적용해보자! 우선 yarn berry의 체험을 위해 cra를 통해 테스트해보도록 하겠습니다. npx create-react-app berry --template typescript berry라는 폴더에서 cra를 설치하도록 합니다. berry는 node_modules가 아..
-
[React] React-router는 내부적으로 history api를 사용하는지 확인하기React 2022. 3. 25. 21:07
history api와 hashbang이 등장하면서 html의 트렌드가 spa로 넘어가게 되었다고 생각합니다. React를 하면서 react-router는 떨어질수 없는 관계라 생각하는데요, react-router는 어떻게 만들어 졌을까요? react-router는 react-router-dom과 react-router-native두 가지 폴더가 존재하는데요 이에 따라 다양한 라우터들이 정의되어있습니다. 때문에 웹에서 사용하는것이라면 HashRouter 또는 BrowserRouter를 최상단에 정의해주어야 합니다. 🌱HashRouter 다음과 같이 되어있습니다. hashbang의 fragment와 같이 서버에 전송되지 않기 때문에 사용하지 않는것을 권장한다고 되어있습니다. 🌱BrowserRouter 다음..