게으른개발너D

✨ Classes ✨ 타입스크립트는 객체지향 코드를 더 안전하고 좋게 만들도록 도와주는 기능을 제공한다. 타입스크립트로 객체지향 코드를 어떻게 작성하는지 살펴보자. 그리고 typescript가 많은 양의 반복되는 코드들을 쓰지 않도록 어떻게 막아주는지도 알아보자. Player class를 만들자. Player 엔 몇몇 property들이 있을 것이다. 보통 JS에는 constructor 함수를 만들고 그 안에 this.firstName = firstName 또는 this.lastName = lastName 같은 코드를 넣어줄 것이다. 타입스크립트에서는 그런 코드는 안 넣어줘도 된다. 파라미터를 써주기만 하면 typescript가 알아서 constructor 함수를 만들어준다. class Player { ..

✨ Call Signatures ✨ arrow function 으로 typescript 함수를 작성해 보자 const add = (a: number, b: number) => a + b; 우리는 위에서처럼 타입을 적지않고 add 함수만의 타입을 만들고 싶다. type Add = (a: number, b: number) => number; const add:Add = (a, b) => a + b; 이게 바로 함수의 call signature 타입을 만드는 것이다. 이렇게 우리는 함수를 구현하기 전에 타입을 미리 정할 수 있다. 처음에 우리가 타입을 생각할 수 있도록 할 수 있다. ✨ Overloading ✨ 우리는 대부분 다른 사람들이 만든 외부 라이브러리를 사용할텐데, 이런 패키지나 라이브러리들은 오버로..

✨ How Typescript Works ✨ 타입스크립트는 Strongly Typed(강타입) 프로그래밍 언어이다. 이런 언어는 코드를 다 작성하고 나면 코드를 컴파일 해서 0101로 바꿔주거나, 어셈블리 코드나 바이트 코드가 되기도 한다. 타입스크립트에서는 작성한 코드가 자바스크립트로 변환된다. 변환하는 이유는 브라우저가 타입스크립트가 아니라 자바스크립트를 이해하기 때문이다. 참고로 Node.js는 타입스크립트와 자바스크립트 언어를 둘 다 이해할 수 있다. 타입스크립트가 제공해주는 보호는 타입스크립트 코드가 자바스크립트로 변환되기 전에 발생한다. 타입스크립트가 우리 언어를 미리 확인한 후 바보같은 실수가 일어나지 않도록 확인을 해준다. 그리고 에러가 있다면 자바스크립트로 변환을 해주지 않는다. 예를 들..

일단 컴터에 Node.js만 설치되어 있으면 된다. 노드 버전 확인인 콘솔창에 node -v를 입력하면 된다. 내 버전은 v16.18.0이다.. ㅎㅎㅎㅎㅎ 17.3 이상 버전으로 업데이트 시켜주자. Mac 기준으로 cashe를 지우기 위해서 터미널창에 npm cache clean --force 를 입력한다. 에러가 막 뜰 수가 있는데, 그럴 경우 npm cache verify를 입력하여 캐시 접근에 권한을 부여한다. sudo npm install -g n 를 입력하여 n을 설치해준다 sudo n lts를 입력하여 node 최신 버전을 설치해준다. node -v를 입력해서 다시 확인해보면 18.15.0으로 업그레드 되어있다. 다시 sudo npm install -g n 를 입력하여 npm을 재설치해준다. ..

✨ Async Await ✨ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function async function - JavaScript | MDN async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환 developer.mozilla.org async, await는 두 Promise의 업데이트이다. async, await를 만든 이유는 보기 좋은 코드를 만들기 위해서이다. then이나 catch같은 것들은 구식이다. 많은 then을 사용해야 ..

✨ Promise.all ✨ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all Promise.all() - JavaScript | MDN Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 developer.mozilla.org Promise.all은 주어진 모든 Promise를 실행한 후 진행되는 하나의 Promise를 반환한다. 일단 3개의 Promise들을 만들어보자. const p1 = new Promise(resolve => { s..

Promises는 뭐고 Promises를 어떻게 만드는지 알아보자. Promise는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. 그래서 Promise를 만들 때는 실행할 수 있는 function을 넣어야 한다. 이 function은 예를 들어 forEach에서처럼 executor이다. 일단 Promise 안에 function을 만들어 보자 여기서는 arrow function을 이용할 것이다. const amISexy = new Promise((resolve, reject) => { }); resolve는 야, 이게 네 값이야. 자바스크립트로 돌아가! reject는 야, 미안한데, 에러가 있어. 위의 amISexy를 console에 찍어보면 Promise가 pending 중이라고..

✨ Introduction to Async ✨ Promises를 시작하기 전에 JS의 비동기성과 동기성에 대해 생각해볼 필요가 있다. 우리는 보통 무언가를 하기 전에 생각을 한다. 요리를 하기 전에 무엇을 살지 생각하고 장을 보고 요리를 하는데, 이것들을 동시에 할 수 없다. 우리는 무언가를 먼저 해야한다. 멀티태스킹은 한 가지 이상의 것을 한 번에 동시에 생각하는 것이 아니다. 멀티태스킹은 단지 사이를 빠르게 스위칭 하는 것이다. 하지만 컴퓨터는 여러가지 일을 동시에 하고 있다. Promises를 이해하려면 이런 것들을 알고 있어야한다. 왜냐면 자바스크립트는 이와 같기 때문이다. 동시에 많은 일들을 할 수 있다. 웹사이트에서 데이터를 어떻게 가져올까? fetch를 이용해야한다. const hello =..