typescript 핸드북 학습내용 정리 https://typescript-kr.github.io/pages/the-handbook.html 리터럴 타입 리터럴 타입 좁히기 const로 변수를 선언하게 되면 Typescript에게 이 객체는 절대 변경되지 않음을 알림 // 따라서, TypeScript는 문자열이 아닌 "Hello World"로 타입을 정합니다. const helloWorld = "Hello World"; // 반면, let은 변경될 수 있으므로 컴파일러는 문자열이라고 선언할 것입니다. let hiWorld = "Hi World"; 문자열 리터럴 타입 // 허용된 문자열이 아닌 다른 문자열을 사용하게 되면 오류 발생 type Easing = "ease-in" | "ease-out" | "e..

typescript 핸드북 학습내용 정리 https://typescript-kr.github.io/pages/the-handbook.html 함수 함수 (Function) // 기명 함수 fucntion add(x, y) { return x + y; } // 익명 함수 let myAdd = function(x, y) { return x + y }; // 함수는 함수 외부의 변수를 참조는 경우를, 변수를 캡처(capture) 한다고 함. let z = 100; function addToZ(x, y) { return x + y + z; } 함수 타입 (Function Types) 함수의 타이핑 (Typing the function) function add(x: number, y: number): number..

typescript 핸드북 학습내용 정리 https://typescript-kr.github.io/pages/the-handbook.html 인터페이스 첫 번째 인터페이스 (Our First Interface) interface LabeledValue { label: string; } function printLabel(labeledObj: LabeledValue) { console.log(labeledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj); 타입 검사는 프로퍼티들의 순서를 요구하지 않음. 단지 인터페이스가 요구하는 프로퍼티들이 존재하는지와 프로퍼티들이 요구하는 타입을 가졌는지만을 확인. 선택적 프로..

typescript 핸드북 학습내용 정리 https://typescript-kr.github.io/pages/the-handbook.html 기본타입 불리언 (Boolean) 참/거짓(true/false) let isDone: boolean = false; 숫자 (Number) 모든 숫자는 부동 소수 값임. let decimal: number = 6; // 10진수 let hex: number = 0xf00d; // 16진수 let binary: number = 0b1010; //2진수 let octal: number = 0o744; // 8진수 문자열 (String) let color: string = "blue"; color = 'red'; 템플릿 문자열 let fullName: string = `B..

모듈 모듈의 일반적 의미 개별적 요소로서 재사용 가능한 코드 조각 자바스크립트와 모듈 레거시 분석을 위해서가 아니면 amd는 모르고 넘어가도 됨. ES6 모듈(ESM) 모듈 스코프 독자적인 모듈 스코프를 가지고 있음. export 외부에 공개 // 변수, 함수 클래스를 하나의 객체로 구성하여 공개 export { pi, square, Person }; export default object; //기본 import import { pi, square, Person } from './lib.mjs'; import * as lib from './lib.mjs'; // 앨리어싱 import object from './lib.mjs'; //export default가 있는 경우 책에서는 하나의 값만 export ..

에러처리 에러처리의 필요성 예외상황 대응 try catch finally try { // 실행할 코드(에러가 발생할 가능성이 있는 코드) } catch (err) { // try 코드 블록에서 에러가 발생하면 이 코드 블록의 코드가 실행된다. // err에는 try 코드 블록에서 발생한 Error 객체가 전달된다. } finally { // 에러 발생과 상관없이 반드시 한 번 실행된다. } Error 객체 생성자 함수 인스턴스 Error 일반적 에러 객체 SyntaxError 자바스크립트 문법에 맞지 않는 문을 해석할 때 발생하는 에러 객체 ReferenceError 참조할 수 없는 식별자를 참조했을 때 발생하는 에러 객체 TypeError 피연산자 또는 인수의 데이터 타입이 유효하지 않을 때 발생하는 ..

제네레이터와 async/await 제네레이터란? 코드 블록을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 함수 호출자에게 제어권 양도 가능 함수 호출자와 상태를 주고 받을 수 있음 제네레이터 함수의 정의 function*로 선언하고 하나 이상의 yield 표현식을 포함한다. 화살표 함수나 생성자 함수로 정의할 수 없음. 제네레이터 객체 제네레이터 함수가 반환한 객체는 이터러블이면서 이터레이터이다. next 메서드를 갖는 이터레이터이지만 return, throw 메서드를 갖는다. 제네레이터의 일시중지와 재개 yield 키워드는 일시중지 시키거나 키워드 뒤에 오는 표현식의 평가 결과를 반환한다. 이터레이터의 next와 달리 인수 전달 가능 function* genFunc() { // 처음 ne..

프로미스 비동기 처리를 위한 콜백 패턴의 단점 비동기 함수는 처리 결과를 외부에 반환할 수 없어, 콜백을 사용해야 하는데 콜백이 수없이 중첩되는 경우가 생김. 이를 콜백 지옥이라 함. 에러 처리 부분에서 try catch 문 내의 비동기 함수의 에러를 캐치하지 못하는 문제가 있음. -> 단일 콜백일 경우 비동기 함수 내부에서 에러 처리 하면 됨. 그러나 여러개의 콜백함수를 묶어 에러처리를 할 수 없음. 프로미스의 생성 // GET 요청을 위한 비동기 함수 const promiseGet = url => { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr..

REST API REST API의 구성 구성 요소 내용 표현 방법 자원resource 자원 URI(엔드포인트) 행위verb 자원에 대한 행위 HTTP 요청 메서드 표현representations 자원에 대한 행위의 구체적 내용 페이로드 REST API 설계 원칙 URI는 리소스를 표현해야함. 행위는 메서드로 표현 JSON Server 실습파일 2개로 대체 postman의 mock 기능이나 MSW 사용 추천 https://devvkkid.tistory.com/219 https://blog.mathpresso.com/msw로-api-모킹하기-2d8a803c3d5c

Ajax 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 처리 JSON 텍스트 데이터 포맷. 객체 리터럴과 유사함.(큰 따옴표 강제. 키도 큰따옴표로 묶어야함.) JSON.stringify 객체(또는 배열)를 JSON 포맷의 문자열로 변환. 직렬화라함(serializing). 리시버를 이용하여 데이터 변환 가능 JSON.parse JSON 포맷의 문자열을 객체로 반환. 리시버를 이용하여 데이터 변환 가능 JSON.parse('{"p": 5}', (key, value) => typeof value === 'number' ? value * 2 // 숫자라면 2배 : value // 나머진 그대로 ); XMLHttpRequest 이제는 안 쓸꺼라 넘어감.