T.I.L

23-07-18 js와 html의 연동

김민커 2023. 7. 18. 00:04

문제설명

지금까지 만든 CRUD의 코드는 js파일에서 작성이 됐다.
웹개발은 js는 동작 html은 뼈대 css는 꾸미기로 구성되어 있다.
동작을 할 뼈대, html을 작성하고 js의 코드와 연동해야 한다.
 

시도

<body>
    <div align="center" class="login-wrapper">
        <h2>회원가입</h2>
        <div id="regist-form">
            <p><input id="Email" type="text" placeholder="Email"></p>
            <p><input id="Password" type="password" placeholder="Password"></p>
            <p><input id="confirm" type="comfirmPassword" placeholder="Password 확인"></p>
            <p><input id="decreption" type="introduce" placeholder="한줄 소개글"></p>
            <p><input id="nickname" type="nickname" placeholder="Nickname"></p>
            <button id="signupBtn" type="button">Regist</button>
        </div>
    </div>
    <script type="text/javascript" src="../fetch/registUser.js"></script>
</body>

회원가입의 post는 Email, Password, confirm, decreption, nickname의 데이터를 body에서 받아야 한다.

먼저 input값을 넣을 수 있게 input속성을 넣어주고, 값을 가져오기 위해서 id값을 부여해준다.

js와 연결해야하기 때문에 <script type="text/javascript" src="../fetch/registUser.js"></script> 코드를 넣었다.

src로 연결할 js파일의 경로를 설정한다.

registUser.js는 querySelector로 input한 id를 지정해서 값을 가져오고 addEventListener("click", signup)으로 버튼에 signup함수를 작동시킬 수 있게 설정한다.

const email = document.querySelector("#email"),
    password = document.querySelector("#password"),
    confirmPs = document.querySelector("#confirm"),
    nickname = document.querySelector("#nickname"),
    description = document.querySelector("#description"),
    signupBtn = document.querySelector("#signupBtn");

signupBtn.addEventListener("click", signup);

function signup()
 

fetch로 보내줄 데이터를 객체화 하고 url과 method를 설정한다. JSON의 형태로 데이터를 보내주기 때문에 header에 json 속성을 넣어준다. 넣어주지 않으면 url post로 데이터가 전달이 되지 않는다.  req의 데이터는 JSON.stringify를 써서 문자열 화 한다.

const req = {
        email: email.value,
        password: password.value,
        confirm: confirmPs.value,
        nickname: nickname.value,
        description: description.value,
    };

    fetch("/api/signup", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(req),
    })

해결

 

먼저 html에 js파일을 연결해줘야 한다. src로 연결 할 때 script type="text/javascript"는 html5에 들어와서는 <script>가 js로 디폴트가 되었기 때문에 기입하지 않아도 되지만 하위호완을 위해서 넣어준다.

html에서 js로 보내줘야하는 데이터의 id를 잘 기입하고 input값도 잘 넣어준다.

js에서 input값을 잘 받아주고 url을 보내주는 함수를 작동할 수 있도록 html 자체에 트리거를 넣거나 addEventListener로 js에서 트리거를 넣어준다.

req.body로 보내줘야 하는 데이터를 잘 가공해서 객체로 만들고 fetch로 POST한다.

이 과정에서 header속성을 반드시 기입해야한다.

 

알게된 점

header라는 속성에 대해서 알게 되었다. fetch 코드의 공식 사이트에 들어가서 서치해보니 원래 header를 기입해서 사용했었다. 파이썬은 특수한 환경이라서 안 써도 작동이 되었는지 어떤 패키지로 인해서 작동이 되었는지는 잘 모르겠다.

js의 동작을 html의 뼈대에 연결할 수 있게 되었다.