TypeScript (6) 썸네일형 리스트형 [Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (3) [Mini Project] Note-App 👩🏻💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 Note-App 구현 과정 정리 (1) Note-App 구현 과정 정리 (2) 현재글 : Note-App 구현 과정 정리 (3) 📖 목차 1. 외부 타입정의 파일 만들기 2. 노트 삭제시 비동기 코드 작성하기 (async / await) 3. 반복되던 handleCreateNote 커스텀 훅으로 만들기 4. TypeScript의 Date 타입 5. vercel 배포.. [Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (2) [Mini Project] Note-App 👩🏻💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 Note-App 구현 과정 정리 (1) 현재글 : Note-App 구현 과정 정리 (2) Note-App 구현 과정 정리 (3) 📖 목차 1. lexical text editor 사용하기 2. 헷갈렸던 부분 1, props type 정의 방법 3. 헷갈렸던 부분 2, JSX를 반환하지 않는 React component의 return null 4. 생각보다 어려웠던 .. [Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (1) [Mini Project] Note-App 👩🏻💻 Github Repository https://github.com/sw2377/note-app 작업 기간 : 2024. 01. 09 ~ 2024. 01. 16 프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다. 🔗 시리즈 이어보기 현재글 : Note-App 구현 과정 정리 (1) Note-App 구현 과정 정리 (2) Note-App 구현 과정 정리 (3) 📖 목차 1. 기술 스택의 선택 (TypeScript, Styled-components를 사용한 이유) 2. 레이아웃 고민하기 3. Vite로 React + TypeScript 조합으로 프로젝트를 생성 후,main.tsx 파일의 docum.. 타입스크립트의 Enums(열거형) 타입에 대해 간단하고 빠르게 알아보자 Enum은 C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 이름이 있는 상수들의 집합을 정의할 수 있다. TypeScript에서는 숫자와 문자열 기반 열거형을 제공한다. 열거형은 enum 키워드를 사용해 정의한다. → enum은 특정값만 입력되도록 하고 싶을때, 그 값들이 공통점이 있을때 사용한다. enum Color { Red, Orange, Blue, } 참고로 열거형은 기술적으로는 숫자와 문자를 섞어서 사용할 수 있지만 (이종 열거형: Heterogeneous enums) 굳이 그렇게 할 이유가 없다면 권장하지 않는다. 👾 숫자형 열거형(Enum) 열거형의 디폴트 값으로 숫자형을 사용한다. 각 값은 자동으로 0부터 시작하여 1씩 증가하며, 수동으로 값을 지정할 수도 있다. enum Col.. 타입스크립트 유니온/교차 타입과 리터럴 타입 TypeScript의 타입은 연산자를 이용해 조합해서 사용할 수 있다. 다소 복잡한 타입을 표현하고 싶을 때, 지정한 여러 타입의 합집합을 의미하는 Union 타입과 교집합을 의미하는 Intersection 타입을 사용할 수 있다. Union 타입은 | 연산자를, Intersection 타입은 & 연산자를 사용한다. 👾 Union Types 유니온 타입은 여러 타입 중 하나가 될 수 있는 값으로, 서로 다른 두 개 이상의 타입을 세로 막대 | 로 구분하여 만든다. let value: string | number | boolean; 👩🏻💻 Union type 기본 예시 function printValue(value: number | string): void { if (typeof value === 'nu.. VSCode에서 TypeScript 환경 설정하기 👾 VSCode에서 TypeScript 환경 설정하는 방법 본격적으로 TypeScript 학습을 하기 위해 VSCode에서 환경 설정을 했다. 과정이 마냥 단순한건 아닌것 같아서 정리를 해두기로 했다. 혹시나 다음에 다시 보게될 나를 위해, 혹은 나처럼 처음 타입스크립트를 공부하거나 사용하기 위한 환경 세팅을 하는 누군가를 위해 :) 1. 새로운 프로젝트 생성 (📁 learn-typescript) # learn-typescript 폴더에서 새로운 프로젝트 초기화 npm init -y ✨ OPTION. scripts 명령어로 build와 start 실행하기 위한 package.json 설정 { "name": "learn-typescript", "version": "1.0.0", "description": .. 이전 1 다음
