[ReactJS로 영화 웹 서비스 만들기 실습] Vanilla JS - Get Method 활용 데이터 송수신

IRISH·2024년 4월 16일

React vanilljs

ReactJS-Movie-Web-Service

목록 보기

10/23

학습일자 : 20240415

계기

React로 나중에 id / login 등의 기능을 구현할 때 Get 또는 Post를 이용해야 한다는 것을 알고 있었다.
하지만, React로 구현해보기 이전에, Vanilla JS를 통해 Get과 Post가 무엇이며 어떤 차이점이 있고 어떻게 구현해야 하는지 알아보고 싶었다.
하지만, 직장인이므로 일단 Get만… 진행한다. 그래도 하는 게 중요하니깐!

소스 코드 및 설명 - 뤼튼

송신 파일(getSend.html)

<!DOCTYPE html>
<html>
  <head>
    <title>getSend</title>
  </head>
  <body>
    <h1>데이터 보내는 화면</h1>
    <form action="getShow.html" method="GET">
      <label for="name">이름:</label>
      <input type="text" id="name" name="name" required />
      <input type="submit" value="데이터 보내기(To getShow)" />
    </form>
  </body>
</html>

`<form> 태그의 action` 속성에 수신 대상인 getShow.html 파일을 지정하여 데이터를 전송할 대상을 설정합니다.
method 속성을 GET으로 지정하여 GET 방식으로 데이터를 전송합니다.

수신 파일(getShow.html)

<!DOCTYPE html>
<html>
  <head>
    <title>getShow</title>
  </head>
  <body>
    <h1>받은 데이터 보여주기</h1>
    <script>
      // URL에서 쿼리 파라미터 가져오기
      function getUrlParameter(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
        var results = regex.exec(window.location.search);
        return results === null
          ? ""
          : decodeURIComponent(results[1].replace(/\+/g, " "));
      }

      // 이름 데이터 가져오기
      var name = getUrlParameter("name");
      if (name) {
        document.write("<p>getSend 화면에서 전송된 이름: " + name + "</p>");
      } else {
        document.write("<p>이름 데이터가 전송되지 않았습니다.</p>");
      }
    </script>
  </body>
</html>

getShow.html 파일에서는 JavaScript를 사용하여 URL에서 쿼리 파라미터를 가져옵니다.
getUrlParameter() 함수를 통해 name 파라미터 값을 가져오고, 이를 화면에 출력합니다.
name 값이 존재하면 A 화면에서 전송된 이름을 출력하고, 그렇지 않으면 이름 데이터가 전송되지 않았음을 출력합니다.

알게 된 것

RegExp(정규 표현식)

정규 표현식의 주요 용도
- 문자열 검색 및 대체
- 입력 데이터 유효성 검사
- 복잡한 문자열 파싱
정규 표현식 패턴 구성 요소:
- 문자: 일반 문자, 숫자, 특수 문자 등
- 메타 문자: ., ^, $, *, +, ?, |, (), [], {} 등
- 문자 클래스: [abc], [^abc], \d, \w, \s 등
정규 표현식 플래그
- i: 대/소문자 구분 없이 검색
- g: 모든 일치 항목 검색
- m: 여러 줄 검색
- s: .이 개행 문자와 일치하도록 함
- u: Unicode 지원
- y: 마지막 일치 항목부터 검색

decodeURIComponent() 함수

decodeURIComponent() 함수는 JavaScript의 표준 내장 객체로, URI(Uniform Resource Identifier) 구성 요소를 디코딩하는 데 사용됩니다.
URL 인코딩된 문자열을 디코딩하여 원래의 문자열로 복원합니다.
예를 들어, "https://example.com?q=hello%20world" 에서 "hello world"를 추출할 수 있습니다.

화면

송신 화면(getSend.html)

수신 화면(getShow.html)

소스 코드 및 설명 - 개인

뤼튼을 통해 얻은 코드를 기반으로 전화번호 label을 추가하고, 일반적인 function을 arrow function으로 바꾼다.

송신 파일(getSendTest.html)

<!DOCTYPE html>
<html>
  <head>
    <title>getSendTest</title>
  </head>
  <body>
    <h1>irishNoah Get Sending Screen</h1>
    <form action="getShowTest.html" method="GET">
      <label for="name">이름:</label>
      <input type="text" id="name" name="name" required /><br />

      <label for="name">전화번호:</label>
      <input type="text" id="phone" name="phone" required />
      <br /><br />
      <input type="submit" value="데이터 보내기(To getShow)" />
    </form>
  </body>
</html>

전화번호 label을 추가했다.

수신 파일(getShowTest.html)

<!DOCTYPE html>
<html>
  <head>
    <title>getShowTest</title>
  </head>
  <body>
    <h1>irishNoah Get Showing Screen</h1>
    <script>
      const getUrlParameter = (value) => {
        value = value.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        let regex = new RegExp("[\\?&]" + value + "=([^&#]*)");
        let results = regex.exec(window.location.search);
        return results === null
          ? ""
          : decodeURIComponent(results[1].replace(/\+/g, " "));
      };

      // 이름 데이터 가져오기
      let name = getUrlParameter("name");
      if (name)
        document.write("<p>getSend 화면에서 전송된 이름: " + name + "</p>");
      else document.write("<p>이름 데이터가 전송되지 않았습니다.</p>");

      // 전화번호 데이터 가져오기
      let phone = getUrlParameter("phone");
      if (phone)
        document.write(`<p>getSend 화면에서 전송된 전화번호: ${phone}</p>`);
      else document.write(`<p>전화번호 데이터가 전송되지 않았습니다.</p>`);
    </script>
  </body>
</html>