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

1. 프로젝트 생성 https://create-react-app.dev/docs/adding-typescript # yarn을 사용하는 경우 yarn create react-app my-app --template typescript # npx를 사용하는 경우 npx create-react-app my-app --template typescript 2. 리액트 프로젝트와 동일하게 yarn start 명령어로 프로젝트를 실행함 yarn start 3. tsconfig.json 파일 수정 // tsconfig.json "target": "ES2016" 수정 4. 타입 정의 패키지 설치 # react-router-dom yarn add react-router-dom @types/react-router-dom #..

셋팅 1. 타입스크립트로 프로젝트 생성하기 react typescript 구글링 tyscriptlan.dorg 링크 ㄱㄱ에서 확인하면 명령어 확인할 수 있음 npx create-react-app my-app --template typescript 2. tsconfig.json "target": "es6"로 변경 lib에 es6 추가 module은 esnext 로 두면 됨 3. 리액트의 함수 컴포넌트에 타입 지정 ㄱ 함수의 매개변수도 타입을 지정하고, 함수의 리턴 값도 타입을 지정해주어야 함 const App:React.FC = () => { return... 실습 코드 레스토랑정보 보여주기 예제 학습 내용: 객체 타입 정의, 타입, useState, 제네릭 문법, 함수, interface, extends..

공식 매뉴얼 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 구문으로 가져올 수..