전체 글

TypeScript의 enum에 대해서

타입스크립트에서 고정된 값을 주기위해서 다음과 같이 union을 활용할 수 있다. type Fruit = "Apple" | "Banana" | "Cocoa"; const fruit: Fruit = "Apple"; 위에서 fruit은 자동완성도 지원되고, Apple, Banana, Cocoa 셋 중 하나의 값만 가질 수 있게 된다. 다만, 다른 언어에 익숙한 사람이라면 enum을 사용하여 위의 고정된 선택지의 값을 표현하고 싶어할 수 있다. enum Fruit { Apple, Banana, Cocoa } const fruit: Fruit = Fruit.Apple; // 0 위의 타입스크립트는 다음과 같이 자바스크립트로 변환된다. "use strict"; var Fruit; (function (Fruit) ..

유용한 VSCode 확장 도구들 추천

Auto Rename Tag 여는 태그를 수정하면, 자동으로 닫는 태그역시 수정해준다. https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag Auto Rename Tag - Visual Studio Marketplace Extension for Visual Studio Code - Auto rename paired HTML/XML tag marketplace.visualstudio.com Code Spell Checker 변수나 함수명을 지을 때 오타가 있으면 표시해준다. https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spe..

Vite를 사용하여 React 프로젝트 시작하기

새로운 리액트의 공식 문서를 보면, 새로운 리액트 프로젝트를 시작하는데 3가지 프레임워크를 소개한다. https://react.dev/learn/start-a-new-react-project Start a New React Project – React The library for web and native user interfaces react.dev Next, Remix, Expo가 그들이다. (Expo는 나머지 둘과는 다르게 React Native 프레임워크이다) 이제는 CRA를 사용하지 않고 프레임워크를 사용하는 것이 어쩌면 React의 대세가 된 것 같기도 하다. 그래도 Next와 같은 프레임워크를 사용하지 않고 React 프로젝트를 진행하는 것을 아는 것이 중요하다고 생각했기에, 기존에 CRA보..

Yarn berry 사용하기

일단 yarn을 설치해야 하는데, corepack을 통해서 패키지 관리자의 버전을 관리할 수 있다. npm i -g corepack corepack prepare yarn@stable --activate yarn 설치 yarn -v yarn set version berry yarn version 설정 yarn init yarn 프로젝트 시작 (npm init과 같다) https://nodejs.org/api/corepack.html#corepack Corepack | Node.js v20.0.0 Documentation Corepack# Added in: v16.9.0, v14.19.0 Corepack is an experimental tool to help with managing versions of..

Proxy 사용하기

proxy를 사용하면 기존 이벤트를 가로채 다른 함수를 실행할 수 있다. 간단한 예를 보면, 다음과 같다. const target = { a: "a_word", b: "b_word", } const handler = { get(target, prop, receiver) { switch(prop){ case 'a': return "A"; case 'b': return "B"; } } } const proxy = new Proxy(target, handler); console.log(proxy.a, proxy.b); 기존의 객체를 가로채어 다른 값을 return하게 만든다. handler가 기존의 실행을 가로채어 실행되는 함수로, switch나 if문 등을 사용하여 특정 key값의 객체값만 다른 값으로 re..

React18의 <Suspense>에 대해서

Suspense는 리액트에서 기본적으로 제공하는 컴포넌트로, 자식 컴포넌트가 로딩이 될 때 까지 fallback을 보여줄 수 있다. 즉, 기존에 사용하던 isLoading 상태를 이용한 패턴을 더 간단하게 사용할 수 있게 해주는 컴포넌트이다. Suspense 내부에 들어가는 Content 컴포넌트이다. import { useEffect, useState } from "react"; let tmp = ""; const getData = () => { return new Promise((resolve, reject) => { setTimeout(() => { tmp = "Hello Mr.Park"; resolve(true); }, 3000); }); }; const Content = () => { const..

타입스크립트 Type Aliases & Interfaces 알아보기

타입스크립트에서 타입을 선언하는데 크게 두 가지 방법이 있다. Type Aliases와 Interfaces에 대해서 정리하고, 각각 어느 상황에서 사용하는 것이 best case일지도 생각해보았다. Type type 키워드는 타입을 정의하기 위해서 모든 유형에 사용될 수 있다. 동일한 유형이 두 번이상 반복된다면, type을 선언하여 사용할 수 있다. type 키워드는 다음과 같은 특징을 지닌다. 객체를 포함한 모든 유형에 대한 타입을 표현할 수 있다. 문자열이나 숫자 등 값을 type에 할당할 수도 있다. type Name = string | undefined; let myName: Name; myName = "John"; type User = { nickname: string; level: numbe..

프로그래머스 코딩테스트 연습 - 달리기 경주 JavaScript

기존에 주어지는 배열의 순서를 바꾸어 정답을 내야하는 문제였다. 일단, 가장 간단한 방법으로 문제를 접근해보았다. function solution(players, callings) { const answer = [...players]; callings.forEach(el => { const idx = answer.indexOf(el); [answer[idx - 1], answer[idx]] = [answer[idx], answer[idx - 1]]; }) return answer; } 정답은 낼 수 있었지만, 시간초과가 발생하여 다른 방법으로 문제의 해결 방법을 모색하였다. 아무래도 indexOf가 많은 비용이 발생하지 않았나 싶다. 그래서 다른 방법으로 객체를 사용하는 방법을 생각했다. function..