32일차 - node.js

 

 

 

리액트js : 프론트엔드 라이브러리

노드js : 리액트 어플리케이션을 동작시키는 환경

 

노드js 에서 주로 사용하는 문법

ECMAScript

ECMAScript(ES)는 범용 목적의 스크립트 언어 표준을 뜻한다.

쉽게 말해, ‘스크립트 언어를 사용할 때는 이렇게 사용하세요’라는 것을 제정해둔 명세이다.

 

ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공한다.

그리고 자바스크립트(JavaScript)는 ECMAScript 명세를 준수하는 스크립트 언어이다.

 

 

ECMAScript 버전

ECMAScript는 자바스크립트의 표준을 제정하기 위해 1997년 처음 등장했으며, 그 후로 꾸준히 새로운 버전의 ECMAScript 명세가 발표되었다.

초기에는 ES1, ES2, ES3와 같이 숫자를 올려가며 버전을 표기했지만, 2015년 등장한 여섯 번째 버전부터는 발표한 연도를 표기하는 방식을 사용했다.

따라서 ES6의 공식 버전명은 ES2015이나, ES6가 자연스럽게 통용되고 있다.

ES5와 ES6 사이의 시간 간격이 길고, ES6에서 추가된 문법이 많아 ES6 이후를 ‘최신 자바스크립트’로 취급하는 경향이 있다.

 

 

호환성 문제와 해결책

개발자라면 누구나 자유롭게 새로운 ECMAScript 명세에 따라 코드를 작성할 수 있지만, 다양한 브라우저 종류로 발생하는 호환성 문제를 피해갈 수는 없다.

이에 대한 해결책으로 개발자는 언어의 기능은 유지하되 코드 문법만 변환해주는 기능을 가진 ‘트랜스파일러’를 이용해 호환성 문제에 대응할 수 있다.

 

 

 

화살표 함수

화살표 함수는 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이다.

여기에는 다음과 같은 특징이 있다.

• function 표현식에 비해 구문이 짧다.
• this나 super등의 객체를 바인딩하지 않는다.
• 기본적으로 익명 함수이다. 따라서 메소드가 아닌 개별 함수로 더 적합하다.
• (제한적으로)return 키워드의 생략이 가능하다.

 

자바의 람다식과 비슷하다.

 

 

화살표 함수의 특징

*호이스팅(함수 선언보다 먼저 호출)이 불가하다.

 

 

*반환값만 존재하는 경우, 중괄호와 return 키워드를 생략할 수 있다.

= > 반환값 외에 구문이 존재하는 경우에는 다시 중괄호와 return 필요해진다.

 

 

*매개변수가 하나인 경우에는 소괄호 생략 가능하다. 없거나 다수면 생략 불가

 

 

 

디폴트 파라미터

디폴트 파라미터(default parameter)는 매개변수에 인자가 전달되지 않았을 때에 사용할 수 있는 값을 미리 정의해 두는 것을 뜻한다.

=  >  위 함수에 값을 전달하면 매개변수의 값이 변경된다.

 

 

구조 분해 할당 & 객체 초기화

구조 분해라고도 한다.

구조 분해란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있는 자바스크립트 표현식이다.

 

 

=  >  출력된 변수 pascucci와 coffeebean은 객체 cafe와 별개이다.

 

 

배열의 구조 분해

배열을 구조 분해하는 기본적인 방법은 다음과 같다.

 

 

선언과 초기화 분리

변수의 선언이 분리 되어도 구조 분해를 통해 값을 할당할 수 있다.

 

 

구조 분해 시 디폴트 선언

분해한 값이 undefined인 경우를 대비해 디폴트 값을 지정할 수도 있다.

=  >  디폴트 값이 있어도, 분해할 값이 있다면 디폴트 값은 무시된다.

 

 

객체의 구조 분해

객체의 원래 속성명(키)과는 다른 이름의 변수에 할당할 수도 있다.

=  >  키가 startbucks인 밸류를 복사하고, 거기에 sb라고 이름붙여 사용한다.

 

 

 

객체 구조 분해 시 디폴트선언

객체 구조 분해 시에도 디폴트 선언 가능하다.

 

 

 

향상된 객체 리터럴

향상된 객체 리터럴이란 기존에 사용하던 객체 정의 방식을 개선한 문법이다.

=  >  두 코드는 동일한 동작을 수행하는 코드이다.

 

 

 

promise

promise 객체는 비동기 작업에 대한 약속이다.

비동기 작업 이후 발생할 완료 또는 실패, 그리고 그 결과 값을 나타낸다.

 

비동기 작업이란?

언제 끝날지 알 수 없는 작업이다.

작업의 상태가 시작, 진행중, 완료 인 것과 무관하게 프로그램은 계속해서 실행되어야 한다.

 

 

프로미스 생성 방법

다음과 같이 비동기 작업을 수행하는 함수가 있다.

이를 Promise 객체(약속)를 생성하면서 인자로 전달한다.

 

Promise 객체에 전달된 함수는 두 가지 콜백 함수를 인자로 받는다.

하나는 작업 성공 시 실행되는 함수(resolve), 하나는 실패 시 함수(reject).

 

여기에 변수를 선언하여 프로미스 생성 완료

 

 

성공과 실패 여부 확인

성공 시 콜백 함수와 실패 시 콜백 함수는 비동기 작업으로부터 값을 반환할 수 있다.

 

 

비동기 작업 완료 후(성공 또는 실패) 이를 처리하기 위해 체이닝(chaning)을 이용하여 해결한다.

성공했을 때는 .then을 실패했을 때는 .catch를 실행한다.

 

 

 

클래스

클래스란 오브젝트를 생성하기 위한 설계도이다.

기존 자바스크립트의 프로토타입을 대체할 수 있으며, 클래스를 통해 정의한 오브젝트는 Array, Date 등 내 장 객체와 동일하게 취급할 수 있다.

 

자바 스크립트에서 객체를 생성하면, 프로토타입을 자동으로 상속한다.

=  >  클래스 선언문 기본형

 

 

클래스와 메소드

클래스 내부에 정의된 함수는, 객체의 멤버함수와 마찬가지로 메소드라 부른다.

new 연산자에 의해 실제 사용 가능한 객체를 생성하며, 생성된 객체를 통해 메소드를 호출할 수 있다.

 

=  >  메소드 정의 시에는 function 키워드를 생략할 수 있다. 아니 꼭 해야만 한다.

 

클래스를 선언할 때는, 이름의 첫 글자를 대문자로 작성한다.

이는 문법적으로 필수 사항은 아니지만, 개발 시 편의를 고려한 관례이다.

=  >  프레임워크에 따라서 이는 필수 사항이 되기도 한다.

 

 

this = 멀티플레이어

웹문서 조작을 위해 작성된 자바스크립트에서, 전역 키워드 this는 window 객체를 의미한다.

이벤트 발생 시에 this는 이벤트가 발생한 DOM을 의미한다.

그러나 메소드 내에서 this는 클래스 오브젝트를 의미한다.

 

 

constructor

클래스에는 ‘생성자’ 함수가 존재한다.

new 연산자를 통한 클래스 오브젝트 생성 시 최초로 동작하는 메소드, constructor라는 이름을 사용한다.

 

=  >  주로 생성한 객체의 멤버 변수를 초기화하는 역할을 한다.

 

 

static

static 선언을 해주면 객체 생성 전부터 메소드를 사용할 수 있다.

 

 

클래스의 상속

상속은 선언을 마친 클래스로부터 메소드와 속성을 물려받는 것을 의미한다.

상속 시에는 기존 클래스로부터 extends 키워드를 통해 상속을 받는다.

자바스크립트에서 set이라는 키워드로 지정할 수 있고, set을 이용하면 인자를 메소드에 대입할 수 있다.

 

 

 

빌트인 오브젝트 상속

내장 객체를 상속받아 기능을 확장할 수 있다.

 

 

super

super 는 상속을 해 준 부모클래스를 의미하는 키워드이다.

super 키워드를 호출하여 부모 클래스의 메소드를 호출할 수 있다.

 

메소드 오버라이딩

물려받은 메소드를 자식 클래스가 재정의할 수 있다.

 

 

 

 

---

 

 

 

Node.js

Node.js(이하 노드)는 V8 자바스크립트 엔진으로 빌드된 이벤트 기반 자바스크립트 런타임(runtime)이다.

노드는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드)개발에 사용할 수 있는 소프트웨어플랫폼이다.

 

 

브라우저와의 비교

높은 확률로, 노드를 만나기 전의 학습자에게 자바스크립트란 ‘브라우저를 위한 프로그래밍 언어’이다.

 

노드 홈페이지 주소 = >  https://nodejs.org/ko/

노드 사용을 위해서는 컴퓨터에 노드 환경이 설치 되어 있어야 한다.

 

 

 

REPL

REPL은 Read, Eval, Print, Loop라는 의미로, 대화형 테스트 콘솔을 제공한다.

터미널에서 node 명령어를 실행하여 REPL을 실행시킬 수 있다.

 

대화형 테스트 콘솔이란?

=  >  자바스크립트 코드를 한 줄씩 ‘대화하듯’ 실행시킬 수 있다.

 

 

모듈화하기

모듈화란, 코드를 기능 또는 규모에 따라 분할하는 것을 의미한다.

모듈이란 하나의 자바스크립트 파일을 의미한다.

노드에서는 모듈 내보내기/불러오기를 위해 다음 두 가지를 사용할 수 있다.

 

 

•require(모듈) : 모듈에서 내보낸(exports) 대상을 반환한다. = > import

•module.exports : 현재 모듈에서 내보낼 대상을 참조한다.

 

향상된 객체 리터럴을 이용하여 모듈 내보내기, 불러오기 모두 가능하다.

두 코드는 서로 다른 파일에 작성되었지만, 모듈화를 통하여 이용할 수 있다.

 

node기반 자바스크립트를 실행할때는 터미널에서 한다.

터미널은 Visual Studio Code 상단에서 실행 가능하다.

터미널은 명령프롬프트같은 기능을 수행한다.

node 뒤에 파일명과 확장자를 쓰고 실행한다.

 

node 어플리케이션

노드를 이용하면 다양한 자바스크립트 어플리케이션을 개발할 수 있다.

그 중에서도 노드는 서버를 개발하는 데 가장 많이 사용된다.

 

서버는 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램을 말한다.

클라이언트란 서버가 제공하는 정보나 서비스를 제공받는 주체로, 정보나 서비스가 필요한 클라이언트는 서버에게 요청을 보낸다.

 

 

로컬호스트와 포트번호

로컬호스트(localhost)란, 컴퓨터 네트워크에서 ‘자신의 컴퓨터’를 의미하는 호스트명이다.

로컬호스트의 IP 주소는 127.0.0.1 이다.

 

포트번호(port number)란, 로컬호스트 내에서 작동하는 어플리케이션을 식별하기 위해 사용하는 숫자이다. 네트워크관점에서 포트번호는 컴퓨터간 상호통신을 위해 프로토콜에서 이용하는 가상의 연결단을 의미한다.

 

 

http 모듈

http(Hyper Text Transfer Protocol)는 인터넷에서 데이터를 주고 받을 수 있는 프로토콜이며,

노드에는 그와 관련된 기능을 제공하는 http 모듈이 내장되어 있다.

 

http.createServer 메소드는 ‘http 서버 오브젝트’를 반환하여 서버를 운용할 수 있게 해주는 메소드이다.

http 서버 오브젝트는 listen 메소드를 호출하여 서버가 시스템의 포트를 수신하도록 한다.

 

 

NPM & express

npm (Node Package Manager)

npm는 노드 기반의 자바스크립트 프로그램(코드)을 등록할 수 있는 공개 커뮤니티이다.

누구나 npm으로부터 코드를 내려받아 자신의 코드에 반영할 수 있다.

 

 

package.json

프로젝트 폴더에 설치된 모듈을 비롯한 프로젝트 관련 사항들을 관리하기 위해 노드 프로젝트 폴더 안에는 package.json 이라는 파일을 생성할 수 있다.

디렉토리 내에서 다음 명령어를 수행해 package.json을 생성한다.

package.json은 기록파일이다. 추후 데이터 손실등으로 인한 복구할 때 중요한 역할을 한다.

=  >  이 폴더를 노드 프로젝트 폴더로써 초기화할 것이다. 라는 명령이다.

 

=  >  모든 요소를 기본값으로 설정하여 초기화한다.

 

 

모듈 설치하기

package.json이 추가된 이후에는, npm에 존재하는 모듈을 내려받아 프로젝트 폴더에 추가할 수 있다.

 

express 모듈 설치 후 이러한 파일들이 생성된다.

 

package-lock.json은 package.json으로는 부족한 정보를 도와주는 파일이다.

node_modules는 실제로 사용되는 폴더이다. 외부모듈을 설치하는 순간 나타난다.

 

모듈 폴더가 없으면 서버는 실행되지 않는다.

 

터미널에 dir을 입력하면 현재 폴더의 파일목록을 볼 수 있다.

 

해당 명령어를 입력하면 모드폴더를 다시 설치할 수 있다.

 

 

 

express

express 는 노드 기반의 웹 프레임워크로써,

노드가 자체적으로 지원하지 않은 웹 관련 기능을 제공하여 빠른 웹 개발을 가능하게 해 준다.

 

 

express가 제공하는 메커니즘

• HTTP 통신 요청에 대한 핸들러를 만든다. 
• 템플릿에 데이터를 넣어 응답(response)을 만들기 위해 view의 렌더링 엔진과 결합(integrate)한다.
• 접속을 위한 포트나 응답 렌더링을 위한 템플릿 위치같은 공통 웹 어플리케이션 세팅을 한다. 
• 핸들링 파이프라인(reqest handling pipeline) 중 필요한 곳에 추가적인 미들웨어 처리 요청을 추가한다.

 

First express app

4000번대 포트 서버가 생성되었다.

반환받을 데이터가 없어서 Cannot GET이 출력된다.

 

 

nodemon & 요청 처리하기

nodemon

nodemon은 코드가 수정될 때마다 실시간으로 변경 사항을 반영해 서버를 재시작해주는 기능을 추가해주는 모듈이다.

 

자동 재시작을 실행해주는 nodemon은 개발 단계에서만 주로 사용하는 모듈이다.

위 명령어에서 추가한 옵션은 ‘개발용 모듈’임을 나타내는 옵션이다.

 

nodemon을 사용하기 위해서는 몇가지 절차를 거쳐야 한다.

package.json의 scripts를 다음과 같이 수정해야 한다.

js파일은 서버파일이름을 쓴다.

그 후 터미널에서 

해당 명령어를 사용하면 nodemon이 실행된다.

 

 

get & post

GET : 서버에 요청을 보내어 응답을 받아낸다.

서버로부터 정보를 ‘가져오겠다’는 성격의 요청이다.

url에 매개변수를 추가하여 요청한다.

 

url에 ?가 있는 경우 get을 통해 데이터를 처리한다는 의미이다.

 

 

 

POST : 서버에 요청을 보내어 작업을 수행한다.

서버에 있는 데이터를 추가/수정/삭제 한 후에 응답을 받아낸다.

서버의 정보를 ‘조작하겠다’는 성격의 요청이다. url에 매개변수를 추가하지 않는다.

 

 

 

get 요청 시 데이터 처리하기

클라이언트 요청을 통해 전달된 데이터를 읽어들일 수 있다.

 

=  >  query 속성에는 사용자가 보낸 질의(데이터)가 담겨 있다.

 

 

 

 

내용 정리

•ECMAScript(ES)는 범용 목적의 스크립트 언어 표준을 뜻한다.
•자바스크립트는 ES 표준을 따른다.
•ES2015 버전 이후로 다양한 문법적 기능이 보완되었다.
•기능 추가로 인해 브라우저의 호환성 문제가 발생할 수 있다. 이 경우 트랜스파일러를 이용해 문제를 해결할 수 있다.

•화살표 함수는 함수 표현식의 한 형태이다.
•구문이 짧고 간결하여 개별 함수를 선언해 재사용하기 용이하다.
•화살표 함수는 호이스팅 불가하다.
•경우에 따라 매개변수 소괄호, 몸체의 중괄호, return을 생략할 수 있다.
•디폴트 파라미터는 매개변수에 인자가 전달되지 않았을 때에 사용할 수 있는 값을 미리 정의해 두는 것을 뜻한다.

•구조 분해 할당을 사용하면 객체나 배열의 멤버를 변수로 선언할 수 있다.
•여느 변수와 마찬가지로 선언과 초기화를 분리할 수 있다.
•구조 분해 시 디폴트 값을 선언하여 undefined 값에 대비할 수 있다.
•객체 초기화 시 변수의 이름만 기입하여 키와 밸류를 생성할 수 있다.

•프로미스는 비동기 작업에 대한 약속이다.
•비동기 작업이란 프로그램 내 다른 작업들과 동기가 일치하지 않는 동작을 의미한다.
•프로미스 객체는 비동기 작업을 전달받아 처리한다.
•프로미스 객체는 성공 시 콜백함수와 실패 시 콜백함수를 각각 호출할 수 있다.

•클래스는 객체를 만드는 설계도이다.
•클래스 내부에서 this는 생성된 객체를 의미하는 키워드이다.
•constructor 함수는 생성자 함수로써, 생성 시에 호출되는 함수이다.
•static 키워드는 메소드를 객체 생성 전부터 사용할 수 있도록 만든다.
•상속은 기존 클래스로부터 신규 클래스가 자원을 물려받는 것이다.
•상속받은 메소드를 재정의할 수 있다. 이를 오버라이딩이라 한다.


•노드는 자바스크립트 런타임이다.
•노드는 네트워크 애플리케이션 개발을 위한 소프트웨어 플랫폼이다.
•설치해야 사용할 수 있다(브라우저 자바스크립트 환경과는 다름).
•node 명령어를 사용해 파일을 실행한다.

•서버란 데이터를 제공하는 호스트 컴퓨터 또는 프로그램이다.
•클라이언트란 데이터를 제공받는 사용자이다.
•노드는 http 모듈을 내장하고 있으며, 이는 인터넷을 통한 통신을 위함이다.
•http 모듈을 사용해 서버 프로그램을 생성할 수 있다.
•서버 프로그램은 사용자의 요청을 들을(수신할) 수 있도록 listen 메소드를 호출하여 수신 상태를 유지한다.