전체 글

객체를 얕은 복사할 때, 전개 연산자(...)를 많이 사용합니다. 객체 전개 연산자 (Object Spread) 라는 단어처럼 연산자 앞에 객체만 가능할 것이라고 생각했는데요. 아니었습니다. 포스팅 제목과 같은 고민을 하게 된 계기는, 객체 전개 연산자를 특이하게 사용한 코드를 이해하려고 했기 때문인데요. 검색 기능을 제공하는 사이트에서, 필터링 기능을 구현할 때 쿼리 스트링 (URL 파라미터)을 많이 사용하는데, 특정 쿼리를 넘기고 싶지 않을 때가 있습니다. // 쿼리스트링 const query = { name: name, age: age, ...(isCategory && { category: category }) // isCategory 값에 따라 category 쿼리 유무를 결정 }; // 쿼리스트..

제네릭 타입을 선언해서, 문자열 리터럴 타입으로 추론하도록 하고 싶은 상황이 발생해서 이것저것 시도하다가 찾은 방법을 정리해봅니다. 세 가지 경우를 예시로 정리해보려고 합니다. 1) 함수에 단일값을 받는 경우 2) 함수에 배열 한 개를 받기 3) 함수에 배열 한 개를 받되, 제네릭 타입을 문자열 타입으로 제한하는 경우 1) 함수에 단일값을 받는 경우 // 단일값 function getValue(param: T) { return param } const v1 = getValue('string') // 'string' 타입 const v2 = getValue('ABC') // 'ABC' 타입 단일값을 제네릭으로 지정한 경우, 문자열 리터럴 타입으로 타입 추론을 잘하고 있습니다. 2) 함수에 배열 한 개를 받..

이터러블 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 구현하거나 프로토타입 체인을 통해 상속받은 객체. - for ... of 문으로 순회할 수 있습니다. - 스프레드 문법, 배열 디스트럭처링 할당을 사용할 수 있습니다. const arr = [1, 2, 3]; // Symbol.iterator 메서드 console.log(Symbol.iterator in arr) // true; // for .. of 문 for (const val of arr) { console.log(val); } // 스프레드 문법 const arr2 = [...arr]; // 배열 구조분해 할당 const [val1, val2] = arr; 이터레이터 이터러블 객체의 Symbol.iterator 메소드를 호출하면..

정리하는 이유 실무에서 사용하거나 알고리즘 테스트를 볼 때, 매번 정규표현식 사용법을 까먹어서 다시 구글링을 하는 경우가 많습니다. 정규표현식 사용법을 찾기 위한 시간적인 비용을 줄이기 위해 자주 사용되는 패턴을 정리해보았습니다. 정규표현식의 정의 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어 (formal language). 위의 정의는 표현이 어렵게 되어 있는데, 쉽게 말해서 문자열에서 특정 패턴을 찾아서 검색, 치환 등의 작업을 처리할 수 있는 방법이라고 생각하면 될 것 같습니다. 정규표현식과 관련된 자바스크립트 Prototype 메서드 1. RegExp.prototype.xxx - exec : 패턴에 매칭되는 문자들을 배열로 반환, 매칭하지 않으면 null 반환 - test..

두 차례 성능 최적화를 진행하고 측정했던 성능 점수입니다. 지난 이야기... 👇 [Next.js] 페이지 성능 개선하기 2 - 번들 사이즈 개선, Tree Shaking 지난 시간에 측정했던 성능 점수입니다. (모바일 기준) 지난 시간에 성능 개선을 시도했던 흔적 👇 [Next.js] 페이지 성능 개선하기 1 - Next/image, CSS 프리로드 최근 들어 성능 최적화에 대한 고민을 cheolsker.tistory.com 이번 포스팅으로 이번 시리즈(?)를 마무리해볼까 합니다. 배너 이미지(LCP)가 늦게 렌더링 되는 원인은 API 호출 후, 이미지 링크를 받아오기 때문인데요. 이 API를 사전에 호출하면 LCP를 개선해볼 수 있을 것 같습니다. 이 프로젝트는 React-Query를 사용하고 있고, ..

지난 시간에 측정했던 성능 점수입니다. (모바일 기준) 지난 시간에 성능 개선을 시도했던 흔적 👇 [Next.js] 페이지 성능 개선하기 1 - Next/image, CSS 프리로드 최근 들어 성능 최적화에 대한 고민을 많이 해보고 싶어서, 성능 최적화를 해봐야 겠다는 생각이 들었습니다. 예전에 진행했던 프로젝트 중 하나가, Lighthouse 점수가 낮게 나와서 몇 가지 개선을 cheolsker.tistory.com 번들 사이즈를 개선할 필요가 있을 것 같습니다. @next/bundle-analyzer를 설치하고, next.config.js에 적용하였습니다. @next/bundle-analyzer 설치 // 터미널에서 설치 yarn add -D @next/bundle-analyzer 또는 pnpm a..

최근 들어 성능 최적화에 대한 고민을 많이 해보고 싶어서, 성능 최적화를 해봐야 겠다는 생각이 들었습니다. 예전에 진행했던 프로젝트 중 하나가, Lighthouse 점수가 낮게 나와서 몇 가지 개선을 통해 성능 개선을 하려고 합니다. 이 프로젝트는 Next 12 버전을 이용하여 개발되었고, HTTP/2 프로토콜을 사용하고 있습니다. 앱 서비스이기 때문에, Lighthouse에서 모바일 기준으로 성능 검사를 진행하였습니다. Lighthouse를 이용한 성능 점수 확인 이 페이지는 이미지가 굉장히 많습니다. 상단에 배너 슬라이드를 통해 여러 개의 이미지가 보여지고, 뷰포트 아래에도 섹션별로 많은 이미지를 로드합니다. LCP도 무려 15.8초가 걸립니다.. 일단은 이미지 로드에 대한 개선이 확실히 필요할 것 ..

웹 스토리지 유틸 함수에 대한 테스트 코드를 작성하다가 조금 헤매고 난 후에 해결해서 그 과정을 글로 남기고자 합니다. 스토리지 유틸 함수를 만든 이유 스토리지 API를 이용해서 바로 특정 값을 가져올 수도 있을 텐데요. 그럼에도 불구하고, 유틸 함수를 별도로 만드는 이유는 스토리지가 문자열 값만 저장하기 때문입니다. 특히 스토리지에 객체를 JSON 형태의 문자열로 저장하는 것이 유용할 텐데요. 객체를 바로 스토리지에 저장하게 되면 [object Object] 형태의 문자열로 변환되어 저장되기 때문에 유틸 함수에서 JSON 문자열로 변환시켜서 스토리지에 저장하려는 것입니다. (toString의 동작방식 때문) // 스토리지 유틸 함수 예시 export const getSessionStorageItem =..

문제 발생 웹 서비스를 개발하던 중에, 다음과 같이 특정 API를 호출하고 실패했을 때 window.alert로 사용자에게 오류 메시지를 보여주는 기능을 구현했습니다. 버튼을 클릭하면 로딩이 보이면서, API 호출이 마무리될 때까지 기다렸다가 성공하면 다음 페이지로 이동하고, 실패하면 오류 메시지를 보이는 형태입니다. 위의 기능과 관련된 컴포넌트에 대한 테스트 코드를 작성하고 있던 중이었습니다. API를 모킹해서 실패하도록 처리한 후, 오류 메시지를 보이는 것. 즉, window.alert가 실행되었는 지 검증하는 중이었는데요. 다음과 같은 오류가 발생했습니다. Jest의 테스트 환경 (testEnviroment)는 jest-environment-jsdom 으로 셋팅되어 있는데요. JSDOM 환경에는 w..

컴포넌트 구현을 안 해본 FE 개발자는 없을 것입니다. 개발자마다 각자의 기준에 의해 컴포넌트 단위를 결정하고 컴포넌트의 형태, 기능을 정의합니다. 컴포넌트 구현 방법은 명확한 정답은 없다고 생각합니다. - 컴포넌트마다도 형태, 기능이 다르기도 하고, - 어느 곳에서 사용하는 지, - 개발 기한이 얼마나 주어졌는지에 따라 컴포넌트 설계에 대한 고민의 시간이 달라지기 때문입니다. 다만, 컴포넌트를 잘 구현해놓으면 개발 생산성이 높아지기 때문에 많은 고민이 필요한 것은 사실인 것 같습니다. 저는 주로 신규 프로젝트에 많이 참여했었고, 프로젝트들 별로 디자인이 달랐습니다. 그래서 아토믹 디자인 패턴을 사용하지 않았고, 회사 내에 디자인 시스템도 만들 필요가 없었는데요. 이런 환경의 기준 (소규모 프로젝트) 으..