잡다한 프로그래밍

자바스크립트의 호이스팅에 대해 알아보는 시간을 가진다.

1. 호이스팅 (Hoisting)

- 자바스크립트에서 선언하는 변수값은 모두 유효 범위의 최상단으로 선언된다 = 즉 나는 밑에서 선언했지만 제일 상단에서 선언한것처럼 동작한다. 라는 의미를 가진다.

• 자바스크립트 Parser가 함수 실행 전 해당 함수를 한번 훑는과정을 거친다.
• 함수 안에 존재하는 변수/함수 선언에 대한 정보를 내부적으로 끌어올려서 처리한다(코드상의 변화가 있지는 않음)

 호이스팅의 대상

• var 변수 선언, 함수 선언문에서 호이스팅이 일어난다.
  • let, const 에서는 호이스팅이 일어나지 않음 (ES6에서 개선) ※ 호이스팅은 일어나나, 발생하지 않는것처럼 참조 에러가 발생함

변수는 어떤식으로 생성 될까?

1. 변수의 선언

• 변수를 실행 컨텍스트의 변수 객체에 등록함.

2. 초기화 단계

• 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다.
• 이때 변수는 undefined로 초기화 된다.

3. 할당 단계

• 실제 undefined로 초기화된 변수에 값을 할당한다.

앞서 말한 var키워드는 선언, 초기화가 한번에 이루어진다. 즉 스코프에 변수를 등록하고 공간을 확보한 후 undefined로 초기화한다. 하지만 let키워드는 선언과 초기화가 분리되어 진행되므로, 초기화 이전에 접근하면 에러가 발생한다.

- 앞서 이론적인 부분을 코드적으로 이해해보도록 하자

변수 선언에서의 호이스팅 예시

console.log(val); //선언 + 초기화
val = 'text'; //선언 + 초기화 + 할당
var val = 'hi';

- 해당 코드를 js가 아닌 다른 언어로 생각했을경우 1 번째 line에서 에러가 발생해야한다 하지만 결과는 undefined값이 찍힌다. 이유는 앞선 선언 + 초기화가 되어있기 때문이다

console.log(val); // 호이스팅에 의해 끌어올려졌지만 초기화는 안된 상태
let val = 'hi'

let을 사용하게되면 선언만 이루어지고 초기화는 되지않아서 에러가 발생한다.

함수 선언에서의 호이스팅 예시

test(); // 함수 선언문 정상동작 호이스팅 O
test2(); // 함수 표현식 오류 발생 호이스팅 X 

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

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

- 함수 선언문같은 경우 호이스팅이 된다. 하지만 함수 표현식의 경우 호이스팅이 이루어지지 않는다.

함수 선언문의 경우 = 함수 전체가 최상단으로 호이스팅 된다. 하지만 함수 표현식의 경우 변수가 호이스팅 되기때문에 에러가 발생한다

클래스의 호이스팅

그렇다면 ES6에 추가된 클래스는 어떨까? (let, const가 변수 선언 전에 사용하면 에러가발생하듯 class의 경우도 오류가 발생할까?)

let test = new Test('hi'); // ReferenceError: Person is not defined
console.log(peter);

class Test {
  constructor(val) {
    this.val = val;
  }
}

생각한 대로 클래스는 ReferenceError를 내뱉는다. 함수 선언문의 경우 호이스팅 되어 이전에 사용할 수 있었지만. ES6에서 추가된 클래스의 경우는 호이스팅 되어도 초기화가 되지않기 때문에 (let, const 처럼) 에러를 내뱉는다.

- 마찬가지로 클래스 표현식 let val = class Test {....} 로 정의할 경우도 에러를 발생시킨다.

이상 간단한 호이스팅 정리였다.

1. <td>에 <img>를 사용할 때 height 값이 달라지는 이유

간단한 문제였지만 나중에 기억나지 않을 것 같아서 기록한다.

<td>태그 안에 이미지를 넣을때 td내부 패딩이 있는것도 아니고, 이미지 margin, border가 없는데도 이상한 px값이 아래에 추가되어 td높이값이 달라지는 현상이 있었다.

default td height는 보통 font-size와 line-height의 영향을 받게 되는데, inline요소인 img요소가 들어가서 생기는 문제이다.

2. 해결 방법

1. td태그내에 img 태그가 아닌 td의 background를 이용하여 해결하는것이 좋은 방법이다.

2. td에 line-height를 0px나 0% 등으로 없애는 방법 or img 태그에 display:block 스타일을 적용하여 해결 할 수 있다.

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

#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란?

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파일을 수정하면 된다. 아래와 같은 화면이 실행되면 제대로 설치된 것이다.