내배캠 til 58일차 내가 만?든 ejs

zfz 2023. 2. 7. 09:39

2023. 2. 7. 09:39

순수한 창작은 아니다

0. 공통 파일

0.1 index.ejs

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>팀이름</title>
    <base href="/" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/css 여럿있음.css" />
	.......
  </head>

  <body>
    <main>


      <!-- login -->
      <% if (pageName==="login" ) { %> <%- include("components/login") %> <% }
      %> 

      <!-- signup -->
      <% if (pageName==="signup" ) { %> <%- include("components/signup") %> <% }
      %>

      <!-- userUpdate -->
      <% if (pageName==="userUpdate" ) { %> <%- include("mypage/userUpdate") %> <% }
      %>

      <!-- logout -->
      <% if (pageName==="logout" ) { %> <%- include("components/logout") %> <% }
      %>

이해에 필요한 것과 내가 쓴 것만 가져옴

이 코드에서 로그아웃은 필요없어서 뺌

1.회원가입

우선 회원 가입부터

1.1 signup.js

프런트 에서 ejs와 연결된 js, 이게 ejs에서 보낼 파일을 조정해주고 벡엔드 파일에 보냄

맞는지는 사실 잘 모름

//public/js/signup.js
function signup_user() {
  const email = $("#email").val();
  const phone_number = $("#phone_number").val();
  const password = $("#password").val();
  const name = $("#name").val();
  const address = $("#address").val();
  const re_email = /^[a-z0-9]+@[a-z0-9]+\.[a-z]{2,3}$/;

  if (!email || !password || !address || ! phone_number || !name) {
    alert("빈칸 없이 채워주세요.");
  } if (email.search(re_email) === -1) {
    alert('ID의 형식이 일치하지 않습니다');
  } else {
    $.ajax({
      type: "post",
      url: "api/signup",
      data: {
        email,
        phone_number,
        password,
        name,
        address
      },
      success: function (response) {
        alert(`${email}님 회원가입이 완료되었습니다`);
        location.href = "/login";
      },
      error: function (error) {
        alert("회원가입 실패");
        console.log("에러이유:", error);
      },
    });
  }
}

1.2 회원가입 ejs

//views/components/signup.ejs

<div class="sign_wrap">
  <div class="register_wrap">
    <h2>회원가입</h2>
    
    <input
      type="text"
      name="email"
      id="email"
      placeholder="이메일"
    />

    <input
      type="text"
      name="name"
      id="name"
      placeholder="성함"
    />

    <input
      type="text"
      name="address"
      id="address"
      placeholder="주소"
    />

    <input
      type="text"
      name="phone_number"
      id="phone_number"
      placeholder="전화번호"
    />

    <input
      type="text"
      name="password"
      id="password"
      placeholder="비밀번호"
    />

    <input
      type="button"
      name="login_button"
      class="user_signup"
      onclick="signup_user()"
      value="회원가입 하기"
    />

  </div>
</div>

    <script src="/js/signup.js"></script>
  </form>
</body>

ㄹㅇ 그냥 html 편하게 쓰는 느낌이 든다

팀원이 css를 워낙 잘하셔서 그쪽으로 자동으로 넘어감

구현된 모습인데 왜 사진이 회색으로 나왔는지는 모르겠다

1.3 문제점

~~signup.js의 몇 기능이 안 먹힌다~~

 const re_email = /^[a-z0-9]+@[a-z0-9]+\.[a-z]{2,3}$/;


  } if (email.search(re_email) === -1) {
    alert('ID의 형식이 일치하지 않습니다');

~~사실 백엔드 파일을 이전 조에서 얻어온 코드를 좀 수정해서 넣었는데~~

~~이것도 거기의 코드 일부~~

~~이메일을 형식에 맞게 써주게 하는 건데 여기서 안먹힘~~

해보니까 먹혔다

2. 로그아웃

좀 많이 해맸다

이게 왜 ejs가 필요한지 잘 몰랐고, 그냥 프론트에서만 하는 방법은 잘 안먹혔고

백엔드 파일을 써먹고도 싶었다

페이지가 구현 되는건 아니잖아

그래서 헤더에 있는 로그아웃 버튼에 꼴아박음

$(document).ready(function () {
  findToken();
});

function findToken() {
  const token = document.cookie;
  let empty_html = ``;
  if (token) {
    empty_html = `<a href="api/logout">
    <li class="header_logout">로그아웃</li>
  </a>

그냥 로그아웃 벡엔드에 페치 걸었다

2.1 문제점

이거 로그아웃 되었다고 창을 띄워야 하지않나?

여기서 하자니 할 줄 모름

ejs 새로 만드는 것도 이상함

3. 회원정보 수정

고통의 핵심

이거 하자고 5시에 잤다

ejs

<div class="sign_wrap">
  <div class="register_wrap">
    <h2>회원정보 수정</h2>

    <input
      type="text"
      name="name"
      id="name"
      placeholder="성함"
    />

    <input
      type="text"
      name="address"
      id="address"
      placeholder="주소"
    />

    <input
      type="text"
      name="phone_number"
      id="phone_number"
      placeholder="전화번호"
    />

    <input
      type="text"
      name="currentPassword"
      id="currentPassword"
      placeholder="현재 비밀번호"
    />

    <input
      type="text"
      name="newPassword"
      id="newPassword"
      placeholder="새로운 비밀번호"
    />

    <input
      type="text"
      name="confirmedPassword"
      id="confirmedPassword"
      placeholder="새로운 비밀번호 확인"
    />

    <input
      type="button"
      name="login_button"
      class="user_signup"
      onclick="update_user()"
      value="회원정보 수정 하기"
    />

  </div>
</div>

    <script src="/js/mypage/userUpdate.js"></script>
  </form>
</body>

프론트 js

function update_user() {
  const name = $("#name").val();
  const address = $("#address").val();
  const phone_number = $("#phone_number").val();
  const currentPassword = $("#currentPassword").val();
  const newPassword = $("#newPassword").val();
  const confirmedPassword = $("#confirmedPassword").val();

  if (!name && !address && !phone_number && !currentPassword && !newPassword && !confirmedPassword) {
    alert("어떤 정보도 입력되지 않았습니다.");
  } if (currentPassword != null || currentPassword == newPassword){
    alert('현재 비밀번호와 바꿀 비밀번호가 같습니다, 다르게 수정해주세요')
  } if (newPassword !== confirmedPassword){
    alert("새로운 비밀번호 확인이 틀렸습니다.");
  } else {
    $.ajax({
      type: "put",
      url: "http://localhost:4000/api/user",
      data: {
        name,
        address,
        phone_number,
        currentPassword,
        newPassword,
        confirmedPassword
      },
      success: function (response) {
        alert(`${name}님 회원정보가 수정되었습니다`);
        location.href = "/";
      },
      error: function (error) {
        alert("정보수정 실패");
        console.log("에러이유:", error);
      },
    });
  }
}

3.1 문제점

현재 나온 버그.. 근데 못했으니까 버그라고 하긴 그렇지

벡엔드에서는 이게 비번 수정 안하면 수정이 안되는 버그가 있었는데

if 걸어서 해결함

얘는 답도 없음

3.1.1 문제점 1

백엔드 덕인지 비밀번호 안 적어도 db로 넘어는 간다

근데 새로운 비밀번호랑 현재 비밀번호랑 같다고 뜸

이러면 정보가 넘어가서도 안 되는데 왜 넘어감?

3.1.2 문제점 2

성함, 주소. 전번 중 안 적은건 null이 된다

원래 이메일로 들어가야 할걸 귀찮아서 입력 정보 중 성함으로 넣었는데

null 드렁가서 저 꼴 남

님 도르신?

날 죽여라

'내배캠 TIL WIL > 내배캠 til' 카테고리의 다른 글

내배캠 til 60일차 플잭 후기 (0)	2023.02.09
내배캠 til 59일차 public js 수정 (0)	2023.02.08
내배캠 til 57일차 내가 만든 쿠키~를 사용한 회원정보 수정 (0)	2023.02.06
내배캠 til 55일차 열심히 써도 구리다면 (0)	2023.02.02
내배캠 til 54일차 typescript 3편 (0)	2023.01.31

코드 스파게티

내배캠 til 58일차 내가 만?든 ejs

'내배캠 TIL WIL > 내배캠 til' 카테고리의 다른 글

+ Recent posts

티스토리툴바