<a href="https://exam.com">Example</ a>

개발 지식, 스크립트/HTML + CSS

<a href="https://exam.com">Example</ a>

시큐리티지호 2024. 9. 21. 19:21

회사 일로

아무런 생각 없이 사용하던 HTML의 태그에 대해 좀 알아 봤다.

엄청 간단한거지만

<a href="https://exam.com">Example</ a>

이러한 형태로 다른 페이지로 이동하면 method 는 자동으로 get 요청으로 보내는 것인가 ? 라는 의문이었다.

그래서 알아본 결과

ㅋㅋㅋㅋ 이렇게 간단하게 GPT가 답변을 해줬다.. ㅋㅋ

POST 요청 같은 경우는 "form 태그" 를 이용하면 된다.

JSP로 전체적인 예시를 보면,

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.io.*" %>
<!DOCTYPE html>
<html>
<head>
    <title>GET과 POST 요청 처리</title>
</head>
<body>

<%
    // 요청 방식 확인 (GET 또는 POST)
    String method = request.getMethod();

    if (method.equalsIgnoreCase("GET")) {
        // GET 요청 처리
        out.println("<h1>GET 요청이 도착했습니다!</h1>");
        String param1 = request.getParameter("param1");
        if (param1 != null) {
            out.println("<p>GET 파라미터: " + param1 + "</p>");
        }
    } else if (method.equalsIgnoreCase("POST")) {
        // POST 요청 처리
        out.println("<h1>POST 요청이 도착했습니다!</h1>");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        if (username != null && password != null) {
            out.println("<p>POST 데이터: 사용자 이름 - " + username + ", 비밀번호 - " + password + "</p>");
        }
    }
%>

<h2>GET 요청 예시</h2>
<!-- GET 요청을 보내는 링크 -->
<a href="example.jsp?param1=exampleValue">GET 요청 보내기</a>

<h2>POST 요청 예시</h2>
<!-- POST 요청을 보내는 form -->
<form action="example.jsp" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br>
    <button type="submit">Submit</button>
</form>

</body>
</html>

이렇게 사용한다.

POST 같은 경우 button을 클릭하면 action 속성의 url로 POST 요청이 가게 된다.

내가 헷갈렸던 "포인트" 를 짚어 보자면,

리액트를 사용할 때이다.

리액트 같은 경우는 일반적으로 axios(외부라이브러리) 또는 fetch(내부라이브러리) api를 활용해서 진행을 하는데,

이를 활용하여 jsp와 다르게 form 태그 또는 a 태그의 기능을 다르게 사용한다.

Fetch를 활용한 전체적인 예시를 본다면,

GET 요청

import React, { useEffect, useState } from "react";

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 컴포넌트가 마운트될 때 GET 요청을 보냄
    fetch("/api/data")
      .then((response) => response.json())
      .then((data) => {
        console.log("서버로부터 받은 데이터:", data);
        setData(data);
      })
      .catch((error) => {
        console.error("에러 발생:", error);
      });
  }, []); // 빈 배열이므로 컴포넌트가 마운트될 때 한 번만 실행됨

  return (
    <div>
      <h1>서버 데이터</h1>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>데이터를 불러오는 중...</p>
      )}
    </div>
  );
}

export default MyComponent;

POST 요청

import React, { useState } from "react";
import axios from "axios";

function MyForm() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault(); // form의 기본 동작을 막음 (페이지 새로고침 방지)
    
    // axios를 이용해 POST 요청을 보냄
    axios.post("/submit", { username, password })
      .then(response => {
        console.log("서버 응답:", response.data);
      })
      .catch(error => {
        console.error("에러 발생:", error);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input 
          type="text" 
          value={username} 
          onChange={(e) => setUsername(e.target.value)} 
        />
      </label>
      <br />
      <label>
        Password:
        <input 
          type="password" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

이렇게 보여줄 수 있는데 POST 같은 경우 form 태그를 활용하지만 JSP처럼 바로 서버로 요청이 가지 않고 Fetch를 통해 서버로 이동하는 것을 볼 수 있다.

이렇게 약간의 차이가 있다.

이 약간의 차이를 제대로 파악해놓지 못하면 쌓이고 쌓여 큰 문제를 일으킬 수도 있다고 생각한다.

이번에도 그렇도 앞으로도 사소한 개념이라도

"확실"

하게 파악하고 내 것으로 만들자!!