creamymood의 개발 공부 발자취 💭

프로젝트를 하면서 파일들을 건드리는 경우가 많은데시키는대로 하기보단 뭐가 뭔지는 알고 공부해야할 필요를 느꼈다. 그 중 vite.config.ts 이 파일이 하는 역할!vite.config.ts 파일은 Vite 프로젝트의 전체 설정을 담당하는 핵심 파일.이 파일을 잘 이해하면, 어떤 설정이든 자유롭게 커스터마이징할 수 있어서 정말 중요하다.vite.config.ts 파일의 역할역할 1. 플러그인 설정Vite는 경량이고 빠른 대신, 필요한 기능은 플러그인으로 추가. 예를 들면:import react from '@vitejs/plugin-react'plugins: [react()]EX: Vite에서 React 문법(JSX) 을 사용하려면 꼭 이 플러그인을 추가해야 함 역할 2. 경로(alias) 설정예:..

union이랑 intersection은 합집합과 교집합으로 이해 하면 된다! Union : 합집합 union 하나하나 내부의 속성이 다있는게 합집합이 아니라..A에도 속할 수 있고, B에도 속할 수 있고, 둘 다 에도 속할 수 있는 모든게 union.처음에 혼자 공부할 때는, (...)let union1: Union1 = { // ✅ name: "", color: "",};let union2: Union1 = { // ✅ name: "", language: "",};let union3: Union1 = { // ✅ name: "", color: "", language: "",};let union4: Union1 = { // ❌ name: "",};이게 이해가 잘 안됐다.. 둘 다 포함..

TypeScript 공부하기 - 타입 스크립트 등장 배경과 타입스크립트의 장점, 타입 스크립트의 동작 원타입스크립트의 등장 배경자바스크립트는 동적 타입 시스템으로 다소 자유롭고 유연한 타입 시스템을 가진 프로그래밍 언어다.초기에 단순한 종류의 상호작용을 위해 개발되었기 때문에, 그다creamymood.tistory.com타입스크립트의 등장 배경은 다음과 같았다. 타입스크립트는 타입 검사를 해주는 똑똑한 자바스크립트고, 보다 본격적으로 타입스크립트 문법을 살펴보기 전에.핵심인 이 "타입"들에 대해서 또 한번 짚어볼 개념이 있다. 앞서 살펴본 여러가지 타입들.. 이 타입들은 결국 모두 집합이다. 이 말은, 타입끼리 서로 관계와 연관성이 있다. (예를 들어, 숫자 타입에는 1, -10, 100 이러한 많은 숫..

몇가지 타입들을 익혔으니 눈으로 보기보다 익숙해지기 위해서직접 코드 치면서 연습해보기 ~1. 제일 쉬운. 숫자 카운터 만들기 연습부터. 리액트때 조금 단련이 되어 있어서 역시나 문법은 어렵진 않았고(1) useState나 (2) Props에 타입을 정해주는 부분을 배웠다. (1) useState에 타입 지정해주기 const [count, setCount] = useState(0);import { useState } from "react";function Counter() { const [count, setCount] = useState(0); //이부분! const handleIncrease = () => { setCount(count + 1 ) } const handl..

1. void 타입 void 타입은 일반적으로 값을 반환하지 않는 함수에서 사용 한다. (참고로 값을 반환하지 않는 함수를 보이드 함수(Void Function)라고 한다.) 보통 타입스크립트에서 이렇게, 반환하지 않는 함수를 정의할 때 사용한다.function func2(): void { console.log("hello");} 값을 반환하지 않는 함수는 실제로 undefined를 반환하기 때문에void 타입 변수에는 undefined 이외에 다른 타입 값은 담을 수 없다.function hello(msg: string): void { console.log(`Hello ${msg}`)}const hi: void = hello('world') // Hello worldconsole.log(hi) //..

any와 unknown 둘 다 상위 타입으로, 느낌이 비슷했다...특히 any는 뭔가. 어떤 것이든~ 이런 느낌이라, 이해하기 쉬웠는데unknown은 이해하기가 어려웠는데, 아래처럼 이해해본다면 다소 쉬웠다.더보기any의 비유:“나 다 알아서 할 수 있어! 걱정 말고 그냥 줘~”→ 무조건 받아서 아무 데나 막 씀. 설사 틀려도 컴파일러는 모름.예시: 친구한테 “이거 써!” 하고 연필인지 칼인지도 안 보고 막 쓰는 느낌타입스크립트 입장에서 보면: “그래, 니 마음대로 해. 책임도 니가 져.” unknown의 비유:“일단 받을게, 근데 뭔지 확인하고 써볼게!”→ 뭐든 받을 수는 있지만, 쓸 땐 조심해서 검사하고 써야 함.예시: 누군가 상자를 줬을 때, "일단 고마워~ 그런데 열어보고 칼이면 조심하고, 연필..

오 뭔가 진짜 와닿지 않은 enum 타입.실제로 사용해보면 조금은 와닿을까 ?공부하고 나니 조금은 적응 완..enum은 타입 스크립트에 있는 특이한 타입인데이해하기 위해서는 주로 어떨 때 쓰이는지 알고 이해하면, 보다 쉽게 이해할 수 있었다. 예제는 다음과 같다. 역할을 정리하는 타입을 만든다고 할 때,enum Role { ADMIN, USER, GUEST,}이렇게 고정된 역할들 리스트를 만들어줄 수 있고,enum Role { ADMIN = 0, USER = 1, GUEST = 2,}이런식으로 각 멤버에게 숫자도 할당 할 수 있다. * 참고로 이렇게 직접 지정하지 않아도, enum은 0부터 1씩 늘어나는 성질 때문에enum Role { ADMIN, // 0 할당(자동) USER, // ..

처음 볼 때 보다, 복습하며 하나 하나 익히니까, 그래도 조금은 눈에 익네..익숙해지자, 타입스크립트야 객체(Object)자바스크립트에서 객체는 여러 개의 값을 **이름(키)**과 값의 쌍으로 저장하는 자료형.const person = { name: "Jane", age: 25}; 타입스크립트에서의 객체 정의 방법타입스크립트에서는 두가지 방법으로 객체를 정의할 수 있는데(1) 첫번째는 객체를 직접 나열해서 할 수 있는 일반적인 방법이 있고, (2) 정확하게 타입 지정을 하기 위해 또는 예외를 다루기 위한 조금 독특한 방법으로, 객체 속성(Properties)에 대해 개별적으로 직접 정의할 수 있는 방법이 있다. (1) 객체 리터럴 방법 (기본 문법)let person: { name: string..

자바스크립트와 크게 다르지 않은 타입스크립트의 배열, 그리고 그 배열과 정말 유사한 타입스크립트만의 타입인 튜플.두 타입에 대해서 알아보자. 배열먼저 배열은 여러 개의 값을 하나의 변수에 담을 수 있는 자료형let fruits = ["apple", "banana", "orange"]; ❶ TS에서의 배열 타입 정의 방법배열을 정의 하는 방법에는 두가지 방법이 있는데,// (1) 문자열만 가지는 배열let fruits: string[] = ['Apple', 'Banana', 'Mango']// Or (2)let fruits: Array = ['Apple', 'Banana', 'Mango']// 숫자만 가지는 배열let oneToSeven: number[] = [1, 2, 3, 4, 5, 6, 7]// Or..

타입 스크립트의 중요도를 깨닫고,,갈 수록 헷갈려지는 멘탈을 다 잡고,,처음부터 다시 세세히 꼼꼼히 공부중 ! 화잇팅타입 지정 (Type Annotation) (=문법)일반 변수, 매개 변수, 객체 속성 등에 :TYPE 과 같은 형태로 타입을 지정해줄 수 있다.let name: string = "Jane";let age: number = 25;let isHappy: boolean = true;여기서 : string, : number 같은 부분이다. function someFunc(a: TYPE_A, b: TYPE_B): TYPE_RETURN { return a + b}let some: TYPE_SOME = someFunc(1, 2)이런 식으로 지정해줄 수 있고,function add(a: number,..