생각 많은 개발자의 놀이터

TypeScript의 Enum의 기본 개념과 사용법Enum이란?Enum(열거형)은 TypeScript에서 여러 개의 상수 값을 하나의 그룹으로 묶어 관리할 수 있게 도와주는 데이터 타입이다. 주로 코드의 가독성을 높이고, 유지보수를 편리하게 하는 데 사용된다. Enum을 사용하면 숫자나 문자열 값을 명확한 이름으로 나타낼 수 있어 코드 작성과 관리가 쉬워진다.Enum의 기본 사용법기본적인 Enum 사용법은 다음과 같다.enum Direction { Up, Down, Left, Right,}let move: Direction = Direction.Up;console.log(move); // 0 출력이 코드에서 Direction은 Enum 타입으로, Up, Down, Left, Right는 Enum의..

TypeScript에서는 interface와 type을 모두 사용하여 객체의 구조를 정의할 수 있다. 하지만 두 가지 개념 사이에는 미묘한 차이가 있다. 이번 글에서는 interface와 type의 특징과 차이점, 그리고 언제 어떤 것을 사용하는 것이 더 적절한지 정리해보겠다.interface와 type의 특징interfaceinterface는 TypeScript에서 객체의 구조를 정의하는 기본적인 방법으로, 다음과 같은 특징을 가진다.객체의 구조를 명확하게 정의할 수 있다.선언 병합(Declaration Merging)이 가능하다.implements 키워드를 사용하여 클래스에서 타입 검사를 수행할 수 있다.extends 키워드를 사용해 확장할 수 있다.typetype은 보다 범용적인 타입 정의 방식으로..

Typescript는 Javascript를 Java, C, Swift, Kotlin처럼 정적 타입으로 쓸 수 있게 해주는 Javascript의 슈퍼셋이다. 빌드가 되면 브라우저 또는 Node.js가 이해할 수 있는 퓨어한 Javascript로 바뀌어 동적 타입인 Javascript의 태생적 한계를 극복하고 Javascript 생태계를 보다 안정적으로 쓸 수 있게 해준다. 다음을 살펴보자 let a = 1; console.log(typeof a); // number a = 'abc' console.log(typeof a); // string Javascript는 이처럼 변수를 선언해서 number 타입을 넣었다가 string 타입을 넣었다가 자유롭게 쓸 수 있다. 이처럼 동적 타입이기 때문에 때로는 변수를..

개발을 하다 보면 직접 만든 utils 또는 프론트엔드의 경우 components 폴더, styles 폴더 등 현재 작업 파일과 다른 경로의 파일들을 import 시켜야 할 때가 있다. import 시킬 필요가 없는 파일은 아주 단순한 스크립트이거나 온갖 로직을 하나의 파일에 다 작성할 때인데 별로 좋지 않은 패턴이다. 그래서 파일의 상단에는 다음과 같은 현상이 일어난다. import styled from 'styled-components'; import { TextField } from '../../components/textfield'; ... line 1과 line2가 import 방식이 조금 다른 것을 알 수 있다. line 1의 styled의 경우 styled-components라는 npm 패키..

실무에서는 레거시 프로젝트도 있어서 node 버전 관리 프로그램을 따로 쓰기도 하지만 개인 컴퓨터는 굳이 그럴 필요까진 없고 그냥 LTS 버전만 써도 별 문제가 없다. 근데 LTS버전도 아예 새롭게 바뀌는 경우도 있고 마이너 업데이트가 되는 경우가 있다. 그래서 개인 컴퓨터에서도 가끔은 업데이트를 해주는 게 좋다. 참고로 내 개인 컴퓨터 환경은 macOS Big Sur 11.3, M1 칩셋이며 이 환경에서 진행을 했다. $ node -v $ npm -v 버전을 찍어보니 node는 14.16.0, npm은 7.10.0이었다. 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org nod..

VSCode 기준 기본적으로 tsc를 전역 설치해야 한다. 그런데 TypeScript 는 그대로 런타임에 돌지 않고 JavaScript로 변환된 다음에 실행되기 때문에 소스코드를 고칠 때마다 tsc를 돌려서 빌드를 해줘야 한다. 그게 귀찮아서 tsc-watch를 설치한다. $ npm install -g tsc tsc-watch # 필요시 sudo 포함하여 명령 . 이번 포스트에서는 설치만 적고, 활용법은 나중에... tsc, tsc-watch 활용법 TypeScript는 JavaScript처럼 그 자체로 런타임에서 돌지 않는다. 다시 말해, TypeScript는 JavaScript로 컴파일이 되어야 Node.js든 브라우저에서든 작동할 수 있다. TypeScript는 JavaScript의 정적 타입 버전..