[9월 1주차] NodeJs

환경설정

다운로드 | Node.js

• LTS로 설치. https://nodejs.org/dist/v18.17.1/node-v18.17.1-x64.msi
• NodeJs는 자바스크립트 ECMAScript6(ES6)를 기반으로 하는 서버 사이드 개발 소프트웨어 플랫폼이다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하다.
• npm: 자바스크립트 프로그래밍 언어를 위한 패키지 관리자로 NodeJs의 기본 패키지 관리자이다.
  • npm install [패키지] 명령어로 패키지를 설치할 수 있다. 기본적으로 해당 디렉토리에 로컬로 node_modules 디렉토리에 설치되며, package.json에 dependencies로 자동 추가된다.
• yarn: Node.js 자바스크립트 런타임 환경을 위해 페이스북이 2016년 개발한 소프트웨어 패키지 시스템
  • yarn add [패키지] 명령어로 패키지를 설치할 수 있다. 마찬가지로 node_modules 디렉토리에 설치하며, package.json에 dependencies로 자동 추가된다.

변수

var, let, const

변수	재선언	값 변경
var	가능	가능
let	불가능	가능
const	불가능	불가능

템플릿 문자열

• 형식 지정자와 같이 문자열과 표현식을 병기할 수 있는 문장으로, 따옴표 대신 백틱(`)을 사용한다.

// `문자열 ${표현식}`
var a = "재선언 가능";
let b = "변수 값 변경 가능";
const c = 20;
console.log(`var a: ${a}, let b: ${b}, const c:${c}`);

객체

• ES5에서 객체는 {중괄호}로 생성 가능
• ES6는 new Object()로도 객체 생성 가능
  • 객체.필드 로 필드에 의한 접근
  • 객체["키"]로 키에 의한 접근

var es5 = {
   name: "kim1",
   point: 100
}

let es6 = new Object();
es6.name = "kim2";
es6.point = 100;

console.log(`es5: ${es5.name}, ${es5.point} / es6: ${es6.name}, ${es6.point}`); // 필드에 의한 접근
console.log(`es6: ${es6['name']}`); // 키에 의한 접근

모듈

// calc.js
module.exports.add = add;

// js03.js
var calc = require("./calc");
console.log(`더하기: ${calc.add(3, 5)}`);

화살표 함수(Arrow Function)

• 자바의 람다식과 같다.
• 매개변수가 하나인 경우 매개변수를 감싸는 괄호를 생략할 수 있다.
• 매개변수가 없는 경우 괄호를 비워놓되, 생략은 할 수 없다.
• 반환문만 있는 경우 return과 중괄호를 생략 가능하다.

// 매개변수가 없는 경우 var 함수명 = () => {}
// 매개변수가 하나인 경우 var 함수명 = x => {}
// 매개변수가 여러개인 경우 var 함수명 = (x, y) => {}
// 반환이 있는 경우 var 함수명 = x => {return 반환;}
// 반환만 있는 경우 생략 가능 var 함수명 = x => {반환;}

/*
var 함수명 = x =>{
   명령문1;
   명령문2;
};
*/

var fnc1 = () => console.log("노 매개변수, 노 반환");
var fnc2 = (a, b) => console.log(`매개변수 ${a}와 ${b}의 합은 ${a+b}`);
var fnc3 = () => 3*3; // return, 중괄호 생략도 가능하다.
var fnc4 = (a, b) => {return a*b;}

fnc1();
fnc2(1, 2);
console.log(fnc3());
console.log(fnc4(3, 3))

var arr = [1, 2, 3, 4];

// 배열을 순회하는 함수 map
var arr_power = arr.map(value => value*value);
console.log(arr_power);

비구조화 할당(destructuring assignment)

• 비구조화(구조 분해) 할당: 객체 또는 배열의 속성 또는 값을 해체하여 그 값을 변수에 각각 할당하여 사용하는 표현식.

배열의 비구조화 할당

const person = ["kim", "lee", "park", "choi"];
let [k1, k2, k3, k4] = person;

const member = {
   id: "kim",
   age: 10,
   addr: "마리오아울렛",
   tel: "010-1111-2222"
}

// 기본값 설정
const [d, e="spring", f = "NodeJS"] = ["JAVA", "C#"];
console.log(`${d} ${e} ${f}`); // JAVA C# NodeJS

// 요소값 무시
const [g, , h, i] = ["G", "E", "H", "I"];
console.log(`${g} ${h} ${i}`); // G H I

// 일부 할당
let [q, w, ... rest] = [1, 2, 3, 4, 5, 6];
console.log(`${q} ${w}`); // 1 2
console.log(`${rest}`); // 3,4,5,6

객체의 비구조화 할당

// 키 할당
const member = {
   id: "kim",
   age: 10,
   addr: "마리오아울렛",
   tel: "010-1111-2222"
}
let {id, age, addr, tel} = member; // 각 키에 해당하는 값이 키 이름의 변수로 할당됨

// 지정 할당
let {o1, o2, o3, o4} = {o1: member.age, o2:member.id, o3: member.addr, o4: member.tel};
console.log(`${o1} ${o2} ${o3} ${o4}`);

// 일부 할당
let {id, ... rest} = member;

Tagged templates

• 백틱으로 감싸진 템플릿 문자열을 문자열 배열과 표현식으로 분리하여, 함수의 인자로 넘겨줄 수 있다.

let age = 41;
let tag = function(strings, personExp, ageExp){
   console.log(`${strings} ${personExp} ${ageExp}`);
}
let output = tag`그 사람 ${"choi"}인 ${age}입니다.`; // 그 사람 ,인 ,입니다. choi 41
// 문자열 배열: [그 사람 ,인 ,입니다.]
// personExp = choi
// ageExp = 41
// 전체 모든 문자열은 strings에, 표현식은 각각 변수에 배분된다.

• 템플릿을 중첩해서 사용 가능하다.

const class = `header ${isLargeScreen()? '' :
`icon-${item.isCollapse ? 'expander' : 'collapser'}`}`;

• String.raw 를 통해서 템플릿을 문자열로 변환하여 저장 가능하다. 템플릿의 표현식은 그 값으로 문자열화된다.

let name = "sangmin";
console.log(String.raw`Hello ${name}!`); // Hello sangmin!

Array Function

• map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

var test1 = [10, 15, 20, 30, 40, 50];
console.log(test1.map(function(c){return c+5}));
// [ 15, 20, 25, 35, 45, 55 ]

• filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

var test1 = [10, 15, 20, 30, 40, 50];
console.log(test1.filter(c => {if(c<=20) return c;}));
[ 10, 15, 20 ]

내장 모듈

File System fs

const fs = require("fs");
fs.readFile("./kim.txt", "utf-8", function (err, data){
   console.log(data);
});

• 비동기 출력 readFile()
• 동기 출력 readFileSync()

fs.readFile("./kim.txt", "utf-8", function (err, data){
   console.log(data);
   if(err===undefined){console.log(err)};
});

var syncData = fs.readFileSync("./kim.txt", "utf-8");
console.log(syncData);

• 비동기 입력 writeFile()
• 동기 입력 writeFileSync()

fs.writeFile("./kim.txt", "Write async", (err)=>{
   fs.readFile("./kim.txt", "utf-8", (err, result)=>{
      console.log(result)
   })
});

fs.writeFileSync("./kim.txt", "Write sync");
console.log(fs.readFileSync("./kim.txt", "utf-8"))

• 비동기 파일 이름 바꾸기 rename()
• 동기 파일 이름 바꾸기 renameSync()

fs.renameSync("./hi.txt", "./hello.txt", (err)=>{console.log(err);})
fs.rename("./hello.txt", "./hi.txt", (err)=>{console.log(err);});

• 비동기 파일 삭제 unlink()
• 동기 파일 삭제 unlinkSync()

fs.unlink("./dummy.txt", (err)=>{console.log("파일 삭제")});
fs.unlinkSync("./dummy2.txt", (err)=>{console.log("파일 삭제")});

http

• createServer() 서버를 생성해준다.
• listen(port, host, function) 해당 포트에 서버를 열어준다.
  • 일반적으로 노드는 3000, 익스프레스는 4000, 리액트는 5000을 포트번호로 사용한다.
  • 이때 host는 local이 아니라 실제 ip주소, 127.0.0.1 을 입력한다.
• response.writeHead(code, {Content-Type}) : http의 상태코드와 헤더 정보를 설정한다.
• response.write(body) : body에 보여지는 부분을 설정한다.
• response.end(end) : 응답을 종료하는 메서드로, 페이지의 마지막으로 들어갈 html 문서를 인자로 받는다.

const http = require("http");
const fs = require("fs");

var syncData = fs.readFileSync("./template.html", "utf-8");
let content = String.raw`${syncData}`;

let port = 3000;
let host = "127.0.0.1";

const server = http.createServer(function(req, res){
   res.writeHead(200, {"Content-Type": "text/html; charset=utf-8"});
   res.end(content);
});

server.listen(port, host, function(){
   console.log(`Server running at http://${host}:${port}/`);
});

url

• parse(request.url, true) : 입력된 url을 url 객체로 만들어준다.
  • parse().query : url 객체의 쿼리 객체를 반환한다.
  • parse().pathname : url 객체의 pathname(string)을 반환한다.

// <li><a href="/?msg=link1">링크1</a></li>
var queryData = url.parse(req.url, true).query;
${queryData.msg} // link1

var _url = url.parse(req.url, true).pathname;
console.log(_url); // /postTest

querystring

• parse(string) : 문자열을 querystring 객체로 반환해준다.
• request.on(event, function) : on 메서드는 request의 이벤트와 function을 묶어주는 메서드이다. on 메서드에서 사용되는 event는 data, end, error 등이 있다.
  • request.on('data', function(chunk)): POST 데이터가 들어오면 chunk를 사용하여 데이터를 저장할 수 있다. 일반적으로 var body="" 를 사용하여 문자열로 저장한다.

req.on('data', function(data){
         body = body + data;
         var msg = qs.parse(body).msg;})