Next.js 15 에서 MSW 적용하기 (feat. GraphQL)
Next.js 15 + GraphQL 조합에서 msw(2.6.6.)를 적용하면 msw의 인터셉터 함수가 GraqphQL의 operation 함수를 가로채지(intercept) 못하는 문제가 발생한다.
Next.js
2025.03.01 · 2분 읽기11
블로그
Next.js Wildcard 도메인 도입하기
DT 진단을 할 수 있는 제품의 MVP를 만들고 있었다. MVP를 개발할 당시까지만 해도(합의된) 프로덕트의 도메인은 dtlab.co.kr 하나였다.
Next.js
2024.10.07 · 2분 읽기11
AbortablePromise
api요청의 취소가 가능한 AbortablePromise를 구현해보았다.
JavaScript
2020.10.26 · 1분 읽기4
Promise error handling
에러 처리 방법에는 다음과 같이 2가지 방법이 있다.
JavaScript
2020.10.23 · 1분 읽기3
AbortController
AbortController 인터페이스는 하나 이상의 웹 요청을 취소할 수 있게 해준다.
JavaScript
2020.10.20 · 1분 읽기2
제네릭(Generic)
제네릭은 타입 정보가 동적으로 결정되는 타입이다. 제네릭을 통해 같은 규칙을 여러 타입에 적용할 수 있기 때문에 타입 코드를 작성할 때 발생할 수 있는 중복 코드를 제거할 수 있다. 쉽게 말해, 제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 ...
TypeScript
2020.10.09 · 1분 읽기1
[Angular] Unit Test 2
부모로부터 상속받은 특정 값을 활용해 테스트하기 위해서는 상속하는 부모 컴포넌트와 자식 컴포넌트를 만들어야한다. 아무 값이 없는 자식 컴포넌트를 만든다. 그리고, AbstractComponent를 extend한다. AbstractComponent에는 테스트할 때 사용할 값들을 가지...
Testing
2020.10.07 · 1분 읽기0
클래스
class Person {
TypeScript
2020.10.03 · 1분 읽기0
타입 호환성
타입 호환성은 어떤 타입을 다른 타입으로 취급해도 되는지 판단하는 것이다. 정적 타입 언어의 가장 중요한 역할은 타입 호환성을 통해 컴파일 타임에 호환되지 않는 타입을 찾아내는 것이다. 어떤 변수가 다른 변수에 할당 가능하기 위해서는 해당 변수의 타입이 다른 쪽 변수의 타입에 할당...
TypeScript
2020.10.03 · 1분 읽기0
인터페이스
자바와 같은 다른 언어에서 인터페이스는 클래스를 구현하기 전에 필요한 메서드를 정의하는 용도로 쓰인다. 타입스크립트에서는 좀 더 다양한 것들을 정의하는데 사용된다. 타입스크립트에서 인터페이스로 정의할 수 있는 타입의 종류와 인터페이스로 타입을 정의하는 방법을 알아보겠다.
TypeScript
2020.10.01 · 1분 읽기1
[Angular] Unit Test
아래의 코드는 캐시 추가 충전 버튼에 대한 테스트 코드이다.
Testing
2020.09.28 · 1분 읽기2
css touch-action
기본적으로 터치 이벤트의 처리는 브라우저가 담당하는 영역이다. touch-action 속성을 통해 어떤 요소 내에서 브라우저가 처리할 터치 액션의 목록을 지정할 수 있다. 표준 터치 제스쳐로는 터치를 사용한 스크롤(panning)과 여러 손가락을 사용한 확대/축소(pinch zoo...
TIL
2020.09.17 · 1분 읽기1
타입 정의하기 <enum>
type Width = number | string;
TypeScript
2020.09.14 · 1분 읽기0
타입스크립트란
자바스크립트는 동적 타입 언어이다. 따라서 변수의 타입은 런타임에 결정된다. 반대로, 타입스크립트는 정적 타입 언어이다. 타입스크립트는 자바스크립트의 모든 기능을 포함하면서 정적 타입을 지원한다. 정적 타입 언어는 변수의 타입이 컴파일 타임에 결정된다.
TypeScript
2020.09.12 · 1분 읽기0
Singleton Pattern
객체를 만들 때, 하나의 생성자로 여러 객체를 만들 수 있다. 하지만 싱글턴은 필요에 의해 단 하나의 객체만을 만들 때 사용한다. 즉, 전체 시스템에서 하나의 인스턴스만 존재하도록 보장하는 객체 생성 패턴을 말한다.
JavaScript
2020.09.10 · 1분 읽기0
Vowel Count
무료악보 구매 방법
Algorithm
2020.09.03 · 1분 읽기0
Material Issue
::ng-deep .cdk-overlay-pane {
Angular
2020.08.31 · 1분 읽기0
Generator
ES6에서 도입된 Generator Function는 사용자의 요구에 따라 다른 시간 간격으로 여러 값을 반환할 수 있으며, 내부 상태를 관리할 수 있는 함수이며, function generatorFunction() { / ... / }와 같이 사용한다. 즉, Generator F...
JavaScript
2020.08.26 · 1분 읽기0
Iteration
ES6에서 도입된 이터레이션 프로토콜(iteration protocol)은 데이터 컬렉션을 순회하기 위한 프로토콜(미리 약속된 규칙)이다. 이터레이션 프로토콜을 준수한 객체는 for…of 문으로 순회할 수 있고 Spread 문법의 피연산자가 될 수 있다.
JavaScript
2020.08.21 · 1분 읽기0
The Baum-Sweet sequence
const getBaumSweet = (n) => {
Algorithm
2020.08.17 · 1분 읽기0
Help Suzuki complete his chores!
10 ≤ chores length ≤ 30
Algorithm
2020.08.13 · 1분 읽기0
Ping Pong
export function pingPong(startNumber: number, endNumber: number): string {
Algorithm
2020.08.09 · 1분 읽기0
Calculate mean and concatenate string
lst = ['u', '6', 'd', '1', 'i', 'w', '6', 's', 't', '4', 'a', '6', 'g', '1', '2', 'w', '8', 'o', '2', '0']
Algorithm
2020.08.07 · 1분 읽기0
kakao map sdk 사용하기
kakao.maps.load(() => {
TIL
2020.08.01 · 1분 읽기0
bootcamp test2
배열 arr1과 arr2가 주어집니다. 각 배열의 원소는 숫자 1부터 13까지로 이루어져 있습니다.
Algorithm
2020.07.30 · 1분 읽기0
bootcamp test1
자연수가 들어있는 배열 arr가 매개변수로 주어집니다. 배열 arr안의 숫자들 중에서 앞에 있는 숫자들부터 뒤에 중복되어 나타나는 숫자들 중복 횟수를 계산해서 배열로 반환하도록 solution 함수를 완성해주세요. 만약 중복되는 숫자가 없다면 배열에 -1을 채워서 반환하세요.
Algorithm
2020.07.29 · 1분 읽기0
Bit Counting
var countBits = function (n) {
Algorithm
2020.07.27 · 1분 읽기0
Array Diff
function arraydiff(a, b) {
Algorithm
2020.07.21 · 1분 읽기1
css variable
--primary0: #fdf6f6;
TIL
2020.07.19 · 1분 읽기0
Partial<T>, Omit<T, K> and Pick<T,K>
type Partial<T> = { [P in keyof T]?: T[P]; };
TypeScript
2020.07.18 · 1분 읽기0
직사각형 별찍기
이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다.
Algorithm
2020.07.16 · 1분 읽기0
2Xn Tiling
function solution(n) {
Algorithm
2020.07.14 · 1분 읽기0
count apples and oranges(사과와 오렌지)
다음과 같은 흑백 세상에 오렌지 나무와 사과나무가 있습니다. a는 사과나무의 위치를, b는 오렌지 나무의 위치를 나타냅니다.
Algorithm
2020.07.14 · 1분 읽기0
@types, typeRoots and types
타입스크립트 공식문서에 compilerOptions들로 typeRoots와 types를 아래와같이 정의한다.
TypeScript
2020.07.10 · 1분 읽기0
Wrap Observably
navigator.geolocation.getCurrentPosition((result) => {
TIL
2020.07.08 · 1분 읽기0
Bottom Navigation Scrolling
@Directive({ selector: '[footerScroller]' })
TIL
2020.07.06 · 1분 읽기0
Quick Start
$ npx gatsby new my-blog-starter https://github.com/JaeYeopHan/gatsby-starter-bee
Development
2020.07.05 · 1분 읽기0
Parent element에 click이 발생할 때 child element의 클릭이벤트를 제어하기
@ViewChild('telEl') telEl: ElementRef;
TIL
2020.07.03 · 1분 읽기0
Mobile Touch Swipe Indicator
ngAfterViewInit() {
TIL
2020.06.25 · 1분 읽기0
Full Height On mobile Web
전체 화면 높이를 차지하도록 요소의 스타일을 지정하려면 높이를 100vh로 설정하면된다. 하지만 예상되로 되지 않는 것을 경험할 것이다. 웹 브라우저에 기본적으로 보이는 주소 줄까지 높이로 계산해, 가려진 영역 때문에 스크롤이 발생한다.
TIL
2020.06.24 · 1분 읽기0
CSS z-index
분명하진 않지만 HTML 요소는 3차원으로 생성된다. x축과 y축에 정렬된 것 외에도 z축에 놓일 수 있고, 3차원에서의 위치를 제어한다.
TIL
2020.06.17 · 1분 읽기0
Prototype Chaining
배열 리터럴은 Array생성자 함수와 그 프로토타입으로 이루어져 있다. Array.prototype에는 배열 메소드가 모두 담겨있다. Array의 prototype은 객체이다. proto가 생략 가능하기 때문에 배열 인스턴스가 마치 자신의 메소드인 것처럼 호출이 가능하다.
JavaScript
2020.06.15 · 1분 읽기0
서버 사이드 렌더링(SSR)
단일 페이지 애플리케이션(Single Page Application, SPA)는 모던 웹의 패러다임이다. SPA는 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있다.
JavaScript
2020.06.12 · 1분 읽기0
css grid와 scroll snap 사용하기
.container {
TIL
2020.06.08 · 1분 읽기0
image 안쪽에 box-shadow
&:before {
TIL
2020.06.05 · 1분 읽기0
Data Types
자바스크립트 데이터 타입은 크게 두 가지로 분류된다.
JavaScript
2020.06.04 · 1분 읽기0
Prototype
어떠한 객체가 만들어지기 위해 그 객체의 모태가 되는 녀석을 프로토타입이라고 한다.
JavaScript
2020.06.03 · 1분 읽기0
popstate이벤트를 통해 iframe의 뒤로가기 제어하기
1. 한 컴포넌트 안에서 mobiliance 결제 iframe을 랜더해야하는 상황이다.
Angular
2020.05.29 · 1분 읽기0
[ANGULAR] how to prevent scroll
개발을 하다보면 스크롤을 잠깐 막아야하는 상황이 발생하곤 한다.
TIL
2020.05.27 · 1분 읽기0
Closure
MDN: A closure is the combination of a function and the lexical environment within which that function was declared
JavaScript
2020.05.18 · 1분 읽기0
hover에 따라 주고싶은 element 스타일링하기
ex1) 인접한 경우
TIL
2020.05.10 · 1분 읽기0
How to handle query parameters in a router link
How to handle query parameters in a router link. One of:
Angular
2020.05.08 · 1분 읽기0
We detected that the Chromium Renderer process just crashed GITLAB CI/CD 에러 해결하기
We detected that the Chromium Renderer process just crashed. This is the equivalent to seeing the 'sad face' when Chrome dies. This can happen for a number o...
TIL
2020.04.26 · 1분 읽기0
테스트의 종류
목적: 원하는 Text가 제대로 나오는지, A를 클릭했을 때 기대하는 동작을 하는지 등을 테스트 합니다. 작은 수정에도 테스트가 깨지기 쉽고 Mock Injection해서 UI만 테스트 하는것도 공수가 많이 들어갑니다.
Testing
2020.04.25 · 1분 읽기0
Cant bind input when using abstract classes 2+ level of hierarchy
로컬 컴파일 시점에서는 아무 문제 없는 코드가 배포한 프로덕션에서 에러가 난다.😭
TIL
2020.04.24 · 1분 읽기0
Callback Function
call + back: something will call this function back sometime somehow
JavaScript
2020.04.18 · 1분 읽기0
Prevent CSS hover on touch devices
모바일 웹에서 호버 효과가 발생하는 이슈가 있다. 모바일에서 그게 가능한 것일까?라는 의문이 들 수도 있다.
TIL
2020.04.13 · 1분 읽기0
position: sticky 값 주기
sticky가 적용된 엘리먼트의 부모 요소의 height 범위 내에서 fixed으로 작동되지만 그 외의 영여에서 static으로 동작한다.
TIL
2020.04.08 · 1분 읽기0
고정된 헤더와 푸터 스크롤값에 따라 감추기
고정된 헤더와 푸터 스크롤값에 따라 감추기
TIL
2020.04.06 · 1분 읽기0
text가 2줄 이상일때 ellipsis 값 적용
height: 44px;
TIL
2020.03.30 · 1분 읽기0
No value accessor for form control with name: 'checkConfirm'
cashComponent에 paymentTermsDescription 자식 컴포넌트가 있고 자식 컴포넌트에 formControl을 정의해놓은 상태에서 나는 에러였음.
TIL
2020.03.20 · 1분 읽기0
How to debug on whether observable is unsubscribe
const sub$ = new Subject();
TIL
2020.03.18 · 1분 읽기0
scss @mixin 문법 사용해서 hover값 주기
sprite-instagram: (
TIL
2020.03.16 · 1분 읽기0
repeat animation by clicking button
Resolution
TIL
2020.01.17 · 1분 읽기0
Activated Route의 구독과 해제
컴포넌트에서 옵저버블을 구독하면 이 컴포넌트가 종료될 때 구독했던 옵저버블을 해지하는 것이 좋다고 알고 있을 것이다.
Angular
2020.01.10 · 1분 읽기0
test code 작성 spyOn()
// chargeCash가 호출되고 있는지 감시하는 로직
TIL
2020.01.07 · 1분 읽기0
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out o...
node version upgrade
TIL
2020.01.06 · 1분 읽기0
switch
switch(expression)
TIL
2019.12.27 · 1분 읽기0
image 안쪽의 border 값 주기 : MASK
.image-container {
TIL
2019.12.26 · 1분 읽기0
상대 경로, 절대 경로
1. 절대 경로 (주소 앞에 '/'를 붙여야한다)
TIL
2019.12.13 · 1분 읽기0
bootsrap modal css 코드 ::ng-deep 으로 캡슐화하기
::ng-deep .modal-dialog {
TIL
2019.12.12 · 1분 읽기0
Sticky Header
position: fixed;
TIL
2019.12.11 · 1분 읽기0
Sticky Footer
.container {
TIL
2019.12.10 · 1분 읽기0
중앙 정렬
.flexcontainer {
TIL
2019.12.05 · 1분 읽기0
ElementRef
: 디렉티브가 적용되는 DOM 엘리먼트를 참조하기 위해 ElementRef를 디렉티브 생성자로 주입받습니다.
Angular
2019.11.26 · 1분 읽기0
Design System
Design System
TIL
2019.11.25 · 1분 읽기0
클래스와 인터페이스
인터페이스는 클래스에서 구현부가 빠졌다고 이해하면 편하다. 즉, 어떠한 객체가 이러이러한 프로퍼티 혹은 메소드를 가진다고 선언하는 것이다. 실질적인 구현은 이를 구현한다고 선언하는 클래스에 맡긴다.
TIL
2019.11.22 · 1분 읽기0
RXJS of()
⇒ 인수를 연속적인 observable 형태로 변환한다
TIL
2019.11.20 · 1분 읽기0
반응형 폼 유효성 검사
/ 히어로의 이름은 인자로 받은 정규표현식에 매칭되지 않아야 합니다. /
TIL
2019.11.19 · 1분 읽기0
form data
웹 애플리케이션 파일 업로드는 크게 두가지 방식이 있다.
TIL
2019.11.13 · 1분 읽기0
object.keys90 / object.assign
Object.keys() 메서드는 개체 고유 속성의 이름을 배열로 반환합니다. 배열 순서는 일반 반복문을 사용할 때와 같습니다.
TIL
2019.11.12 · 2분 읽기0
EventEmitter
앵귤러에는 부모로 이벤트를 보내는 방법에 @Output과 EventEmitter가 있다.
TIL
2019.11.08 · 1분 읽기0
새로운 translateExt 번역 package가 생겼다!
@Component({
TIL
2019.11.07 · 1분 읽기0
ng-template & ng-container
위의 코드는 Angular에서 ngIf를 처리할 때 아래와 같이 변환 됩니다.
Angular
2019.11.06 · 1분 읽기0
DOM 프로퍼티
DOM 프로퍼티
TIL
2019.11.05 · 1분 읽기0
Asynchronous & RequestAnimationFrame
1) setTimeOut
JavaScript
2019.10.22 · 1분 읽기0
Function Scope, Block Scope and Lexical Scope
\- 범위, 영역 [네이버 사전]
JavaScript
2019.09.16 · 1분 읽기0
Coercion In Javascript
\- 자바스크립트 엔진은 표현식을 평가할 때 문맥, 즉 컨텍스트(Context)에 고려하여 암묵적 타입 변환을 실행한다
JavaScript
2019.09.04 · 1분 읽기0
Call Stack
javascript의 가장 큰 특징중의 하나는 single-threaded 언어라는 점이다.
JavaScript
2019.08.14 · 1분 읽기0
this, call, apply, and bind
대부분의 경우 this의 값은 함수를 호출한 방법이 결정합니다. 실행하는 중 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ECMAScript 5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ECMAScr...
JavaScript
2019.08.11 · 1분 읽기0
React-Native 환경 설정하기
IT 동아리 NEXTERS에서 앱을 만들고 있다.
Development
2019.07.20 · 1분 읽기0
ESLINT-airbnb 코드스타일 적용하기
쉽게 말하면 문제가 있는 패턴이나 코드를 찾기 위해 사용되는 정적 분석 툴이다.
Development
2019.02.01 · 1분 읽기0
Welcome Bee starter
Welcome, Gatsby! This starter is full-package for your new blog!
Development
2019.01.01 · 1분 읽기0