전체 글
-
tsconfig types란?기타 2024. 3. 26. 22:33
문제 googlemap을 사용하려던 도중 구글이 정의한 타입들이 추론되지 않는 이슈가 있었습니다. 분명히 googlemap이 제공하는 타입을 npm에서 잘 설치했는데, 추론이 안되니 뭔가 이상했습니다. 때문에 제가 알고 있었던 Triple-slash directives를 통해 해결하려했습니다. triple-shash directives는 뭘까요? 와 같은 형태로 사용하는것이 일반적입니다. 파일간의 종속성을 선언하는 역할을 합니다. 컴파일러가 컴파일 과정에 추가 파일을 포함하도록 지시합니다. 의 경우 패키지간의 의존성을 나타냅니다. 예를 들어 type declaration 파일에 를 포함하면 해당 파일은 @types/node/index.d.ts에서 선언된 이름을 사용하므로 컴파일에 포함됩니다. 이를 통해서..
-
github reviewers 자동으로 달아주기기타 2024. 2. 22. 20:59
문제 상황 회사에서는 현재 pr을 올리면 슬랙 깃헙봇을 활용하여 자동으로 노티를 주고 있습니다. 이에 따라 알림을 받는사람은 reviewer로 지정된 사람들과, asignee입니다. 팀에 인원이 늘어남에 따라 일일이 reviewer를 등록하는것이 번거롭게 되었습니다. step1 github에는 CODEOWNERS를 통해 코드 소유자 정보를 나타낼 수 있습니다. (docs 링크) 팀원이 2명이고(A,B), 모든 파일에 대해 수정사항이 일어났을 때 자동으로 reviewer에 포함되게 하고 싶다면, 아래와 같이 나타낼 수 있습니다. * @A @B 이렇게 작성할 경우 팀에서 다루는 모든 레포에 CODEOWNERS를 만들고 위와 같은 설정을 해주어야 되는데요, 만약에 팀원이 새로 추가가 되거나 변경이 일어나게 된..
-
원하는 시점에 useQuery를 사용해보자카테고리 없음 2023. 12. 13. 22:35
기본적으로 useQuery는 선언적으로 동작합니다. 예를 들어 useQuery(['getPhoneNumberByUserId', {userId}], queryFn) 와 같은 쿼리가 있습니다. 위 쿼리는 userId가 변경되면 "알아서 " queryFn을 실행합니다. 문제 하지만 원하는 시점에 queryFn을 실행하고 싶은 경우가 종종 있습니다. 복잡한 form을 다루다보면 이런 선언적인 방식이 오히려 코드의 가독성을 해치는 경우도 있습니다. 또한 위의 코드에서는 userId가 같다면 queryFn을 호출하지 않습니다. 하지만 userId가 같더라도 항상 queryFn을 호출하고 싶은 경우가 있습니다. 해결 방법 queryClient.fetchQuery를 활용해볼 수 있습니다. 이미 useQuery로 인해 ..
-
타입추론을 도와주는 is keyword에 대해 알아보고 활용해보자기타 2023. 11. 29. 22:08
typescript의 Is keyword는 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 +..
-
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에서는 ..