JavaScrpit Event, 동기, 비동기 통신

JS

var : 값을 다시 초기화 하는게 가능

호이스팅 : 선언이 스코프 최상단으로 끌어 올려지는 현상(초기화는 나중에 됨, undefined로 초기화)

ex)

var a = 10;

var a = 40;

a = 40이 들어감

hoisting

console.log(a); // undefined (호이스팅)
var a = 10;

가능하면 let을 사용하는게 좋음

let : 값을 초기화 다시 초기화하는게 불가 재할당은 가능 → 일반 변수같은 느낌

ex)

let b =30;

let b = 40; → 이렇게 다시 선언하여 초기화는 불가능

b = 40; → 이렇게 재할당은 가능

const : 상수 재할당은 안됨

undefiend : 변수는 선언되어 있지만 값이 정의 되지 않았다는 상태를 나타내줌 → 시스템이 자동으로 부여

let value;
console.log(value);  // undefined

null : 의도적으로 값이 비어있다는 것을 개발자가 명시적으로 나타낼 때 사용하는 값 → 개발자가 명시

let value = null;
console.log(value);  // null

NaN : 숫자가 아닌값을 연산에 사용했을 때 발생하는 값들 → 숫자가 아닌 값. type이 “number”로 반환됨

console.log(parseInt("Hello"));  // NaN

자기 자신과 같지 않다

console.log(NaN === NaN);  // false
console.log(isNaN(NaN));   // true

자바스크립트는

==비교를 타입캐스팅 자동으로 하기때문에

5 == ‘5’가 같은 true로 나온다 그래서 ===비교를 해야함

5 === ‘5’ 이렇게 해야 false가 나옴 타입까지 동일해야 true

자바스크립트는 변수에 함수를 할당하여 사용가능

const hello = funciton() { console.log("hello world"); }; 
hello(); // 이런식으로 사용 가능

function greet() {
	return funciton() {
		console.log("hello world");
	}
}
const hello = greet();
hello(); // hello world 출력

클로저

• 함수와 그 함수가 선언될 때의 스코프를 기억하는 기능
  → 예를 들어 자바에서 함수를 호출하면 스코프가 그 안에서만 적용 되지만 자바스크립트는 밖에서도 함수가 살아있어서 아래와 같이 count가 유지됨
• 클로저를 통해 함수는 자신의 외부 함수의 변수에 접근할 수 있고, 이 변수들은 함수가 실행된 후에도 유지된다.

function createCounter() {
    let count = 0;
    return function() {
        count += 1;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2 count가 계속 살아있음

객체

• 키-값의 집합으로 이루어져 아래와 같이 사용 가능하다. 이것은 JSON형태라고함

const myObj = { // JSON 형태 KEY: VALUE
	username: "user1",
	password: "1234",
	level: 50,
	isAdmin: false
}

console.log(myObj.username); // user1
console.log(myObj.isAdmin); // false

const userLevel = myObj.level;
console.log(userLevel + 100); // 150

Event

브라우저에서 사용자가 버튼을 클릭, 키보드를 누르거나 페이지가 로드되는 것을 이벤트라 부른다.

mouse 이벤트

click : 요소를 클릭할 때 발생

dblclick : 더블 클릭할 때

mouseover : 마우스가 요소 위로 올라갈 때

mouseout : 마우스가 요소를 벗어날 때

키보드 이벤트

keydown : 키를 누를 때

keyup : 키를 뗄 때

폼 이벤트

submit : 폼이 제출될 때

change : 입력 값이 변경될 때

등등 이 있다.

이벤트 리스너

특정 이벤트가 발생했을 때 실행되는 함수를 연결하는 메서드이다.

js에 내장되어 있는 객체인 document를 이용하여 사용한다.

브라우저는 html문서를 파싱하여 DOM이라는 구조를 만드는데 document는 이 DOM에 접근할 수 있도록 도와주는 객체이다.

document.getElementById(" " ).addEventListener("이벤트", ()=> { 실행메서드});

document.getElementById(" ").removeEventListener("이벤트", ()=> {실행메서드}); : 실행 메서드를 실행하고 해당 리스너를 제거한다.

다음과 같이 html과 Event를 이용하여 사용할 수 있다

mouse

<div id="mouseBox">마우스 이벤트 테스트</div>
<button id="mouseButton">클릭하세요</button>

// 클릭 이벤트
document.getElementById("mouseButton").addEventListener("click", () => {
  alert("버튼이 클릭되었습니다!");
});
const mouseBox = document.getElementById("mouseBox");

mouseBox.addEventListener("mouseover", () => {
  mouseBox.textContent = "마우스가 올라왔습니다!";
});

mouseBox.addEventListener("mouseout", () => {
  mouseBox.textContent = "마우스가 벗어났습니다!";
});

keyboard

<input id="keyboardInput" type="text" placeholder="키보드를 입력하세요" />
<p id="keyResult"></p>

const input = document.getElementById("keyboardInput");
const keyResult = document.getElementById("keyResult");

// 키가 눌렸을 때 (keydown) 값이 event변수에 전달
input.addEventListener("keydown", (event) => {
  keyResult.textContent = `눌린 키: ${event.key}`;
});

// 키가 떼어졌을 때 (keyup)
input.addEventListener("keyup", () => {
  keyResult.textContent = "키를 뗐습니다.";
});

form

<form id="formTest">
  <label for="formInput">이름:</label>
  <input id="formInput" type="text" placeholder="이름을 입력하세요" />
  <button type="submit">제출</button>
</form>
<p id="formMessage"></p>

const form = document.getElementById("formTest");
const formMessage = document.getElementById("formMessage");

// 제출 이벤트
form.addEventListener("submit", (event) => {
  event.preventDefault(); // 기본 동작 방지
  formMessage.textContent = "폼이 제출되었습니다!";
});

// 값 변경 이벤트
const formInput = document.getElementById("formInput");
formInput.addEventListener("change", () => {
  formMessage.textContent = `입력 값이 변경되었습니다: ${formInput.value}`;
});

DOM(Document Object Model)

웹 페이지의 문서 구조를 객체 모델로 표현한 것

getElementById("Id") : id값으로 html내의 요소를 가져오는 함수

document.getElementsByClassName("클래스이름") : 클래스 이름으로 요소를 가져오는 함수

document.querySelector('css선택자') : 선택자를 이용하여 요소를 가져오는 함수

동기통신

• 컴퓨터 프로세스에서 하나의 작업이 완료가 될 때 까지 작업을 기다렸다가 모든 작업을 순차적으로 처리하는 방식을 말한다.
• 장점은 단순하고 작은 규모 시스템에서 유리하게 작용할 수 있다.

비동기 통신

• 동기 통신과 반대로 서로 서로를 기다리지 않고 독립적으로 진행되는 방식이다.
• 문서의 각 요소를 객체로 나타내며, 이 객체를 통해 문서의 내용, 구조, 스타일 등을 동적으로 수정하고 접근할 수 있다

Fetch API

• http요청을 비동기 방식으로 처리하여 도와주는 인터페이스

Promise

• fetch API는 http 요청을 비동기적으로 수행하기 위해 Promise 객체를 사용한다.
• Promise는 비동기 작업이 완료되었을 때의 결과를 나타내는 객체.
• fetch가 반환하는 Promise 객체는 네트워크 요청의 상태를 관리하고, 요청이 완료된 후 응답을 처리하는 방법을 제공

Promise는 3가지 주요 상태를 가진다 대기(Pending), 이행(Fulfilled), 거부(Rejected)

Pending상태에서 Fulfilled나 Rejected상태가 될 수 있지만 반대는 안된다. 즉 Fulfilled가 된 상태에서 Pending이 되지 못함

대기(Pending)

• Promise가 생성된 초기 상태, 비동기 작업이 아직 완료되지 않았거나 결과가 아직 확정되지 않은 상태

이행(Fulfilled)

• 비동기 작업이 성공적으로 완료되어, Promise가 결과값을 가진 상태
• 이 상태로 변경되면, then() 메서드에 전달된 성공 콜백 함수가 호출된다.
• 결과값이 Promise 객체에 저장, Promise는 이 상태에 도달하면 더 이상 상태가 변경되지 않는다.

거부(Rejected)

• 비동기 작업이 실패하거나 에러가 발생하여, Promise가 실패 상태를 나타내는 상태.
• catch() 메서드에 전달된 에러 처리 콜백 함수가 호출
• 에러 정보가 Promise 객체에 저장되고, Promise는 이 상태에 도달하면 더 이상 상태가 변경되지 않는다.

fetch(url, 옵션)
  .then(onFulfilled => { ... }) // 성공시
  .catch(onRejected => { ... }); // 실해시

fetch()의 인자로는 요청을 보낼 url , 메타데이터(Option)을 부여한다.

옵션은 객체 형식으로부여 가능하고 요청의 **본문(body)**부분은 일반적으로 **JSON.stingify()**를 이용하여 객체를 문자열화 하여 포함시킨다.

fetch(url, 옵션)

위의 옵션 값

{
	method: HTTP 메서드,
	headers: {
		헤더 키: 헤더 값,
	},
	body: JSON.stringify(본문 값),
	[credentials: 쿠키 및 인증정보 포함 여부]
}