[javascript] javascript 기본 개념(feat. nodejs)

javascript 기본 개념(feat. nodejs)

---

자바스크립트로 웹 개발 공부하면서 정리한 내용 입니다 !

오류가 있다면 댓글로 남겨주세요 :)

 

1.  VanilaJs, jQuery, Vue, React

2. Ajax, Fetch

3.nodejs

4. 모듈

5. 비동기 프로그래밍, promise

6. 웹 서버 만들기(http, express)

---

1. VanilaJs, jQuery, Vue, React

- VanilaJs

프레임워크 또는 라이브러리가 적용되지 않은 기본 자바스크립트 언어

 

- jQuery

자바스크립트에서 사용되는 함수의 이름을 짧게 바꿔주는 라이브러리

 

- Vue

라이브러리와 프레임워크의 기능을 동시에 가진 프레임워크

 

- React

컴포넌트 기반의 라이브러리

컴포넌트는 재사용 가능하기 때문에 효율적이다.

 

2. Ajax, Fetch

- Ajax

Ajax는 자바스크립트를 사용하여 비동기적으로 서버와 통신하는 기술입니다.

XMLHttpRequest 객체, fetch 함수, axios 패키지를 통해 사용할 수 있습니다.

 

- Fetch

fetch 함수를 사용하여 Ajax 통신을 할 수 있습니다.

axios 패키지(라이브러리)와 같이 외부 패키지를 설치하지 않고 사용할 수 있다. 

 

3. nodejs

nodejs는 프레임워크가 아닌 자바스크립트의 실행 환경이다.

 

4. 모듈

자바스크립트 파일 한 개를 하나의 모듈이라고 한다.

이러한 모듈이 모여서 하나의 프로그램이 된다.

 

- 직접 작성한 모듈 사용

우선 A에서 B 모듈을 가져와서 사용한다고 가정하자.

 

A에서 require('다른 모듈의 상대 경로')로 같은 디렉토리 안에 존재하는 모듈을 로드할 수 있다.

모듈을 로드하면 객체 1개를 return 하는데, 객체를 담을 변수를 선언하여 객체를 담아서 사용할 수 있다.

 

정말 여기까지가 끝일까?!

아니다.

 

B 모듈의 내부 내용을 외부로 공개해줘야 사용이 가능하다.

B 모듈의 마지막에 exports.모듈 외부로 공개할 이름 = 모듈 내부에서 이름; 코드를 작성해야한다.

외부로 공개하고 싶은 모든 것들을 모은 객체를 외부에 공개할 때는 module.exports = 모듈 내부에서 이름; 을 하면 된다.

 

- 이미 만들어진 모듈 사용(코어 모듈, 서드 파티 모듈)

코어 모듈은 node.js안에 이미 포함된 모듈로 require('모듈 이름')로 모듈을 로드할 수 있다.

서드 파티 모듈은 제3자가 만든 모듈로 npm install을 통해 설치하고, require('모듈 이름')로 모듈을 로드할 수 있다.

 

5. 비동기 프로그래밍, promise

비동기 프로그래밍은 특정 작업이 완료 되었을 때 실행할 콜백을 등록해두고 바로 다음 코드로 실행을 넘긴다.

nodejs는 비동기 실행 함수를 사용하는 것이 권장되고, 비동기 실행 방볍은 콜백과 이벤트가 있다.

 

- 콜백

특정 이벤트(요청)을 받았을 때 실행(응답)하는 것이다.

 

- 이벤트

const EventEmitter = require('events');로 모듈을 로드하고 const myEmitter = new EventEmitter();로 하나의 객체로 만들어 준 후에 사용한다.

 

on은 객체 이름.on('이벤트 이름', () => { 콜백함수; }); 로 해당 이벤트가 발생 시 실행할 콜백을 설정하고,

emit은 객체 이름.emit('이벤트 이름'); 로 이벤트를 발생시키는 것이다.

 

- promise

fetch 함수가 리턴하는 객체이고, 어떤 작업에 관한 pending, fulfilled, rejected의 3가지 상태 정보를 갖고 있다.

작업이 fulfilled가 되면 작업의 성공 결과를 갖게 되고, rejected가 되면 작업의 실패 정보도 갖게 된다.

 

6. 웹 서버 만들기(http, express)

- http 코어 모듈로 서버 만들기

const http = require('http');

const server = http.createServer((req, res) => {
  res.end('HTTP 서버가 동작 중입니다!\n');
});

server.listen(3000);

 

const http = require('http');로 http 모듈을 불러와서 http 변수에 클래스를 담아준다.

다음으로 const server = http.createServer((req, res) => { res.end(); });를 통해 콜백 함수를 등록한다.

server.listen(3000);을 통해 localhost:3000으로 서버를 요청하면 서버가 응답하도록 할 수 있다.

 

- express 서드 파티 모듈 프레임워크로 서버 만들기

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Express 서버가 동작 중입니다!');
});

app.listen(3000);

 

const express = require('express');로 express 모듈을 불러와서 express 변수에 클래스를 담아준다.

const app = express();를 통해 app 객체를 하나 만들고, app.get('/', (req, res) => { res.end(); });를 통해 콜백 함수를 등록한다.

app.listen(3000);을 통해 localhost:3000으로 서버를 요청하면 서버가 응답하도록 할 수 있다.

---

다음 포스팅에서 만나요 !