Til
TIL | Custom hook with return tuple type array
ISSUE // 단순 예시입니다. import { useState } from "react"; const useToast = () => { const [isOpen, setIsOpen] = useState(false); const handleToast = () => { setIsOpen((prev) => !prev); }; return [isOpen, handleToast]; }; export default useToast; // error // const handleToast: boolean | (() => void) // This expression is not callable. // Not all constituents of type 'boolean | (() => void)' are..
TIL | env파일 자동완성 및 Triple-Slash Directives 정리
env 파일 자동완성 및 에러 해결 const fetchData = async () => { const response = await fetch(process.env.REACT_APP_TEST_ENV) // Type 'undefined' is not assignable to type 'RequestInfo | URL'.ts(2345) const result = response.json() return result } useEffect(() => { fetchData().then(console.log) },[]) 위와 같이 .env 파일의 타입 이슈를 해결하기 위해서는 환경 변수(.env) 타입 설정이 필요하다. CRA 를 ts로 설치하였을때 src 디렉토리에 react-app-env.d.ts 파일이 생기..
TIL | 패키지 잠금파일
Npm의 유의적 버전 표기, 패키지 잠금파일(package-lock.json, yarn.lock) 버전의 범위 잠금파일을 알아보기 전, npm이 모듈의 버전을 관리하는 방식을 먼저 알아보자 "dependencies": { "react": "^17.0.2", }, 위 예시는 npm을 통해 설치한 react의 버전이 17.0.2이라는 것이다. 이때 npm은 버전을 관리하기 위해 유의적 버전(Sementic Version) 규칙 아래 패키지 버전을 관리한다. 유의적 버전은 주(Major), 부(Minor), 수(Patch) 세 가지 숫자를 조합해서 버전을 관리하는 방법이다. 위 리액트 버전을 예시로 들 경우 주는 17, 부는 0, 수는 0이다. 각각의 버전을 변경하는 기준은 다음과 같다. 주 버전(Major ..
TIL | Type guard
Type guard Type guard?? 특정 범위 안에서 타입을 좁혀가며 런타임 타입 검사를 수행하는 표현식이다. - typescript docs 타입 가드를 사용함으로써, 무분별한 타입 단언(Type Assertion)을 막을 수 있다. Example 원시 타입을 검사할때 type Combinable = number | string; const add = (a: Combinable) => { if (typeof a === "string") { // Type Guard return a.split(""); } return a; }; console.log(add(1)); 원시 타입은 typeof 키워드를 사용하여 타입을 검사할 수 있다. 위 예시에서 typeof 키워드 없이 a.split("")을 적용하..
TIL | GraphQL Subscriptions
GraphQL Subscriptions GraphQL Subscriptions? 특정 이벤트가 발생할때 서버가 클라이언트로 데이터를 보낼 수 있도록 GraphQL에서 제공하는 기능이다. 서버와 클라이언트가 실시간 연동을 하게끔 하기 위해 웹소켓을 기반으로 한다. subscriptions을 사용함으로써, 일반적인 흔히 사용되는 request - response 통신에서 벗어날 수 있다. 대신 클라이언트에서 원하는 이벤트를 지정하여 서버와의 연결을 지속할 수 있다. 이후 해당 이벤트가 발생할때마다 서버는 클라이언트에 데이터를 전달한다. 결론적으로, 실시간 데이터 통신을 위해 사용된다.(알람, 푸시, 배송상태 등에 적용할 수 있다.) Setting with Apollo client subscriptions 설..
TIL | MSW(Mock Service Worker)
MSW(Mock Service Worker) 테스트코드 강의를 들으면서 사용해보게 된 MSW(Mock Service Worker)에 대해 간단히 정리해보았다. MSW란? Mock Service Worker의 준말로, 이를 사용하면 실제 api를 호출하지 않고 데이터를 요청할 수 있다. 정확하게 말하자면 api 요청을 가로챈 후 service worker가 mocking data를 전달해주는 것이다. (Service Worker의 가짜 데이터를 넘겨준다.) 애플리케이션 내부에 직접 Mock데이터를 심거나 Mock 서버를 별도로 만들 필요 없이 실제 API를 사용하는 것처럼 네트워크 수준에서 Mocking이 가능하다. MSW Request Flow msw 라이브러리를 통해 애플리케이션의 네트워크 요청을 감지..