Javascript 서버요청/비동기통신/노드제어

 

 

---

 

 

❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤

gayulz - Overview

 

GitHub - gayulz/EMBAD_project: EMBAD , MY PROJECT

 

---

 

 

 

🙏 양해의 말씀

그동안 포스팅을 잠시 미뤘다.

마지막 프로젝트에 집중하고 싶었고, 이 프로젝트는 이력서에도 포트폴리오에도 첨삭되는 거라 

옵시디언에 열심히 중간중간 메모 하며 포스팅만 미루었다.

지금은 최종 PPT가 완료되고, 포트폴리오 정리를 하면서 미루었던 포스팅을 다시 올려 본다

 

---

 

 

Javascript 코드를 작성하며 든 고민 

js로 진행하려 했던 부분은 크게 3가지였다.

공공데이터포털 api연결,  geolocation api 연결, 카카오지도 api연결이었다 

간단하게 js코드를 구현해서 작성을 해봤는데 

생각해 보니 서비스키가 노출되는 게 눈에 보였다.

프런트에서 서비스키가 노출되면 악용될 수 있으니 어떻게 해야 하나 고민했다

. env로 해야 하나?

하지만 api를 호출하고 처리하는 로직을 프런트단에서 해도 되는 건가?

아니면 서버단에서 꼭 처리를 해야 하면 좋은 점이 뭐지? 

 

이런 생각의 고민이 생겼다.

 

고민하다 결론은 서버에서 API호출 및 비즈니스 로직을 처리해야 한다는 결론이 나왔고 

프런트단은 클라이언트가 요구하는 내용을 서버에게 요청하고 서버의 응답을 받는 방향으로 진행하기로 했다.

 

 

 

통신할 때 뭐가 필요하지?

다시 개념 정리를 했다

클라이언트가 서버에 요청할 때 필요한 게 '무엇'인가?

 

1. URL (서버 매핑)

2. method (요청 방식)

3. parameter (전달 값)

 

그럼 작업을 해야 하는 것은 JSP파일에서 어떠한 '이벤트'가 발생되었을 때 js에서 이 이벤트를 캐치하고 

이 이벤트를 처리하기 위해 서버가 필요하다면 서버에 요청하는 처리를 해야 한다.

서버는 요청을 받고 컨트롤러와 서비스단 등 내부적인 처리 후 다시 JSP에게 전달해야 한다.

JSP파일은 처리가 되었으니, js에서 서버 컨트롤러에게 전달하는 것 매핑하는 것까지 구현을 해야 한다고 생각했다.

 

 

 

 

 

 

 

병원데이터 요청하기

let hospital = document.querySelector("#dutyNameList");
let city = document.querySelector("#city");
let hpidHidden = document.querySelector('#hpidHidden');
hospital.addEventListener('change', showHpidfn);

var jsonData, dutyNumber , dutyName;
// 병원정보를 요청해서 가져오는 로직
if (city) {
    city.addEventListener('change', async (event) => {
        event.preventDefault();
        let param = city.value;
        let url = '/getHospitalData';
        let option = {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({city: param})
        };
        try {
            let res = await fetch(url, option);
            if (!res.ok) {
                throw new Error(`HTTP error! status: ${res.status}`);
            }
            jsonData = await res.json();
            hospital.innerHTML = '';

            let defaultOption = document.createElement("option");
            defaultOption.value = '';
            defaultOption.textContent = '병원 선택';
            hospital.appendChild(defaultOption);

            jsonData.forEach(item => {
                let optionElement = document.createElement("option");
                optionElement.value = item.hpid;
                optionElement.textContent = `${item.dutyName}`;
                hospital.appendChild(optionElement);
            });
        } catch (error) {
            console.log('Error:', error);
        }
    });
} else {
    console.log("City element not found");
}

 

이 소스코드는 병원데이터를 요청하는 코드이다.

솔직히 도시명을 파라미터로 전달하는 것이라 파라미터값이 오픈돼도 되지만 일단 POST로 진행했다.

await키워드를 사용해 비동기 작업을 수행하도록 했다.

그 이유는 병원데이터를 가져올 때 혹시나 다른 작업을 수행할 수 있으니 비동기로 처리하기로 했다.

처음에 조금 헷갈렸던 부분이 headers부분과 body부분이었는데 JSON방식으로 파라미터를 전달할 때 

headers에 Content-Type을 명시해줘야 한다는 걸 까먹고 몇 번 오류가 났었다.

이 부분을 조금 신경 써서 작성하니 잘 되었다!

 

 

 

 

 

 

 

 

 

 

 

POSTMAN

(열심히 테스트한 흔적)

 

POSTMAN은 요청, 응답 테스트하며 친절하게 오류가 있다면 어떤 게 있는지 알려주는 좋은 tool이었다.

사실 공부하면서 배운 툴이지만, 처음엔 뭔가 통신이 안될 때 왜 안되는지 톰캣로그만 찾았는데 

생각해 보니 이럴 때 쓰라고 강사님이 알려준 postman이 갑자기 생각나서 바로 실행해 봤다. 생각보다 너무 좋았다.

 

처음엔 Postman으로 서비스키를 테스트할 땐 너무 잘 되었다. 그래서 바로 될 줄 알았다.

하지만 그건 나의 경기도 오산이었다.

 

스프링환경에서 하려고 하니 자꾸 오류가 생겼다.

왜? 발생되는 건지 고민에 고민을 거듭했다.

 

 

 

 

 

노드제어? 어.. 렵다

// 기관코드 갱신 함수
function showHpidfn() {
    let selectedOption = this.options[this.selectedIndex];
    dutyNumber = selectedOption.value;
    dutyName = selectedOption.text;
    hpidHidden.style.display = 'block';
    hpidHidden.innerHTML = `기관ID : ${dutyNumber}`; // 선택된 value 값으로 내용 변경
}

 

내가 하고자 했던 부분은 서버에서 병원 데이터를 가져오면 드롭박스로 해당 지역의 병원명이 보이고 

병원명을 클릭 시 해당 병원명의 기관 ID가 클라이언트 화면에 보이게 하고 싶었다.

그런데 자꾸 오류가 났다.

왜냐면 노드제어가 어려웠기 때문이다.

그래서 이래 저래 다시 VS code로 넘어가 테스트를 하다가 진행이 잘 되는 것을 확인했다

 

 

 

이런 식으로 구현이 되고 나서 너무 뿌듯했다!

 

 

 

 

 

 

 

동기방식 통신

1. 정의

동기 방식 통신은 요청한 작업이 완료될 때까지 대기하는 방식이다

요청을 보낸 후 서버로부터 응답을 받을 때까지 다른 작업을 수행하지 않고 대기함 

2. 동작 원리

클라이언트가 서버에 요청을 보내면 해당 요청을 처리하는 동안 클라이언트는 정지하고 대기함

서버는 요청을 처리하고 응답을 반환하면 클라이언트는 다음 단계로 진행한다

3. 사용 사례

동기 방식은 주로 간단한 작업에서 사용된다.

예를 들어, 웹 페이지에서 서버로 데이터를 요청하고 받아와야 할 때 사용한다 

 

비동기방식 통신 

1. 정의

비동기 방식 통신은 요청한 작업이 완료될 때까지 대기하지 않고 다른 작업을 계속할 수 있는 방식이다

요청을 보내고 나서도 대기하지 않고 다른 작업을 수행할 수 있다

2. 동작 원리

클라이언트가 서버에 요청을 보내면 해당 요청을 대기하지 않고 바로 다음 작업을 수행함

서버는 요청을 처리하고 응답이 준비되면 클라이언트는 그 응답을 처리함

3. 사용 사례

비동기 방식은 주로 복잡한 웹 애플리케이션에서 사용되며 웹 페이지의 일부를 업데이트하거나 여러 데이터 소스에서 데이터를 수집할 때 효과적으로 사용된다.

 

4. 장점 및 단점

여러 작업을 동시에 처리할 수 있다

데이터 동기화나 상태 관리에 복잡성이 증가될 수 있다

 

 

 

비교

 

- 동기 방식은 요청과 응답이 직렬적으로 처리되며 요청한 작업이 완료될 때까지 대기함 
- 비동기 방식은 요청과 응답이 병렬적으로 처리되며 요청한 작업이 완료될 때까지 대기하지 않고 다른 작업을 수행한다
- 동기 방식은 간단한 작업에 적합하며, 비동기 방식은 복잡한 작업과 다수의 동시 요청을 처리하는 데 유용하다.
- 예를 들어, 동기 방식은 웹 페이지 로딩 시에 HTML 파일을 요청하고 받아와야 할 때 사용되며, 비동기 방식은 웹 페이지에서 동적으로 데이터를 불러오거나 웹 애플리케이션에서 여러 작업을 병렬로 처리할 때 사용된다