FE개발 공부 시작: 23년 4월 10일

공식 매뉴얼 https://www.typescriptlang.org/docs/ The starting point for learning TypeScript Find TypeScript starter projects: from Angular to React or Node.js and CLIs. www.typescriptlang.org 공식 튜토리얼 https://www.typescriptlang.org/docs/handbook/intro.html Handbook - The TypeScript Handbook Your first step to learn TypeScript www.typescriptlang.org 온라인 책 https://radlohead.gitbook.io/typescript-deep-di..

프로젝트 세팅 https://console-log.tistory.com/165 [실습] 성적표 프로그램 프로젝트 세팅 및 확인 과정 프로젝트 디렉토리 새로 만들기 [터미널] mkdir 폴더명 : 폴더 만들기 [터미널] cd 폴더명 : 폴더로 이동 [터미널] npm init -y [터미널] tsc --init --rootDir ./src --outDir ./dist --esM console-log.tistory.com 프로그램 기능 도서 추가 기능 - 사서 도서 삭제 기능 - 사서 도서 대여 기능 - 유저 도서 반납 기능 - 유저 프로젝트 코드 (src/index.ts) // Role이라는 enum을 정의 -사서, 유저 enum Role { LIBRARIAN, // 사서 MEMBER, // 멤버 } // ..

S(SRP. 단일 책임 원칙) ⭐현업에서도 매우 중요 클래스는 하나의 책임만 가져야 한다 🚫(잘못된 사례) class UserService { constructor(private db: Database) {} getUser(id: number): User { // 사용자 조회 로직 return this.db.findUser(id); } saveUser(user: User): void { // 사용자 저장 로직 this.db.saveUser(user); } sendWelcomeEmail(user: User): void { // 갑분 이메일 전송 로직이 여기 왜? const emailService = new EmailService(); emailService.sendWelcomeEmail(user); } }..

클래스 정의하기 생성자(constructor)는 클래스의 인스턴스를 생성하고 초기화할때 최초로 불리는 메서드. 그 이후로는 불리지 않음. 객체를 만드는 그 시점에 한번만 불리는 메서드 보통, 생성자로 객체 속성을 초기화 하는것 뿐 아니라 객체가 생성이 될 떄 꼭 되어야 하는 초기화 로직을 집어넣기도 함 예를 들어, DBConnector라는 클래스가 있다면 이 클래스 타입의 객체가 생성이 될 때 생성자에서 DB 연결을 미리 ㄱ // TypeScript에서 클래스를 정의하려면 class 키워드를 사용하면 됩니다! class Person { // 속성 정의 name: string; age: number; // 생성자 constructor(name: string, age: number) { this.name =..

프로젝트 세팅 https://console-log.tistory.com/165 [실습] 성적표 프로그램 프로젝트 세팅 및 확인 과정 프로젝트 디렉토리 새로 만들기 [터미널] mkdir 폴더명 : 폴더 만들기 [터미널] cd 폴더명 : 폴더로 이동 [터미널] npm init -y [터미널] tsc --init --rootDir ./src --outDir ./dist --esM console-log.tistory.com 프로그램 기능 음료 등록 기능 - 어드민 음료 삭제 기능 - 어드민 음료 조회 기능 - 어드민, 고객 음료 주문 기능 - 고객 음료 준비 완료 기능 - 어드민 음료 수령 기능 - 고객 프로젝트 코드 (src/index.js) // 1. 기능들을 수행하기에 앞서 필요한 인터페이스 & 데이터(자..

enum과 object literal enum(이넘)은 '간단한 상수 값'을 그룹화하여 관리할 때 적합. -> enum은 상수 값이기 때문에 각 멤버의 값이 변하면 안된다는 조건이 있음. object literal(객체 리터럴)은 멤버의 값이나 데이터의 타입을 맘대로 변경할 수 있음. -> 복잡한 구조와 다양한 데이터 타입을 사용할 땐 객체 리터럴 사용ㄱ enum은 열거형 데이터 타입. 상수의 그룹화할 때 좋음. 코드의 가독성을 높이고 명확한 상수값을 정의할 수 있다. 컴파일 시에 자동으로 숫자 값으로 매핑되므로 따로 값을 할당할 필요가 없다! 하지만, 특정 숫자 값으로 매핑되어야 하면 그것은 직접 할당을 해주시면 됨 enum UserRole { ADMIN = "ADMIN", EDITOR = "EDITO..

기본 타입 1) boolean 2가지의 상태에 적합(켜짐/꺼짐, 유효함/유효하지 않음). 조건문이나 비교연산자 등에서 주로 사용. 3가지 이상의 상태를 표현하고 싶은 경우 enum이나 string이 적합. function isValidPassword(password: string): boolean { return password.length >= 8; } const password = "q1w2e3r4!"; const valid = isValidPassword(password); if (valid) { console.log("유효한 패스워드입니다!"); } else { console.log("유효하지 않은 패스워드입니다!"); } 2) number 모든 숫자를 나타냄 정수(소수점이 없는 수): short..

프로젝트 세팅 및 확인 과정 프로젝트 디렉토리 새로 만들기 [터미널] mkdir 폴더명 : 폴더 만들기 [터미널] cd 폴더명 : 폴더로 이동 [터미널] npm init -y [터미널] tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true --rootDir ./src : 프로그램의 소스 파일이 들어가는 경로는 src 디렉토리입니다. --outDir ./dist : 컴파일이 된 파일들이 들어가는 디렉토리는 dist 디렉토리입니다. --esModuleInterop : CommonJS 방식의 모듈을 ES모듈 방식의 import 구문으로 가져올 수..

1. 셋팅 (터미널) mkdir [폴더명] : 폴더 만들기 cd [폴더명] : 폴더로 이동 npm init -y : package.json이 생성됨 tsc --init : tsconfig.json을 생성해서 타입스크립트 프로젝트로 변환 ls : 현재 파일 확인 (tsconfig.json) 아래 옵션 2개를 주석 해제하여 true로 설정 "allowJs": true // TypeScript 프로젝트에 JavaScript 파일 허용 여부 "checkJs": true // JavaScript 파일 타입 체크 여부 2. JSDoc 작성 JavaScript 소스코드에 JSDoc를 통해 타입 힌트를 제공할 수 있음. JSDoc은 API의 시그니처 (인자, 리턴 타입)를 설명하는 HTML 문서 생성기. (test.j..

tsc = TypeScript 컴파일러 JavaScript는 동적 언어(=인터프리터 언어)이기 때문에 기계어로 변환될 필요가 없음 정적 언어(=컴파일 언어) → 기계어로 변환이 되어야 합니다! 동적 언어(=인터프리터 언어) → 엔진이 코드를 한 줄씩 실행하면서 동적으로 해석합니다! Node.js나 Chrome → JavaScript를 실행할 때는 V8 엔진이 코드 해석 및 실행을 하구요! Firefox → JavaScript를 실행할 때는 SpiderMonkey가 코드 해석 및 실행을 합니다! tsc 명령어 tsc --init tsconfig.json이 생성되는 명령어 tsc index.ts index.ts를 컴파일. .ts는 TypeScript 파일의 확장자 tsc src/*.ts src 디렉토리 안에..