소소한 지식 저장소

📂 1. 프로젝트 폴더 구조프로젝트는 관심사 분리(Separation of Concerns) 원칙에 따라 다음과 같이 구성되어 있습니다.app/├── _layout.tsx # 전역 레이아웃 (ClerkProvider 설정)├── (auth)/ # 인증 관련 그룹│ ├── _layout.tsx # 인증 화면 Stack 레이아웃│ └── sign-in.tsx # 구글 OAuth 로그인 화면└── (tabs)/ # 메인 앱 기능 그룹 (로그인 필수) ├── _layout.tsx # 인증 체크 Guard + 탭 네비게이션 ├── index.tsx # 홈 화면 (백엔드 등록 로직 ..

1. Partial - 일부만 사용할 수 있는 타입 만들기Partial는 객체 타입 T의 모든 프로퍼티를 선택적(optional) 으로 변환사용 예시 // 유틸리티 타입 -> 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 실무에서 자주 사용하는 타입들을 미리 만들어 놓은 것// Partial// 부분적인, 일부분의// 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티 바꿔주는 타입interface Post { title: string; tags: string[]; content: string; thumbnailURL?: string;}// Partial를 직접 구현해보기type Partial = { [key in keyof T]?: T[key]; };// const draft..

1. 기본 문법// 조건부 타입 -> 3항 연산자를 이용하여 조건에 따라 타입을 변경 type A = number extends string ? string : number; // number가 string을 확장하는 타입이냐?? 참이면 A는 string 타입, 거짓이면 number 타입// -> 거짓이기 때문에 A는 number 타입!2. 객체 타입 비교type ObjA = { // 슈퍼 타입 a: number;};type ObjB = { // 서브 타입 a: number; b: number;};type B = ObjB extends ObjA ? number : string; // 참이기 때문에 B는 number 타입!3. 제네릭 조건부 타입// 제네릭과 조건부 타입type StringNumber..

1. 인덱스드 엑세스 타입 (Indexed Access Types)기존 객체, 배열, 튜플에서 특정 타입을 추출할 수 있음1) 객체 타입에서 추출// 인덱스드 엑세스 타입 -> 객체 타입에서 특정 속성을 뽑아서 변수에 정의할 수 있게 해줌// 객체에 사용type Post = { title: string; content: string; author: { id: number; name: string; age: number; };};const post0: Post= { title: "게시글 제목", content: "게시글 본문", author: { id: 1, name: "이정환", age: 27, },};function printAuthorInfo0(autho..

1. 왜 제네릭이 필요한가?// 제네릭function func0(value: any){ return value;}let num0 = func(10);let bool0 = func(true);let str0 = func("string");// 이렇게 매개변수로 받은 타입의 변수를 리턴하는 함수를 만들고 싶을 때, any를 사용해서 할 순 있지만, 이는 위험함!!// -> 이럴 때 사용하는 것이 제네릭 함수임!!any는 유연하지만 타입 안정성을 잃음unknown은 안전하지만 사용 전에 타입 좁히기가 필요!!function func(value: unknown) { return value;}let num = func(10);if (typeof num === "number") { num.toFixed()..

🎓 1. 자바스크립트에서의 클래스1) 객체를 그대로 선언하면?// 클래스let studentA = { name: "이정환", grade: "A+", age: 27, study() { console.log("열심히 공부 함"); }, introduce() { console.log("안녕하세요!"); },};let studentB = { name: "홍길동", grade: "A+", age: 27, study() { console.log("열심히 공부 함"); }, introduce() { console.log("안녕하세요!"); },}; 문제점: 같은 구조의 객체를 반복해서 만들어야 하므로 코드 중복이 발생 2) 클래스 선언하기class Student { ..

📌1. 인터페이스 기본 사용법// 인터페이스 -> 상호 간에 약속된 규칙!!// Type 설저과 비슷함 interface Person { readonly name: string; age?: number; sayHi(): void; // 호출 시그니처를 사용!! sayHi(a: number, b: number): void;}const person: Person = { name: "이정환", sayHi: function (a?:number, b?:number) { // 이것도 호출 시그니처를 이용하여 가능 if(typeof a == "number" && typeof b == "number"){ console.log(a + b ); }else{ console.l..

1. 기본 함수 타입 정의1) 자바스크립트 함수 예시function func(a, b) { return a + b;} 2) 타입스크립트에서 타입 추가function func(a: number, b: number): number { return a + b;} 3) 반환값 타입 생략 가능 (추론)// 함수 타입의 정의// 함수를 설명하는 가장 좋은 방법// 어떤 매개변수를 받고, 어떤 결과값을 반환하는지 이야기// 어떤 [타입의] 매개변수를 받고, 어떤 [타입의] 결과값을 반환하는지 이야기function func(a: number, b: number) { return a + b;}2. 화살표 함수의 타입 정의// 화살표 함수의 타입을 정의하는 방법const add = (a: number, b: numb..

타입스크립트는 문법만 배워서는 사용하기 힘들기 때문에, 타입스크립트에 대한 이해가 필요함타입스크립트 공식 문서에서는 주요 문법들만 모아둔 치트시트를 무료로 제공하긴 함https://www.typescriptlang.org/cheatsheets/ Cheat SheetsTo read later or printwww.typescriptlang.org1. 타입은 집합이다타입스크립트에서 말하는 '타입'은 집합즉, number 타입은 1, 2, 3, 4, 5, ... 등 모든 숫자를 포함하는 집합이며, string 타입은 모든 문자열을 포함하는 집합let a: number;a = 1; // ✅a = 999; // ✅a = -42; // ✅하지만 20이라는 숫자 하나만을 포함하는 타입도 만들 수 있음이것이 ..

🛠️ 1. 실습 환경 설정하기mkdir section2 && cd section2npm init -ynpm i @types/node 1) tsconfig.json 설정:{ "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "dist", "strict": true, "moduleDetection": "force" }, "ts-node": { "esm": true }, "include": ["src"]} 2) 테스트 코드:// src/index.tsconsole.log("Hello New Project"); 3) 컴파일 후 실행:tscnode dist/index.js4) tsx로 직접 실행..