Discriminated Union: Typescript에서 타입을 유연하게 확장하는 방법

시작하며타입스크립트를 사용하다 보면 하나의 타입에 여러 가지 객체가 추가되며, 특정 경우를 제외하고는 항상 undefined 이거나 값이 존재하는 경우가 있습니다. 예를 들어, 아래와 같이 Vehicle이라는 타입이 있을 때 해당 타입으로 차나 오토바이를 만들 수 있다고 가정해 보겠습니다.type Vehicle = { type: 'motorbike' | 'car'; make: string; model: string; fuel: 'petrol' | 'diesel'; doors?: number; bootSize?: number;};하지만 위 코드로는 doors가 3개인 오토바이와 같이 실제로 존재할 수 없는 객체를 만들 수도 있습니다. 이때 오토바이라면 doors나 bootSize와 같은 프로퍼티..

• format_list_bulleted JavaScript
• · 2024. 6. 22.
• textsms

var, const, let의 차이

시작하며변수(variable)은 하나의 값을 저장하기 위해 확보한 메모리 공간 그 자체 혹은 그 메모리 공간을 식별하기 위한 이름을 의미한다.변수에 값을 저장하는 것을 할당(assignment)이라 하며 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 한다. 그리고 변수명을 자바스크립트 엔진에 알리는 것을 선언(declaration)이라 한다.자바스크립트에서 변수를 선언하는 키워드로는 let, const, var가 있으며, ES6에서 const와 let이 추가되었다. 현재의 자바스크립트에서는 var의 사용을 권장하지 않는다. 지금부터 변수 선언 키워드 var, const, let의 차이를 알아보자.변수 선언 방식var: 중복 선언 가능, 재할당 가능var name = 'javascript..

• format_list_bulleted JavaScript
• · 2024. 6. 22.
• textsms

웹 요소의 width 속성 완벽 가이드(offsetWidth, clientWidth, scrollWidth)

시작하며웹 개발을 하다 보면 요소의 크기를 측정해야 하는 경우가 많습니다. 자주 사용되는 속성으로는 offsetWidth, clientWidth, scrollWidth가 있습니다. 이 글에서는 이 세 가지 속성의 차이점과 사용 방법에 대해 알아보겠습니다. 추가로 앞서 컨텐츠에서는 react에서 요소의 width와 height 정보를 얻는 방법을 다루었는데요. 궁금한 분들은 아래 컨텐츠들 참고 부탁드립니다.2024.05.19 - [JavaScript/React] - react에서 요소의 width와 height 구하기2024.05.19 - [JavaScript/React] - React에서 요소에 접근하는 방법, useRef vs getElementById1. offsetWidthoffsetWidth는 요..

• format_list_bulleted JavaScript
• · 2024. 6. 6.
• textsms

JavaScript와 CSS로 패딩을 제외한 요소 width, height 계산하기

시작하며웹 개발을 하다 보면 패딩을 제외한 순수 contents 영역의 width, height 계산이 필요한 경우가 있는데요. 이 글에서는 두 가지 방법을 통해 패딩을 제외한 요소의 너비를 계산하는 방법을 소개하려고 합니다. JavaScript와 CSS로 패딩을 제외한 요소 width, height 계산하는 방법1. clientWidth에서 padding 빼기이 방법은 간단하게 요소의 clientWidth에서 패딩 값을 빼는 방식입니다. clientWidth는 요소의 내부 너비를 반환하지만, 패딩을 포함한 값이기 때문에 패딩을 제외한 너비를 계산하려면 패딩 값을 빼야 합니다.예제 코드const parent = document.querySelector('.parent');const style = wind..

• format_list_bulleted JavaScript
• · 2024. 5. 26.
• textsms

React에서 요소에 접근하는 방법, useRef vs getElementById

시작하며React에서 요소에 접근하는 방법으로 크게 두 가지가 있는데요. useRef를 사용하는 방식과, document.getElementById를 사용하는 방법입니다. 이 글에서는 useRef와 getElementById를 비교하고, 어떤 방식을 사용하는 게 좋을지 설명합니다. getElementById로 요소 접근하기getElementById는 전통적인 JavaScript 메서드로, HTML 문서에서 특정 ID를 가진 요소를 선택할 때 사용됩니다.const element = document.getElementById('myElement'); useRef로 요소 접근하기useRef는 React Hook 중 하나로, 함수형 컴포넌트에서 DOM 요소에 접근할 수 있게 해 줍니다.const MyCompon..

• format_list_bulleted JavaScript/React
• · 2024. 5. 19.
• textsms

react에서 요소의 width와 height 구하기

시작하며프로젝트를 진행하다 보면, 요소의 width와 height값을 가져와 다른 요소의 크기를 조정하거나, 스크롤 위치 조정을 할 일이 발생합니다. 반응형 웹에도 많이 사용되고요. 이때 사용할 수 있는 값이 offsetWidth / offsetHeight, clientWidth / clientHeight 등이 있는데요. 기존의 자바스크립트에서는 아래와 같이 간단한 방법으로 값을 가져올 수 있었습니다. var clientHeight = document.getElementById('container').clientHeight; 하지만, React에서는 document.getElementId와 같은 직접적인 DOM 접근을 지양하고 있기 때문에 ref를 사용하여 컴포넌트 내부의 특정 DOM 요소에 접근하는 것..

• format_list_bulleted JavaScript/React
• · 2024. 5. 19.
• textsms