🌼 Node.js
- JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램
- V8이라는 JavaScript 엔진 위에서 동작하는 자바스크립트 런타임(환경)
- JavaScript 를 웹 브라우저에서 독립시킨 것으로 Node.js를 설치하게 되면 터미널프로그램(윈도우의 cmd, 맥의 terminal 등)에서 Node.js를 입력하여 브라우저 없이 바로 실행 가능
📕 Node.js 설치
- https://nodejs.org/en 최신버전보다 안전한 LTS로 설치
📌 npm
-
node package manager 모든 코드를 다 짤 필요 없이 npm 도구를 통해 필요한 툴을 검색해서 다운받아 사용가능
- ex. express : 웹 프레임워크 모듈 사용
-
nodejs에서는 terminal을 이용해서 npm install 모듈이름 입력하면 알아서 자동으로 다운받고 설치해줌
📙 npm 시작
- npm init (시작하겠다)
-
terminal에서 init npm 작성하면 패키지 이름, 버전 등 설정하라고 나옴 (enter로 넘어가기)
-
package.json 생성된 것 확인 가능 (npm을 이용해서 다운받았을 경우 어떤것을 다운받았는지, 프로젝트의 이름, 버전, 설명, 메인으로 실행할 것이 무엇인지 등의 설치된 모듈들의 정리해주는 메모장 같은 역할!!)
- npm 다운로드
- npm install figlet(모듈이름)
- -g : 현재 실행하고 있는 프로젝트 뿐만 아니라 내 컴퓨터 전체에 적용
- -g : 현재 실행하고 있는 프로젝트 뿐만 아니라 내 컴퓨터 전체에 적용
- package.json 추가된 것 확인 가능 (package.json : 내용을 대략적으로 확인, package-lock.json : 내용을 상세하게 확인)
- 노드 모듈에 우리가 설치한 것이 다운받아 진 것을 확인 가능
- 실행하기
- 사용법 확인해서 복사 붙여넣기
- 실행하면 바로 적용됨
- 삭제하기
- npm uninstall figlet : 사용하지 않는 모듈 삭제
📒 Express 모듈
- node.js를 이용해서 웹프레임워크(프론트엔드가 요청하면 백엔드에서 처리후 응답하는 기능)를 만드는 것
-
express 모듈 다운로드 (우측에 설치 명령어 자동 복사)
-
실행해보기
- 사용법 복사해서 붙여넣기
- terminal에 node index.js 입력
- 웹브라우저에서 localhost:3000으로 실행해보면 짜잔!
- ctrl+c : 서버 끄기 (서버 끈 후 실행하면 실행 안됨)
- ctrl + / : 주석 처리
📌 명령어 해석
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
- app.listen : 포트가 듣고있어야 서버로 접속했을 때 프로그램이 실행해서 사용 가능
- HTTP 메소드 (라우팅,콜백함수) : 요청을 할 때 요청의 목적과 종류를 알리는 수단
- get방식 : 주소창에서 데이터 전달 / post방식 : 주소창이 아닌 내부적으로 body에 담아 데이터 전달
- app.get('/', ()=>{})
- get방식으로 전달된것은 이 명령을 실행하라 , 라우팅 : 요청처리메소드 , 콜백함수
- 콜백함수 : 함수가 끝나고 실행할 함수
- 즉, 3000포트로 들어오면 이거를 실행하겠다.
📗 변수를 받아서 실행 (get방식)
- params 이용
app.get("/user/:id", (req, res) => {
const q =req.params
console.log(q.id)
res.send({'userid':q.id});
});
: 을 이용해서 요청처리 메소드를 작성하면 매개변수로 값 가져와서 출력가능
- query 이용
app.get("/user/:id", (req, res) => {
const q =req.query
console.log(q.q)
console.log(q.name)
res.json({'userid':q.name});
});
🎀 API 서버 만들기
- name에 따른 다른 울음소리 출력
- {중괄호} 안에 key값을 입력하여 사용하면 편리
app.get("/sound/:name", (req, res) => {
const {name} =req.params
if(name=="dog"){
res.json({'sound':'멍멍'})
} else if (name=="cat"){
res.json({'sound':'야옹'})
} else if (name=="pig"){
res.json({'sound':'꿀꿀'})
} else {
res.json({'sound':'알수없음'})
}
console.log(name)
});
📌 CORS 이슈
- html파일에서 서버에 요청을 했을 경우 보안상 막아(차단)
- 이를 해결하기 위한 것이 CORS
- HTML의 요청을 응답이 잘 되도록 해줌
- CORS 다운로드
- terminal에 npm i cors 작성하면 다운로드 됨
- 실행
const express = require("express");
var cors = require('cors')
const app = express();
const port = 3000;
app.use(cors())- express서버 실행하면 app이 되고 이 app을 실행하겠다.
- ()안에 조건 설정 가능, 비워둘 경우 모든 요청에 대해 허용하겠다.
📌 fetch 함수
- 원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공 (브라우저에 내장되어 있으므로 라이브러리 사용할 필요 없음)
- 첫번째 인자로 URL, 두번째 인자로 옵션 객체(http방식), Promise 타입의 객체를 반환
- 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject합니다.
fetch(url, options)
.then((response) => console.log("response:", response))
.catch((error) => console.log("error:", error));- 해당 url주소로 접속하면 json형식으로 응답받아 data를 console에 찍어 주겠다.
fetch('http://localhost:3000/')
.then((response) => response.json())
.then((data) => console.log(data));- `(백틱) 사용하면 url주소안에 javascript사용 가능
Study Log 📂