전체 글 (237) 썸네일형 리스트형 [Next.js] 프로젝트의 CLS(Cumulative Layout Shift) 개선하기 간단한 자기소개 페이지를 작성하고 배포 후 lighthouse에서 성능 체크를 해봤습니다. CLS(Cumulative Layout Shift) 지표가 나쁜 걸 확인할 수 있었습니다. CLS 는 페이지 로딩 중 발생하는 예기치 않은 레이아웃 이동을 측정하는 지표로써, 갑자기 변경되는 레이아웃을 말합니다.Google에서는 좋은 사용자 경험을 위해 CLS 점수를 0.1 이하로 유지할 것을 권장합니다. 예상치 못한 레이아웃 전환은 텍스트가 갑자기 이동하여 읽는 도중에 위치를 놓치는 것부터 잘못된 링크나 버튼을 클릭하게 하는 것까지 다양한 방식으로 사용자 경험을 방해할 수 있습니다. 결재 버튼 위치가 갑자기 나타나서 원치 않는 구입을 하는 예시가 아래 링크에 있습니다. https://web.dev/artic.. [leetcode] 35. Search Insert Position - array https://leetcode.com/problems/search-insert-position/description/ 고유 정수의 정렬된 배열과 목표값이 주어졌을 때, 목표값이 발견되면 인덱스를 반환합니다. 그렇지 않은 경우 순서대로 삽입했을 때 인덱스가 있을 위치를 반환합니다. 런타임 복잡도가 O(log n)인 알고리즘을 작성해야 합니다. Example 1:Input: nums = [1,3,5,6], target = 5Output: 2 Example 2:Input: nums = [1,3,5,6], target = 2Output: 1 Example 3:Input: nums = [1,3,5,6], target = 7Output: 4 일단 돌아가게 만들었지만... 시간 복잡도 때문에 리팩토링 해야한다... 🔥 10 Hottest APIs to Supercharge Your Next Project by 10x! 🚀 https://blog.stackademic.com/10-hottest-apis-to-supercharge-your-next-project-by-10x-d6118f7a499b 🔥 10 Hottest APIs to Supercharge Your Next Project by 10x! 🚀As developers, we’re always on the hunt for ways to create smarter, faster, and more efficient applications without unnecessary hassle…blog.stackademic.com 개발자들은 불필요한 번거로움 없이 더 스마트하고, 더 빠르고, 더 효율적인 애플리케이션을 만들 수 있는 방법을 항상 찾고 있습니다. 바로 이때 A.. [vitest] beforeEach와 beforeAll의 차이점 - 실수하기 쉬운 환경변수 테스트 예제 1. beforeAll 실행 시점: 해당 describe 블록 내의 모든 테스트가 실행되기 전에 딱 한 번만 실행용도모든 테스트에서 공통으로 사용할 리소스를 한 번만 설정할 때 데이터베이스 연결과 같이 비용이 많이 드는 설정변경되지 않는 상수나 설정값 초기화describe('Database Tests', () => { let connection; beforeAll(async () => { // DB 연결은 한 번만 수행 connection = await Database.connect(); }); it('test 1', () => { /* ... */ }); it('test 2', () => { /* ... */ });}); 2. beforeAll 실행 시점: 각각의 테스트 케이스가 실.. [javascript] structuredClone() 가이드: 깊은 복사부터 고급 활용까지 자바스크립트에서 객체를 복사하는 방법은 여러 가지가 있지만, 그중에서도 structuredClone()은 깊은 복사를 위한 강력한 도구입니다. 얕은 복사와 깊은 복사의 차이점부터, structuredClone()의 동작 방식, 장단점, 그리고 실제 개발에서 유용하게 사용할 수 있는 고급 활용법까지 자세히 알아보겠습니다. 1. 깊은 복사 vs 얕은 복사: 왜 structuredClone()이 필요할까요? 자바스크립트에서 객체를 복사할 때 얕은 복사와 깊은 복사라는 두 가지 방법이 있습니다.얕은 복사: 객체의 참조만 복사합니다. 즉, 복사된 객체와 원래 객체가 같은 메모리 주소를 가리키므로, 복사된 객체를 변경하면 원래 객체도 함께 변경됩니다. Object.assign()이나 스프레드 연산자(...)가 대표.. [vitest] 테스트 코드 작성 시 검증(Assertion) 전략 비교 - 엄격한 비교 vs 유연한 비교 1. 들어가며테스트 코드 작성 시 검증(Assertion)은 코드의 예상대로 작동하는지 확인하는 핵심 과정입니다. 효과적인 테스트는 꼼꼼한 검증에서 비롯되며, 다양한 상황에 맞춰 적절한 검증 방식을 선택하는 것이 중요합니다. 때로는 엄격한 비교가 필요하고, 때로는 유연한 비교가 더 적합할 수 있습니다. 이 글에서는 Vitest를 사용하여 테스트 코드를 작성할 때, 엄격한 비교와 유연한 비교라는 두 가지 주요 검증 전략을 비교 분석하고, 각각의 장단점과 사용 시점을 제시하여 상황에 맞는 최적의 검증 전략을 선택하는 방법에 대해 알아보겠습니다.2. 두 가지 검증 전략 비교2.1 엄격한 비교 (Strict Comparison)엄격한 비교는 예상 결과와 실제 결과가 정확히 일치하는지 확인하는 방법입니다. Vit.. JavaScript 개발자를 위한 TPP(Transformation Priority Premise) 가이드 테스트 주도 개발(TDD)을 하면서 "어디서부터 시작해야 할까?", "어떤 테스트를 먼저 작성해야 할까?"와 같은 고민을 해본 적 있으신가요? TDD의 개념은 좋지만 막상 적용하려니 어려움을 느끼는 프론트 개발자분들을 위해, Robert C. Martin, 이 제시한 변환 우선순위 전제(Transformation Priority Premise, TPP)를 간단히 소개하고자 합니다. TPP란 무엇일까요?TPP는 TDD 주기 동안 코드를 변경하는 작업을 단순하고 점진적으로 수행하는 것을 목표로 합니다. TDD 과정에서 막히거나 오랜 시간이 걸리는 상황을 방지하고, 코드의 복잡성을 최소화하는 데 초점을 맞춥니다. 쉽게 말해, 가장 간단한 변화부터 시작해서 점진적으로 복잡도를 높여가는 방식입니다. TPP의 핵.. [TypeScript] 유틸리티 타입 - ReturnType 가이드 TypeScript를 사용하다 보면 함수의 반환 타입을 활용해야 할 때가 많습니다. 이럴 때마다 매번 타입을 정의하는 것은 번거롭고, 코드 유지보수에도 좋지 않죠. TypeScript의 내장 유틸리티 타입인 ReturnType을 사용하면 이러한 문제를 깔끔하게 해결할 수 있습니다. 1. ReturnType이란 무엇일까요?ReturnType은 함수의 반환 타입을 추론하여 새로운 타입을 생성해주는 유틸리티 타입입니다. 쉽게 말해, "이 함수의 반환 타입이 뭐지?"라는 질문에 대한 답을 자동으로 찾아주는 똑똑한 친구라고 생각하시면 됩니다. 2. ReturnType의 정의ReturnType은 다음과 같이 정의되어 있습니다.type ReturnType any> = T extends (...args: any) =>.. 이전 1 2 3 4 ··· 30 다음 목록 더보기
