전체 글

TypeScript에서 enum 사용하기: const enum vs as const 객체

TypeScript에서 열거형(enum)은 선호되지 않는다. 어째서일까? TypeScript에서 열거형의 데이터를 표현하는 방법은 여러 가지가 있지만, 최신 버전의 TypeScript에서는 as const 객체를 사용하는 것이 일반적이다. 다만, 다른 언어에서 많이 사용되는 enum 방식의 사용은 공식문서에서도 추천되지 않는데, 이번 글에서는 이 두 가지 방법의 차이와 각각의 장단점을 알아보고 어째서 enum이 추천되지 않는 방식인지 알아보았다. const enum과 일반 enum의 차이 🙌 enum을 표현하는데도 그냥 enum과 const enum이 존재하며 차이점이 있다. 일반 enum은 컴파일된 JavaScript 코드에서도 그대로 존재하며(번들링 사이즈 증가), reverse mapping을 지원..

TypeScript에서 객체 타입 체크하는 방법: in 키워드 활용하기

타입스크립트에서 객체의 타입을 체크하는 것은 종종 필요한 작업이다. 특히, Bird나 Human과 같은 특정한 타입(type alias / interface)을 가진 객체를 다룰 때는 더욱 중요한데, 타입스크립트에서 객체의 타입을 체크하는 방법 중 하나인 `in` 키워드에 대해 알아보았다. typeof로 타입 체크하기 JavaScript에서는 `typeof` 연산자를 사용하여 변수의 데이터 타입을 확인할 수 있다. 일반적으로 이 방법은 원시 타입 (예: 문자열, 숫자, boolean)을 체크할 때 사용된다. 🤷‍♂️ 하지만 객체의 경우 `typeof`는 단순히 `'object'`를 반환하므로 객체의 구체적인 타입을 알 수 없기에 유효하지 않다. const myObject: Bird | Human = ge..

date-fns를 사용하면 간단하게 날짜를 컨트롤할 수 있다.

자바스크립트로 날짜를 다루기 위해서 Date() 객체를 사용한다. 그러나, 다소 불편하고 답답한 사용법 때문에 dayJS나 moment같은 라이브러리를 사용하기도 하는데, 이번에는 날짜를 컨트롤 할 때 불편함을 줄여주는 date-fns라는 라이브러리에 대해서 소개하고자 한다. https://date-fns.org/ Modern JavaScript Date Utility Library date-fns provides the most comprehensive yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. date-fns.org date-fns는 node 환경과 브라우저 환경에서 모두 안정적으..

tRPC란? tRPC 간단 소개

타입스크립트로 FE 개발을 해봤다면, 모두 한 번쯤은 경험해본 일이 있을 것이다. 바로 서버와 API 통신을 하면서, Response로 받아온 데이터의 타입 처리를 위해 type을 일일히 작성하는 일이다. 당연하다면 당연한 일이지만, API에 변경점이 있을 때 마다 매번 타입을 다시 작성해야 하고 API 호출에 대한 코드 역시 개발자가 직접 관리해야하는 부분이었다. tRPC는 이를 좀 더 효율적으로 개선하여 개발자에게 도움을 주는 라이브러리이다. 👍 tRPC는 Typed Remote Procedure Call의 줄임말이다. 공식 문서에서 소개하는 API 호출 코드를 확인하면 다음과 같다. 다음은 우리가 기존에 사용하던 코드 // 기존 코드 const res = await fetch('/api/users/..

자바스크립트 primitive types은 garbage collecting될까?

자바스크립트는 개발자가 메모리를 직접 관리할 수 없다. 내부적으로 Mark-and-Sweep 방법을 사용하여 참조가 없어진 데이터를 알아서 가비지 컬렉팅을 하는 것이다. 그렇다면 참조형 데이터가 참조를 잃었을 때 GC로 메모리가 해제되는 건 알았다. 그렇다면 기본형 데이터는 GC가 일어나는 걸까? 스택오버플로우에서 같은 문제에 대해서 생각해본 사람이 있었고, 어느정도 답변을 얻을 수 있었다. 생각해보니, 당연히 GC는 일어나지 않는다고 보는게 맞는 것 같다. 자바스크립트는 실행 컨택스트 내부에 실행 환경과 관련된 환경이 제공되고, 기본형 데이터는 실행 콘텍스트 (콜스택에 기본형 데이터가 저장된다는 부분이 이 점을 의미하는 것 같다 반면에 참조형 데이터는 힙에 저장된다)에 위치하게 된다. 따라서, 해당 실..

Web animations API 사용하기 (animate)

웹 애니메이션을 별도의 라이브러리 설치 없이 사용할 수 있다. 내장된 Web api를 사용하여 간단한 애니메이션을 구현할 수 있다. HTML title lorem ippsum CSS .phrase { background: #ff99ff; text-align: center; padding: 10px; } Javascript const tag = document.querySelector('.phrase'); tag.addEventListener('click', () => { tag.animate( [ {transform: 'translateY(0px)'}, {transform: 'translateY(15px)'}, {transform: 'translateY(0px)'}, ], { duration: 1500,..

har 파일 생성 및 뷰어로 확인하기

har은 HTTP Archive의 약어로, 웹 브라우징 성능 및 네트워크 트래픽 분석을 위해 사용되는 파일 형식이다. 크롬에서 개발자 도구를 사용하였을 때, 이를 생성할 수도 있는데 이를 통해서 현재 발생한 에러를 공유할 수도 있고 성능 테스트의 결과를 공유할 수도 있다. 생성된 har 파일은 당시 HTTP 통신의 기록을 가지고 있기 때문에, 정확한 디버깅이나 성능 측정, 웹 페이지 로딩과정 기록 등 다양한 목적을 위해서 사용될 수 있다. har 파일을 읽는 방법으로 Charles Proxy 같은 디버깅 도구를 사용할 수 있다. Charles는 사용자 PC에서 발생하는 모든 HTTP 패킷을 탐지하고 사용자가 보기 쉽게 디렉토리로 구분해서 보여준다. 또한, Har 파일에 대한 데이터도 읽어 사용자에게 보여..

사이트에서 나가시겠습니까? 묻기

입력이 있는 페이지에서 잔뜩 글을 작성 중인데, 실수로 X 버튼을 누른다면 어떻게 될까? 대부분의 웹사이트는 바로 닫히지 않고 웹페이지를 닫을 것인지 묻는 알림창이 뜰 것이다. 이는 당연히 자동으로 생성되는 기능이 아니라, 개발자가 구현해주어야 하는 부분이다. 다음과 같이 구현할 수 있다. window.addEventListener('beforeunload', function (event) { // 경고 메시지를 설정합니다. event.returnValue = '페이지를 떠나시겠습니까?'; // 이벤트 객체의 returnValue 속성에 경고 메시지를 설정하면 브라우저가 경고를 표시합니다. }); 적절하게 script에 넣어줌으로써, 페이지를 진짜로 떠날지 마지막으로 물을 수 있다.