함수형 컴포넌트는 상태와 생명 주기 메서드를 가진 클래스형 컴포넌트와 달리 순수 함수로 UI를 정의한다.

이러한 컴포넌트는 불변성을 유지하며 코드를 최소화한다.

import React from 'react';

// 함수형 컴포넌트 정의
const Greeting = ({ name }) => {
    return <h1>Hello, {name}!</h1>;
};

// 함수형 컴포넌트 사용
const App = () => {
    return (
        <div>
            <Greeting name="Alice" />
            <Greeting name="Bob" />
        </div>
    );
};

export default App;

불변성(Immutability)

함수형 클래스는 불변성을 유지한다. 이는 객체의 상태가 생성된 이후에 변경되지 않음을 의미한다.

상태가 변경되지 않기 때문에, 객체를 여러 스레드에서 동시에 안전하게 사용할 수 있다.

함수형 메서드

함수형 클래스는 상태를 변경하지 않는 메서드를 포함한다.

이러한 메서드는 주어진 입력에 대해 일정한 출력을 제공하며, 객체의 상태를 변경하지 않는다.

하지만 상태를 가지지 않으므로, 상태를 관리하기 위해 여러 개의 함수형 컴포넌트를 사용할 경우 렌더링 성능에 영향을 준다. 복잡한 상태를 관리해야 하는 경우, 상태 관리 라이브러리(예: Redux)와 결합하여 복잡도가 증가하는 단점이 있다.

데이터 중심 설계

함수형 클래스는 종종 데이터를 중심으로 설계되며, 데이터의 변환이나 조작을 함수형 프로그래밍 패턴에 맞게 처리한다.

이러한 클래스는 사이드 이펙트(side effect)가 없고, 입력값이 동일하면 항상 동일한 출력을 보장한다.

장점

• 스레드 안전성: 불변성을 유지하므로 다중 스레드 환경에서 안전하게 사용할 수 있다.
• 디버깅 용이성: 상태 변경이 없으므로 프로그램의 동작을 이해하고 디버깅하기가 쉽다.
• 예측 가능한 동작: 함수형 메서드는 입력이 동일하면 항상 동일한 출력을 보장하므로 예측 가능한 동작을 제공한다.

단점

• 성능 문제: 객체를 변경할 때마다 새로운 객체를 생성하므로 메모리 사용량이 증가할 수 있다.
• 복잡성 증가: 불변성과 함수형 프로그래밍 패턴을 강제하면 코드가 복잡해진다.

컴포넌트

컴포넌트는 독립적으로 개발, 배포, 유지보수할 수 있는 모듈이다.

각 컴포넌트는 특정 기능이나 서비스를 제공하며, 시스템 내에서 명확한 역할을 가지고 있다.

예를 들어, 웹 애플리케이션에서 사용자 인터페이스를 구성하는 버튼, 폼, 모달 등이 각각의 컴포넌트로 구현된다.

모듈

특정 기능이나 책임을 가진 코드 집합으로, 독립적으로 작동하고 재사용되는 코드의 단위이다.

//프로젝트 구조
│
├── /src
│   ├── /components
│   │   ├── Button.js
│   │   ├── Header.js
│   │   └── Footer.js
│   ├── /utils
│   │   └── formatDate.js
│   ├── /styles
│   │   └── App.css
│   ├── App.js
│   ├── index.js
│   └── index.css
│
└── package.json
package com.example.utils;

// src/components/Button.js
import React from 'react';
import './Button.css';  // 모듈화된 스타일

const Button = ({ label, onClick }) => {
    return (
        <button className="button" onClick={onClick}>
            {label}
        </button>
    );
};

export default Button;

// src/components/Header.js
import React from 'react';
import './Header.css';  // 모듈화된 스타일

const Header = () => {
    return (
        <header className="header">
            <h1>My Application</h1>
        </header>
    );
};

export default Header;

// src/components/Footer.js
import React from 'react';
import './Footer.css';  // 모듈화된 스타일

const Footer = () => {
    return (
        <footer className="footer">
            <p>&copy; 2024 My Application</p>
        </footer>
    );
};

export default Footer;

App.js 

// src/App.js
import React from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
import Button from './components/Button';
import formatDate from './utils/formatDate';
import './styles/App.css';  // 모듈화된 스타일

const App = () => {
    const handleClick = () => {
        alert(`Current Date: ${formatDate(new Date())}`);
    };

    return (
        <div className="app">
            <Header />
            <main>
                <h2>Welcome to My App</h2>
                <Button label="Show Date" onClick={handleClick} />
            </main>
            <Footer />
        </div>
    );
};

export default App;

index.js는 React와 ReactDOM 모듈을 가져와 HTML 요소에 렌더링한다. 

HTML 요소는 index.html 파일에 정의된 <div id="root"></div>와 같은 컨테이너와 같다.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';  // 전역 스타일

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

캡슐화

컴포넌트는 내부 구현을 외부에 노출하지 않고, 필요한 인터페이스만 공개한다.

이를 통해 내부 구현 세부 사항을 숨기고, 외부에서 제공하는 서비스나 기능만을 사용한다.

예를 들어, 컴포넌트가 내부 상태를 유지하더라도, 외부는 컴포넌트가 제공하는 메서드만 사용하여 상호작용한다.

재사용성

컴포넌트는 재사용 가능한 단위로 설계되어, 여러 위치에서 동일한 컴포넌트를 사용할 수 있다.

이는 코드 중복을 줄이고, 유지보수를 용이하게 만든다.

예를 들어, 버튼 컴포넌트를 여러 페이지에서 재사용함으로써 일관된 디자인을 유지할 수 있다.

확장성

컴포넌트 기반 설계는 시스템을 쉽게 확장할 수 있도록 지원한다.

새로운 기능을 추가하거나 기존 기능을 수정할 때, 전체 시스템에 미치는 영향을 최소화할 수 있다.

새로운 기능을 추가하기 위해 기존 컴포넌트를 수정하거나 새로운 컴포넌트를 추가할 수 있다.

React와 ReactDOM

React와 ReactDOM은 함께 작업하여 사용자 인터페이스를 구성한다.

React

사용자 인터페이스를 구성하는 컴포넌트를 정의하는 라이브러리이다.

이 컴포넌트는 자바스크립트 코드로 작성되며, 최종적으로 HTML로 변환되어 브라우저에 표시된다.

ReactDOM

React 컴포넌트를 실제 DOM에 렌더링하는 역할을 한다.

React가 작성한 UI를 HTML로 변환하고 이를 브라우저의 DOM에 삽입한다.

index.html 파일

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>App</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

<div id="root"></div>: 이 요소는 React 컴포넌트가 렌더링될 빈 공간이다.

ReactDOM은 이 root라는 ID를 가진 요소를 찾아 그 안에 React 컴포넌트를 삽입한다.

index.js 파일

//React 라이브러리에서 React를 가져온다. 
//이 라이브러리는 컴포넌트를 정의하고 관리하는 데 사용된다.
import React from 'react';

//ReactDOM 라이브러리에서 ReactDOM을 가져온다
//이 라이브러리는 React 컴포넌트를 실제 DOM에 렌더링한다.
import ReactDOM from 'react-dom';

import './index.css';
import App from './App';

//ReactDOM.render()
//이 함수는 두 개의 인수를 받는다
//1. 렌더링할 React 요소 (<App /> 컴포넌트)
//여기서 React.StrictMode는 개발 모드에서 추가적인 검사와 경고를 제공한다

//2.  React 요소를 렌더링할 DOM 요소 
// (document.getElementById('root'))
// 이 DOM 요소는 index.html의 <div id="root"></div>와 연결된다.

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

이 코드가 실행되면, ReactDOM은 root라는 ID를 가진 <div>를 찾아서, 그 안에 <App /> 컴포넌트를 삽입한다.

4. App.jsx 파일

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

function App() {
  return <h1>hello :)</h1>;
}  

export default App;

• App 컴포넌트: 이 컴포넌트는 UI를 정의한다. 이 경우에는 <h1>hello :)</h1> 텍스트를 반환한다.
• export default App;: App 컴포넌트를 다른 파일에서 사용할 수 있도록 내보낸다.

1.  App.jsx에서 App 컴포넌트를 작성한다. 이 컴포넌트는 JSX로 UI를 정의한다.
2. index.js에서 ReactDOM.render()를 호출하여 App 컴포넌트를 실제 DOM에 렌더링한다.
3. 이 과정에서 App 컴포넌트는 HTML로 변환되어 <div id="root"></div> 안에 삽입된다.
4. 브라우저는 이 HTML을 렌더링하여 사용자가 화면에서 hello :)를 볼 수 있도록 한다.

AJAX(Asynchronous JavaScript and XML)는

웹 애플리케이션에서 서버와 비동기적으로 데이터를 주고받기 위한 기술이다.

웹 페이지를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있게 해주는 특징이 있다. 

동기 통신 (Synchronous Communication)

동기 통신은 요청과 응답이 순차적으로 이루어지는 방식이다. 클라이언트가 요청을 보내면

그 요청에 대한 응답이 올 때까지 다른 작업을 하지 않고 기다린다. 응답이 오면 그때서야 다음 작업을 수행한다.

특징:

• 차단(Blocking): 요청을 보낸 후 응답을 받을 때까지 프로그램이 차단된다. 이 동안 다른 작업은 수행되지 않는다.
• 순차적 처리: 요청과 응답이 순차적으로 처리되기 때문에 로직이 단순해지고, 디버깅이 상대적으로 쉽다.
• 성능: 응답을 기다리는 동안 애플리케이션이 다른 작업을 하지 못하기 때문에 사용자 경험이 저하될 수 있다.

// 동기적인 HTTP 요청을 위해 XMLHttpRequest 사용
const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체를 const로 선언
xhr.open("GET", "https://api.example.com/data", false); // false는 동기 호출을 의미

xhr.send(); // 요청 전송

if (xhr.status === 200) {
    console.log(xhr.responseText); // 성공적인 응답 처리
} else {
    console.error("Request failed with status:", xhr.status); // 실패한 요청 처리
}

비동기 통신 (Asynchronous Communication)

비동기 통신은 요청을 보내고, 그 응답을 기다리지 않고 다른 작업을 계속 진행할 수 있는 방식이다.

요청을 보낸 후 응답이 도착하면, 지정한 콜백 함수나 프로미스 처리기에서 응답을 처리한다.

특징:

• 비차단(Non-Blocking): 요청을 보낸 후 응답을 기다리는 동안 다른 작업을 계속할 수 있다.
• 이로 인해 애플리케이션의 응답성이 향상된다.
• 이벤트 기반: 응답이 도착했을 때 호출되는 콜백 함수나 프로미스를 사용하여 응답을 처리한다.
• 성능: 비동기 처리로 인해 더 나은 사용자 경험을 제공할 수 있으며, 서버와의 통신이 지연되더라도 애플리케이션이 계속 동작할 수 있다.

// 비동기적인 HTTP 요청을 위해 XMLHttpRequest 사용
const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체를 const로 선언
xhr.open("GET", "https://api.example.com/data", true); // true는 비동기 호출을 의미

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log(xhr.responseText); // 성공적인 응답 처리
    } else {
        console.error("Request failed with status:", xhr.status); // 실패한 요청 처리
    }
};

xhr.send(); // 요청 전송

XMLHttpRequest (XHR)

AJAX에서는 웹 브라우저에서 비동기적으로 데이터를 요청하고 받아오는 데 XMLHttpRequest (XHR)를 사용했다.

서버와 비동기적으로 데이터를 교환할 수 있는 오래된 API로, XMLHttpRequest의 문제점을 보완하여 나온 것이 FetchApi이다.

1. 복잡한 콜백 처리

XMLHttpRequest는 콜백 기반으로 작동한다. 이는 비동기 요청이 완료되면 호출될 콜백 함수를 설정하는 방식이다.

하지만 콜백을 사용하는 방식은 다음과 같은 문제를 야기할 수 있다

• 콜백 지옥: 여러 개의 비동기 호출이 중첩될 때, 콜백 함수가 서로 중첩되어 코드가 복잡해지고 가독성이 떨어진다.
• 에러 처리: 각 콜백 함수 내에서 에러를 처리해야 하며, 에러가 발생할 경우 복잡한 로직이 필요하다.

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // 첫 번째 비동기 요청 성공 시 처리
            const data = JSON.parse(xhr.responseText);
            
            const xhr2 = new XMLHttpRequest();
            xhr2.open("POST", "https://api.example.com/submit", true);
            xhr2.onreadystatechange = function() {
                if (xhr2.readyState === 4) {
                    if (xhr2.status === 200) {
                        // 두 번째 비동기 요청 성공 시 처리
                        console.log("Second request succeeded.");
                    } else {
                        // 두 번째 요청 오류 처리
                        console.error("Second request failed with status:", xhr2.status);
                    }
                }
            };
            xhr2.send(JSON.stringify(data));
        } else {
            // 첫 번째 요청 오류 처리
            console.error("First request failed with status:", xhr.status);
        }
    }
};

xhr.send();

2. 프로미스 지원 부족

XMLHttpRequest는 프로미스를 지원하지 않으므로 비동기 처리 시 프로미스 기반의 접근을 사용할 수 없다.

이는 비동기 코드를 작성할 때 비효율적이며, JavaScript 비동기 처리 패턴(async/await)과의 통합이 어렵다.

3. 응답 데이터 처리의 복잡성

XMLHttpRequest는 응답 데이터를 처리할 때 여러 번의 변환 작업이 필요하다.

예를 들어, JSON 응답을 처리하려면 responseText를 파싱해야 한다.

const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체를 const로 선언
const url = "https://api.example.com/data"; // 요청 URL을 const로 선언

xhr.open("GET", url, true); // 비동기 GET 요청 설정

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        const data = JSON.parse(xhr.responseText); // 응답 데이터를 const로 선언
        console.log(data);
    } else {
        console.error("Request failed with status:", xhr.status);
    }
};

xhr.onerror = function() {
    console.error("Request failed due to a network error.");
};

xhr.send(); // 요청 전송

4. HTTP 상태 코드와 에러 처리

XMLHttpRequest는 HTTP 상태 코드를 직접 처리해야 하며, 네트워크 오류를 처리하기 위해 추가적인 코드가 필요하다.

상태 코드가 실패를 나타내는 경우에도 onreadystatechange 이벤트에서 수동으로 처리해야 한다.

5. 동기 호출의 문제

XMLHttpRequest는 동기 모드를 지원하지만, 이는 브라우저의 UI 스레드를 차단해 

사용자가 요청이 완료될 때까지 기다려야 한다.

6. 제한된 기능과 설정

XMLHttpRequest는 캐시 제어, 요청 타임아웃 등과 같은 일부 기능을 설정하는 데 제한이 있다.

7. 호이스팅과 스코프 문제

XMLHttpRequest의 상태를 관리하는 데 필요한 콜백 함수와 이벤트 핸들러는 this 키워드와 같은

스코프 관련 문제를 동반한다. 

XMLHttpRequest의 복잡성과 한계를 극복하기 위해  Fetch API가 도입되었다.

Fetch API는 다음과 같은 개선된 기능을 제공한다

Fetch API

• 프로미스 기반: fetch() 함수는 프로미스를 반환하여,  async/await와 함께 사용할 수 있음으로 콜백 문제를 해결했다
• 단순한 문법: fetch()는 간단한 문법으로 HTTP 요청을 수행하고, 응답을 처리한다.
• 응답 객체의 메서드: 응답 객체에서 다양한 메서드를 사용하여 JSON, 텍스트, Blob 등으로 변환한다.
• 에러 처리: 네트워크 오류를 프로미스의 catch 블록에서 처리하고,
• HTTP 상태 코드로 응답 성공 여부를 확인할 수 있다.

// 서버에서 데이터를 비동기적으로 가져오기
fetch("https://api.example.com/data")
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json(); // JSON 형식으로 응답 데이터 파싱
    })
    .then(data => {
        console.log(data); // 데이터 처리
    })
    .catch(error => {
        console.error('There was a problem with the fetch operation:', error); // 오류 처리
    });

REST API의 JSON 정보를 가져오자! (서블릿 환경)

개발환경

-- Eclipse

-- Servlet 3.1

-- Oracle DB

Java EE의 서블릿은 인텔리제이 무료 버전에서는 지원을 안해준다는 걸 알고
Eclipse를 설치해서 사용했다....

그리고 처음엔 MariaDB를 연결하려고 했으나 
Servlet 환경에서는 자바 1.8을 써야하는데 MariaDB jdbc는 자바 6부터 
지원해주는다는 걸 알고 Oracle DB로 중간에 변경했다.

SIMPLE JSON

JSON 데이터를 처리하기 위한 자바 라이브러리이다.
key value로 이루어진 JSON 데이터를 MAP과 List로 담아 가져온다.

서블릿에서는 다운받은 드라이버를 WEB-INF의 lib 폴더에 넣으면 된다!
(MAVEN, GRADLE에서는 의존성 주입)

REST API

https://jsonplaceholder.typicode.com/posts/1

위 링크의 JSON 데이터를 자바로 가져와야 한다.
GET 요청으로 파라미터들을 가져와보자.

전체코드

    public class RESTApi {

        public static void main(String[] args) throws IOException {
            // REST API 엔드포인트 URL
            String apiUrl = "https://jsonplaceholder.typicode.com/posts/1";

            // URL 객체 생성
            URL url = new URL(apiUrl);

            // HttpURLConnection 객체 생성 및 설정
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setRequestMethod("GET");
            connection.setRequestProperty("Accept", "application/json");

            // HTTP 응답 코드 확인
            int responseCode = connection.getResponseCode();
            if (responseCode == HttpURLConnection.HTTP_OK) {
                // 응답 데이터 읽기
                BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
                String inputLine;
                StringBuffer response = new StringBuffer();

                while ((inputLine = in.readLine()) != null) {
                    response.append(inputLine);
                }
                in.close();

                // JSON 데이터 출력
                System.out.println(response.toString());
            } else {
                System.out.println("GET request failed: HTTP error code " + responseCode);
            }
        }
    }

1. URL을 가져오기 위해 REST API의 URL을 변수화한다.

 // REST API 엔드포인트 URL
String apiUrl = "https://jsonplaceholder.typicode.com/posts/1";

// URL 객체 생성
URL url = new URL(apiUrl);

2. HttpURLConnection 객체를 생성하여 응답 데이터를 가져온다

// HttpURLConnection 객체 생성 및 설정
HttpURLConnection connection = (HttpURLConnection) url.openConnection();
connection.setRequestMethod("GET");
connection.setRequestProperty("Accept", "application/json");

// HTTP 응답 코드 확인
int responseCode = connection.getResponseCode();
if (responseCode == HttpURLConnection.HTTP_OK) {

HttpURLConnection을 사용하여 URL에 연결한다.
GET 요청을 설정하고, Accept 헤더를 사용하여 JSON 형식의 응답을 요청한다.

HttpURLConnection 클래스는 뭔가요?

HttpURLConnection은 HTTP 통신을 위한 자바 클래스이다.
HTTP 연결을 생성하고, 클라이언트가 (여기선 REST api) 
HTTP 프로토콜을 사용하여 데이터를 주고받을 수 있게 한다.

주요 메서드

연결 설정

openConnection(): URL 객체로부터 HttpURLConnection 객체 생성
setRequestMethod(String method): HTTP메서드 (GET, POST)를 생성한다.
setRequestProperty(String Key, String value): Http 요청 헤더 설정
*헤더는 클라이언트가 서버로 요청을 보낼 때 함께 전송하는 데이터다.

응답 처리
getResponseCode(): Http 응답 코드 가져오기 (200, 300, 400...)

읽기 및 쓰기
getInputStream(), getOutputStream: 서버로부터 데이터 읽거나 전송

연결 해제
disconnect(): 연결 해제

3. 응답 데이터를 읽고 출력한다

// 응답 데이터 읽기
BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
String inputLine;
StringBuffer response = new StringBuffer();

while ((inputLine = in.readLine()) != null) {
    response.append(inputLine);
}
in.close();

// JSON 데이터 출력
System.out.println(response.toString());
} else {
    System.out.println("GET 요청 실패: HTTP error code " + responseCode);
}

BufferedReader 입력

HTTP 요청을 통해 서버로부터 받은 데이터는 텍스트 형식의 문자열로 제공되는데
BufferedReader은 문자를 읽기 위한 클래스이다. 
우선 buffer에 담고 컴파일시 처리하기 때문에 대용량 데이터 처리에 유리하다.
따라서 HTTP 연결을 통해 서버로부터 데이터를 읽어올 때 사용된다.

우선 BufferedReader을 사용하여 문자열로 읽은 후,
StringBuffer을 사용해 문자열을 추가하거나 변경한다.

콘솔에 출력!!

베리굿^^

JSON은 자바스크립트에서 객체를 만들 때 사용되는 표현식이다.

자바스크립트 객체의 형식을 기반으로 만들어졌지만 텍스트 형식일 뿐으로

JSON은 데이터 포맷일 뿐으로 단순히 데이터를 표시하는 표현 방법이다.

데이터 용량이 적다는게 장점으로, 클라이언트의 정보를 백으로 보내는 데이터 전송에 많이 사용된다.

XML vs JSON

JSON 문법과 형식

• JSON 형식은 자바스크립드 객체가 기반이기 때문에 key / value가 존재한다. 
• JSON 객체에서 Key는 문자열로 표현되며 항상 쌍따옴표를 이용하여 표기해야 한다.
• 객체, 배열 등의 표기를 사용할 수 있으며 일반 자바스크립트의 객체처럼 원하는 만큼 중첩시켜서 사용할 수 있다.
• JSON 형식에서는 null, number, string, array, object, boolean을 사용할 수 있다.

JSON에는 두 가지 요소로 구성되어 있다.

객체

JSON 객체는 중괄호로 둘러싸인 이름 값 쌍의 집합이다. 각 이름-값 쌍은 쉼표로 구분되며

이름은 문자열 고정이되 값은 JSON 형식의 어떤 데이터 타입도 가능하다.

{
  "key1": "value1",
  "key2": 123,
  "key3": true,
  "key4": ["item1", "item2"],
  "key5": {
    "nestedKey1": "nestedValue1",
    "nestedKey2": 456
  }
}

key는 객체의 key이며 value1, 123, true .... 는 key에 할당된 값이다.

객체는 중첩 사용도 가능해 key5처럼 객체 안에 객체가 들어갈 수 있다.

배열

JSON 배열은 대괄호 []로 둘러싸인 값들의 목록이다.

각 값은 쉼표로 구분되며 값은 JSON 형식의 어떤 데이터 타입도 사용 가능하다.

[
  "item1",
  "item2",
  {"nestedKey": "nestedValue"},
  ["subitem1", "subitem2"]
]

item1, item2는 배열의 항목이며

nestedKey와nestedValue... 는 배열의 항목 중 일부가 객체{} 나 다른 배열[]로 중첩될 수 있다. 

자바스크립트에서 변수를 선언하는 방법으로는 var, let, const 세 가지가 있다.

기존에 사용되는 var는 호이스팅과 스코프 이슈 등에서 문제가 발생할 수 있어서

const와 let을 사용하여 변수를 선언하는 것이 권장된다.

1. const

• const는 상수를 선언하는 데 사용된다.
• 한 번 값을 할당하면 재할당이 불가능하며 값이 변하지 않는다.
• 블록 범위 {} 안에서만 사용이 가능하다.
• 반드시 선언과 동시에 초기화가 필요하다.

사용 예시:

• 수학적인 상수 (const PI = 3.14;)
• 프로그램에서 변경되지 말아야 할 설정 값 (서버 주소 등)
• 고정된 값 (컬러 코드)

const PI = 3.14;
PI = 3.14159; // 에러 발생: 상수에 재할당할 수 없음

2. let

• let은 변수를 선언하는데 사용된다.
• 값을 재할당 할 수 있다.
• 블록 범위 {} 안에서만 사용이 가능하다.
• 반드시 선언과 동시에 초기화가 필요하지 않다.

사용 예시:

• 반복문에서 사용되는 변수
• 사용자 입력을 저장하는 변수
• 계산 중간 결과를 저장하는 변수

let count = 0;
count = 1; // 변수에 새로운 값 할당 가능

const는 값이 변하지 않는 상수를 선언할 때 사용하고

let은 값이 변할 수 있는 변수를 선언할 때 사용한다.

그럼 var에는 어떤 문제가 있을까?

1. 함수 내에서 자유로운 사용 가능

var로 선언된 변수는 함수 내에서 자유롭게 사용이 가능하다.

같은 이름의 변수를 중복해서 선언해도 정상적으로 동작하며 마지막 값을 저장해버려

첫번째 선언한 값을 덮어버린다.

var code = 10;
var code = 20;
console.log(`code: ${code}`);  // 'code: 20'

이 문제는 if 문과 for문 을 사용할때 문제가 되는데, 기존 변수에 데이터가 재할당 되기 때문에 

if 구문도 전역 함수와 동일하게 취급된다.

var code = 10;
if (true) {
  var code = 0;
  var codeName = 'Hello JS!';
}
console.log(`code: ${code}`);  // 'code: 0'
console.log(`codeName: ${codeName}`);  // 'codeName: Hello JS!'

이러면 실행 조건을 걸거나 내부의 값을 구하기 위해 if문과 for문을 사용하는 의미가 없어지지 않나 싶다

3. 호이스팅 발생

console.log(variable); // undefined (호이스팅 발생)
var variable = 'hello';

console.log(variable); // ReferenceError: Cannot access 'variable' before initialization
let variable = 'hello';

자바스크립트의 실제 코드를 차례대로 읽는 방식이 아닌, 변수 선언이나 함수 선언이 가장 먼저 읽히는 것으로 

의도했던 코드 작성과는 다른 결과가 일어날 수 있다. 이게 호이스팅이다.