잡다한 프로그래밍

1. 호이스팅이란?

영어 자체의 의미로서 끌어올리기 라는 뜻으로, 변수의 선언(할당이아님)이 최상단으로 끌어올려지는 것을 의미한다 함수 내부의 변수는 함수의 최상단으로, 함수 외부의 변수는 전역 변수로 끌어올려진다.

2. 호이스팅 예시

만약 다음과 같은 예시가 있다면 결과로 error가 발생한다고 생각할 것이다. 하지만 결과는 undeifiend, 10이다 이유는 아래와 같다.

function example(){
  console.log(test);
  var test = 10;
  console.log(test);
}

자바스크립트가 var test 즉 선언 부분을 함수의 최상단으로 끌어올리기 때문에 다음과 같이 코드가 실제로 실행되고 에러가 아닌 undefined가 발생한다.

function example(){
  var test;
  console.log(test);
  test = 10;
  console.log(test);
}

다음과 같은 함수 도 호이스팅에 의해 사용 가능하다

example();

function example(){
  console.log('test');
}

호이스팅에 의해 다음과 같이 전역으로 함수가 선언되므로 사용 가능하다

function example(){
  console.log('test');
}

example();

하지만 다음과 같이 변수로 선언할 경우는 사용할 수 없다.

example();

var example = function(){
  console.log('test');
}

다음과 같이 호이스팅 되기 때문이다.

var exaple;

example();

example = function(){
  console.log('test');
}

1. 변수 선언 차이

#1) var 변수

var을 사용하게 되면 다음과 같이 같은 이름의 변수를 한 번 더 선언해도 다른 값이 출력된다. 이는 유연한 변수 선언이 가능하지만 코드량이 많아진다면 어떻게 사용될지 파악하기 힘들고 값이 바뀔 우려가 있다.

    var test = 'test1'
    console.log(test) // test1

    var test = 'test2'
    console.log(test) // test2

#2) let, const 변수

다음처럼 같은 이름으로 변수를 선언할 경우 이미 선언된 변수라고 에러가 발생한다.

    let test = 'test1'
    console.log(test) // test1

    let test = 'test2'
    console.log(test) 
    // Uncaught SyntaxError: Identifier 'test' has already been declared

#3) let const 차이

다음과 같이 let은 같은이름으로 변수는 선언할 수 없지만 같은 변수에 다른 값을 재할당할 수 있다.

    let test = 'test1'
    console.log(test) // test1

    name = 'change'
    console.log(test) //change

하지만 const는 let과 달리 같은 변수에 다른 값을 재할당 할 수 없다.

    const test = 'test1'
    console.log(test) // test1

    const test = 'test2'
    console.log(test) 
    // Uncaught SyntaxError: Identifier 'test' has already been declared

    test = 'change'
    console.log(test) 
    //Uncaught TypeError: Assignment to constant variable.

즉 var = 재선언 재할당 가능, let 재선언 불가 재할당 가능, const 재선언, 재할당 불가이다.

2. 호이 스팅

호이 스팅이란? _참고

var, let에는 다음과 같은 호이스팅 차이가 존재한다. var은 test가 없어도 호이스팅 되어 undefined로 결과가 찍히지만 let은 호이스팅 되지 않아 에러가 발생한다.

	console.log(test); // undefined
	var test;

	console.log(test1); // Error: Uncaught ReferenceError: test1 is not defined
	let test1;

3. 마무리

기본적으로 변경이 없는 변수일 경우 const를 사용하고 재할당이 필요한 경우라면 let을 사용하는 것이 좋을 것 같다

1. 비동기 처리란?

먼저 동기 처리란 하나의 요청이 처리되는 동안 다른 요청이 처리되지 못하며 요청이 완료되어야 다음 처리가 가능한 방식이다. 이와 반대로 비동기 처리란 하나의 요청이 처리되는 동안 다른 요청도 처리되는 방식으로 요청이 완료되지 않아도 다음 처리가 진행되는 것을 의미한다

비동기 예시

setTimeout(_ => {
    console.log('1')  // 2번
  }, 1000)
  console.log('2') // 1번

만약 다음과 같은 코드가 만약 동기 처리였다면 콘솔에는 1 > 2 순으로 결과가 나타났을 것이다. 하지만 비동기 처리방법에서는 2 > 1 순으로 결과가 나타나게 된다 이는 setTimeout함수가 끝나기 전에 console.log('2')가 먼저 실행되기 때문이다. 이를 해결하기 위해 callback을 사용하게 된다면 다음과 같은 방법으로 가독성이 떨어지게 될 것이다.

setTimeout(_ => {
  console.log(`1`)
  setTimeout(_ => {
    console.log(`2`)
    setTimeout(_ => {
      console.log(`3`)
    }, 1000)
  }, 1000)
}, 1000)

2. Promise란?

1번과 같이 비동기 처리에서 callback함수를 이용하는 것 대신 promise를 이용하여 비동기를 처리할 수 있다.

function example(callback) {
  return new Promise(function (resolve, reject) {
    setTimeout(_ => {
    	console.log('1번')
    resolve() // 인자를 넘겨줄 수도 있음 그러면 then함수에 인자를 넘겨줌
  }, 500)
  });
}

// example()의 실행이 끝나면 호출되는 then()
example().then(function () {
  // resolve()의 결과 값이 여기로 전달됨
  console.log('2번'); //
});

다음과 같이 example함수를 실행했을 경우에는 Promise객체가 생성되고 1초 뒤 콘솔 1번이 실행된 후 then의 있는 콘솔 2번이 출력되게 된다. 만약 여러 개의 함수를 처리할 경우 다음과 같다.

new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve(100);
  }, 1000);
})
.then(function(result) {
  console.log(result); // 100
  return result + 100;
})
.then(function(result) {
  console.log(result); // 200
  return result + 100;
})
.then(function(result) {
  console.log(result); // 300
});

then 함수를 통해 다음과 같이 사용하게 되면 처음에는 100을, 이후에는 200, 최종 결과로는 300을 출력하게 된다.

3. async & await란?

async & await 문법은 비동기로 실행되는 것들을 끝날 때까지 기다린다는 의미로 callback처럼 동기 방식으로 처리가 가능하게 해주는 문법이다. 중요한 점으로는 Promise로 처리가 되는 것만 await가능하다.

function example() {
  return new Promise(function(resolve, reject) {
    setTimeout(_ => {
    console.log('1번')
    resolve()
  }, 500)
  });
}

async function log() {
  await example();
  console.log('2번');
}

다음과 같이 log라는 함수가 실행되게 되면 example() 함수가 실행된다 example함수는 promise함수로서 1번이라는 값을 출력하고 await구문에 의해 이 promise과정이 끝난 후 console.log('2번')이 실행된다.

function getData(query) {
  return new Promise(function (resolve, reject) {
    $.get('/query', function (response) {
      resolve(response);
    });
  });
}

async function main() {
  var res1 = await getData(sql1);
  var res2 = await getData(sql2);
  console.log(res1);
  console.log(res2);
}

다음과 같이 서버와 통신을 하는 예제도 생각해볼 수 있다. 메인 함수에서 getData(sql1)이 실행되고 Promise함수에서 이를 처리할 때까지 getData(sql2)는 실행되지 않는다 이후 처리가 완료되면 getData(sql2)가 실행되고 console에 res1, res2가 찍히는 것을 확인할 수 있다.

1. express-session 및 session-store 설치하기

다음과 같이 express-session과 session-file-store를 설치한다. express-session은 세션을 사용하기 위한 미들웨어이고, session-file-store는 session을 파일로 저장하기 위해 사용하는 미들웨어이다. 만약 DB에 저장하려면 다른 미들웨어를 사용하면 된다.

npm install -s express-session

npm install -s session-file-store

2. 설치한 미들웨어 사용하기

다음과 같이 기존 미들웨어 아래에 설치한 미들웨어를 사용하겠다고 선언한다

var session = require('express-session')
var FileStore = require('session-file-store')(session)

이후 다음과같은 코드를 추가한다. secret은 사용자가 선택하는 String이 될 수 있으며 이 스트링을 통해 암호화한다. store는 방금 설치한 session-file-store를 통해 파일로 저장하겠다는 의미이다.

app.use(session({
    secret: 'asadlfkj!@#!@#dfgasdg',
    resave: false,
    saveUninitialized: true,
    store: new FileStore()
  }))

3. 세션 스토어를 통한 세션 저장 실습

다음과 같이 사용자가 접속할 경우 session.num을 1로 추가하여 1씩 증가하는 코드이다. 만약 이 코드를 세션 스토어를 사용하지 않고 사용했을 경우에는 node서버를 재시작할 경우 num이 다시 1부터 증가하는 것을 확인할 수 있지만 세션 스토어를 사용할 경우 프로젝트 내부에 session이라는 폴더가 생기고 그 안에 암호화된 세션 파일이 생섬 됨을 확인할 수 있다. 따라서 서버를 재시작하더라도 num이 초기화되지 않는 것을 확인할 수 있다. 이를 이용하면 서버를 재시작하여도 사용자의 로그인이 끊기지 않는다는 등 다양한 구현이 가능해진다.

app.get('/', function (req, res, next) {
    console.log(req.session);
    if(req.session.num === undefined){
        req.session.num = 1;
    } else {
        req.session.num =  req.session.num + 1;
    }
    res.send(`Views : ${req.session.num}`);
})

1. Express란?

2. 설치방법

sudo npm install express -g

express app

3. 구조

/myapp
 ⌊ /bin
     ⌊ www
 ⌊ /public
     ⌊ /images
     ⌊ /javascripts
     ⌊ /stylesheets
 ⌊ /routes
     ⌊ index.js
     ⌊ users.js
 ⌊ /views
     ⌊ index.jade
 ⌊ app.js
 ⌊ package.json

/bin/www : 실제 node.js 웹 서버를 실행하는 부분(Port설정 및 서버 실행 부분)

/public : 공유자원을 이용할때 사용하거나, 정적 파일을 위한 폴더. Images, Javascripts, stylesheets가 있다.

쉽게 이야기하여 서버에서 자원을 이용할 때 이 폴더를 이용한다.

/routes : 라우팅을 위한 폴더. 사용자의 접근을 어떻게 처리할지 적혀 있는 부분.

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) { //사용자가 /이라는 URL로 접근했을 때
res.render('index', { title: 'Express' });
});
module.exports = router;

• req : 클라이언트의 request를 담고 있다.
• res : request가 온 클라이언트로 response 하는 객체이다.

/views : 사용자가 바라보는 웹 View가 들어있는 폴더이다 기본으로는 index.Jade가 있으며 ejs, pug, html 등 자유롭게 사용할 수 있다.

app.js : 웹 서버에 필요한 설정이 담겨있는 파일이다. 핵심적인 파일으로서 사용자가 사용할 미들웨어들이 포함되어 있거나 public, route 등의 설정이 담겨있다. 서버는 app.js를 바라보고 설정을 연동한다.

package.json : express에 설치된 모듈의 정보, 프로그램의 이름, 버전 등 express에 관한 정보를 기록한다. 설치된 모듈의 정보가 package.json에 저장되어 있어 사용자가 다시 설치할 때는 npm install을 입력하게 되면 기술된 모듈의 정보로 자동 설치한다.

4. 실행

sudo npm install

sudo npm start

npm start 이후 http://localhost:3000으로 접속한다. 이때 3000이라는 포트번호를 바꾸고 싶을 경우 www파일을 수정하면 된다. 아래와 같은 화면이 실행되면 제대로 설치된 것이다.

1. Node.JS란?

Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. (홈페이지)

JAVASCRIPT를 브라우저가 아닌 다양한 용도로 사용하기 위해 만들어졌다고 한다. 파일 시스템, 서버 등 사용이 가능하며 내 개인적으로는 서버사이드 언어로 생각해도 무방할 것 같다.

2. Node.JS의 특징

1) V8엔진을 기반으로 한다

2) 비동기 프로그래밍 방식

Node.JS는 비동기 방식으로 Single-Thread기반으로 동작하기 때문에 생기는 문제들이 있다 (callback 지옥) 또한 처리 작업이 오래 걸리면 전체 서버에 영향을 줄 수 있다는 단점이 있다 또한 이후 async를 사용해 동기식으로 해결하는 방법도 공부해볼 예정이다.

3) 프론트엔드와 백엔드를 자바스크립트 언어로 관리가 가능하다

등....

3. Node.JS 설치

우분투 16.04버전을 기반으로 진행하였으며 설치방법은 다음과 같다.

sudo apt-get update
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs


//설치 완료후 입력하면
node -v
//node버전 출력