기타
-
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를 만들고 위와 같은 설정을 해주어야 되는데요, 만약에 팀원이 새로 추가가 되거나 변경이 일어나게 된..
-
타입추론을 도와주는 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:..
-
브라우저 탭간에 데이터를 공유하는 방법기타 2023. 7. 27. 21:48
탭간에 데이터를 공유해야하는 요구사항이 있었습니다. 이때 전제조건은 아래와 같습니다. 탭간에 데이터를 공유해야한다. 브라우저가 모두 닫혔을때는 데이터도 사라져야한다. 이제 어떻게 구현할지 생각해볼까요? 1.window.localStorage 첫번째 조건만 봤을때는 localStorage를 통해 데이터를 저장하고 eventListener를 통해 탭간에 데이터를 받을 수 있을것 같습니다. 하지만 브라우저가 닫혔을때 데이터가 사라져야하고 이를 수행하기 위해서는 또 다른 코드들을 만들어야합니다. 뭔가 더 나은 대안이 있을것 같습니다 2. window.postMessage postMessage로 데이터를 송수신하는 방법을 생각해보았습니다. 다만 postMessage의 경우 아래의 상황에서만 사용할 수 있었기 때문..
-
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 -boilerplate: lint 적용하기(eslint, prettier, stylelint, husky)기타 2022. 3. 15. 20:31
적용 이유 팀원들과 지속적으로 프로젝트를 진행하면서 css의 순서까지 맞추기로 하였습니다. 저는 팀원이 공유해준 css정렬 순서에 관한 블로그 글을 보며 계속 css를 맞추게 되었습니다. 하지만 이러한 작업이 저에게는 굉장히 귀찮고 하기 싫은 작업 중 하나로 남았습니다. 따라서 주말 동안 이를 자동화할 도구를 찾게 되었고 스타일린트를 적용하게 되었습니다. 스타일 린트란? 스타일린트 공식 홈페이지를 가게 된다면 아래와 같은 문장으로 설명합니다. A mighty, modern linter that helps you avoid errors and enforce conventions in your styles 스타일린트와 css-in-js를 함께 사용하기 위해서는 추가적인 설정을 해주어야 합니다. 이를 위해서 ..
-
picture태그를 통한 이미지 최적화하기기타 2022. 3. 13. 21:21
picture태그란? picture태그란 0개 이상의 태그와 다른 디스플레이/장치 시나리오에 대한 이미지의 대체 버전을 제공하기 위한 하나의 요소를 포함하는 태그입니다. mdn의 예시를 본다면 미디어 쿼리를 통해 화면별 다른 이미지를 보여주기 위해 picture태그를 사용하는것을 볼 수 있습니다. 우리는 pucture태그를 통해 화면의 width가 기준이 아닌, 다른 방법으로 최적화를 해보겠습니다. avif,webp, jpeg를 통해 이미지 최적화하기 그럼 avif는 무엇일까요? avif는 av1(오픈 소스 코텍)의 이미지 파일 형식입니다. 압축을 하기 때문에 일반 이미지보다 몇배 작게 만들수 있고, HDR과 호환이 되는 코덱입니다. webp란 무엇일까요? 웹에서 사용되는 기존의 이미지 형식의 포맷을 대..