🔥 Firebase 튜토리얼 1탄 | React 프로젝트에 적용하는 법

01🔥 파이어베이스 (Firebase)란?Firebase는 2011년에 개발된 모바일 및 웹 애플리케이션용 백엔드 서비스로, 현재는 구글이 인수하여 운영하고 있습니다. 기존에는 웹 애플리케이션을 개발하려면 백엔드 서버를 직접 구축하고, 데이터베이스를 설정하며, 사용자 인증 시스템까지 따로 개발해야 했습니다. 하지만 Firebase를 사용하면 백엔드 개발 없이도 강력한 기능을 제공받을 수 있으며, 별도의 서버 운영 없이 애플리케이션을 만들고 배포할 수 있습니다. 특히, Firebase는 무료로 사용 가능한 서비스 범위가 넉넉하게 제공되기 때문에, 일정 수준까지는 별도의 비용 없이도 충분히 활용할 수 있습니다.02Firebase 프로젝트 생성하기Firebase를 사용하려면 가장 먼저 프로젝트를 생성해야 합..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2025. 3. 8.
• textsms

[Review] 한입 Typescript 강의 후기

01강의소개이 강의는 타입스크립트를 처음 배우거나, 기존에 배웠지만 제대로 이해하지 못한 분들을 위한 강의입니다! 타입스크립트는 이제 선택이 아닌 필수로 자리 잡았지만, 문법만 어설프게 익히고 넘어가면 그 강력한 기능들을 제대로 활용하기 어렵죠. 이 강의에서는 단순한 문법 암기가 아니라, 타입스크립트가 어떻게 동작하는지, 왜 그렇게 설계되었는지까지 쉽게 배울 수 있어요. 특히, 강사님이 개념을 쉽고 재미있게 설명해 주시고, 다양한 시각 자료와 예제를 활용해서 어려운 내용도 부담 없이 따라갈 수 있어요. 그리고 강의와 함께 제공되는 핸드북을 통해 복습도 편하게 할 수 있죠!이 강의가 끝나면, 이제 여러분도 타입스크립트 마법사가 되어 있을 거예요! 🧙‍♂️✨  👉인프런 강의 바로가기 한 입 크기로 잘라먹..

• format_list_bulleted ...기타/REVIEW
• · 2025. 3. 7.
• textsms

[TS] 유틸리티 타입 (Utility Types)

01유틸리티 타입 이란?타입스크립트에는 반복적으로 사용되는 패턴을 쉽게 적용할 수 있는 유틸리티 타입(Utility Types) 이 제공됩니다. 이 유틸리티 타입을 활용하면 코드를 더 간결하고 안전하게 작성할 수 있어요!  유틸리티 타입은 맵드 타입(Mapped Types) 기반과 조건부 타입(Conditional Types) 기반으로 나눌 수 있습니다.📌 맵드 타입 기반 → 객체의 속성을 변형하는 유틸리티 입 예: Partial, Required, Readonly, Pick, Omit 등객체의 특정 속성을 선택적으로 만들거나(Readonly, Partial), 필수로 변경(Required) 하는 등의 변형을 쉽게 수행할 수 있습니다.📌 조건부 타입 기반 → 특정 타입을 제거하거나 추출하는 유틸리티 ..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 3. 6.
• textsms

[TS] 조건부 타입 (Conditional Types)

01조건부 타입 이란?조건부 타입은 어떤 조건이 참인지 거짓인지에 따라 다른 타입을 반환하는 기능입니다.type A = number extends string ? number : string; 여기서 number extends string은 거짓이니까, A의 타입은 string이 됩니다 💡 예제: 객체 타입 비교객체 타입에서도 동일한 원리가 적용됩니다.type ObjA = { a: number };type ObjB = { a: number; b: number };type B = ObjB extends ObjA ? number : string;ObjB는 ObjA를 포함하는 상위 타입이므로, B의 타입은 number가 됩니다.02제네릭 조건부 타입제네릭을 활용하면 타입을 유동적으로 설정할 수 있습니다!ty..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 3. 5.
• textsms

[TS] 타입 조작하기

01타입 조작 (Type Manipulation)이란?타입 조작(Type Manipulation)은 기존에 정의된 타입을 변형하거나 조합하여 더 유연하게 활용하는 기술입니다. 예를 들어:특정 객체 타입에서 일부 속성만 추출하기기존 타입을 선택적(optional) 속성으로 변환하기문자열 조합을 활용한 새로운 타입 만들기타입스크립트에서 지원하는 주요 타입 조작 기능은 다음과 같습니다.인덱스드 액세스 타입 – 객체, 배열, 튜플에서 특정 요소의 타입만 추출하기Keyof 타입 – 객체의 키 값을 유니온 타입으로 변환하기맵드 타입 – 기존 타입을 기반으로 새로운 타입 생성하기템플릿 리터럴 타입 – 문자열 리터럴을 조합하여 새로운 타입 생성하기02인덱스드 액세스 타입 (Indexed Access Type)인덱스드 ..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 3. 4.
• textsms

[TS] 제네릭 (Generics)

01제네릭이란?제네릭은 간단하게 "함수나 클래스, 객체 등이 다양한 타입을 처리할 수 있도록 도와주는 도구"라고 할 수 있습니다. 예를 들어, 우리가 숫자나 문자를 다루는 함수가 필요할 때, 각기 다른 타입을 처리하려면, 그때마다 함수를 따로 만들어야 할 수도 있죠. 그런데 제네릭을 사용하면, 한 번만 작성한 함수로 다양한 타입을 처리할 수 있게 됩니다. 1. 제네릭이 필요한 이유예를 들어, 우리가 받은 값에 대해 그 값을 그대로 반환하는 함수가 있다고 생각해 볼게요.처음에는 이런 방식으로 작성할 수 있죠:function func(value) { return value;}이 함수는 어떤 타입이든 받을 수 있지만, 타입스크립트에서 any나 unknown을 사용하게 되면 그 타입이 추론되지 않아서 문제가 ..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 3. 3.
• textsms

[TS] 클래스 (class)

01자바스크립트의 클래스자바스크립트에서 클래스는 객체를 쉽게 만들 수 있도록 도와주는 템플릿 같은 것이죠. 예를 들어, 여러 명의 학생을 관리한다고 할 때, 학생들의 이름, 나이, 성적 등을 매번 하나씩 쓰는 대신에 클래스를 사용하면 학생을 만드는 틀(템플릿)을 만들고, 그 틀을 바탕으로 여러 명의 학생 객체를 만들 수 있어요.1. 클래스 선언클래스는 객체의 틀을 정의하는 것입니다. 클래스 선언은 class 키워드로 시작합니다.class Student { // 클래스의 내용} 2. 필드 (프로퍼티) 선언클래스 안에서 객체가 가질 속성들을 정의할 수 있습니다.class Student { name; age; grade;} 3. 생성자생성자는 객체를 만들 때 사용되는 특수한 메서드입니다. 객체의 프로퍼..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 3. 1.
• textsms

[TS] 인터페이스 (Interface)

01인터페이스 (Interface)인터페이스는 타입을 정의할 때 사용하는 문법 중 하나이며, 타입 별칭과 비슷한 기능을 합니다.하지만 인터페이스는 상속이나 합침 같은 특수한 기능을 제공합니다.1. 선택적 프로퍼티인터페이스에서는 ?를 사용하여 선택적 프로퍼티,즉 해당 프로퍼티가 있어도 되고, 없어도 되는 경우를 정의할 수 있습니다.interface Person { name: string; age?: number; // age는 선택적 프로퍼티}const person1: Person = { name: "John" }; // age가 없어도 됨const person2: Person = { name: "Jane", age: 25 }; // age가 있어도 됨 2. 읽기 전용 프로퍼티readonly 키워드를..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 2. 28.
• textsms