분류 전체보기

부동 소수점의 의미영어로 floating point라고 하며, 소수점이 떠다닌다는 의미를 가지고 있습니다.컴퓨터에서 실수를 표현하는 방법으로 소수점의 위치를 고정하지 않아, 사용하는 비트 수 대비 넓은 범위의 숫자를 표현한다는 장점이 있습니다.IEEE 754에서 부동 소수점의 개념을 표준화하였습니다.    고정 소수점과의 차이고정 소수점에서는 정수와 소수 부분의 영역을 나눠서 수를 표현하지만, 부동 소수점에서는 유동적으로 소수점을 이동시킬 수 있습니다.32비트만큼을 사용해서 실수를 표현한다고 가정할 때, 고정 소수점을 부호 1비트, 정수 부분을 8비트, 소수 부분을 23비트로 표현한다고 합시다. (1+8+23 = 32)  그런데, 정수 부분은 8비트만큼만 사용할 수 있어서 -2^8 ~ 2^8 (-256 ..

문제 발생사이드 프로젝트를 진행하고 있는데, 팀 메신저로 Discord를 사용하고 있습니다.Vercel에 Next.js 웹 애플리케이션을 배포하면, 배포 완료되었다는 알림을 Discord 채널에 보내고 싶은데요.마땅한 방법을 찾지 못해, 삽질을 많이 했습니다. Vercel에서 다른 앱과 통합할 수 있는 기능을 제공하는데, Slack과의 연동은 제공해주는 것 같으나 Discord는 없는 것 같더라고요.   Integrations에서 -> Browse Market 버튼을 클릭하면, Vercel과 통합할 수 있는 앱들을 보여줍니다.     Slack은 있지만 Discord는 없습니다...   계속 구글 검색 + 챗GPT로 정보를 찾다가, Discord Pro Plan의 경우 웹훅을 Account 에서 설정할 ..

객체를 얕은 복사할 때, 전개 연산자(...)를 많이 사용합니다. 객체 전개 연산자 (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 =..