잡다한 프로그래밍

1. Statement / preparedStatement란

#1) PreparedStatement의 동작방식

preparedStatement는 다음과 같이 4가지 단계로 이루어져있다. 이중 parse 부분을 컴파일한채로 캐시에 저장하고 데이터가 bind될때까지 기다린다 이후 patch부분까지 실행이 완료되고 sql을 재사용할때 parse를 다시 실행하지않고 캐시에 저장되어있는 부분을 가져다 나머지 3단계만 실행한다. 따라서 sql이 반복적일때 효율적이다.

또한 바인딩 된 데이터는 SQL문법이 아닌 내부의 인터프리터나 컴파일 언어로 처리하므로, 문법적인 의미를 가질 수 없다. 이것이 의미하는것은 parse부분에서 이미 쿼리의 문법적인 처리부분이 선 수행되었으므로 바인딩 단계에서 입력된 부분은 쿼리로 인식하지 않는다는 의미이다. 따라서 sql injection에 좋다.

사용 방법

String sql = "SELECT NAME, AGE FROM TABLE WHERE userID = ?"
PreparedStatement stmt = conn.prepareStatement(sql);
pstmt.setInt(1, userID);
ResultSet rst = pstmt.executeQuery();

#2) Statement의 동작방식

Statement는 prepare방식과 달리 4가지단계를 매번 실행하여 결과 값을 반환한다. 만약 반복적으로 쿼리를 수행할경우 PreparedStatement가 DB에 적은 부하를 주며, 성능이 더 좋다.

하지만 sql을 전체를 한눈에 볼 수 있다는 장점이 있다.

String sql = "SELECT NAME, AGE FROM TABLE WHERE USERID = " + userID
Statement stmt = conn.credateStatment();
ResultSet result = stmt.executeQuery(sqlstr);

2. SQL 삽입

사용자가 입력 폼 및 URL 입력란에 SQL을 삽입하여 DB로부터 정보를 열람하거나 조작할 수 있는 보안적 약점을 의미한다.

이를 대비하기위해 PreparedStatement를 이용하는것이 바람직하다 예를들어 다음과 같은 statement 쿼리문을 작성했다고 가정할때 사용자가 name값을 name' OR 'a' = 'a라고 입력할경우 모든 테이블이 조회가 되는 문제가 생긴다.

String query = "SELECT * FROM " + tableName + "WHERE Name = " + name;

따라서 이를 PreparedStatement(데이터 바인딩) 으로 처리하면 안전하게 SQL 삽입으로부터 대비할 수 있다. 보다 안전한 이유는 PreparedStatement를 보면 알 수 있다.

String query = "SELECT * FROM ? WHERE Name = ?";
stmt = con.prepareStatement(query);
stmt.setString(1, tableName);
stmt.setString(2, name);
rs = stmt.executeQuery();

1. 메소드 호출하기

v-on

html을 다음과 같이 입력하고

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="clickMessage">버튼!</button>
</div>

다음과 같이 javascript를 입력하면 버튼을 클릭할 시 clickMessage가 실행되고 경고창이 뜨게 된다.

var app = new Vue({
  el: '#app',
  data: {
    message: '이 글자가 경고창에 뜹니다'
  },
  methods: {
    clickMessage: function () {
      alert(app.message)
    }
  }
})

2. 컴포넌트란?

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. 사용방법

사용방법으로는 npm, cli, script 같은 방법이 있지만, Vue에 기본적인 부분을 학습하기 위해 다음과 같은 jsfiddle를 통해 기초를 학습한다.

https://jsfiddle.net/chrisvfritz/50wL7mdz/

2. Hello Vue 띄우기

html

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

javascript

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

다음과 같이 작성할 경우 Hello View! 를 확인할 수 있다. 만약 console창에서 다음과 같이 app.message = 'change vue!'를 입력하면 p태그 내부가 change vue! 로 바뀌는 것을 확인할 수 있다.

3. 조건문 & 반복문

if문을 사용하기 위해 v-if를 사용한다.

html

<div id="app">
  <p v-if="seen">보이는 상태</p>
</div>

javascript

var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

다음과 같이 작성할 경우 P태그가 보이는것을 확인할 수 있다. 만약 console창에서 다음과 같이 app.seen = false를 입력하면 p태그가 사라지는것을 확인할 수 있다.

for문을 사용하기 위해 v-for를 사용한다

html

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

javascript

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '1번' },
      { text: '2번' },
      { text: '3번' }
    ]
  }
})

다음과 같이 작성할경우 3가지 li가 보이는 것을 확인할 수 있다. 만약 console창에서 다음과 같이 app.todos.push({ text: '4번'})을 입력하면 li태그가 새롭게 추가되는 것을 확인할 수 있다.

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. DOM이란?

돔(DOM)이란 Document Object Model의 약자로 HTML 및 XML 문서를 웹 브라우저가 인식한 객체를 의미(일종의 인터페이스)

DOM은 다음과 같은 다음과 같은 workflow를 따른다. 즉 html를 읽어서 DOM 트리, CSS 트리를 만들고 DOM의 위치를 잡고 거기에 그리고 색을 채운다.

2. DOM의 단점?

단순히 HTML을 서버에서 받아 브라우저에 그릴 때는 문제가 생기지 않는다 하지만 SPA(Single page application) 같은 것들이 생겨나면서 자바스크립트를 이용해 DOM을 변경하려고 브라우저에 요청을 할 경우 다음과 같은 문제가 발생한다. 예를 들어 트위터나 페이스북에서는 스크롤을 내리면 많은 데이터가 로딩이 되고 이는 쉽게 말해 div가 많아진다는 의미인데 이때 javascript를 이용하여 DOM을 조작하면 성능에 이슈가 생긴다. 왜냐하면 위 그림과 같은 workflow가 다시 이루어지기 때문이다. 이때 만약 100번을 요청했다면 100번을 다시 painting 하는데 이러한 이슈가 발생한다.

ex) <ul> 내부에 li를 추가할때 개수가 매우 많아지면 브라우저 속도가 느려지는 이슈 발생

3. Virtual DOM 이란?

DOM의 이슈를 Virtual DOM으로 해결할 수 있다. 100번의 DOM 조작 요청이 오면, 가상 돔은 브라우저 대신 변경 내용을 가상 돔에 반영한다.(이때 화면에 그리지 않음) 변화가 반영되었다면 내용을 브라우저에게 전달하여 그리게 한다.(100번 그리던 것을 1번만 그린다) 따라서 다음과 같은 이슈를 Virtual DOM을 통해 개선할 수 있다.

1. 문법의 차이

#1) #을 이용한 경우

<select id="select" resultType="String" parameterType="Map">
    SELECT name FROM user WHERE id = #{id}
</select>

다음과 같은 SELECT문을 작성하였을경우 아래와 같이 ?에 파라미터가 바인딩 되어 수행된다 이렇게 파싱된 쿼리문은 재활용(캐싱)되므로 효율적이다.

SELECT name FROM user WHERE id = ?

 또한 변수에 작은 따옴표(')가 붙어 쿼리가 수행되므로 '#{id}'라고 쿼리문을 작성할 필요가 없다. 대신 다음과 같이 사용할 수 없다. 아래와 같이 사용할 경우 user_'tableName'이 되어버리므로 에러가 발생한다.

<select id="select" resultType="String" parameterType="Map">
    SELECT name FROM user_#{tableName} WHERE id = #{id}
</select>

#2) $를 이용한 경우

반면 $를 이용하게 되면 파라미터값이 바뀔 때마다 새로운 쿼리문의 파싱을 진행해야해서 성능상 단점이 존재한다.

또한 쿼리문에 #{}과 다르게 작은 따옴표(')가 붙지 않아서 테이블 이름이나 컬럼이름을 동적으로 결정할때 사용할 수 있다.

<select id="select" resultType="String" parameterType="Map">
    SELECT name FROM user_${tableName} WHERE id = #{id}
</select>

2. SQL Injection 차이

보안적으로 #과 $에는 차이가 존재한다. #은 $보다 보안에 안전하다 다음과 같은 예시를 보자

<select id="select" parameterType="Map" resultType="...">
    SELECT * FROM user WHERE id = '${id}' AND password = '${password}'
</select>

만약 이때 사용자가 id 값에 root' --를 입력했다고 가정하면 다음과 같은 결과를 초래한다.

SELECT * FROM user WHERE id = 'root' -- 'AND password = ''

사용자는 비밀번호를 입력하지 않았지만 뒷부분이 주석처리되어 로그인에 성공하게되어버린다 따라서 $는 #보다 SQL Injection에 취약하다

https://www.acmicpc.net/problem/1197

1. 해결방법

크루스칼 알고리즘과 Union find를 이용하여 해결.

2. 코드

#include <iostream>
#include <algorithm>
#include <vector>
using namespace std;
int N, K;
vector<pair<int, pair<int, int>>> vec;
int Parent[10001];
int result = 0;

int Find(int x) {
    if (x == Parent[x])
        return x;
    else
        return Parent[x] = Find(Parent[x]);
}

void Union(int x, int y) {
    x = Find(x);
    y = Find(y);
    if(x!=y) Parent[y] = x;
}

bool SameParent(int x, int y) {
    x = Find(x);
    y = Find(y);
    if (x == y) return true;
    return false;
}

int main(int c, char** v)
{
    cin >> N >> K;

    for (int i = 0; i < K; i++) {
        int x = 0, y = 0, cost = 0;
        cin >> x >> y >> cost;
        vec.push_back(make_pair(cost,make_pair(x, y)));
    }
    sort(vec.begin(), vec.end());
    for (int i = 1; i <= N; i++) {
        Parent[i] = i;
    }

    for (int i = 0; i < K; i++) {
        if (SameParent(vec[i].second.first, vec[i].second.second) == false) {
            Union(vec[i].second.first, vec[i].second.second);
            result += vec[i].first;
        }
    }
    cout << result;
}