프로그래밍 공부 노트

Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임(실행기)이다. 그리고 비동기 방식으로 작성하고 콜백을 이용하는 방식으로 코드를 작성한다. 노드의 특징 이벤트 기반의 비동기 I/O 프레임워크 이다. 1. 이벤트 기반 2. 논블로킹 I/O 논블로킹이란 오래 걸리는 함수를 백그라운드로 보내서 다음 코드가 먼저 실행되게 하고 나중에 오래걸리는 함수를 실행하는것이다. 그렇다고 백그라운드로 보낸 코드들이 랜덤적으로 실행되는것은 아니며 그 안에서 또다른 규칙에 의해 실행된다. 3. 싱글스레드 싱글스레드는 한명의 직원이 여러 고객을 응대하는 방식이다. 일반적으로 한명의 직원은 한명의 고객만 응대가능하므로 나머지 고객은 기다려야하는 일이 발생한다. 멀티스레드는 여러명의 직원이 여러 고객을 나눠서 응대하는 방식이다. 하지만 노드에서는 싱글스레드를 채택했다. 대신 논블로킹 모델을 채택 하여 한명의 직원이 모든 고객의 요청사항을 받아적고 완료가되면 고객을 불러서 처리된 요청사항의 결과물을 반환한다. 정확히 말하자면 client 측에서 어떠한 이벤트가 발생하면 Event Loop(single thread)를 돌게된다. 간단한 작업의경우 이벤트에 대한 결과를 바로 반환하겠지만 복잡한 작업 예를들어 특정이벤트가 발생하면 DB에 접근해서 데이터를 가져오는것과 같은 동작을 수행할 때 이러한 작업을 Non-blocking Worker로 전달하여 비동기로 처리한다.  그리고 해당 이벤트에대한 처리가 완료되면 다시 이벤트 루프로 해당결과를 던져준다. 그러면 그때 처리된 결과를 client에게 전달한다. 그리고 Node.js의 경우 비동기 작업을 기본적으로 4개의 단위로 실행되어 처리한다. 만약 10개의 비동기 작업을 동시에 요청하면 4개 / 4개 / 2개 단위로 비동기 작업을 처리한다. 한번에 10개를 처리하는것은 아니다. 하지만 이러한 작업 처리량을 설정해서 늘려줄 수 있다.  ex) UV_THREADPOOL_SIZE=8  이와 같이 작성하면 비동기작업을 8개씩 동시

JavaScript setTimeout, setInterval, clearInterval 비교 setTimeout 메서드는 일정시간 후 함수를 실행한다. (1초후 출력) setTimeout(fn, delay) setInterval 메서드는 일정시간마다 함수를 실행한다.  (1초마다 출력) setInterval(fn, delay) 한가지 주의할점은  fn에 함수가 오지않으면 setInterval도 반복하지 않고 setTimeout과 같이 한번만 실행한다. clearInterval 메서드는 setInterval로 반복중인 작업을 중단시킨다. clearInterval(setInterval로 생성된 변수) clearInterval을 사용하기 위해서는 위의 비동기 함수들을 변수에 할당하고 해당 변수를 clearInterval의 매개변수로 대입헤 줘야한다.

async / await 을 사용하면 프로미스(Promise)를 좀 더 편리하게 사용할 수 있다. async / await 는 프로미스(Promise) 코드를 보다 간편하고 직관적으로 작성할 수 있게 해주는 API 이다.   async 함수 function 앞에 async 키워드를 작성하면 해당 함수는 프로미스(Promise)가 된다. const asynchronous = async () => { return "something" ; }; 기존의 프로미스 방식에서는 resolve 콜백함수와 reject 콜백함수를 인자로 받아오는 콜백함수를 선언했어야 했다. 하지만 async 키워드를 작성하면 프로미스(Promise)의 콜백함수를 작성하지않아도 해당 함수는 항상 프로미스를 반환하게 된다.  만약 프로미스가 아닌 값을 반환하더라도 이행된 상태의 프로미스로 값을 감싸 이행된 프로미스를 반환해야한다. const asynchronous = async () => { return "something" ; }; asynchronous (). then ( console . log ); // something 위 예시 asynchronous 함수를 호출하면 아래의 사진과 같이 이행된 프로미스 "something"이 반환된다. 이 처럼 함수 앞에 async 키워드가 작성되면 이행된(fulfilled) 프로미스가 반환된다. async 키워드를 사용하면 기존의 .then() 대신에 await을 사용할 수 있다. await await은 영어 단어 뜻 "기다리다" 와 동일하게 동작한다.즉 프로미스가 처리될 때까지 함수 실행을 기다리게 된다. 그리고 처리된 결과를 가지고 코드를 이어서 실행한다. 프로미스가 처리되는 동안에 다른 업무(다른 스크립트 실행, 이벤트 처리 등)을 할 수 있다. await은 async 함수 안에서만 동작한다. async 키워드를 사용하지 않은 함수에서 aw

javascript를 공부하다보면 javascript를 불러오고 작성할 수 있는 태그인 <script></script>를 html의 head 부분 또는 body 태그 마지막 부분에 작성하는것을 볼 수 있다.  JavaScript를 불러오는 script 태그는 head 태그 안쪽에도 작성할 수 있고, body 태그 안쪽에도 작성할 수 있는데 여러 강의나 예제들 마다 위치를 다르게 작성하여 어디에 선언하는게 좋은것인지 찾아보게 되었다. head 태그 또는 body 태그에 작성해도 되지만 코드가 효율적으로 동작하기 위해서는 defer 키워드를 사용하여 head 태그 안쪽에서  script 태그를 작성하는 것이다. < head > < script defer src = "index.js" ></ script > </ head > 아래에는 그동안 볼 수 있었던 방식의 단점들을 알아보았고 왜 defer 키워드를 사용하여 head 태그 안쪽에 작성해야하는지 알아보았다. 첫번째 : head 태그 안쪽에 script 태그를 작성하는 경우 head 태그안에 작성했을때 문제점을 보면 웹브라우저가 html 문서를 해석할 때 왼쪽에서 오른쪽으로, 위에서 아래로 순차적으로 수행되는데   head 태그에 작성한 script 태그를 만나면 그 안에 작성된 javascript 코드들을 해석하고 처리하게되는데, 이러한 작업이 끝날때까지 아래에 작성된 다른 html 코드들이 수행되지 못해 화면을 출력하는데까지 시간이 느려지게 된다. 추가적으로 js파일 내부 코드 중에 html 태그에 접근하여 태그를 조작하도록하는 함수들이 존재하는경우 head 태그 안에 script 태그를 작성하면  body 안에 작성된 태그들이 생성되기 이전에 즉, DOM트리가 완성되기 이전에 함수를 실행하게되면서 함수안에서 접근하고있는 해당 태그들에 접근하지 못하게 되고 오류가 발생하게 된다. 두번째 : body 태그 안쪽 맨아래 끝부분