백엔드 개발자를 위한 '생존형' 자바스크립트 (Fetch API & Debugging)

1. 들어가며: API만 만들고 끝낼 순 없다

백엔드 개발자의 주 무대는 서버와 DB지만, 결국 우리가 만든 API는 **화면(Client)**과 만나야 비로소 완성됩니다. "프론트엔드 개발자가 알아서 하겠지"라고 생각할 수도 있지만, 간단한 어드민 페이지를 만들거나 내 API가 제대로 동작하는지 화면에서 테스트하려면 최소한의 자바스크립트 지식이 필수적입니다.

이번 포스팅에서는 거창한 프레임워크(React, Vue) 없이, **순수 자바스크립트(Vanilla JS)**만으로 데이터를 주고받는 핵심 원리 5가지를 정리합니다.

---

2. 핵심 1: HTML 값 가져오기 (DOM 접근)

백엔드로 치면 Scanner나 HttpServletRequest로 입력을 받는 단계입니다. HTML 태그에 주민등록번호 같은 고유한 id를 주고, 자바스크립트로 그 요소를 찾아옵니다.

• HTML:

  <input type="number" id="quantity" value="10">
  

• JavaScript: document.getElementById가 표준입니다.

  // 1. 요소(Element) 찾기
  const inputTag = document.getElementById('quantity');
  
  // 2. 값(Value) 꺼내기
  // 주의: input의 value는 무조건 '문자열(String)'입니다. 
  // 숫자 연산이 필요하면 변환해야 합니다.
  const count = Number(inputTag.value); 
  

---

3. 핵심 2: 서버로 데이터 던지기 (Fetch API)

과거에는 Ajax(jQuery)나 Axios를 썼지만, 요즘 브라우저는 내장 함수인 fetch를 지원합니다. 별도의 라이브러리 설치 없이 바로 쓸 수 있어 '생존형'으로 딱입니다.

기본 3박자 (URL, Header, Body) 백엔드 컨트롤러가 @RequestBody로 JSON을 받을 준비를 하고 있다면, 보내는 쪽도 JSON으로 포장해야 합니다.

JavaScript

 

const requestData = {
    userId: 1,
    code: "KRW-BTC",
    amount: 1000
};

fetch('/api/orders', {
    method: 'POST', // 1. 메서드 지정 (GET, POST, PUT...)
    headers: {
        'Content-Type': 'application/json' // 2. "나 JSON 보낸다!" 선언 (필수)
    },
    body: JSON.stringify(requestData) // 3. JS 객체를 JSON 문자열로 변환
})
.then(response => { /* 성공/실패 처리 */ });

• 주의: JSON.stringify()를 안 쓰면 서버에서는 Unrecognized token 에러가 발생하거나 값이 null로 들어옵니다.

---

4. 핵심 3: 비동기 처리 이해하기 (Async/Await)

백엔드(Java) 개발자가 JS를 할 때 가장 헷갈리는 부분입니다. JS는 기본적으로 "응답을 기다려주지 않고 다음 줄로 넘어가는(비동기)" 성질이 있습니다.

그래서 .then() 지옥에 빠지기 쉬운데, 이를 Java처럼 깔끔하게 짜려면 async/await 문법을 쓰면 됩니다.

JavaScript

 

// async 함수 안에서만 await 사용 가능
async function orderStock() {
    try {
        // await: "서버 응답 올 때까지 여기서 딱 기다려!"
        const response = await fetch('/api/orders', { ... });
        
        if (response.ok) {
            alert("성공!");
        } else {
            alert("실패!");
        }
    } catch (error) {
        console.error("통신 에러:", error);
    }
}

백엔드 개발자에겐 이 try-catch 구조가 훨씬 익숙하고 가독성이 좋습니다.

---

5. 핵심 4: 디버깅은 '개발자 도구'로 (F12)

코드를 짰는데 버튼을 눌러도 반응이 없다면? IntelliJ 로그를 보기 전에 **브라우저 개발자 도구(F12)**를 먼저 봐야 합니다.

1. Console 탭:
   • 자바스크립트 문법 에러(빨간 글씨) 확인.
   • Uncaught ReferenceError: 변수명 오타나 정의되지 않은 함수 호출 시 발생.
2. Network 탭 (가장 중요!):
   • 내가 보낸 요청이 실제로 날아갔는지?
   • Payload (Request): 내가 보낸 JSON 데이터가 예쁘게 들어갔는지?
   • Preview (Response): 서버가 뱉어낸 에러 메시지("잔액 부족" 등) 확인.

백엔드 개발자는 Network 탭만 잘 봐도 "프론트 문제인지 백엔드 문제인지" 1초 만에 판별할 수 있습니다.

---

6. 핵심 5: 가장 흔한 에러 'CORS' 

나중에 프론트엔드(React 등)와 백엔드(Spring Boot) 서버를 따로 띄우면 100% 마주치는 에러입니다.

• 에러 메시지: Access to fetch at ... from origin ... has been blocked by CORS policy
• 이유: 보안상의 이유로, 브라우저는 다른 출처(도메인/포트)의 서버로 요청을 보내는 것을 기본적으로 막습니다. (예: localhost:3000 -> localhost:8080)
• 해결: 백엔드 Controller나 Security 설정에서 @CrossOrigin 등을 통해 허용해 줘야 합니다.

당장 타임리프(SSR)를 쓸 때는 같은 서버라 괜찮지만, 추후 분리할 때를 대비해 용어는 꼭 알아둡시다.

---

7. 마치며

이 정도 내용만 숙지하고 있어도 간단한 테스트 페이지를 만들거나, 프론트엔드 개발자와 소통할 때 "데이터를 JSON으로 보냈는데 확인해 보셨나요?"라고 당당하게 말할 수 있습니다.

이제 다시 백엔드 프로젝트로 돌아가서, 이 지식을 활용해 화면을 연동해 봅시다!