김현준 6주차 서블릿 카페 학습 일지

Redirection 상태 코드 별 차이

301 Moved Permanently

영구적으로 이동 → 영구 리다이렉션을 나타내는 코드이다.
요청한 리소스가 Location 헤더가 지정한 URL로 이동되었음을 나타낸다.
해당 URL로 리다이렉션 되면, 요청 메서드가 GET으로 변하고 본문이 제거 될 수 있다.
브라우저는 이 페이지로 리다이렉트하고, 검색 엔진은 해당 리소스로 연결되는 링크를 갱신한다.
명세에서는 리다이렉션을 수행할 때 메서드와 본문이 변경되지 않아야 한다고 하지만, 모든 사용자 에이전트가 요구사항을 충족하지 않는다.
301코드는 GET, HEAD 메서드의 응답으로만 사용하고, POST 메서드에 대해서는 메서드 변경이 명시적으로 금지된 308 Permanent Redirect를 사용해야 한다.

302 Found

대상 리소스가 일시적으로 다른 URI 아래에 있음을 나타낸다.
리다이렉션이 변경될 수 있으므로 클라이언트는 향후 요청에 대해 대상 URI를 계속 사용해야 한다,
검색 엔진은 리소스에 대한 링크를 업데이트하지 않는다.
302 코드도 301과 마찬가지로 모든 에이전트가 요구사항을 충족하지 않기 때문에 GET, HEAD 메서드에 대한 응답으로만 설정하고 이 경우 메서드 변경이 명시적으로 금지되므로 307 Temporary Redirect를 대신 사용하는 것이 좋다.
사용하던 메서드를 GET으로 변경하려는 경우, 303 See Other을 대신 사용해야 한다.

303 See Other

리다이렉션이 요청한 리소스 자체에 연결되지 않고 다른 페이지에 연결됨을 나타낸다.
PUT 또는 POST의 결과로 다시 전송되는 경우가 많다.
이 리다이렉션 페이지를 표시하는 데 사용되는 방법은 항상 GET이다.

마주친 문제 상황

302 메시지를 보내었을 때 PUT, DELETE 요청이 들어왔을 때 에러 페이지로 리다이렉트를 보낼 때 405 Method Allow를 뱉었다.
네트워크 탭을 보아 크롬에서는 요청에 대한 메서드를 유지하면서 다시 보내기 때문에 405 에러가 떴다.
따라서 303으로 리다이렉션을 다루었을 때는 GET 요청으로 정상적으로 에러 코드를 반환하는 모습을 볼 수 있었다.

AJAX

AJAX란?

AJAX는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

표현 정보를 위한 HTML과 CSS
동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다)

AJAX는 함께 사용하는 기술의 묶음을 지칭하는 용어이다.

기존 기술과의 차이점

기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹페이지를 작성하고 응답으로 되돌려 준다.

이때 최초에 폼을 가지고 있던 페이지와 사용자가 이 폼을 채워 결과물로써 되돌려 받은 페이지는 일반적으로 유사한 내용을 가지고 있는 경우가 많다.

결과적으로 중복되는 HTML 코드를 다시 한번 전송을 받음으로써 많은 대역폭을 낭비하게 된다.

Ajax 애플리케이션은 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다.

웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서 자바스크립트를 쓰는데, 웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리되므로 웹 브라우저와 웹 서버의 교환 데이터량, 처리 데이터량이 줄어들어 응답성이 좋아진다.

서블릿 카페에서는 댓글을 삭제하거나 표시할 때 비슷한 폼에서 댓글 부분만 추가 되기 때문에 댓글 부분을 JSON으로 응답해서 클라이언트의 브라우저의 자바 스크립트에서 JSON을 바탕으로 동적으로 HTML을 생성하고 코드에 따라 구성해 다시 폼을 보내지 않고 화면을 완성할 수 있다.

 document.addEventListener('DOMContentLoaded', function () {

        // 답변하기 버튼 클릭 이벤트
        document.getElementById('submit-reply').addEventListener('click', function (e) {
            console.log("Reply button clicked");
            e.preventDefault();

            var form = document.querySelector('.submit-write');
            var formData = new URLSearchParams(new FormData(form)).toString();

            fetch('/reply', {
                headers: {
                    'content-type': 'application/x-www-form-urlencoded'
                },
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    data.contents = data.contents.replace(/\n/g, "<br>");
                    var replyTemplate = 
                    // HTML 코드 작성
                    document.querySelector(".qna-comment-slipp-articles").insertAdjacentHTML('beforeend', replyTemplate);
                    document.getElementById("contents").value = "";

                    // 댓글 수 업데이트
                    var commentCount = document.querySelector(".qna-comment-count strong");
                    commentCount.textContent = parseInt(commentCount.textContent) + 1;
                })
                .catch(error => {
                    console.error("Error adding reply:", error);
                    alert("Error adding reply: " + error);
                });
        });

Testcontainers

Java용 Testcontainers는 JUnit 테스트를 지원하는 Java 라이브러리로, 일반 데이터베이스, Selenium 웹 브라우저 또는 Docker 컨테이너에서 실행될 수 있는 모든 항목의 일회용 인스턴스를 제공한다.

Testcontainers를 사용하면 다음과 같은 종류의 테스트가 더 쉬워진다.

Data Access Layer integration tests
- 데이터베이스의 컨테이너화된 인스턴스를 사용하여 완전한 호환성을 위해 데이터 액세스 계층 코드를 테스트하지만 개발자 컴퓨터에 복잡한 설정을 요구하지 않는다.
- 컨테이너화할 수 있는 다른 데이터베이스 유형도 쉽게 사용할 수 있다.
Application integration tests
- 데이터베이스, 메시지 큐 또는 웹 서버와 같은 종속성이 있는 단기 테스트 모드에서 애플리케이션을 실행해 테스트 할 수 있습니다.
UI/Acceptance test
- 자동화된 UI 테스트를 수행하기 위해 Selenium과 호환되는 컨테이너화된 웹 브라우저를 사용할 수 있다.
- 각 테스트에서는 걱정할 브라우저 상태, 플러그인 변형 또는 자동화된 브라우저 업그레이드 없이 브라우저의 새로운 인스턴스를 얻을 수 있다.
- 또한 각 테스트 세션에 대한 비디오 녹화 또는 테스트가 실패한 각 세션에 대한 비디오 녹화를 얻을 수 있다.
Docker를 기반으로 하는 테스트이며, Junit에서 테스트가 가능하다.