잡다한 프로그래밍

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. 사전준비

#1) Nodejs 설치하기

https://nodejs.org/ko/에서 LTS버전을 다운받아 설치한다.

#2) yarn 설치하기

다음과 같이 yarn을 설치한다.

npm install --global yarn

#3) react app 생성하기

다음과 같이 리엑트 앱을 생성한다.

npx create-react-app 이름

2. 앱 실행하기

cd를 이용하여 폴더를 이동 후 다음과 같이 프로젝트를 실행한다.

yarn start

#1) 결과

다음과 같은 결과를 확인할 수 있다.

#2) App.js 수정

app.js 의 <p> 태그를 수정하고 저장하면 자동으로 compile되고 자동으로 페이지가 수정된다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> 안녕
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

3. 결론

create react-app를 사용하게 되면 다른 server와 함께 사용할 때 처럼 webpack같은 부분이 모두 이미 포함되어있다.

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. AOP란?

만약 다음과 같이 Bean으로 만들 클래스 내부에 로깅, 트랜잭션, 실제 코드인 비즈니스 로직이 함께 있다고 생각해보자. 로깅, 트랜잭션, 비즈니스 로직 순서대로 작동하겠지만 이는 좋은 코드라고 할 수 없다. 따라서 로깅, 트랜잭션과 비즈니스 로직을 분리하기 위해 AOP가 존재한다

AOP는 다음 그림처럼 선처리, 후처리(런타임시 짜집기함)를 가능하게 지원하기 때문에 메인 Bean을 만드는 클래스를 따로 두고 로깅, 트랜잭션을 선처리 후처리로 다음과 같은 구조를 만드는 것이다.

다음 그림처럼 a.f()가 실직적인 타겟이되는 joinpoint가 되고 그림 앞에 보라색, 주황색이 선처리 후처리를 담당하는 어드바이스가 된다. 어드바이스는 joinpoint는 Pointcut이 가리키게 된다

다음 그림을 보면 조금더 이해하기 쉽다

2. AOP실습

#1) spring-aspect를 이용한 실습

1. pom.xml dependency추가

다음과 같은 디펜던시를 추가하면, Maven Dependencies에 spring-aspects라이브러리가 추가된 것을 확인할 수 있다.

		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-aspects</artifactId>
			<version>4.2.5.RELEASE</version>
		</dependency>

2. Logger 클래스 추가

다음과 같은 Logger클래스를 추가한다.

public class Logger{
	public void aboutToSound() {
		System.out.println("Before: about to sound");
	}
}

3. animal.xml Namespaces 수정 및 aop추가

다음과 같이 Namespaces에 aop를 추가한다

aop추가를 완료하였다면 다음과 같은 코드를 추가한다 <aop:aspect ref="Logger">를 통해 Logger클래스를 Aspect로 이용하겠다는 의미이며, <aop:pointcut expression="execution(void kr.ac.hansung.helloDI.*.sound())" id="selectSound" />를 통해 helloDI패키지의 sound() 함수를 joinpoint로 지정하겠다는 의미이다. 이때 *은 와일드카드로서 어떤 클래스든 상관없다는 의미를 가진다. <aop:before method="aboutToSound" pointcut-ref="selectSound" />는 before어드바이스를 추가하겠다는 의미로 aboutToSound라는 메서드를 이용하며 ref로는 위에 선언한 pointcut의 id를 가진다. 따라서 pointcut은 jointpoint를 가르키고 advice는 그 pointcut을 가리킨다

	<aop:config>
		<aop:aspect ref="Logger" id="myAspect">
			<aop:pointcut
				expression="execution(void kr.ac.hansung.helloDI.*.sound())"
				id="selectSound" />
			<aop:before method="aboutToSound"
				pointcut-ref="selectSound" />
		</aop:aspect>
	</aop:config>

4. 실행

메인 함수를 실행하면 다음과 같은 결과를 확인할 수 있다. 메인 함수에서는 Logger빈을 사용하지 않았지만 다음과 같이 before advice가 실행된 것을 확인할 수 있다.

#2) AOP 에노테이션을 이용한 실습

1. animal.xml수정

다음과 같이 animal.xml을 수정한다 기존 코드를 주석 처리하고 <aop:aspectj-autoproxy>를 추가함으로 에노테이션을 사용하겠다고 명시한다.

<!-- 	<aop:config>
		<aop:aspect ref="Logger" id="myAspect">
			<aop:pointcut
				expression="execution(void kr.ac.hansung.helloDI.*.sound())"
				id="selectSound" />
			<aop:before method="aboutToSound"
				pointcut-ref="selectSound" />
		</aop:aspect>
	</aop:config> -->

	<aop:aspectj-autoproxy></aop:aspectj-autoproxy>

2. Logger 클래스 수정

다음과 같이 Logger 클래스를 수정한다 @Aspect로 클래스가 Aspect라는 걸 명시하고 @Pointcut을 통해 sound() 메서드를 joinpoint로 지정하겠다는 것을 명시하고 @Before로 이전 어드바이스를 추가한다.

@Aspect
public class Logger{
	
	@Pointcut("execution(void kr.ac.hansung.helloDI.*.sound()")
	private void selectSound() {}
	
	@Before("selectSound()")
	public void aboutToSound() {
		System.out.println("Before: about to sound");
	}
}

3. 실행

모두 완료하였다면 다음과 같은 실행화면을 볼 수 있다

1. 프레임 워크란?

SW의 구조와 클래스를 제공한다.

2. 라이브러리와 프레임워크의 차이

라이브러리 : 클래스의 집합으로 다른 개발자가 만들어놓은 함수라고 생각하면 좋다. 사용자는 이 라이브러리를 가져다 사용한다.

프레임워크 : 프레임워크에서 기본 골격을 잡아놓고 프레임워크의 제어 흐름에 맞게 코드를 작성하여 사용한다. 라이브러리와 다르게 프레임워크에서 사용자의 코드를 호출한다고 생각하면 좋다.

3. 스프링이란?

POJO기반의 엔터프라이즈 애플리케이션 개발을 쉽고 편하게 해주는 프레임워크

자바 애플리케이션을 개발하는데 필요한 구조를 제공하는 프레임워크로, 스프링의 전체적인 구조를 처리하므로 개발자는 애플리케이션 개발에 집중할 수 있다는 장점이 있다.

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버전 출력