한 걸음/TS & JS
이전 포스팅 크롤러 만들기에 사용했던 request 라이브러리와 비슷한 기능을 하는 axios를 서치해봤다. https://thefirstperson.tistory.com/161 [Node.js] 간단한 크롤러 만들기 (feat.네이버 영화순위) Node.js란? 자바스크립트는 스크립트 언어로, 원래는 특정한 프로그램(ex 웹브라우저) 없이는 사용할 수가 없다. Node.js는 이를 해결하기 위해 나온 것으로, 자바스크립트를 웹브라우저에서 독립시 thefirstperson.tistory.com 1. request npm 초창기부터 존재해오던 모듈 가장 많은 다운로드 수를 기록하고 있었으나, 2020년 2월부터 deprecated되어 더 이상 신규기능이 추가되거나 검토 사항이 반영되지 않음 새로운 대안을 ..
Node.js란? 자바스크립트는 스크립트 언어로, 원래는 특정한 프로그램(ex 웹브라우저) 없이는 사용할 수가 없다. Node.js는 이를 해결하기 위해 나온 것으로, 자바스크립트를 웹브라우저에서 독립시켜 터미널에서도 자바스크립트를 실행할 수 있도록 한다. (=자바스크립트를 이용해서 웹브라우저와 무관한 프로그램을 만들 수 있다) 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있다. 노드를 통해 서버를 만들거나, 서버를 실행시킬 수 있다. 노드가 나오기 전까지는 웹에서 표시되는 부분은 Javascript + 서버는 다른언어로 만들어야 했지만, 이제는 자바스크립트라는 한 가지 언어로 전체 웹페이지를 만들 수 있게 되었다. Node.js는 자바스크립트 실행 환경(Node.js는 Javascript를..
package.json 파일이란? package.json 파일은 노드(node.js)의 현재 프로젝트에 관한 정보를 저장한다. 저장 위치는 프로젝트의 루트 디렉토리이며, 사용하고 있는 패키지들의 명세나 애플리케이션 종속성, 프로젝트의 정보 등을 정의하는 파일이다. 이 파일은 새 프로젝트를 시작하는 npm init 과정에서 자동으로 생성되므로 직접 만들 필요는 없다. npm에서 의존성(dependencies)이란 해당 프로젝트가 돌아가기 위해 필요한 npm 패키지들을 의미한다. 그렇다면 package-lock.json 파일은 무엇인가? package.json 파일에서는 어떤 모듈의 특정 버전을 사용하겠다고 정확히 명시할 수도 있지만, 여러가지 기호(>, =, ^, ~)를 사용하여 범위를 명시해주는 것 또한..
자바스크립트의 비동기적 작업 수행을 돕는 Event Loop 이벤트 루프가 무엇인지 알아보기에 앞서 알아볼 것. 우선 자바스크립트의 엔진은 Memory Heap과 Call Stack으로 이루어져 있다. Memory Heap(메모리힙) 변수, 함수 저장, 호출 등의 작업이 발생하는 공간. Memory heap이라는 창고 안에 박스들(변수, 함수 등)이 쌓여있는 것으로 이해할 수 있다. Call Stack(콜 스택) 메모리 상에 존재하며, 코드가 실행될 때 읽어내려가며 수행할 작업들을 쌓아나가는 공간이다. 위에서 살펴본 메모리힙에서 작업에 필요한 것들을 찾아 수행한다. 선입후출의 룰을 따른다. 자바스크립트는 하나의 call stack만을 가지는 단일 스레드(single thread) 프로그래밍 언어다(즉, ..
자바스크립트의 IIFE란, 정의와 동시에 즉시 실행되는 함수를 의미한다. 예제) 'Secrets'라는 Array를 선언하고, 이 앱을 다른 창에서 열어 그 Array를 호출해본다. 조회도 가능하고, 값을 새로 끼워넣는 것도 가능하다. 물론 다른 사용자가 나의 variable에 접근하거나 영향을 미치는 걸 원치 않을 때도 있다. 이럴 때 간단하게 비밀로 만드는 방법이 있다. IIFE(Immediately-Invoked Function Expressions)- 자기자신을 부르는 함수- 에 넣는 거다. 아래와 같이 괄호( ) 안에 똑같이 선언해주면 된다. Secrets을 호출했을 때, 정의되지 않았다는 오류가 발생하는 것을 확인할 수 있다. 이 처럼 ( )안에 코드를 넣으면 외부의 다른 유저가 수정할 수 없게..
-Expression : value를 return하는 무언가. 예를 들어 5+1 은 expression이다(6이라는 값을 리턴하기 때문) 아래 예시에서 add(1, 2)는 expression이다. 아래와 같이 어떤 함수가 만약 undefined를 출력한다 하더라도, 마찬가지로 expression이다. undefined 또한 value이기 때문이다. *복잡한 코드를 읽을 때 기억해야 할 것 : 함수가 return하는 것은 무엇인가? -Statement : 명령/지시. if, else, else if, for, while 등이 포함된다. 위 예시는 아무 것도 출력하지 않는다. true일 때 무언가를 실행하라는 '명령, 지시'이기 때문이다. value가 존재하지 않기 때문에, 아래와 같이 변수로 저장할 수도 ..
한 줄 정의 : 너의 variable이 존재하는가, 그렇지 않은가. variable은 큰 곳에서 작은 곳으로는 접근할 수 있다. 작은 곳에서 큰 곳으로는 접근할 수 없다. 아래 예시를 살펴보자. 괄호 안에서 선언한 변수 a는 그 안에서만 유효하다. 위 예시와 같이 괄호 바깥에서 a를 호출하려고 했을 경우 에러를 출력한다. 변수 b를 전역변수로 선언한 경우, 괄호 안에서도 호출할 수 있다. 그렇다면 변수를 모든 곳에서 사용할 수 있으면 편리하지 않은가? 라고 생각할 수 있다. 변수를 모든 곳에서 사용할 수 있게 하는 걸 지양해야 하는 이유가 있다. (왜 var 대신 const, let을 사용해야 하는가?) 1. 코드에 일정 수준의 보안을 제공한다. 컴퓨터 보안의 일반적인 원칙은 ‘한 번 실행할 때 사용자는..
Typeof : 내가 사용하는 type이 무엇인지 알려주는 연산자. 거의 모든 원시자료형에서 작동한다. Number, boolean, string, undefined 등... 하지만, 아래 캡쳐와 같이 '배열(Array)[]'과 '객체(Object){}'를 모두 object로 출력하는 버그가 존재한다. 이는 typeof와 유사한 instanceof를 이용해서 해결할 수 있는데, 차이점이 있다면 instanceof는 원시자료형(string, boolean, number...)에서 작동하지 않는다는 것이다(어레이나 오브젝트 대신, primitive 자료형을 넣을 시에는 false를 반환함).
형 변환 Type conversion : 자바스크립트가 강제적으로 값을 변환시키는 것. 강제적 형변환은 코드 작성에 있어 피하는 것이 좋다. 아래 예시를 통해 플러스 연산자가 어떻게 형 변환을 일으키는지 살펴보자. 플러스 연산자는 '수학적 연산', '문자열 연결'의 2가지 기능을 수행한다. 위 예시 1, 2를 보면 +연산자로 인해 true는 1로, false는 0으로 형변환된 것을 확인할 수 있다(수학적 연산). 예시 3의 경우에는 "true"가 따옴표 안에 들어 있기 때문에 불리언이 아닌 문자열로 인식되어 2true라는 값을 출력하고 있다(문자열 연결). 예시 4의 경우, JavaScript는 코드를 왼쪽에서 오른쪽으로 읽어나가기 때문에, 1+2를 먼저 수학적으로 연산하고(3), 다음으로 true라는 ..