js
-
TypeScript 유틸리티 타입 소개JS & TS 2024. 10. 11. 14:38
TypeScript는 JavaScript에 정적 타입을 더하여 코드의 안정성을 높이는 역할을 합니다.특히 TypeScript에는 유용한 유틸리티 타입들이 있어, 코드를 작성할 때 매우 편리하게 활용할 수 있습니다.TypeScript에서 자주 사용되는 유틸리티 타입과 기능을 소개해 보겠습니다.1. PickPick은 특정 타입에서 원하는 프로퍼티만 선택하여 새 타입을 만드는 데 유용합니다.이 기능을 사용하면 큰 인터페이스나 객체 타입 중에서 필요한 부분만 사용하고 싶을 때 매우 편리합니다.언제 사용하나요?특정 객체에서 필요한 일부 속성만 타입으로 사용하고자 할 때사용 예시interface User { id: number; name: string; age: number; email: string;}//..
-
Compound Component 패턴 (feat. React, Next.js)React 2024. 9. 21. 13:55
Compound components는 React에서 더 표현력 있고 사용자 정의가 가능한 컴포넌트 API를 만들 수 있게 해주는 강력하고 유연한 패턴입니다.이 패턴은 특히 여러 관련 부분을 가진 복잡한 UI 컴포넌트를 구축할 때 유용합니다.이 개념에 대해 자세히 알아보고 Next.js에서 어떻게 구현할 수 있는지 살펴보겠습니다.Compound Components란 무엇인가?Compound components는 함께 작동하여 일관된 기능 단위를 형성하는 컴포넌트 그룹입니다.주요 아이디어는 공유 상태와 동작을 관리하는 부모 컴포넌트를 만들고, 자식 컴포넌트가 특정 부분의 렌더링을 처리하도록 하는 것입니다.Compound components 사용 시 주요 이점향상된 유연성과 사용자 정의 가능성관심사의 더 나은..
-
구조분해 사용 팁 4가지JS & TS 2024. 9. 14. 13:36
자바스크립트의 구조분해 할당(Destructuring)을 더 효율적으로 사용하는 4가지 실전 팁을 소개합니다.1. 기본값 할당하기구조분해를 사용할 때, 배열이나 객체에서 값이 없을 경우 undefined가 할당됩니다.이를 방지하기 위해 기본값을 설정할 수 있습니다.예를 들어, 배열이나 객체에서 값이 없는 경우 기본값을 할당할 수 있습니다.이 방법은 백엔드에서 불완전한 데이터를 받을 때 특히 유용합니다.const [a, b, c = 3] = [1, 2];console.log(c); // 3 (기본값)const {d, e, f = 6} = {d: 4, e: 5};console.log(f); // 6 (기본값)2. 나머지 연산자 사용배열이나 객체에서 필요한 부분만 추출하고, 나머지 값을 하나의 변수에 담을 ..
-
React에서 스크롤을 하단에 고정하는 방법(feat. css)Tip 2024. 9. 7. 14:22
채팅 등의 서비스를 만들 경우 스크롤을 하단에 고정해야 되는 경우가 있습니다.간단하게 스크롤을 하단에 고정하는 방법에 대한 구현에 대해 알아보겠습니다.1. React 사용import { useEffect, useRef } from 'react';const Chat = ({ messages }) => { const endOfMessagesRef = useRef(null); useEffect(() => { endOfMessagesRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]); return ( {messages.map((msg, idx) => ( {msg} ))} )..
-
Javascript ES15(ECMAScript 2024) 문법정리JS & TS 2024. 8. 14. 18:01
ES13에 대한 글을 작성한 지 얼마 안 된 것 같은데 벌써 ES15가 정식 출시하였습니다.JavaScript의 최신 표준인 ECMAScript 2024 (ES15)에서는 개발자들이 더욱 강력한 기능들을 활용할 수 있도록 다양한 새로운 기능들이 도입되었습니다.아래에서는 ES15의 주요 기능들을 정리하고, 각 기능에 대해 ES15 이전과 이후의 코드를 비교해 보겠습니다.1. Object 및 Array 그룹화Object.groupBy() 및 Array.prototype.groupBy() 메서드를 사용하면 객체나 배열의 요소를 특정 조건에 따라 그룹화할 수 있습니다.예를 들어, 다음과 같이 과일 목록을 양에 따라 그룹화할 수 있습니다.(참고로 이번에 추가된 메서드는 원래 Array 프로토타입 메서드로 있었으나..
-
vh 버그 해결 방법(feat. safari)Tip 2024. 3. 19. 13:45
웹 디자인의 세계에서 요소의 크기와 크기 조정은 웹 사이트가 다양한 장치에서 반응하고 시각적으로 매력적 이도록 하는 데 중추적인 역할을 합니다. 반응형 디자인에서 중요한 역할을 하는 두 가지 측정 단위는 vh(뷰포트 높이)와 vw(뷰포트 너비)입니다. 이러한 단위는 디스플레이 장치에서 웹 페이지의 표시 영역인 뷰포트의 크기에 따라 조정되는 동적입니다. 하지만 언제나 그렇듯이 모바일 safari에서 문제가 있습니다. 요소의 높이를 100vh로 설정하면 브라우저의 vh 계산에서는 주소 표시줄과 같이 동적으로 크기 조정이 가능한 UI 요소를 고려하지 않습니다. 결과적으로 vh로 설정된 높이가 실제 표시되는 뷰포트 높이를 초과하는 콘텐츠 오버플로가 발생할 수 있습니다. 1. 동적 vh 계산을 위한 JavaScr..
-
Javascript ES14 문법정리JS & TS 2023. 12. 15. 14:00
계속 작성하다 보니 어느덧 가장 최신인 ECMAScript 2023까지 왔습니다. 이렇게 정리를 해보니 점점 발전하고 있는 JS에 대해 새삼 느끼는 시간이었습니다. 1. findLast와 findLastIndex 배열 작업 시 특정 요소를 찾는 것은 자주 발생하는 작업입니다. find 메서드는 이러한 프로세스를 단순화하기 위해 도입되었지만, 첫 번째 일치하는 요소만 반환합니다. 그러나 때로는 배열의 끝에서부터 마지막 일치하는 요소를 찾아야 하는 상황이 있습니다. 이럴 때 findLast와 findLastIndex가 유용하게 사용됩니다. // 이전 방법 const users = [ {id: 1, name: 'user1', age: 19}, {id: 2, name: 'user2', age: 14}, {id:..
-
Javascript ES10 문법정리JS & TS 2023. 11. 8. 16:48
ECMAScript 2019 (ES10)은 개인적으로 정말 많이 사용하는 flatMap이나 trimStart, trimEnd와 같은 내용이 업데이트된 버전입니다. IE를 제외하고 대부분의 브라우저가 지원하기 때문에 지금도 쉽게 사용해 볼 수 있습니다. 1. Array.flat() 및 Array.flatMap() 이전: 중첩된 배열을 결합하고 펼치는 것은 종종 사용자 정의 함수나 루프가 필요했습니다. 이후: flat() 및 flatMap()을 사용하면 이 작업을 간단하게 수행할 수 있습니다. // 이전 const nestedArray = [1, [2, [3, 4], 5]]; const flattenedArray = [].concat.apply([], nestedArray); // flattenedArray..