비동기 함수(async function)

결과가 바로 나오지 않는 작업을 기다렸다가 실행할 수 있는 함수

즉, 서버에서 데이터를 가져오는 동안 다른 코드가 실행될 수 있도록 함

✅ 기존 방식 (동기 코드)

console.log("1. 시작");
const response = fetch('/some-api'); // 서버 응답을 기다림
console.log("2. 데이터 가져오기 완료");

문제점: 서버 응답이 오래 걸리면 "2. 데이터 가져오기 완료"도 늦게 실행됨 → 코드 전체가 멈추는 느낌이 발생합니다.

✅ 비동기 방식 (async-await)

console.log("1. 시작");
const response = await fetch('/some-api'); // 기다리는 동안 다른 코드 실행 가능!
console.log("2. 데이터 가져오기 완료");

장점: 서버 응답을 기다리는 동안 다른 코드가 실행될 수 있음 → 앱이 멈추지 않고 부드럽게 실행됨

🚀 코드 분석

1️⃣ 버튼 클릭 이벤트 핸들러 (비동기 함수)

btnCheckNick.onclick = async function(){

✅ async function을 사용하면 내부에서 await를 사용할 수 있음 ✅ fetch()는 서버에서 응답을 받을 때까지 시간이 걸리므로 await가 필요함

2️⃣ 입력된 별명 값 가져오기

const value = formRegister.nick.value;

✅ 사용자가 입력한 별명 값을 가져옴 (예: value = "hello")

3️⃣ await fetch() → 서버에 GET 요청 보내기

const response = await fetch('/jboard/user/check.do?type=nick&value='+value);

✅ /jboard/user/check.do로 비동기 GET 요청을 보냄 ✅ await를 사용했기 때문에 서버 응답이 도착할 때까지 기다림 ✅ 만약 await가 없으면, fetch()가 비동기적으로 실행되어 response.json()보다 먼저 console.log(data)가 실행될 수도 있음