2021.12.29 - 데이터 전송

우리가 뭔가 데이터를 써서 전송을 하면, 그 데이터를 받아서 띄워주는 여러 커뮤니티 사이트가 있다.

오늘은 한 페이지에서 다른 페이지로 넘어가는 각 html 문서간의 link를 구현해보고,

게시판에서 쓴 글들을 전송하는 방법을 알아보자.

1. 게시판 메인 페이지 만들기

1.1 메인 페이지 만들기

우선 간단하게 게시판 형식의 table을 하나 만들어 보자.

/* 파일 이름: main.html */
<h1><a href="#"> 게시판 </a></h1>
<table border="1">
  <tr>
    <td>번호</td>
    <td>제목</td>
    <td>작성자</td>
    <td>작성일</td>
    <td>조회수</td>
 </tr>

 <tr>
   <td>1</td>
   <td><a href="#">안녕하세요</a></td>
   <td>lsj1994</td>
   <td>2021-12-29</td>
   <td>23</td>
 </tr>

 <tr>
   <td>2</td>
   <td><a href="#">집에 가고 싶다</a></td>
   <td>rltlwkd</td>
   <td>2021-12-30</td>
   <td>30</td>
  </tr>

이렇게하고 브라우저에서 불러오면 다음과 같이 나타난다.

이때까진 대부분의 anchor 태그의 href value에 #을 넣어 link되는 페이지가 없었지만

이번엔 다른 html 문서를 만들고, 그 html문서를 여기에 link 시켜보도록 하자.

우선 게시판의 로고에 메인 페이지로 돌아오는 기능을 먼저 넣어보자.

h1 tag안에 다음을 추가해주면 된다.

  <h1><a href="./main.html"></a></h1>

본 html 파일이 메인 페이지가 될 것이므로 본 html 파일의 이름을 그대로 넣어주면 된다.

이제 logo를 클릭하면 메인페이지로 돌아간다는 것을 알 수 있다.

같은 방법으로 글의 제목을 클릭하면 글의 내용을 볼 수 있게 anchor 태그를 이용해보자.

1.2 글의 내용 페이지 만들기

  /*  파일 이름:content1.html  */
  <h1>
    <a href=./main.html>logo</a>
    글의 내용입니다.
  </h1>

이 content1.html파일로 오는 길을 main.html 파일에 만들어준다고 생각하면 된다.

다시 main.html 파일로 돌아와 제목에 a 태그를 추가해주자.

    /* main.html */
    /* 중략 */
    <td><a href="./content1.html"></a></td>
    /* 후략 */

이렇게 한 후, main.html을 열어 글 제목인 '안녕하세요'를 클릭하면 내용이 있는 웹 페이지로

넘어간다는 것을 확인할 수 있다.

1.3 글쓰기 페이지 만들기

새로운 html 문서를 열어 다음과 같이 써준다.

  /* 파일 이름: write.html */
  <h1><a href="./main.html">logo</a></h1>
 
  <table>
    <tr>
      <td>제목</td>
      <td><input type="text" name="subject"></td>
    </tr>

    <tr>
      <td>이름</td>
      <td><input type="text" name="writer"></td>
    </tr>

    <tr>
      <td>비밀번호</td>
      <td><input type="password" name="password"></td>
  </tr>

    <tr>
      <td>내용</td>
      <td><textarea name="content"></textarea></td>
    /* textarea는 긴 글을 쓸 수 있는 텍스트박스를 의미한다. */
    </tr>
  </table>

  <input type="submit" value="글쓰기">

(name attribute의 의미는 후술한다.)

이렇게 하고 브라우저에서 불러오면 다음과 같다.

마찬가지로, 이 write.html 파일을 main.html 파일에 연결해줄 것이다.

main.html 파일에 글쓰기 버튼을 만들고, anchor 태그를 이용해 write.html로 링크되는 루트를 만들자.

    /*  main.html  */
    <a href="./write.html">글쓰기</a>   /* table 태그가 끝나는 곳 아래에 써준다. */

2. 데이터 전송 (form)

write.html 페이지에서 데이터를 입력하고 글쓰기 버튼을 눌러도 내가 입력한 데이터가 전송되지 않는다.

아직 전송에 필요한 태그를 넣어주지 않았기 때문이다.

데이터 전송에는 form이라는 태그를 사용한다. 전송하고자 하는 데이터가 존재하는 영역인

table을 form 태그로 묶어주자.

   <form>
     <table>
       /* 중략 */
     </table>
   </form>

여기서 form에 성질들을 추가해줘야 한다.

    <form method="post" action="./content1.html">
    /* 중략 */
    </form>

2.1 post method

form은 기본적으로 2가지의 성질을 가진다.

입력을 제출하는 방식을 결정하는 method와 어떤 uri에 제출할지를 결정하는 action 이 있다.

이 경우 post method를 사용해 content1.html로 데이터를 전송한다.

데이터를 채워서 글쓰기 버튼을 누르면 content1.html로 이동하게 되는데,

여기서 개발자도구를 열어 네트워크 > content1.html > payload를 클릭하면

직전에 write에서 입력한 데이터 값들을 확인할 수 있다.

2.2 get method

get method를 사용하면 입력한 데이터를 uri창에 보여준다.

method의 value값에 post대신 get을 주고 동일하게 데이터를 입력, 전송하면 된다.