목록개발 (53)
게으른개발너D
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bYQ8xb/btspXmjCIaZ/xZOnAKKlohPEVNnK3tm6a0/img.jpg)
✨ How Typescript Works ✨ 타입스크립트는 Strongly Typed(강타입) 프로그래밍 언어이다. 이런 언어는 코드를 다 작성하고 나면 코드를 컴파일 해서 0101로 바꿔주거나, 어셈블리 코드나 바이트 코드가 되기도 한다. 타입스크립트에서는 작성한 코드가 자바스크립트로 변환된다. 변환하는 이유는 브라우저가 타입스크립트가 아니라 자바스크립트를 이해하기 때문이다. 참고로 Node.js는 타입스크립트와 자바스크립트 언어를 둘 다 이해할 수 있다. 타입스크립트가 제공해주는 보호는 타입스크립트 코드가 자바스크립트로 변환되기 전에 발생한다. 타입스크립트가 우리 언어를 미리 확인한 후 바보같은 실수가 일어나지 않도록 확인을 해준다. 그리고 에러가 있다면 자바스크립트로 변환을 해주지 않는다. 예를 들..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/AcTLk/btsp1jNdjhm/PhMeqyhNJyKxgXfCUR8rgk/img.jpg)
일단 컴터에 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을 재설치해준다. ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kPvgw/btspOCnz2AS/GcuOkrpTDXfgW5cf7yQYW0/img.jpg)
✨ 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을 사용해야 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/NBFou/btspZCNjswo/Qmto1mVsZYgBpYZfuiL5Rk/img.jpg)
✨ 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bhFiH0/btspMknoU7k/yz54d4bPH3E4JiFZeyf50K/img.jpg)
✨ Introduction to Async ✨ Promises를 시작하기 전에 JS의 비동기성과 동기성에 대해 생각해볼 필요가 있다. 우리는 보통 무언가를 하기 전에 생각을 한다. 요리를 하기 전에 무엇을 살지 생각하고 장을 보고 요리를 하는데, 이것들을 동시에 할 수 없다. 우리는 무언가를 먼저 해야한다. 멀티태스킹은 한 가지 이상의 것을 한 번에 동시에 생각하는 것이 아니다. 멀티태스킹은 단지 사이를 빠르게 스위칭 하는 것이다. 하지만 컴퓨터는 여러가지 일을 동시에 하고 있다. Promises를 이해하려면 이런 것들을 알고 있어야한다. 왜냐면 자바스크립트는 이와 같기 때문이다. 동시에 많은 일들을 할 수 있다. 웹사이트에서 데이터를 어떻게 가져올까? fetch를 이용해야한다. const hello =..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/R0Ell/btspYeZX4YZ/SMuYvvVeHll0RKIP48Tphk/img.jpg)
✨ Dead Zone ✨ var을 이용해서 이렇게 작성해 보자 console.log(myName); var myName = 'Hwayeon'; // undefined hoisting은 JS가 프로그램을 실행하기 전에 얘네들을 어딘가로 이동시킨다는 것이다. 무조건 위에서 아래로 이동하는 것이 아니라, 이런 것들을 가지고 가서 어딘가로 옮겨주는 것이다. hoisted의 뜻은 프로그램이 시작될 때 variable들이 미리 top으로 끌어올려지는 것이다. var myName; console.log(myName); myName = 'Hwayeon'; // undefined 이런 경우는 원래 에러를 내야한다. 만약 let으로 바꾼다면 console.log(myName); let myName = 'Hwayeon'; ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bh8wjD/btspXkMV1qv/QWYcCie4c5aNjRmtDzfsf0/img.jpg)
1. typescript https://www.typescriptlang.org/ JavaScript With Syntax For Types. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code. www.typescriptlang.org typescript가 포함된 react 앱을 만들려면 npx create-react-app 앱이름 --template typescript 또는 이미 react 프로젝트를 생성하였다면 npm insta..