대망의 프리 프로젝트 시작 ! 오고야 말았다... 오고야 말았어.. 그 날이다.. 프리 프로젝트.. 그 위험한 일을 시작하는 날이다.. 떨리는 마음으로 시작해서 지친 마음으로 끝난 오늘 하루를 얘기해 본다... Day 1 - 나의 생각 1. Project Wiki 숙지 코드스테이츠 유어클래스 학습 과정에 있는 Project 코스에서 Project Wiki 과정을 숙지하는 시간을 가졌다. 이 과정에는 전체 프로젝트 개요, 팀프로그래밍을 하기 위한 방법,목적,개발 관련 툴등이 적힌 문서들을 숙지하는 시간이었다 ! 이 과정들이 있음으로서 진짜 프로젝트를 시작하는 구나 하는 마음가짐을 갖게 하는데에도 충분했던 것 같다. 2. Team 활동 처음엔 너무 어색했었고 웃음만 나왔는데 나중에 FE 팀원 분이 " 팀 단..
Proxy에 대해 알아보자 Proxy는 CORS 정책을 우회할 수 있는 React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 기능입니다. 이 기능이 필요한 이유를 알려면 CORS 정책이 필요한 이유를 먼저 알아야 합니다. CORS 정책이 필요한 이유가 뭘까요 ? 브라우저에서 API를 요청할 때는 브라우저의 현재 주소와 API 주소의 도메인이 일치해야만 데이터를 접근할 수 있습니다. 만약 다른 도메인에서 API를 요청해서 사용할 수 있게 하려면 CORS 설정이 필요합니다. 로컬 환경에서 개발한 앱은 기본적으로 localhost:3000 으로 시작합니다. 그러나, 나중에 로컬 환경에서 개발한 실제 서비스 및 프로젝트의 클라이언트에서 서버의 API로 요청하게 되면,이 포트로 요청하는 것이..
타입스크립트의 타입 별칭 & 타입 추론에 대해 알아봅시다~! 타입 별칭 새로운 이름으로 기존의 타입을 참조하는 것을 의미한다. 타입 별칭을 이용하여 타입의 새로운 이름을 만들 때 키워드 type을 이용하여 작성한다. type MyString = string; let str1: string = 'hello!'; // string 타입처럼 사용할 수 있다. // myString과 string은 동일한 의미 let str2: MyString = 'hello world!'; 타입 별칭 장점 인터페이스나 다른 변수를 정의할 때 타입 별칭으로 정의한 타입을 참조하게 됨으로써 코드를 더 간결하고 가독성 좋게 만들 수 있다. 타입 별칭 단점 타입 별칭은 말 그대로 타입에 새로운 이름을 부여하는 것에서 그치기 때문에 확..
타입스크립트의 인터페이스에 대해 알아봅시다~! 타입스크립트 인터페이스 인터페이스(Interface)는 일반적으로 타입 체크를 위해 사용된다. 인터페이스는 변수, 함수, 클래스에 사용할 수 있다. 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지하도록 한다. TypeScript의 예약어인 interface를 사용하여 TypeScript 인터페이스를 생성할 수 있다. 변수와 인터페이스 // 인터페이스 정의 interface User { name: string; age: number; } // 변수 user의 타입으로 User 인터페이스를 선언하였다. // 변수 user는 User 인터페이스를 준수하여야 한다. let user : User; // 정상적으로 선언됩니다. user: Use..
타입스크립트의 열거형에 대해 알아봅시다~! TypeScript 열거형 열거형(Enum)은 특정 값의 집합을 정의할 때 사용된다. TypeScript는 문자형 열거형 & 숫자형 열거형이 지원된다. 열거형 정의 방식 enum Color { Red, Green, Blue, } 숫자형 열거형(Enum) 디폴트 값으로 숫자형을 사용 각 값은 자동으로 0부터 시작하여 1씩 증가 수동으로도 값 지정 가능 열거형 값에 대해 산술 연산 수행도 가능 일반적으로 상수 값을 대신하여 사용 enum Color { Red = 1, Green = 2, Blue = 4, } let c: Color = Color.Green; let greenValue: number = Color.Green; let blueValue: number =..
타입스크립트의 연산자 활용 타입에 대해 알아봅시다~! 유니온(Union) 타입 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입이다. 예를 들어, number | string 은 숫자 또는 문자열 타입을 의미한다. function logText(text: string | number) { // ... } 유니온 타입을 사용해 TypeScript의 이점을 살리면서 코드를 작성해보자. function printValue(value: number|string): void { if (typeof value === "number") { console.log(`The value is a number: ${value}`); } else { console.log(`The value is a s..
타입스크립트의 함수에 대해 알아봅시다~! ➿ TypeScript 함수 TypeScript에도 함수는 JavaScript와 마찬가지로 기명 함수(named function)와 화살표 함수(arrow function) 등으로 만들 수 있다. 함수 선언 //named function (기명 함수) function add(x: number, y: number):number { return x + y; } //named function (기명 함수) : 추론된 리턴 타입 function add(x: number, y: number) { return x + y; } //arrow function (화살표 함수) let add = (x: number, y: number): number => { return x + y..
타입스크립트의 타입에 대해 알아봅시다~! ➿ TypeScript 타입 1. Boolean(불리언) 타입 let isShow: boolean = true; let isDone: boolean = false; 2. Number(숫자) 타입 let number1: number = 5; let number2: number = 0.7; 3. String(문자열) 타입 let firstName: string = "coding"; let lastName: string = 'kim'; let longString: string = `Kimcoding is a developer. He is 20 years old.` 4. Array(배열) 타입 배열 타입은 기본적으로 하나의 타입만 작성하게 되어 있으며, 타입을 혼용해서 ..
