일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Promise
- 리터럴 타입
- 결정 알고리즘
- webpack
- 이분 검색
- useAppDispatch
- TS
- autosize
- app router
- tailwind
- RTK Query
- ESlint
- 무한 스크롤
- SSR
- async/await
- recoil
- 투포인터
- dfs
- CORS
- 태그된 유니온
- Cypress
- 호이스팅
- 인터섹션
- React
- 타입 좁히기
- CI/CD
- map
- Jest
- 반공변성
- 공변성
- Today
- Total
목록전체 글 (505)
짧은코딩
구현 화면 및 사용 기술 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 =..
이번에 프로젝트를 리팩터링하는 과정에서 로그인에 대한 부분도 수정을 하였다. 기존 방식 기존에는 로컬 스토리지에 accessToken을 저장하는 방식을 사용했었다. 하지만 로컬 스토리지에 있는 데이터는 브라우저가 닫혀도 삭제되지 않기 때문에 보안상 관리가 쉽지 않다. 수정된 방식 JWT 대신에 Cookie에 httponly 옵션을 설정하여 사용하기로 했다. 간단하게 방식을 말하면, httponly 옵션 때문에 브라우저에서 쿠키에 접근할 수 없으니까 새로고침을 하면 쿠키가 존재하는지 확인할 방법이 없다. 그렇기에 쿠키에 다른 값을 넣어서 로그인 확인을 하기로 했다. 로그인 전략 우선 로그인을 하면위 사진처럼 쿠키가 들어오게 설정했다. 위에서 말했듯이 httponly라서 JS로 쿠키에 접근할 수가 없다. ..