짧은코딩

“함수의 호출은 리턴 값으로 대체해라!” JS 예시 const onClick1 = () => () => { console.log("hello"); }; const onClick2 = () => { console.log("hello"); }; document.querySelector("#header").addEventListener("click", onClick1()); // 정답 document.querySelector("#header").addEventListener("click", onClick2()); // 오답 -onClick1이 정답인 이유는 onClick1() 자리에 document.querySelector("#header").addEventListener("click", () => { con..

이전 구현 방식 https://shortcoding.tistory.com/534 전체 상품 불러오기 무한 스크롤 구현 with react-intersection-observer 구현 화면 및 사용 기술 fakejs와 MSW를 이용하여 mock API를 만들어서 구현했다. "react-intersection-observer"를 이용하여 총 아이템 중 마지막에서 4번째 위치에 있는 아이템을 사용자가 보면 데이터를 더 shortcoding.tistory.com 저번에는 무한 스크롤에서 데이터를 불러오고 데이터 저장을 items를 따로 만들어서 하였다. 이번에는 공식 사이트에서 준 예시를 보고 구현해 보겠다. 전체 상품을 불러오는 페이지를 구현하는 것은 쉬웠다. 하지만 검색 상품을 가져오는 페이지에서 설정 방법..

무한 스크롤을 구현하고 나서 아이템을 많이 불러왔을 때, 맨 위로 올리는 버튼이 있으면 좋겠다는 생각이 들었다. 그래서 맨 위로 올라가는 버튼을 만들려고 했는데 스크롤을 다루기가 은근히 까다로워서 글로 기록하려 한다. 사용한 라이브러리는 "react-custom-scrollbars"이다. useRef도 같이 사용해서 구현했다. 구현 설계 1. 스크롤이 어느 정도 내려가고 나서 위로 올라가는 버튼이 나타난다. 2. "/"와 "/searchitem" 경로에서만 버튼이 나타나도록한다. 구현 const App = () => { const { pathname } = useLocation(); const ref = useRef(null); const [positionY, setPositionY] = useState..

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)을 한다. 하지만 제어 흐름 분석이..