[javascript] 기본 개념

JavaScript와 React, 기초 개념 정리

 

1. JavaScript와 React

 

• React는 JavaScript로 만들어진 특화된 도구

• React는 웹 앱 개발을 위한 라이브러리로, 상위 개념의 프레임워크가 아님.

• React를 사용하려면 JavaScript 이해가 필수.

• JavaScript 없이 React는 동작하지 않음.

• 바닐라 자바스크립트(Vanilla JavaScript)란?

• 프레임워크나 라이브러리를 사용하지 않은 순수 JavaScript.

• DOM 조작, 이벤트 처리 등 모든 작업을 JavaScript 코드로 작성.

 

2. 변수(Variable)란?

 

• 정의: 변수를 사용하면 데이터를 저장하고 재사용할 수 있음.

• 예: 이름, 숫자, 계산 결과 등을 저장.

• 왜 필요한가?

• 동일한 값을 반복적으로 사용할 때 유지 관리가 쉬움.

• 코드의 가독성과 유지보수성 증가.

 

변수 선언 방법

 

1. const:

• 상수 선언: 재할당 불가능.

• 변경되지 않는 값을 정의할 때 사용.

const PI = 3.14;

console.log(PI); // 3.14

 

 

2. let:

• 재할당 가능: 블록 스코프를 가짐.

• 변경 가능한 데이터를 저장할 때 사용.

let name = "John";

name = "Doe";

console.log(name); // "Doe"

 

 

3. var:

• 과거 방식: 함수 스코프를 가짐.

• 현재는 권장되지 않음.

var age = 30;

console.log(age); // 30

 

3. 스코프(Scope)란?

 

• 정의: 변수에 접근할 수 있는 범위.

• 종류:

1. 글로벌 스코프:

• 코드 어디에서나 접근 가능.

• var 또는 스크립트 최상단에 선언된 변수.

var globalVar = "Hello";

console.log(globalVar); // "Hello"

 

2. 함수 스코프:

• 함수 내부에서만 접근 가능.

• var는 함수 단위로 스코프가 제한됨.

function sayHello() {

  var message = "Hello, World!";

  console.log(message);

}

sayHello(); // "Hello, World!"

// console.log(message); // Error: message is not defined

 

3. 블록 스코프:

• {}로 묶인 코드 블록 내부에서만 접근 가능.

• let과 const는 블록 단위로 스코프가 제한됨.

if (true) {

  let blockVar = "Inside block";

  console.log(blockVar); // "Inside block"

}

// console.log(blockVar); // Error: blockVar is not defined

 

4. React와의 연계

 

• React에서 state나 props를 다룰 때 스코프를 잘 이해해야 함.

• 글로벌 변수 남용 시 React 컴포넌트가 데이터 변경 사항을 인지하지 못할 수 있음.

• const/let 사용 권장:

• React에서는 변하지 않는 데이터를 const로, 변경 가능한 데이터는 let으로 선언.

 

[오늘 배운 내용 정리]

 

1. 변수 선언

• 데이터를 저장하고 재사용할 때 사용.

• 선언 방법:

• let: 값을 변경 가능.

• const: 값을 변경 불가능(상수).

• var: 과거 방식, 지양.

 

예제

let a = 10; // 변경 가능

const b = 20; // 변경 불가능

var c = 30; // 과거 방식, 지양

 

2. 산술 연산자

• 숫자 간의 연산을 수행.

• 자주 사용하는 연산자:

• +: 더하기.

• -: 빼기.

• *: 곱하기.

• /: 나누기.

• %: 나머지 계산.

 

예제

let x = 5;

let y = 2;



console.log(x + y); // 7

console.log(x - y); // 3

console.log(x * y); // 10

console.log(x / y); // 2.5

console.log(x % y); // 1

 

3. 이벤트 다루는 방법

• HTML 요소에 이벤트를 연결하여 특정 동작 수행.

• 이벤트 종류:

• click: 클릭 이벤트.

• dblclick: 더블 클릭 이벤트.

• mouseenter: 마우스가 요소 위로 올려졌을 때.

• mouseleave: 마우스가 요소에서 나갔을 때.

• keydown: 키보드를 누를 때.

• keyup: 키보드를 뗄 때.

• change: 입력값이 변경되었을 때.

 

예제

<div id="box" style="width: 100px; height: 100px; background: lightblue;"></div>
<input type="text" id="input" placeholder="입력하세요">
<p id="msg"></p>
<button id="btn">클릭</button>

<script>
    const box = document.getElementById('box');
    const input = document.getElementById('input');
    const msg = document.getElementById('msg');
    const btn = document.getElementById('btn');

    // 클릭 이벤트
    btn.addEventListener('click', () => {
        msg.textContent = "버튼이 클릭되었습니다.";
    });

    // 더블 클릭 이벤트
    btn.addEventListener('dblclick', () => {
        msg.textContent = "버튼이 더블클릭되었습니다.";
    });

    // 마우스 엔터 이벤트
    box.addEventListener('mouseenter', () => {
        msg.textContent = "마우스가 박스 위로 이동했습니다.";
    });

    // 마우스 리브 이벤트
    box.addEventListener('mouseleave', () => {
        msg.textContent = "마우스가 박스를 벗어났습니다.";
    });

    // 키보드 입력 이벤트
    input.addEventListener('keydown', (e) => {
        msg.textContent = `입력 중: ${e.key}`;
    });

    // 입력값 변경 이벤트
    input.addEventListener('change', () => {
        msg.textContent = `값이 변경되었습니다: ${input.value}`;
    });
</script>

 

4. 개발자 도구 콘솔창

• 브라우저 개발자 도구(F12)를 통해 코드 디버깅 및 테스트 가능.

• 콘솔 창에서 JavaScript 실행 및 디버깅 지원.

 

주요 메서드

 

1. console.log(): 값을 출력.

console.log("Hello World!");

 

2. console.error(): 에러 메시지 출력.

console.error("에러 발생!");

 

3. console.table(): 데이터를 테이블 형태로 출력.

const data = [{ name: "철수", age: 25 }, { name: "영희", age: 22 }];

console.table(data);

 

요약

1. 변수 선언: let, const 사용.

2. 산술 연산자: 숫자 계산.

3. 이벤트 처리: 버튼 클릭, 키보드 입력 등 사용자 동작에 반응.

4. 개발자 도구 콘솔: 코드를 테스트하거나 디버깅.

 

 

 

개발자 도구 의 콘솔 창 사용하는 법

console.log(1+1); //산술연산자

이거 넣으면 콘솔에서 계산해줌

 

 

 

스크립트를 html안에 넣어서 보는 방법

콘솔에 오류 난 거 줄 까지 알려줌

오류 코드:

document.getElementById('msg').innerHTML = 'test'

 

기존

<script>

console.log('hello world');

console.log(1+1); //산술연산자

let a = 3;

let b = 5;

console.log(a+b); //산술연산자

document.getElementById('msg').innerHTML = 'test'

</script>

 

이 태그를 body 태그 제일 밑에 넣으면 오류 해결 완료

 

*연산자랑 데이터 타입

 

스크립트 링크 걸고 나서는 html <script> 태그안에 뭐 넣으면 안된다.

 

아래 터미널에 node 001(파일명) 을 치면 결과값 나옴

 

 

콘솔창에서 태그가 잘 참조되고 있는지 입력하면서 확인 필요

 

 

오늘 결과물

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
        input:focus {
            background-color: pink;
            outline: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
    <h1>두수의 합 구하기</h1>
    <input type="text" id="num1"> + <input type="text" id="num2">
    <div class="btn-area">
    <button type="button" class="btn">계산하기</button>
    </div>

    <p id="msg"></p>
    </div>

    <script>
        const num1 = document.getElementById('num1');
        const num2 = document.getElementById('num2');
        const btn = document.querySelector('.btn')
        const msg = document.getElementById('msg');                //'계산하기' 버튼을 클릭하면, num1의 사용자가 입력한 값 + num2 사용자가 입력한 값을 더해서 <p id="msg"에 출력할게
        //누가 이벤트를 가졌고, 이벤트의 종류는 무엇인가?

        btn.addEventListener('click', () => {
            msg.innerHTML = parseInt(num1.value) + Number(num2.value);
            num1.value = '';
            num2.value = '';
            num1.focus();
        });
    </script>

</body>
</html>

 

[javascript] 노드몬 설치 방법

[javascript] 노드몬 설치 방법

[javascript] 맥에서 백틱(`)을 입력하는 방법

[javascript] 맥에서 백틱(`)을 입력하는 방법