seohyun han

지금까지 만든 토이프로젝트들은 Monolithic architecture(모놀리식 아키텍쳐: 일체형 구조) 소프트웨어 설계구조를 가졌다. 모놀리식은 하나의 서버에 서비스 할 모든 애플리케이션 소스가 존재하는 구조이다. ▶ Monolithic architecture 동작구조 1. 클라이언트가 요청을 보내면 2. 서버에 존재하는 웹 어플리케이션이 데이터베이스 서버와 통신하여 필요한 데이터들을 전부 가져온다. 3. HTML, CSS, JavaScript 파일들을 만들어서 클라이언트에게 제공한다. 4. 클라이언트는 제공받은 파일을 브라우저에 전달한다. Monolithic 은 아키텍쳐가 단순하고, 프로덕트 와 DB 서버 2대만 운영하면 되어서 혼자 관리하기 용이했기 때문에 그동안 토이 프로젝트는 Spring 을 ..

※ 클래스 class Car{ color : string; //미리 선언해줘야 생성자에서 사용가능 constructor(color : string){ this.color = color; } start(){ console.log("start"); } } const bmw = new Car("red"); 미리 선언 하는 대신 readonly 를 이용하는 방법 class Car{ constructor(readonly color : string){ this.color = color; } start(){ console.log("start"); } } const bmw = new Car("red"); ES6 에서 클래스는 다른 객체 지향 언어들처럼 접근제한자를 지원하지 않는다. But 타입스크립트에서는 지원한다. ..

※ Literal Types 리터럴 타입 const userName1 = "Bob"; //Bob 타입 let userName2 = "Tom"; // string 타입 userName1 은 string 타입 이지만 const 라서 "Bob" 이외에는 값을 가질 수 없다. => 문자열 리터럴 타입 이라고 한다. userName2 은 현재 Tom 이지만, 다른 값도 가질 수 있으니 string 타입을 갖는다. 만약 userName2 가 추후에 string 이 아니라 number 타입을 갖고 싶다면 ? let userName2 : string | number = "Tom"; // 유니온타입 이렇게 명시해주면 된다. ▶ 문자열 리터럴 타입 type Job = "police" | "developer" | "teac..

Typescript = javascript + type Javascript 는 Dynamic Typing 가능 => 프로젝트가 커질수록 유연성이 높은 것은 좋지않다. Typescript 는 type을 엄격하게 관리해준다. - 에러메세지를 통해 정확하게 에러를 짚어줌 ex ) function add(num1, num2){ console.log(num1,num2); } Javascript add(); //NaN add(1); //Nan Typescript add(); // error : num1:any add(1); // error : Expected 2 arguments, but got 1 ※ Typescript ▷ 선언 let car:string = 'bmw'; let car:string // 타입 추론..

※ Generator - 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능 - Itarable 이면서 iterator 이다 ▶ 기본 구조 function 옆에 * 을 붙이고 yield 키워드 사용 - yield 에서 함수의 실행을 멈출 수 있다 function* fn (){ console.log(1); yield 1; console.log(2); yield 2; console.log(3); console.log(4); yield 3; return "finish"; } const a = fn(); fn() 함수를 실행하면 generator 객체가 반환됨 ▷ next() a.next(); // console : 1 // {value : 1, done : false} 를 실행하면 가장 가까운 yield 문을..

async await 를 사용하면 promise 에 then 메서드를 사용하여 체인형식으로 호출하는 것 보다 가독성이 좋아짐 ▶ async function 앞에 사용 async 를 붙이면 해당 함수는 항상 Promise 를 반환. async function getName(){ return "Mike"; } console.log(getName()); //Promise{fulfilled : "mike"} 함수 호출 후 then 사용 가능 async function getName(){ return Promise.resolve("Tom"); } getName().then(name=>{ console.log(name); //Tom }); 함수 내부에서 예외가 발생하면 rejected 상태가 반환된다. catch ..

※ Promise 사용자가 상점에 물건을 구매하러갔다. 찾는 물건이 없다. 물건이 들어올때 까지 계속 상점에 물건이 있는지 물어봐야할까 ? => NO 상점에 물건이 들어오면 연락달라고 전화번호를 남기고 간다 = > YES => Promise ▶ 프로미스 생성 ▷ 기본형태 const pr = new Promise((resolve, reject)=>{ }); resolve : 성공한 경우 실행 reject : 실패했을 때 실행 = > 이렇게 어떤일이 완료된 후 실행되는 함수를 콜백함수 라고한다. new Promise 생성자가 반환하는 객체는 state 와 result를 프로퍼티로 갖는다 어떤 일이 성공해서 resolve 가 호출되면 state : fulfilled result : value 가 되고 실패해서..

setTimeout : 일정시간이 지난 후 함수 실행 setInterval : 일정시간 간격으로 함수를 반복 clearTimeout : 일정시간 후 실행 예정인 함수를 없앰 (setTimeout 무효화) setTimeout(실행될 함수, 시간); 인수가 더 필요하다면 시간 뒤에 적어준다 ex ) setTimeout(showName, 3000, 'sian'); - 여기서 세번째 인자 sian은 3초 후 실행될 함수 showName 의 인자이다 function showNmae(name){ console.log(name); } ※ call & apply & bind - 함수 호출 방식과 관계없이 this 를 지정할 수 있다 ▶ call call 메서드는 모든 함수에서 사용할 수 있으며, this 를 특정값으로..

구조분해할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 ▶ 배열 구조분해 let [x,y] = [1,2]; //일반 let user1 = users[0]; let user2 = users[1]; let user3 = users[2]; //구조분해할당 let users = ['sian','jian','wian']; let str = "한-서-현"; let [name1,name2,name3] = str.split('-'); console.log(user1); //한 console.log(user2); //서 console.log(user3); //현 let [a,b,c] = [1,2]; //a = 1 //b = 2 //c = undefined 이런 undefined 를..

key 를 number 나 boolean 으로 만들어도 Object.keys(obj) 로 접근하면 문자열로 리턴이 된다 ["1", "false"] ※ Symbol Symbol 은 유일한 식별자를 만들 때 사용한다. - 유일성이 보장됨 (전체 코드 중에 딱 하나) ▷ Symbol 생성 const a = Symbol(); const id = Symbol('id'); // 문자열로 설명을 달아줄 수도 있다. ▷ Symbol을 객체의 key로 사용해보기 const id = Symbol('id'); const user = { name : 'sian', age : 23, [id] : 'myId' // computed property 로 symbol을 key 로 넣었음 } 근데 이렇게 했을 경우 Object.keys..