진행한 사항
개발한 기능
로그인 페이지의 UI와 기능을 구현하였습니다. 먼저 미리 제작된 와이어 프레임을 따라서 UI를 구현하였습니다. 기본적인 아이디와 비밀번호를 입력할 수 있는 input창과 로그인 버튼을 만들어 주었습니다.이와 같이 UI를 구현하였고, 만약 미리 정해진 값이 제대로 입력되지 않았을 경우에 아이디와 비밀번호를 확인해달라는 메세지가 나오도록 설정하였습니다. 로그인에 성공할 시 localstorage에 api요청을 통해 받아온 jwt access-token을 저장하도록 한 후 메인 페이지로 이동하도록 구현하였습니다. html코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- css파일 가져오기 --> <link rel="stylesheet" href="./login.css" /> <link rel="stylesheet" href="./login-header.css" /> <!--로고 이름 폰트--> <style> @import url("https://fonts.googleapis.com/css2?family=Gluten:wght@400;500;600&family=Noto+Sans+KR&display=swap"); </style> <!-- js --> <script type="module" src="./login.js"></script> <title>Document</title> </head> <body> <section class="login-section"> <div class="login-wrapper"> <div class="login-container"> <div class="login-welcome"> <span>Welcome to <span style="color: #f9e103">Everyday Party</span></span> </div> <form method="post" class="login-form"> <input id="userId" type="text" placeholder="아이디" /> <input id="password" type="password" placeholder="패스워드" /> <div class="login-alert none">아이디 또는 비밀번호를 확인해주세요</div> <button id="login-btn" type="submit">로그인</button> </form> <div class="register"> <div>회원가입</div> <div>|</div> <div>아이디 찾기</div> <div>|</div> <div>비밀번호 찾기</div> </div> </div> <div class="login-banner-container"> <a href="/main/main.html"> <img class="login-banner" src="images/login-banner.png" /> <div class="login-logo-container"> <div class="login-logo"> <img src="images/login-logo.png" /><span class="login-logo-name" >EVERYDAY<br />PARTY</span > </div> </div> </a> </div> </div> </section> </body> </html>JavaScript 코드
import { Header } from "./login-header.js"; // import로 헤더 렌더링 const headerRender = () => { return Header(); }; headerRender(); // 아이디 비밀번호 검증 const inputUserId = document.querySelector("#userId"); const inputPassword = document.querySelector("#password"); const loginBtn = document.querySelector("#login-btn"); const loginAlert = document.querySelector(".login-alert"); async function onClickLoginButton(e) { e.preventDefault(); const userId = inputUserId.value; //아아디 값 const password = inputPassword.value; // 비밀번호 값 try { const data = await fetch("/api/auth/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId, password }), // JSON 문자열로 변환 }).then((result) => result.json()); if (data.status === 400) { // 아이디와 비밀번호 일치하지 않는 경우 Error전달 throw new Error("아이디 또는 비밀번호를 확인해주세요"); } const userTokens = await data.token; // 토큰 생성 // 로컬 스토리지에 "access-token"키 값에 토큰 저장 localStorage.setItem("access-token", userTokens); window.location.href = "/main/main.html"; // 로그인 성공 시 메인페이지로 이동 } catch (err) { loginAlert.classList.add("show"); // 일치하지 않는다는 경고문 보여주기 console.log(err); } } // inputUserId.addEventListener("focus", () => { // loginAlert.classList.remove("show"); // input 클릭시 경고문 사라짐 // }); // inputPassword.addEventListener("focus", () => { // loginAlert.classList.remove("show"); // input 클릭시 경고문 사라짐 // }); loginBtn.addEventListener("click", onClickLoginButton);
진행 중 겪었던 이슈
api요청을 할 때 항상 get요청만 해오다가 처음으로 post요청을 시도해봤습니다. 상품 정보를 가져오는 api는 header와 body가 필요없었던 get요청이였기에 간단하게 해결할 수 있었지만, 로그인 post요청은 유저의 아이디와 패스워드를 JSON.stringify를 통해 json문자열로 치환하여 보내줘야하기 때문에 방법을 몰라서 많은 어려움을 겪었습니다. 또 body만 입력하여 요청을 보내면 되는 줄 알았지만, header작성이 필요하단 걸 깨닫게 되어 더 많은 어려움이 있었습니다.
진행할 사항
원래는 회원가입 페이지를 먼저 구현하려했으나, 백엔드 쪽에서 회원가입 관련 라우터가 완성이 되지 않은 상태였기에 로그인 페이지를 먼저 진행했습니다. 그래서 다음에 진행할 사항은 로그인 페이지 UI와 기능들을 구현할 예정입니다.
느낀점
api와 router에 대한 감이 정말 하나도 잡히지 않았었는데, 이러한 시행착오와 결과물을 얻게되면서 제 스스로 많이 성장하고 있다는 것을 느끼게 되었습니다. 또한 저번 주차 이후 다른 분들의 코드를 merge하는 단계가 있었는데 그 부분에서 팀원들간의 소통이 더욱 더 필요하다는 것을 깨닫게 되었습니다.
#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript