잡다한 프로그래밍

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) 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같은 부분이 모두 이미 포함되어있다.