타입스크립트를 알고싶으면 자바스크립트부터 알자

구구절절 역사

타입스크립트가 그래서 왜 만들어졌는지 알아보자
그럼 Javascript부터 알아봐야한다

Javascript는 브라우저를 위한 스크립팅 언어로 만들어졌다.

그래서 스크립팅 언어가 뭔대

소스 코드를 컴파일안해도 실행할 수 있는 프로그래밍 언어이다.
자바는 컴파일러가 필요하지만 스크립트 언어는 필요가 없다

스크립트 언어는 Server-side-script와 Client-side-script로 나뉜다
서버 사이드 스크립트는 JSP, PYTHON이 있고
클라이언트 사이드 스크립트엔 Javascript가 있다.

그럼 서버 사이드 스크립트는 뭔대
웹서버를 거쳐야 소스 실행 결과를 볼 수 있는 애들이고

클라이언트 사이드 스크립트는
서버 필요없이 내장된 번역기(사용자)쪽에서 처리되는 스크립트이다.

nodejs는 뭔대🤦 javacript 런타임이다.이게 뭔소리야

nodejs는 JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램이다.

자 JavaScript가 클라이언트 사이드 스크립트라고 했찌????
서버가 필요없다는 소리다
근데 필요없는애를 서버에서도 사용할 수 있도록 하는게 nodejs

그럼 왜 굳이 JavaScript를 서버에서 사용할 수 있어야하는데?

잘 생각해보셈
내장된 번역기=사용자=웹브라우저가 있어야 JavaScript를 사용할 수 있음

웹브라우저 없어도 터미널에서 nodejs를 통해 바로 실행할 수 있다.
웹브라우저에 안묶여도 된다

깨알 nodejs 작동방법

• 이벤트 기반
  💥 a라는 이벤트가 발생할때 뭐할지 미리 정해둠
  💥 Event Listener👂를 콜백함수에 등록해둠
  💥 이벤트가 발생하면 Event Listener👂에 등록해둔 콜백함수(다른 함수가 부르는 함수)를 불러옴
  💥 이벤트가 끝나면 노드는 다음 이벤트가 발생할때까지 대기

• 논블로킹 i/o
  

• 싱글스레드
  nodejs는 싱글스레드라서 이 구구절절 작동방식이 있는거다
  JavaScript도 싱글스레드 언어이다

그렇다면 다시 JavaScript로 돌아가보자

JavaScript 런타임에선 비동기 콜백으로 블로킹을 해결한다

이건 또 뭔소리냐


일단 다시 용어 머리 속에 박고 가자

• 비동기는 줄 안서도 되고 동기는 줄 서서 일처리하는거

• 콜백 함수는

  A callback function is a function which is:
  passed as an argument to another function,
  다른 함수의 인자로 넘겨지는 함수

  and, is invoked after some kind of event.
  어떤 이벤트로 인해 호출되는 함수
  (JavaScript에서 함수는 객체이다)
  
  

• 예전에는 이벤트+콜백함수로 비동기성을 처리함
  
  

• promise는 콜백 함수를 구조화하는 방법을 제시
  👉 then()으로 선형 체인으로 바꿔 비동기 단계들을 이어지게 만듦
  👉 then() 호출 마지막에 catch()를 붙여 에러 처리를 하나로 모을 수 있음 왜냐 then은 promise를 반환하기 때문
  👉 promise는 성공과 실패를 분리해서 메소드를 수행 (pending, fullfilled, rejected 상태가 존재)
  
  

• async + await로 비동기 코드를 동기적 코드처럼 작성할 수 있음
  👉 async로 선언된 함수는 묵시적으로 promise를 반환
  👉 async 함수 안에선 await로 promise/promise를 반환하는 함수를 기다릴 수 있음
  
  

• 예시_api 요청 함수

function login(){
 let user = LoginUser('111.111.com/users/login');
 if(user.name==='kim){
  console.log(user.name);
 }
}

• 예시1_콜백 + promise

function login(){
 LoginUser('111.111.com/users/login', user => {
  if(user.name==='kim'){
   console.log(user.name);
  }
});
}

function login(){
return new Promise(function(resolve,reject){
 LoginUser('111.111.com/users/login', user => {
  if(user.name==='kim'){
   resolve(user)
  }
  else{
   reject(Error("failed"));
  }
})
}
login().then(user=>{
 console.log(user.name);
},err=> console.error(err)}

• 예시2_async await

async function login(){
try{
 let user = await LoginUser('111.111.com/users/login');
 if(user.name==='kim){
  console.log(user.name);
 }
}catch(err){
console.log(err);
}
}

• https://satisfactoryplace.tistory.com/18
• https://hanamon.kr/javascript-%eb%9f%b0%ed%83%80%ec%9e%84-%ec%9e%91%eb%8f%99-%eb%b0%a9%ec%8b%9d-%eb%b9%84%eb%8f%99%ea%b8%b0%ec%99%80-%ec%9d%b4%eb%b2%a4%ed%8a%b8-%eb%a3%a8%ed%94%84/
• https://medium.com/@flqjsl/%EC%BD%9C%EB%B0%B1%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-56c26e1f1bc3

다시
JavaScript 런타임에선 비동기 콜백으로 블로킹을 해결한다
비동기 콜백이 뭔소린진 이제 이해가 감


블로킹은 무엇이냐
어떤 명령어를 만났을 때 모든 작업 다 때려치고 그 명령어를 실행하고 있는 상태
loop를 오만번 돌고 있으면 우린 그 시간을 블로킹이라고 한다.

내가 낸 결론
JavaScript 런타임에선 비동기 콜백으로 블로킹을 해결한다
= JavaScript는 싱글쓰레드라서 일감이 들어오면 하나만 하면 다른 일을 못하기 때문에 짬짬이 일 처리하려고 비동기 콜백을 사용한다

여기까지 자바스크립트끝 타입스크립트 다시 시작