[JavaScript] #11. node.js(npm, 모듈, express, ejs)

Jihye·2024년 2월 4일

JavaScript

목록 보기
13/14
post-thumbnail

node.js란

구글 크롬의 자바스크립트 엔진, v8 Engine에 기반해 만들어진 Javascript 런타임

  • 이벤트 기반, 비동기 I/O 모델을 사용해 가볍고 효율적이다. 따라서 스타트업, 빠른 앱 개발등에 적합한 언어
  • 서버를 구성하는npm 패키지는 세계에서 가장 큰 오픈 소스 라이브러리

🤔HTML은 자바스크립트가 조작한다면 자바스크립트 해석은 누가할까요?

바로 브라우저입니다. 브라우저에는 자바스크립트 해석 엔진이 있습니다. (브라우저의 종류에 따라 쓰는 엔진이 다릅니다.) 따라서 기존에는 자바스크립트를 인터넷 브라우저 위에서만 실행할 수 있었습니다.
그러나 2008년에 구글이 V8 엔진을 사용하여 크롬을 출시했습니다. V8 엔진은 엄청 빨랐고, 오픈 소스로 코드도 공개되었습니다. V8 엔진이 너무 뛰어나서 기능을 좀 더 더해서 V8 엔진 기반에 노드 프로젝트를 시작했고, Node.js(V8)이 등장했습니다. Node.js는 브라우저 내에서 말고도 다른 환경에서 자바스크립트를 사용할 수 있게 해줍니다.

따라서 Node.js는 JavaScript 실행 환경(=런타임)입니다.

(출처 : https://velog.io/@remon/%EA%B0%9C%EB%B0%9C-%EA%B8%B0%EB%B3%B8-%EC%A7%80%EC%8B%9D-Node.js%EB%9E%80)

런타임

프로그래밍 언어가 구동되는 환경

  • JavaScript의 런타임 환경은 웹 브라우저에만 존재 했었다.
  • 이런 JavaScript를 Sever level에서 사용하기 위해 나온 것이 node.js(백엔드 영역)
  • 이는 웹부라우저 없이 실행 가능하다는 특징을 가진다.

REPL(Read Evaluate Print Loop)

node.js를 실행가능한 콘솔
1. Node.js 홈페이지에서 설치 후
2.Windows 검색창에 cmd를 검색해서 명령 프롬프트를 열어봅시다.
3. 설치가 제대로 됐는지 확인해보려면 명령 프롬프트에 node -v 를 입력 후 버전이 제대로 나오는지 확인해보면 됩니다.
4. 설치 확인이 끝났으면 node를 실행시키기 위해 node 입력한 후
5. console.log('헬로') 를 적어서 자바스크립트 코드가 작동하는지 확인해봅시다.

JS코드 console.log 작동


npm

node 패키지 관리 툴
JavaScript로 개발된 각종 모듈의 설치, 업데이트, 구성, 제거 과정을 자동화하여 관리해주는 기능

package.json

  • 패키지들이 서로 의존되어 있어, 문제가 발생할 수 있는데 이를 관리하기 위해 필요한 것
  • 프로젝트에 대한 정보와 사용중인 패키지 이름 및 버전 정보가 담겨 있는 파일
  • package.json 자동으로 작성된다.
    name 패키지 이름
    version패키지의 버전
    main자바스크립트 실행 파일 진입점
    description패키지에 대한 설명
    scriptsnpm run을 이용해 정해놓는 스크립트 명령어
    license해당 패키지의 라이센스

npm 설치 및 사용

npm init
프로젝트를 시작할 때 사용하는 명령어
package.json에 기록될 내용을 문답식으로 입력한다.

git bash에서 실행

그 결과 package.json이 자동으로 작성된다.

npm init -y
package.json이 생성될 때 기본 값으로 전부 생성된다.
npm install 패키지 이름
프로젝트에서 사용할 패키지를 설치하는 명령어
설치된 패키지의 이름과 정보는 package.json의 dependencies에 입력된다.

node.js의 특징

1. 자바스크립트 언어 사용

2. Single Thread

JavaScript는 한번에 하나의 Thread로 단 1개의 동시성만을 다룰 수 있는 언어다.
따라서 오류 처리가 상당히 중요하다.
process
-실행중인 프로그램
-운영체제에서 할당하는 작업의 단위
Thread
-프로세스 내에서 실행되는 흐름의 단위
-하나의 프로세스에서 n개의 스레드가 존재하며 동시에 작동할 수 있다.

3. Non-blocking I/O

Node.js는 기본적으로 모든 Input/Output 메서드를 비동기 방식으로 처리하여 작동한다.
동기(Synchronous)
- 데이터의 요청과 결과가 한 자리에서 일어나는 것
- 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어진다.
=> 따라서 직관적인 설계 가능하다는 장점이 있다.
- 한 요청에 서버의 응답이 이루어질 때까지 계속 대기해야 한다.
비동기(Asynchronous)
- 동시에 일어나지 않는 것
- 요청한 후 응답을 기다리지 않고 다른 활동을 한다.
- JS는 기본적으로 비동기

4. Event Driven

이벤트가 발생할 때 미리 지정해둔 작업을 수행(ex. 클릭, 네트워크 요청, 타이머 등)

Event Listener 이벤트 등록 함수
callback () 이벤트가 발생했을 때 실행되는 함수

call stack LIFO(last in first out)방식

Event Loop


모듈

특정한 기능을 하는 함수나 변수들의 집합 (재사용 가능한 코드의 조각)

모듈의 장점

  • 코드 추상화 : 복잡한 시스템이나 객체를 단순화하여 핵심적인 부분에 집중하는 프로그래밍 원칙
  • 코드 갭슐화 : 코드의 무분별한 변경을 막기 위해 모듈 내부에 코드를 숨길 수 있다.
  • 코드 재사용 : 동일한 모듈을 계속 재사용 가능
  • 의존성 관리 : package.json으로 설치된 package등 모듈이 다른 환경에서 알아서 설치되어 개발 환경을 갖추기 쉽다.

모듈 만들기

  1. export
#1. 변수, 클래스 함수 등의 앞에 export 키워드 붙이기
export const variable = '변수 내보내기';
export function variFunc(){
  return 1+1;
}
--- 
#2. 객체 리터럴{ }로 묶어 한번에 export
let a= 'hi';
let b = 'no';
let c= 'yes';
export{a,b,c};
---
#3. 단한의 값 export
function variFunc(){
  return 1+1;
}
export default connect;

2.모듈 불러오기

const { }로 가져올 때는 구조분해해 가져오기에 이름이 export 할 때와 동일해야 한다.

Express

Express는 웹 및 모바일 애플리케이션을 위한 일련으 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크이다.

Node.js와 Express는 무슨 관계일까?

Node.js는 Chrome의 V8엔진을 이용하여 JavaScript가 브라우저가 아닌 서버를 구축하고 서버에서 JavaScript가 작동되도록 해주는 런타임 환경(플랫폼)이다.
(출처 : https://despiteallthat.tistory.com/139)

왜 Express인가?

Express는 프레임워크이므로 웹 애플리케이션을 만들기 위한 각종 라이브러리와 미들웨어 등이 내장되어 있어 개발에 편하고, 수많은 개발자들에게 개발 규칙을 강제하여 코드 및 구조의 통일성을 향상할 수 있다.

Express 설치

npm install express

  • node_modules 파일 생성 및 package.json 파일에 의존성 추가
  • 주의 사항
    express는 용량이 매우 크므로 git에 올리가지 않도록 gitignore 처리 해준다.

Express 사용

express() express 모듈이 export하는 최상위 함수로, express application을 만든다.
app 객체 express()함수를 호출함으로써 만들어진 express application

ejs 템플릿

  • 템플릿 엔진 : 문법과 설정에 따라 파일을 html 형식으로 변환시키는 모듈
  • ejs : Embedded JavaScript의 약자로, 자바스크립트가 내장되어 있는 html 파일, 확장자는 .ejs

ejs 설치

npm install ejs

ejs 템플릿 적용

  1. ejs 템플릿 설정
  2. ejs 템플릿 렌더링(page 만들기)
  3. ejs 템플릿 문법
  • <% %> : 안에 JavaScript 코드가 들어가야 하고, 줄바꿈을 할 경우에는 새로운 <% %>를 이용해야 한다.
  • <%= %> : 값을 템플릿에 출력할 때 사용한다.
  • <%- include('view의 상대주소') %> : 다른 view 파일을 불러올 때 사용

미들웨어 - static

🤔미들웨어란?

  • 이미지, css 파일 및 JS파일과 같은 정적 파일 제공
  • Express에 있는 static 메소드를 이용해 미들웨어로 로드 
app.use('/static',express.static(__dirname + '/static'));

= 정적 파일 로드 코드

profile
Jihye
이전 포스트

[JavaScript] #10. 비동기처리(promise)

다음 포스트

[JavaScript] #8. JQuery

0개의 댓글