[IntelliJ_Summary] 댓글을 컨트롤러가 아닌 스크립트에서 처리하는 이유, JavaScript Object, JSON, Dictionary, HashMap의 차이점, HTML에서 페이지를 이동할 때 값을 전달하는 방법

1. 댓글을 컨트롤러가 아닌 스크립트에서 처리하는 이유

 

 

• 비동기 방식이란?
  • 사용자 인터페이스(UI)를 더 빠르고 반응성 있게 만드는 기술.
  • 페이지를 새로고침하지 않고 서버와 데이터를 주고받을 수 있음.
• 댓글 기능에 비동기 방식을 사용하는 이유
  • 사용자 경험 향상: 페이지 리로드 없이 댓글 작성.
  • 성능 개선: 불필요한 페이지 새로고침 방지.
  • 실시간 업데이트: 댓글이 바로 반영되어 보여짐.
• 스크립트로 댓글 기능 구현 예제
• 다음은 jQuery를 사용하여 댓글 기능을 비동기 방식으로 구현하는 간단한 예제입니다.

<!-- HTML 부분 -->
<div id="comments">
  <!-- 댓글 목록이 여기에 추가됩니다 -->
</div>
<textarea id="comment-text"></textarea>
<button id="submit-comment">댓글 작성</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#submit-comment').click(function() {
        const commentText = $('#comment-text').val();
        
        // 비어 있는 댓글 내용 방지
        if (commentText.trim() === '') {
            alert('댓글 내용을 입력해 주세요.');
            return;
        }
        
        // AJAX 요청
        $.ajax({
            url: '/comments', // 서버의 댓글 처리 엔드포인트
            method: 'POST',
            data: {
                text: commentText
            },
            success: function(response) {
                // 성공 시, 댓글 목록에 새 댓글 추가
                $('#comments').append(`<p>${response.text}</p>`);
                $('#comment-text').val(''); // 텍스트 상자 비우기
            },
            error: function() {
                alert('댓글 작성에 실패했습니다.');
            }
        });
    });
});
</script>

 

 

• HTML 부분
  • #comments: 댓글 목록을 보여주는 div입니다.
  • #comment-text: 사용자가 댓글을 입력할 textarea입니다.
  • #submit-comment: 댓글을 작성하는 버튼입니다.
• JavaScript/jQuery 부분
  • $(document).ready: 문서가 준비되면 실행되는 함수입니다.
  • $('#submit-comment').click: 버튼 클릭 이벤트 핸들러입니다.
  • $.ajax: 서버로 비동기 요청을 보내는 함수입니다.
  • success: 서버가 성공적으로 응답했을 때 실행되는 콜백 함수입니다.
  • error: 서버 요청이 실패했을 때 실행되는 콜백 함수입니다.

 

2.  JavaScript Object, JSON, Dictionary, HashMap의 차이점

 

2. 1 자바스크립트 객체 (JavaScript Object)

자바스크립트에서 객체는 키-값 쌍으로 이루어진 데이터 구조입니다. 다음과 같은 특징이 있습니다:

• 키-값 쌍: { key1: value1, key2: value2, ... }
• 동적 속성 추가: 언제든지 새로운 속성을 추가하거나 기존 속성을 변경할 수 있습니다.
• 속성 접근: 점 표기법(obj.key)이나 대괄호 표기법(obj['key'])으로 접근할 수 있습니다.

예제:

const replyObj = {
  bno: 1,
  replyText: "This is a reply",
  replyer: "User123"
};

console.log(replyObj.bno); // 1
console.log(replyObj['replyText']); // "This is a reply"

 2.2. JSON (JavaScript Object Notation)

JSON은 데이터 교환 형식입니다. 자바스크립트 객체와 문법이 유사하지만, JSON은 문자열로 저장되며, 속성 이름과 문자열 값은 반드시 큰따옴표(")로 감싸야 합니다. JSON을 자바스크립트 객체로 변환하려면 JSON.parse()를 사용하고, 자바스크립트 객체를 JSON 문자열로 변환하려면 JSON.stringify()를 사용합니다.

예제:

const jsonString = '{"bno":1, "replyText":"This is a reply", "replyer":"User123"}';
const replyObj = JSON.parse(jsonString);

console.log(replyObj.bno); // 1

 

 2.3. 딕셔너리 (Dictionary)

딕셔너리는 파이썬에서 사용되는 용어로, 자바스크립트 객체와 매우 유사합니다. 자바스크립트에는 딕셔너리라는 타입은 없지만, 객체가 딕셔너리와 같은 역할을 합니다.

 2.4. HashMap

HashMap은 주로 자바와 같은 언어에서 사용되는 자료 구조입니다. 자바스크립트에서는 Map 객체가 HashMap과 유사한 기능을 제공합니다. 그러나 일반적인 객체를 사용하는 경우가 더 많습니다.

예제 (Map 객체):

const replyMap = new Map();
replyMap.set('bno', 1);
replyMap.set('replyText', "This is a reply");
replyMap.set('replyer', "User123");

console.log(replyMap.get('bno')); // 1

 

 

 

3. HTML에서 페이지를 이동할 때 값을 전달하는 방법

 

 3.1. URL 쿼리 스트링 (Query String)

쿼리 스트링은 URL의 일부로, ?로 시작하며 &로 구분된 키-값 쌍을 포함합니다. 예를 들어, 페이지 간에 검색어를 전달할 때 사용할 수 있습니다.

<!-- 링크로 값 전달 -->
<a href="search.html?query=JavaScript">Search JavaScript</a>

// URL에서 쿼리 스트링 파싱
const params = new URLSearchParams(window.location.search);
const query = params.get('query');
console.log(query); // "JavaScript"

 3.2. 폼 서브미션 (Form Submission)

폼을 제출하여 값을 전달하는 방법입니다. GET 또는 POST 방식으로 전달할 수 있으며, 주로 POST 방식이 더 안전합니다.

<!-- GET 방식 -->
<form action="search.html" method="GET">
  <input type="text" name="query">
  <button type="submit">Search</button>
</form>

<!-- POST 방식 -->
<form action="submit.php" method="POST">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Login</button>
</form>

 3.3. 세션 스토리지 및 로컬 스토리지 (Session Storage & Local Storage)

브라우저의 웹 스토리지를 사용하여 데이터를 저장하고, 다른 페이지에서 이를 참조할 수 있습니다. 세션 스토리지는 탭 또는 창을 닫으면 사라지며, 로컬 스토리지는 지속됩니다.

// 저장하기
sessionStorage.setItem('key', 'value');
localStorage.setItem('key', 'value');

// 읽기
const value = sessionStorage.getItem('key');
const value = localStorage.getItem('key');

 3.4. 쿠키 (Cookies)

쿠키를 사용하여 데이터를 저장하고, 다른 페이지에서 이를 읽을 수 있습니다. 주로 서버와의 데이터 교환에 사용됩니다.

// 쿠키 설정
document.cookie = "username=John Doe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// 쿠키 읽기
const cookies = document.cookie.split('; ');
const usernameCookie = cookies.find(cookie => cookie.startsWith('username='));
const username = usernameCookie.split('=')[1];

 3.5. URL 프래그먼트 (URL Fragment)

URL의 해시(#) 부분을 사용하여 값을 전달할 수 있습니다. 이는 페이지 내 이동 또는 간단한 값 전달에 유용합니다.

 

<!-- 링크로 프래그먼트 전달 -->
<a href="page.html#section1">Go to Section 1</a>

// 해시 값 읽기
const hash = window.location.hash; // "#section1"

 

 3.6. 리다이렉트 시 데이터 전달 (Redirect with Data)

자바스크립트를 사용하여 페이지를 이동할 때, 데이터 객체를 URL에 포함시켜 전달할 수 있습니다.

 

// 데이터 객체 생성
const data = { name: "John", age: 30 };

// 데이터 객체를 JSON 문자열로 변환
const jsonString = encodeURIComponent(JSON.stringify(data));

// 리다이렉트
window.location.href = `nextpage.html?data=${jsonString}`;

// 다음 페이지에서 데이터 읽기
const params = new URLSearchParams(window.location.search);
const jsonString = params.get('data');
const data = JSON.parse(decodeURIComponent(jsonString));
console.log(data); // { name: "John", age: 30 }

 

 3.7. 히든 필드 (Hidden Fields)

폼에 숨겨진 필드를 사용하여 값을 전달할 수 있습니다. 주로 폼 서브미션과 함께 사용됩니다.

<form action="submit.php" method="POST">
  <input type="hidden" name="hiddenData" value="someValue">
  <button type="submit">Submit</button>
</form>

 3.8. 서버사이드 세션 (Server-side Sessions)

서버에서 세션을 사용하여 값을 저장하고, 다른 페이지에서 이를 참조할 수 있습니다. 주로 서버사이드 언어(PHP, Node.js 등)를 사용합니다.

// PHP 예제
session_start();
$_SESSION['username'] = 'John Doe';

// 다른 페이지에서 세션 값 읽기
session_start();
echo $_SESSION['username'];

각 방법은 특정 상황에 적합하므로, 전송하려는 데이터의 성격과 보안 요구사항에 따라 적절한 방법을 선택하시면 됩니다.