JULog

JUlog에 오신걸 환영합니다🤗 저에 대해 궁금하다면, 👆제 이름을 눌러보세요

Next.js 15 에서 MSW 적용하기 (feat. GraphQL)

문제 배경 Next.js 15 + GraphQL 조합에서 msw(2.6.6.)를 적용하면 msw의 인터셉터 함수가 GraqphQL의 operation 함수를 가로채지(intercept) 못하는 문제가 발생한다. 아래의 글을 보면 어떤 문제가 발생하고 있는지 자세히 확인 할 수 있다. https://github.com/mswjs/msw/discussions…

Next.js Wildcard 도메인 도입하기

문제 배경 DT 진단을 할 수 있는 제품의 MVP를 만들고 있었다. MVP를 개발할 당시까지만 해도(합의된) 프로덕트의 도메인은 dtlab.co.kr 하나였다. 하지만, B2B 서비스여서 그런지 기업들의 요구사항은 제각각 이었다. 많은 기업에서 커스텀 도메인이 가능하도록 해달라는 요구사항이 있었다. MVP를 설계할 당시는 도메인에 대한 고민이 없었기에, …

AbortablePromise

api요청의 취소가 가능한 AbortablePromise를 구현해보았다. 참조 및 출처 promise-abortable

Promise error handling

Error Handling 에러 처리 방법에는 다음과 같이 2가지 방법이 있다. 의 두 번째 인자로 에러를 처리하는 방법 를 이용하는 방법 위 2가지 방법 모두 프로미스의 메서드가 호출되어 실패 상태가 된 경우에 실행된다. 하지만, 만약에 가 에러를 던지면 어떻게 될까? 에서 반환된 프로미스는 rejected 되지만, rejection을 catch할 …

AbortController

AbortController 인터페이스는 하나 이상의 웹 요청을 취소할 수 있게 해준다. 생성자를 사용해 새로운 를 생성한다. 객체를 사용해 DOM 요청과의 통신이 완료된다. AbortController 인터페이스 예시 위의 코드를 보면 controller인스턴스를 생성한 후에 fetch할 때, 파라미터 값 signal에 controller.sign…

제네릭(Generic)

제네릭은 타입 정보가 동적으로 결정되는 타입이다. 제네릭을 통해 같은 규칙을 여러 타입에 적용할 수 있기 때문에 타입 코드를 작성할 때 발생할 수 있는 중복 코드를 제거할 수 있다. 쉽게 말해, 제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한 번의 선언으로 다양한 타입에 재…

[Angular] Unit Test 2

부모로부터 상속받은 특정 값을 활용해 테스트하기 위해서는 상속하는 부모 컴포넌트와 자식 컴포넌트를 만들어야한다. 아무 값이 없는 자식 컴포넌트를 만든다. 그리고, AbstractComponent를 extend한다. AbstractComponent에는 테스트할 때 사용할 값들을 가지고 있다.(encourage 값) 부모컴포넌트(HostComponent)를 …

타입 호환성

타입 호환성은 어떤 타입을 다른 타입으로 취급해도 되는지 판단하는 것이다. 정적 타입 언어의 가장 중요한 역할은 타입 호환성을 통해 컴파일 타임에 호환되지 않는 타입을 찾아내는 것이다. 어떤 변수가 다른 변수에 할당 가능하기 위해서는 해당 변수의 타입이 다른 쪽 변수의 타입에 할당 가능해야한다. 할당 가능을 판단할 때는 타입이 가질 수 있는 값의 집합을 …

클래스

클래스 선언 두개의 멤버 변수를 선언하고, 객체가 생성될 때 호출되는 constructor, 그리고 메서드를 하나 선언했다. age라는 멤버 변수는 초기 값으로 0을 할당하고 constructor에서는 멤버 변수를 초기화하고 있다. 클래스 상속 Person을 상속받는 Programmer라는 클래스를 만들었다. Programmer는 Person에 있는 멤버…

인터페이스

자바와 같은 다른 언어에서 인터페이스는 클래스를 구현하기 전에 필요한 메서드를 정의하는 용도로 쓰인다. 타입스크립트에서는 좀 더 다양한 것들을 정의하는데 사용된다. 타입스크립트에서 인터페이스로 정의할 수 있는 타입의 종류와 인터페이스로 타입을 정의하는 방법을 알아보겠다. 먼저 객체의 타입을 정의하는 방법이다. interface 키워드 오른쪽에 타입의 이름…