🟦 TypeScript 🟦 - 신촌알고리즘출석프로그램

Documentation - The Basics

🟦 TypeScript 🟦

- Microsoft에 의해 개발된 오픈 소스 프로그래밍 언어

- JavaScript의 상위 집합(superset)으로, JavaScript에 타입 시스템을 추가하여 개발한 언어

- TypeScript는 크로스 플랫폼 및 크로스 브라우저 호환성을 갖춘 JavaScript 코드를 생성

- 웹, 서버, 모바일 애플리케이션 개발 등 다양한 분야에서 사용

 

🟦 TypeScript의 주요 특징

- 정적 타입 검사:

TypeScript는 변수, 매개변수, 객체 속성 등에 대한 타입 정보를 명시적으로 선언할 수 있음

이를 통해 컴파일 시점에 타입 오류를 발견하고 수정할 수 있어, 런타임 에러를 줄이는 데 도움.

 

- 타입 추론:

모든 타입을 명시적으로 선언하지 않아도, TypeScript 컴파일러는 값을 기반으로 변수의 타입을 자동으로 추론

코드의 간결함을 유지하면서도 타입의 안전성을 제공

 

- ESNext 지원:

TypeScript는 최신 ECMAScript 표준을 지원하며, 구형 브라우저나 환경에서도 실행될 수 있도록 컴파일 시 최신 문법을 ES5나 ES3 같은 이전 버전의 JavaScript로 변환 가능

 

- 인터페이스와 클래스:

TypeScript는 객체 지향 프로그래밍을 위한 클래스, 인터페이스, 상속 등의 기능을 제공

이를 통해 대규모 애플리케이션의 개발과 유지 보수가 용이

 

- 모듈 지원:

TypeScript는 네임스페이스와 모듈을 통해 코드를 조직화하고, 재사용성을 높일 수 있도록 지원

 

- 도구의 지원:

Visual Studio Code, WebStorm 등 다양한 개발 환경에서 TypeScript의 자동 완성, 코드 내비게이션, 리팩토링 도구 등을 제공하여 개발 효율성을 상승시킴

 

🟦 사용 이유

- 개발 생산성 향상:

정적 타입 검사와 도구의 지원으로 인해 개발 초기 단계에서 버그를 줄이고, 코드의 이해와 수정이 용이

 

- 대규모 애플리케이션 개발 용이:

타입 시스템과 객체 지향 프로그래밍 기능을 통해 대규모 애플리케이션의 개발과 유지 보수가 용이

 

- 커뮤니티:

TypeScript는 강력한 커뮤니티와 넓은 생태계를 가지고 있음. 다양한 라이브러리와 도구가 지원

---

🟦 코드 살펴보기 🟦

 

// TODO : novice or advanced
export const lectureClass: string = "advanced";

 

변수 lectureClass에 문자열 타입을 지정하고, "advanced"라는 문자열 값을 할당

const 키워드는 lectureClass 변수가 상수임을 의미하며, 이 변수의 값은 선언 이후 변경할 수 없음

export 키워드는 이 변수를 다른 파일이나 모듈에서 사용할 수 있도록 내보내는 역할

 

변수에 String 형 타입을 지정하는 법
let 변수명: string = "값";

 

 

const firebaseConfig =
  lectureClass === "novice" ? firebaseNoviceConfig : firebaseAdvancedConfig;

조건부 연산자를 사용하여 lectureClass 변수의 값에 따라 firebaseConfig 변수에 할당할 설정을 결정

 

• 만약 lectureClass의 값이 "novice"와 같다면 (true일 경우), firebaseNoviceConfig가 firebaseConfig 변수에 할당
• 만약 lectureClass의 값이 "advanced"와 같다면 (false일 경우),  firebaseAdvancedConfig가 firebaseConfig 변수에 할당

 

 

조건 ? 표현식1 : 표현식2
조건이 true일 경우 표현식1을 실행하고, false일 경우 표현식2를 실행

 

파이썬js는잇지만 자바엔없음

 

 

async function getThisWeekAttendance(): Promise<
  Record<string, boolean> | undefined
> {
  const attedanceRef = await getDoc(thisWeekAttendanceRef);
  return attedanceRef.data();
}

 

이 코드는 비동기 함수 getThisWeekAttendance를 정의 (Firestore에서 이번 주차의 출석 데이터를 가져오는 역할)

함수는 Promise<Record<string, boolean> | undefined> 타입을 반환

이는 함수가 string 타입의 키와 boolean 타입의 값을 가지는 객체를 반환하거나, 데이터가 없을 경우 undefined를 반환할 수 있음을 의미

 

 

 

async 키워드
비동기 함수임을 선언
비동기 함수는 내부에서 await 표현을 사용하여 비동기 작업의 완료를 기다릴 수 있음

 

await 키워드
getDoc 함수의 결과(문서의 데이터)가 준비될 때까지 함수의 실행을 일시 중지

 

Promise<Record<string, boolean> | undefined>

이 함수가 비동기적으로 작업을 수행하고 결과적으로 객체 또는 undefined를 반환할 것임을 나타냄

반환되는 객체는 키가 문자열(string)이고 값이 불리언(boolean)인 레코드 타입

 

[typescript] Promise와 Async/Await 구문

 

 

 

async function getThisWeekSecret(): Promise<
  Record<string, string> | undefined
> {
  const secretRef = await getDoc(thisWeekSecretRef);
  const secretCode = secretRef.data()?.secretCode;
  const startTime = secretRef.data()?.startTime;
  const secretCodeStartTime = formatTimeHHMMSS(startTime);
  // {secretCode: "1234", secretCodeStartTime: "012400"} 형식
  return { secretCode, secretCodeStartTime };
}

비동기 함수 getThisWeekSecret을 정의( Firestore에서 이번 주차의 출석 비밀 코드와 그 시작 시간을 가져오는 역할)

Promise<Record<string, string> | undefined> 타입을 반환

 

const startTime = secretRef.data()?.startTime;

? 뭐지?

옵셔널 체이닝

옵셔널 체이닝 '?.'

async function updateStudentAttendance(
  handle: string,
  isAttendance: boolean
): Promise<void> {
  await updateDoc(thisWeekAttendanceRef, { [handle]: isAttendance });
}

 

 

비동기 함수 updateStudentAttendance는 특정 학생의 출석 상태를 업데이트하는 기능을 수행

두 개의 매개변수 - handle은 학생을 식별하는 문자열(예: 학생의 이름, 학번 등)/ isAttendance는 학생의 출석 여부를 나타내는 불리언 값