즐겁게, 코드

채널톡의 bezier-react 코드를 리딩하던 중, 낯선 구문을 만나게 되어 찾아보게 되었어요. import React, { // 임포트 단계에서 type 키워드를 붙여주는 것이 가능했던가? // 어떤 기능적 역할을 하는 것이지? type Ref, forwardRef, useMemo, } from 'react' 바로 import type 구문인데요, 해당 구문을 활용하면 불러오는 대상이 값인지 타입인지를 명시할 수 있답니다. // model/user.ts export interface User { id: string; name: string; } // component.tsx import { type User } from "@/model/User"; interface Props { user: User;..

자바스크립트는 정말 다양한 배열 조작 메서드를 제공하는데요, 메서드의 동작을 구분하는 여러 기준 중 하나는 바로 “원본 배열을 변경하느냐” 일 것입니다. // 1. 원본 배열은 변경되지 않는 예시 const frontEnd = ["react.js"] const backEnd = ["node.js"] const fullstack = frontEnd.concat(backEnd) // frontEnd, backEnd 원본 배열의 값은 이전과 동일합니다. console.log(fullstack) // ["react.js", "node.js"] // 2. 원본 배열이 변경되는 예시 let techStack = ["react.js"] teckStack.push("node.js") // techStack 원본 배열에..

타입스크립트에는 원시 타입 외에도 타입을 조작할 수 있는 유틸리티 타입이 존재합니다. 오늘은 여러 유틸리티 타입 중 Partial, Required, Pick이라는 타입을 사용해 보겠습니다. type userType = { id: number; email: string; password: string; firstname: string; lastname: string; }; 여기 이름, 비밀번호, 이메일, 고유번호로 구성된 타입이 있습니다. 하지만 어떤 컴포넌트에서는 비밀번호가 필요하지 않을 수도 있고, 또다른 컴포넌트에서는 이메일이 필요하지 않을 수도 있습니다. type userType = { id?: number; email?: string; password?: string; firstname?: st..

타입스크립트로 리액트 프로젝트를 진행하다 보면 가장 난감한 것 중 하나가 바로 DOM과 관련된 부분인데요, 문자열이나 정수, 객체 정도는 원시 타입이나 인터페이스로 해결할 수 있지만 DOM은 같은 특이한 타입들이 존재하기 때문입니다. const onChangeEmail = e => { setEmail(e.target.value); }; 위 코드의 이벤트 콜백 인자 e의 타입은 과연 무엇일까요? 아마 e가 정확히 어떻게 생겼는지 알 수 없으니 any타입을 사용하시는 분도 많을 텐데요, 정확한 답은React.ChangeEvent입니다. 이걸 도대체 어떻게 알까 싶지만, 사실 여기에는 규칙이 하나 있습니다. 이벤트에도 마우스 클릭, 키보드 키 누르기 등등 여러 종류가 있음은 아실텐데요, 이 중에서 사용할 이벤..

타입스크립트가 점점 프론트엔드 생태계에서의 입지를 굳혀가고 있는데요, 간단한 입력값을 상태로 관리하는 예제를 타입스크립트로 구성해보도록 하겠습니다. 😆 진짜 쉬워요! 타입스크립트를 끼얹기 전까진... import React, { useState } from "react"; const App = () => { const [name, setName] = useState(null); const handleInput = (e) => { setName(e.target.value); }; return ( {name} ); }; export default App; 입력받는 값을 상태로 관리하고 화면에 나타내는 코드입니다. 이렇게만 보면 간단하지만 갑자기 타입스크립트를 얹게 되면 막막할 수도 있는데요, 위 코드에 차근..

타입스크립트 코드를 트랜스파일하기 위해서는 tsc 커맨드를 사용합니다. // index.ts const name: string = "chanmin"; $ tsc index.ts // index.js var name = "chanmin"; 다만 위의 트랜스파일 결과물은 var 키워드를 사용하는 구버전 자바스크립트 코드입니다. 어떻게 하면 이 끔찍한 var 에서 벗어날 수 있을까요? ⚙️ tsconfig 설정 타입스크립트를 조금 잘 아는 분이시라면 tsconfig 파일에서 타겟 옵션을 지정할 수 있다는 것도 알고 계실 겁니다. // tsconfig.json { "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this ..

타입스크립트에서 원시 타입 외에 참조 타입을 사용하는 방법에 대해 알아보겠습니다. 🏗 배열(Array) const array1: number[] = [1, 2, 3, 4, 5]; const array2: Array = [1, 2, 3, 4, 5]; 배열 타입을 사용하는 방법은 두 가지가 있는데, 기능적인 차이는 없으니 눈에 익은 스타일 또는 팀 컨벤션대로 사용하면 됩니다. 🛢 튜플(Tuple) const pointX: [string, number] = ["x", 255]; const pointY: [string, number] = ["y", 0]; // 트랜스파일 결과 const pointX = ["x", 255]; const pointY = ["y", 0]; 튜플은 배열과 유사하게 생겼지만 배열과는 달..