공부 정리 공부 정리

JavaScript

• 비동기 - API 비동기 처리 연습

  JavaScript/JavaScript 2021. 8. 5. 22:50

  비동기 - API 비동기 처리 연습 function fetchMovies(title) { // 대기(pending): 이행하거나 거부되지 않은 초기 상태. const OMDB_API_KEY = 'abcdefg123' return new Promise(async (resolve, reject) => { try { const res = await axios.get(`https://omdbapi.com?apikey=${OMDB_API_KEY}&s=${title}`) // 이행(fulfilled): 연산이 성공적으로 완료됨. resolve(res) } catch (error) { console.log(error.message) // 거부(rejected): 연산이 실패함. reject('ITBlue?!') } ..

  Read More
• 비동기 - 예외 처리

  JavaScript/JavaScript 2021. 8. 3. 14:49

  비동기 - 예외처리 (then, catch, finally) then - 작업이 성공적으로 완료되면 Promise.resolve() 메소드를 통해 결과 값으로 이행하는 Promise 객체를 반환 - 실행 순서를 보장 - 콜백 지옥과 패턴이 동일해서 권장하지 않음 - async & await 패턴을 사용하기 어려운 환경일때 대체해서 사용 - 비동기 패턴을 대신해서 사용 function a() { return new Promise((resolve) => { setTimeout(() => { console.log('A') resolve() }, 1000) }) } function test() { a().then(() => { console.log('B') }) } test() /* 실행순서 */ A B cat..

  Read More
• 비동기 - 콜백과 프로미스 객체의 이해

  JavaScript/JavaScript 2021. 8. 3. 11:06

  동기 동기 방식 (Synchronous) - 코드를 작성한 순서대로 동작하는 것 function a() { console.log('A') } function b() { console.log('B') } a() b() /* 실행 결과 */ A B 비동기 방식 (Asynchronous) - 특정 코드의 연산이 끝날 때까지 기다리지 않고, 그동안 다른 코드를 실행 - 실행 순서가 보장되지 않는다 - 비동기 처리의 방식은 setTimeOut, callback, promise 등이 있다 비동기 - 콜백과 프로미스 객체의 이해 콜백 함수 (callback) - 특정 함수에 매개변수로 전달되는 함수 (데이터처럼 사용되는 함수) - 실행 순서를 보장 - 콜백이 많아지면 관리하기가 불편해진다 (콜백 지옥) functio..

  Read More
• TS Generics

  JavaScript/TypeScript 2021. 6. 23. 19:36

  제네릭 (Generics) - 클래스 또는 함수 내부에서 사용할 타입을 외부에서 결정하는 기법 예제 - Generic와 Any 차이점 // function helloString(message: string): string { // return message; // } // function helloNumber(message: number): number { // return message; // } function hello(message: any): any { return message; } // 3 console.log(hello("Lee").length); // undefined console.log(hello(45).length); // function 함수명 (parameter: T): T fu..

  Read More
• TS 클래스

  JavaScript/TypeScript 2021. 6. 23. 05:26

  클래스 - 객체 (object)를 만드는 설계도 - 클래스 이전에 object를 만드는 기본적인 방법은 Function - JS에도 class 사용 가능 (es6 부터) - OOP (Object-Oriented Programming)을 위한 초석 - TS에서는 클래스도 사용자가 만드는 타입의 하나 기본 형태의 클래스 // class 클래스명 {} class Person { name: string; // constructor (생성자 키워드) // object를 생성하면서 값을 전달 constructor(name: string) { // this를 이용해서 만들어진 object를 가리킨다 this.name = name; } } // new 키워드를 이용하여 class를 통해 object를 만들 수 있다 c..

  Read More
• TS 인터페이스

  JavaScript/TypeScript 2021. 6. 19. 02:52

  인터페이스 (Interface) - 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용한다 - 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다 - 인터페이스는 프로퍼티와 메소드를 가질 수 있다는 점이 클래스와 유사하나 - 직접 인스턴스를 생성할 수 없고 모든 메소드는 추상 메소드이다 (abstract 키워드는 사용하지 않는다) interface Person1 { name: string; age: number; } function hello1(person: Person1): void { console.log(`이름: ${person.name} 나이: ${person.age}`); } const p1: Person1 = { name: 'Yoo', age: 27, ..

  Read More
• TS 컴파일러

  JavaScript/TypeScript 2021. 6. 18. 02:02

  Compilation Context - 컴파일할 파일, 컴포넌트 등의 모음 - 컨텍스트에는 컴파일러가 어떠한 에러도 없이 컴파일 하는데 필요한 모든 것을 포함 - TS를 컴파일할 때 컨텍스트를 files, include 또는 exclude 옵션을 사용한 tsconfig.json 파일로 제어 tsconfig schema 최상위 속성(Property) compileOnSave extends compileOptions files include exclude references compileOnSave - true / false (기본값 false) "compileOnSave": true 파일을 저장 (Save)하면 컴파일 하겠다 extends - 파일 (상대) 경로명: string "extends": "./파..

  Read More
• TS 타입 시스템

  JavaScript/TypeScript 2021. 6. 17. 00:25

  타입 시스템 - 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템 - 컴파일러가 자동으로 타입을 추론하는 시스템 TS의 타입 시스템 - 타입을 명시적으로 지정할 수 있다 - 타입을 명시적으로 지정하지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론 noImplicitAny 옵션 - 해당 옵션을 사용하면 타입을 명시적으로 지정하지 않은 경우, 타입스크립트가 추론 중 'any' 라고 판단하게 되면, 컴파일 에러를 발생시켜 명시적으로 지정하도록 유도한다 strictNullChecks 옵션 - 해당 옵션을 사용하면 모든 타입에 자동으로 포함되어 있는 'null' 과 'undefined' 를 제거 nolmplicitReturns 옵션 - 해당 옵션을 사용하면 함수 내에서 모든 코드가 값을 리턴하지 않으..

  Read More