TIL 2023.03.15 Node.js 3 (Docker-network, Express-Generator, Express-session, JS-ES6, React)

Docker network - 참조

Docker에서 네트워크를 구성하여 컨테이너 끼리 통신을 보다 쉽고 원할하게 할 수 있다.

docker network ls

기본적으로 3개의 네트워크가 존재하는데 기본값은 bridge에 묶이게 된다.(아마 보안때문에 서로 통신은 막혀있을 것)

네트워크 생성

docker network create group1

mysql 생성 시 네트워크를 연결해줄 추가 명령어를 작성한다.

docker run -it --rm -d -p 3306:3306 \
-e MYSQL_ROOT_PASSWORD=mysql \
-e MYSQL_DATABASE=lecture \
-e MYSQL_USER=scott -e MYSQL_PASSWORD=tiger \
--network group1 \
--name mysql8 \
-v dummySql:/var/lib/mysql mysql

ubuntu 생성 시 같은 네트워크에 연결하여 mysql 컨테이너와 통신

docker run -it --rm --network group1 61c4 /bin/bash

apt-get update
apt-get install iputils-ping
ping mysql8

정보확인 - 묶여있는 컨테이너들을 확인할 수 있다.

docker network inspect group1

Node.js

Express Generator

npx는 일시적으로 다운받고 치우는 것 해당 프로젝트에만 적용,
npm 이후 -g 옵션을 주면 글로벌 모드로 pc에 설치됨 글로벌 모드를 깔게 되면 이후 계속 업데이트를 해줘야함,
--view=ejs를 해줘야 ejs환경으로 프로젝트를 생성해줌 -e로도 가능.

npx express-generator --view=ejs .

npm i nodemon
npm i mysql

scripts 의 내용을 수정해서 nodemon으로 서버를 시작할 수 있도록 변경

"scripts": {
    "start": "nodemon ./bin/www"
  },

mysql DBCP (modules/mysql.js)

const mysql = require('mysql')
const pool = mysql.createPool({
  connectionLimit : 10,
  host: '192.168.99.100',
  user: 'scott',
  password: 'tiger',
  database: 'mydb'
})
module.exports = pool;

routes/user.js

var express = require('express');
var router = express.Router();
var pool = require('../modules/mysql');

/* GET users listing. */
// 리스트
router.get('/', function(req, res, next) {
  const sql = "select * from dept";
  const query = pool.query(sql, (err,result,fields)=>{
    console.log(result);
    res.status(200).json(result);
});
/*  const query = pool.query(sql);
  query
    .on("error", function(err){
      console.log(err);
    })
    .on("result", function(row){
      console.log(row);
    })
    .on("end", function() {
      res.send('respond with a resource');
    });
}); */
// 입력
router.post('/', (req,res)=>{
  const deptno = req.body.deptno;
  const dname = req.body.dname;
  const loc = req.body.loc;
  const sql = `insert into dept value (${deptno}, '${dname}', '${loc}')`;
  pool.query(sql,(err)=>{
    if(err) return res.status(500).end();
    res.status(200).end();
  });
});

// 상세보기
router.get('/:deptno', (req,res) => {
  const deptno = req.params.deptno;
  const sql =`select * from dept where deptno=${deptno}`;
  const query = pool.query(sql);
  query
    .on("error", function(err){
      console.log(err);
    })
    .on("result", function(row){
      res.status(200).json(row);
    })
    .on("end", function() {

    });
 });

module.exports = router;

Express-Session 를 이용한 로그인 처리

npm install express-session

routes/users.js

var session = require('express-session');
router.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
  cookie: {secure: true, maxAge : 60000} // secure를 true로 하면 쿠키가 보이지 않게됨
}))

// 가상 로그인 성공
router.get('/login', (req,res, next) =>{
  req.session.login = 'admin';
  res.status(200).end();
})

// 해당 파일의 모든 요청 로그인 여부 확인
// router.use('/',(req,res,nxt)=>{
//   if(req.session.login){
//     nxt();
//   } else {
//     res.status(403).end();
//   }
// });
// 원하는 곳에만 login 함수를 매개변수로 주게되면 여부확인됨
var login = (req,res,nxt)=>{
  if(req.session.login){
    nxt();
  } else {
    res.status(403).end();
  }
};

router.get('/', login, function(req, res, next) {
    const sql = "select * from dept";
    const query = pool.query(sql, (err,result,fields)=>{
      console.log(result);
      res.status(200).json(result);
    });
});

JavaScript ES6 문법 - 참조

Variables

let(변수), const(상수) - 기존의 var과 다르게 다른언어들의 변수처럼 작동이 된다.

Arrow function - 익명함수를 간단하게 표현

이름이 없는 함수를 호출할 때 줄여서 사용할 수 있다.

// 화살표 함수
var func2 = () =>{console.log('fun2 run...')};
func2();
var func3 = (msg) =>{console.log(msg)};
func3('func3 run...');

// arg가 하나일 경우에만 () 생략 가능
var func4 = msg =>{console.log(msg)};
func3('func4 run...');

// 익명함수를 바로 실행 할 때
(function(){ console.log('익명함수')})();
(()=>{console.log('익명함수')})();

// 리턴 - {} 쓰는 경우 return을 명시해야한다.
// var func5 = ()=>{return 6;};
var func5 = ()=> 6;
console.log(func5());
var func6 = msg => msg;
console.log(func6('abcd'));
// object를 return 할 경우 ()로 시작하여 return 값을 명시해줄 수 있다.
var func7 = () => {return {}};
var func7 = () => ({});
console.log(fun7())

// 화살표함수에서는 this를 쓸 수 없다
var f1 = function() {
    console.log(this);
};
f1(); // global이 잡힘
var f2 = () =>{
    console.log(this);
}
f2(); // 빈 obj 반환됨

var obj1 = {
    name: 'test1',
    // setName: function(a){this.name=a;} // 바뀜
    // setName: a=>{this.name=a;} // 안바뀜
    setName: a=>{obj1.name = a;} // 명시적으로 해야 바뀜
}
obj1.setName('aaaa');
console.log(obj1.name)

Object

// 기존 사용
var obj1 = new Object();
obj1.name = 'obj1';
console.log(obj1);
var obj2 = {'key1':'val1', 'key2':'val2'};
console.log(obj2);

// key값은 무조건 문자열이 되면서 '' 를 반드시 작성안해도되며
// 변수만 넣을 수 있도록 생략 가능해지게 되었다.
var obj3 = {obj1};
console.log(obj3);

var obj4 = {name:'tester', setName:function(a){this.name=a}};
obj4.setName('editer');
console.log(obj4);
var obj5 = {ename:'testet', setName(a){this.ename=a;}};
obj5.setName('Editer');
console.log(obj5);

// Object 객체를 이용한 값 추출
var obj1 = {key1:'val1', key2:'val2', key3:'val3'};
console.log(Object.keys(obj1));
console.log(Object.values(obj1));
console.log(Object.entries(obj1));

Array

var arr = ['item1', 'item2', 'item3', 'item4'];

for(i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

for(msg of arr){
    console.log(msg);
}

arr.forEach((ele,idx)=>{
    console.log(ele);
});

var result = arr.forEach(ele=>{console.log(ele)});
console.log(result); // undefined

// 가장 많이 사용됨
result = arr.map(ele=>console.log(ele));
console.log (result); // [undefined, undefined...]
result = arr.map(ele=>ele+"번");
console.log (result); // ['item1번','item2번',...]

// 삭제할 때 많이 사용됨
var result = arr.filter((ele, idx)=>{
    console.log(ele, idx);
    return idx%2==0;
});
console.log(arr, result) // [ 'item1', 'item2', 'item3', 'item4' ] [ 'item1', 'item3' ]

var result = arr.reduce((bef, curr, idx, target)=>{
    console.log(bef, curr, idx, target);
    return bef+","+curr;
});
console.log(arr, result);
>> 
item1 item2 1 [ 'item1', 'item2', 'item3', 'item4' ]
item1,item2 item3 2 [ 'item1', 'item2', 'item3', 'item4' ]
item1,item2,item3 item4 3 [ 'item1', 'item2', 'item3', 'item4' ]
[ 'item1', 'item2', 'item3', 'item4' ] item1,item2,item3,item4
<<

var result = arr.find((ele, idx, target)=>{
    return ele == 'item2';
});
var result2 = arr.findIndex((ele, idx, target)=>{
    return ele == 'item2';
});
console.log(result, result2); // item2 1

var arr1 = ['item1', 'item2','item3'];
var arr2 = [...arr1, 'item5']; // 기존의 값을 복사하며 새로운 값 추가 하여 배열 생성
arr1[3] = 'item4';
console.log(arr1, arr2); // [ 'item1', 'item2', 'item3', 'item4' ] [ 'item1', 'item2', 'item3', 'item5' ]


var obj1 = {key1:'val1', key2:'val2'};
var obj2 = {...obj1, key1:'VAL1', key4:'val4', arr2}; // 새로운 오브젝트를 만들면서 값을 수정, 추가 가능
obj1.key3 = 'val3'
console.log(obj1, obj2); 
>>
{ key1: 'val1', key2: 'val2', key3: 'val3' } {
  key1: 'VAL1',
  key2: 'val2',
  key4: 'val4',
  arr2: [ 'item1', 'item2', 'item3', 'item5' ]
}
<<

var [ele1,ele2,ele3] = arr1;
console.log(ele1, ele2, ele3); // item1 item2 item3

var [ele1, ...ele2] = arr1;
console.log(ele1, ele2); // item1 [ 'item2', 'item3', 'item4' ]

var {key1, key2} = obj1;
console.log(key1, key2); // val1 val2

class

class Cl01{
    constructor(name, year){
        this.name = name;
        this.year = year;
    }
    func(){
        console.log('Cl01 func run...');
    }
}
let obj1 = new Cl01('user1', 2000);

function Cl02(a, b) { // 함수명을 대문자로하면 객체생성을 위한 함수
    this.a = a;
    this.b = b;
    this.func = () => {
        console.log('Cl02 func run...');
    }
} 
let obj2 = new Cl02('user2', 3000);

class Cl03 extends Cl01 {
    constructor(name, year){
        super(name, year);
    }
}
let obj3 = new Cl03('user3', 1000);

console.log(obj1.name, obj1.year);
obj1.func();
console.log(obj2.a, obj2.b);
obj2.func();
console.log(obj3.name, obj3.year)
obj3.func();
>>
user1 2000
Cl01 func run...
user2 3000
Cl02 func run...
user3 1000
Cl01 func run...
<<

React

프로젝트 생성

npx create-react-app react01

react 실행 (only 테스트용 - 개발할때 사용)

npm start

빌드 (실제 배포할 파일들 절때 모듈 통째로 배포하는 것이 아님)

npm run build

빌드 파일을 통해 실행

npx serve -s build

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

function Func1() {
  return <div><h1>환영</h1> <p>환영메세지</p></div>;
}

class Func2 extends React.Component{
  render() {
    return <div><h1>환영</h1> <p>환영메세지</p></div>;
  }
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
  //    <App />
  // </React.StrictMode>

  // JSX - DOM을 쉽게 만들어주는 라이브러리
  // <div>
  //   <h1>환영</h1> 
  //   <p>환영메세지</p>
  // </div>

  // <Func1/>

  <Func2/>
);