일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- dfs
- autosize
- 반공변성
- 인터섹션
- tailwind
- 타입 좁히기
- useAppDispatch
- Cypress
- 리터럴 타입
- async/await
- Jest
- SSR
- 태그된 유니온
- Promise
- CI/CD
- recoil
- CORS
- TS
- 무한 스크롤
- 이분 검색
- webpack
- 호이스팅
- 공변성
- map
- ESlint
- 투포인터
- React
- app router
- 결정 알고리즘
- RTK Query
- Today
- Total
목록분류 전체보기 (506)
짧은코딩
MSW를 사용하여 개발하는데, 콘솔에 이런 경고 메시지가 엄청 많이 떴다. 콘솔 로그를 보면서 테스트를 진행해야 하는데 불편함이 생겨서 저 경고 메시지를 없애보려고 한다. 왜 저런 경고가 뜨는걸까? MSW의 worker가 API를 가로채서 mock 데이터를 보내주는 것인데 정의되지 않은 주소를 가로챘기 때문에 발생한다. 따라서 요청에서 무시하거나 허용하는 onUnhandledRequest를 사용하여 지정해야한다. 해결법 onUnhandledRequest 이 속성은 setupWorker 초기화 이후에 Request handler를 등록하기 위해 사용된다. https://mswjs.io/docs/api/setup-worker/start#onunhandledrequest start() Register the ..
구현 화면 및 사용 기술 fakejs와 MSW를 이용하여 mock API를 만들어서 구현했다. "react-intersection-observer"를 이용하여 총 아이템 중 마지막에서 4번째 위치에 있는 아이템을 사용자가 보면 데이터를 더 불러오도록 했다. (다음엔 serializeQueryArgs, merge, forceRefetch도 같이 이용하여 구현해보려 한다..!) 구현 RTK Query 우선 RTK Query의 endpoints에 위와 같이 코드를 작성했다. fakejs 백엔드와 위 데이터 형식으로 소통하기로 했기에 fakejs를 통해 위 데이터 구조를 만들었다. import { faker } from "@faker-js/faker"; export function createRandomItem..
브라우저는 파싱 → 스타일 → 레이아웃 → 페인트 → 합성 → 렌더 등의 과정을 거친다. JS, CSS의 변화에 의해 DOM, CSS에 변화가 생기면 Reflow 혹은 Repaint 등의 과정을 수행한다. 1. 파싱 브라우저가 HTML을 파싱하고 읽어들이는 과정 -DOM Tree Hello web performance students! 이런식으로 코드가 해석되는 과정이 파싱이다. -CSSOM Tree body { font-size: 16px } p { font-weight: bold } span { color: red } p span { display: none } img { float: right } CSS 코드 역시 해석이된다. 2. 스타일 DOM Tree, CSSOM Tree가 생성되면 스타일을 매..
문제 https://school.programmers.co.kr/learn/courses/30/lessons/150367#qna 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이 문제에서 가장 헷갈렸던 부분은 이렇게 같은 모댱의 트리를 가져도 값이 다를 수 있다는 점이었다. 결국 더미노드의 개수 차이로 인하여 값이 바뀌는 것이 핵심이다. 그리고 가장 중요한 개념은 포화 이진 트리의 개수는 2^h-1개 라는 것이 중요했다. 정답 및 풀이 정답 function checkTree(binary) { let len = binary.length; let mid = ..
클로저란? 클로저는 난해하기로 유명한 개념 중 하나이다. 클로저는 JS 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. MDN에서는 “클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다”라고 말한다. 핵심 키워드는 “함수가 선언된 렉시컬 환경”이다. 일급 객체란? 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 함수를 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. const x = 1; function outerFunc() { const x = 10; innerFunc(); } function innerFunc() { console.log(x); ..
재귀 타입 TS에는 자기 자신을 다시 사용하는 재귀 타입이 있다. type Recursive = { name: string; children: Recursive[]; }; const recur1: Recursive = { name: 'test', children: [{ name: 'test2', children: [] }], }; 이렇게 recur1은 Recursive 객체 속성 타입으로 다시 Recursive를 사용한다. 이런 것을 바로 재귀 타입이라고 부른다. -컨디셔널 타입 type ElementType = T extends any[] ? ElementType : T; 이런식으로 컨디셔널 타입에서도 사용 가능하다. 다만, 이렇게 재귀 타입을 잘못 사용하면 자기 자신을 계속 가져오는 상황에 빠질 수 ..
브랜드 속성 브랜드 속성은 객체를 구별할 수 있는 속성을 하나 추가하는 방법이다. 예시 interface Money { __type: 'money'; amount: number; unit: string; } interface Liter { __type: 'liter'; amount: number; unit: string; } 이 코드에서는 "__type" 이 속성을 브랜드 속성이라고 한다. 속성 이름은 다른 속성과 겹치지 않는 이름이면 다 가능하다. 이렇게 브랜드 속성을 사용하는 것을 브랜딩이라고 한다. 타입 좁히기 TS에서 타입을 구분하는 것은 중요하다. 대부분은 TS가 자체적으로 코드를 파악해서 타입을 추론하는 제어 흐름 분석(Control Flow Analysis)을 한다. 하지만 제어 흐름 분석이..
HMR이란? HMR은 Hot Module Replacement의 줄임말이다. HMR을 활성화하면 모든 종류의 모듈을 새로고침 할 필요 없이 런타임에 업데이트할 수 있다. 즉, 브라우저를 새로고침 하지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정이다. 새로고침을 위한 LiveReload 대신에 사용할 수 있다. 이로 인해서 코드를 수정하고 바로 웹 애플리케이션에 반영이 되게 할 수 있다. 조심할점으로는 HMR은 프로덕션용이 아니고 개발용으로만 사용해야 한다. 동작 방법 애플리케이션은 HMR 런타임에 업데이트된 내용이 있는지 확인 요청 런타임에서 업데이트된 내용을 비동기적으로 다운로드받고 애플리케이션에 알림 애틀리케이션은 런타임에 업데이트 요청 런타임은 업데이트..
문제 https://school.programmers.co.kr/learn/courses/30/lessons/42883 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(number, k) { let arr = []; for (let i = 0; i 0) { k--; arr.pop(); } arr.push(number[i]); } arr.splice(arr.length - k, k); ..
infer란? infer로 타입 추론을 극한으로 활용할 수 있다. 컨디셔널 타입과 같이 사용할 수 있다. 컨디셔널 타입(Conditional Type)이란? type A1 = string; type B1 = A1 extends string ? number : boolean; // number type A2 = number; type B2 = A2 extends string ? number : boolean; // boolean 특정 타입 extends 다른 타입 ? 참일 때 타입 : 거짓일 때 타입 특정 타입이 다른 타입의 부분집합일 때 참이 된다. infer의 예시들 배열의 요소 타입을 얻고 싶은 경우 type El = T extends (infer E) [] ? E : never; type Str =..