코드 스파게티

개요

왜 til 양이 적을까요

아팠음

왜 진도 조졌나요

정신없음

느낀점

차입이고 네스트고 어느게 좋다 이전에 안 하면 죽어요

뭘했나

일퀘도 안 돌렸다,  한게 없음

해냈나

3끼 챙겨먹기, 잠자기 말고 해낸게 없다

결론

거울보면서 누칼협 하시오

테스트 코드 작성의 중요성 - 하나몬 (hanamon.kr)

테스트 코드 한 줄을 작성하기까지의 고난 – tech.kakao.com

누칼협이란 말이 있다

누가 칼들고 협박함?

이걸 들을 수도 있는게 배움터다

누가 테스트 코드 짜지 말라고 협박함?

아뇨

그럼 해야지

누칼협은 그 말 자체가 칼과 다름 없음

따흐흑

1. what

테스트코드란 내가 작성한 method가 실제로 재대로 동작하는지 테스트 하는 코드이다.

2. why

개발 과정에서 문제를 미리 발견할 수 있다. 

리팩토링을 안심하고 할 수 있다. 

빠른 시간 내에 코드의 동작 방식과 결과를 확인할 수 있다. 

좋은 테스트 코드를 연습하다 보면 자연스럽게 좋은 코드가 만들어진다. 

의도한 대로 동작되는 것을 자신감 있게 말할 수 있다.

라고 하는데

3. when

플잭 전후가 있던데

테스트 코드는 꼭 필요할까? (tistory.com)

종합해보면 여기처럼 하면서가 맞나벼.....

4. how

이건 나도 모른다

흑흑

좀 늦은 감은 있는데 OAuth 개발하기 전에는 해야지

토큰 기반 인증 Bearer Authentication (ssemi.net)

HTTP - 인증 : Oauth, JWT, Bearer token (tistory.com)

그 와중에 베어러는 참는 놈, 곰...러도 아닌 전달자 라는 뜻

월드 베어러는 세계 참는 새@들이 아니였구나!

일단 토큰 개념부터 

토근 기반 인증에서 bearer는 무엇일까? (velog.io)

토큰에는 암호화 방식과 타입 등을 나타내는 헤더, 전송할 데이터가 담긴 페이로드,

토큰 검증을 위한 서명을 각각 인코딩(해싱)한 값이 포함되어 있다.

데이터가 인코딩이 되어있긴 하지만 누구나 디코딩을 할 수 있어서 데이터 유출에 대한 피해가 있을 수 있지만 

서명 필드는 헤더와 페이로드를 통해 만들어지기 때문에 데이터 변조 후 재전송하는 것을 막을 수 있다.

그럼에도 불구하고 쿠키와 세션을 이용한 인증에 비해 장점이 많아 많은 서비스에서 이 인증 방식을 사용하고 있다.

JWT 인증토큰, Bearer 토큰에 관하여.. for Node Express. — 개발이 하고 싶어요 (tistory.com)

장점

• 헤더와 페이로드를 가지고 서명 필드를 생성하므로 데이터 변조 후 재전송을 막을 수 있다.
• stateless 서버를 만들 수 있다.
• 모바일 어플리케이션에서도 잘 동작합니다.
• 인증정보를 다른 웹서비스에 전송할 수 있다. (OAuth)

단점

• 여전히 누구나 디코딩이 가능하므로 데이터 유출이 발생할 수 있다.
• 토큰을 탈취당할 경우, 대처하기 어렵다. (유효기간을 기다리거나 token refresh를 해야한다)
• JWT의 경우, 토큰의 길이가 길기 때문에 요청이 많아질수록 서버 자원의 낭비가 많다.

일반적으로 토큰의 요청 헤더의 Authorization 필드에 담아 보낸다.

Authorization: <type> <credentials>

우리가 궁금해하던 Bearer는 <type>에 해당

토큰에는 많은 종류가 있고 서버는 다양한 종류의 토큰을 처리하기 위해 전송받은 type에 따라 토큰을 다르게 처리합니다.

토큰 기반 인증 Bearer Authentication (ssemi.net)

자세한 사항은 다음에

워낙 플잭 후기에 다 써서 할말이 없다

숙제- 테스트 코드 짜보기

         토큰 이외의 로그인 기능 짜오기

         정보수정시 기존 정보 불러오기 기능 만들기

다 어렵네

할 것: 타입 스크립트 끝내기, nest 진도 빼기

다 할 거 밖에 없다   

API 와 Endpoint ? (둘 다 정확히.. : 네이버블로그 (naver.com)

개발 배우면서 좋은 게시글은 저장을 많이 했는데 정리를 해야하겠더라

우선 그나마 잘 아는 API부터

  내가 인식한  API

  웹서버-백엔드 하면서 느낀 기능의 총칭

프로그램 안의 프로그램,  실질적으로는 기능을 라우터,기능이라고 그냥 쓰지만 명세서 적을 때

api라고 쓰니까 api

 REST API개념은 있지만 그건 특정 스타일로 짜는 것

관리가 용이하고 (기능별로 가닥가닥 갈라놔서 그거만 고침), 기존 소프트웨어를 결합 (들고오기 쉬워서)

하기 용이하다. 물론 유지보수도 동일한 맥락.

 실재 api

API란 무엇인가요? - API 초보자를 위한 가이드 - AWS (amazon.com)

API는 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘입니다.

  API는 Application Programming Interface(애플리케이션 프로그램 인터페이스)의 줄임말입니다.

API의 맥락에서 애플리케이션이라는 단어는 고유한 기능을 가진 모든 소프트웨어를 나타냅니다.

인터페이스는 두 애플리케이션 간의 서비스 계약이라고 할 수 있습니다. 이 계약은 요청과 응답을 사용하여

두 애플리케이션이 서로 통신하는 방법을 정의합니다. API 문서에는 개발자가 이러한 요청과 응답을 구성하는

방법에 대한 정보가 들어 있습니다.

막상 내용 보면 뭔가 많이 다름

남의 전공서적 보는 느낌이

엔드포인트

 내가 아는 엔드포인트코드 짤때 오류나서 어디서 오류나는지 vs코드에서 방점 찍어 거기서 쫑 내는 것

 커뮤니케이션 채널의 한 쪽 끝 이라고만 기억함

https://www.cloudflare.com/ko-kr/learning/security/api/what-is-api-endpoint/

API 엔드포인트는 API 호출을 수신하는 API 연결의 끝을 말합니다.

API(응용 프로그램 프로그래밍 인터페이스)는 하나의 응용 프로그램이 다른 응용 프로그램에 서비스를 요청하는

방식입니다. 개발자는 API를 통해 이미 존재하는 응용 프로그램 기능을 다시 빌드하지 않아도 됩니다.

API 엔드포인트는 이러한 요청(API 호출)이 수행되는 곳입니다.

진짜 오래 찾았다

설명이 많은데 내가 알아먹을 말이 적었다

빠른 결론

1.1 NestJS 소개 - NestJS로 배우는 백엔드 프로그래밍 (wikidocs.net)

소개 - 쉽게 풀어 쓴 Nest.js (wisewiredbooks.com)

NestJS는 Node.js에 기반을 둔 웹 API 프레임워크로써 Express 또는 Fastify 프레임워크를 래핑하여 동작합니다. 기본으로 설치하면 Express를 사용합니다. Node.js는 손쉽게 사용할 수 있고 뛰어난 확장성을 가지고 있지만, 과도한 유연함으로 인해 SW의 품질이 일정하지 않고 알맞은 라이브러리를 찾기 위해 사용자가 많은 시간을 할애해야 합니다. 이에 반해 NestJS는 데이터베이스, ORM, 설정(Configuration), 유효성 검사 등 수많은 기능을 기본 제공하고 있습니다. 그러면서도 필요한 라이브러리를 쉽게 설치하여 기능을 확장할 수 있는 Node.js 장점은 그대로 가지고 있습니다. NestJS는 Angular로부터 영향을 많이 받았습니다. 모듈/컴포넌트 기반으로 프로그램을 작성함으로써 재사용성을 높여줍니다. IoC(Inversion of Control, 제어역전), DI(Dependency Injection, 의존성 주입), AOP(Aspect Oriented Programming, 관점 지향 프로그래밍)와 같은 객체지향 개념을 도입하였습니다. 프로그래밍 언어는 타입스크립트를 기본으로 채택하고 있어 타입스크립트가 가진 타입시스템의 장점을 누릴 수 있습니다.

ㄴ node.js 에 규율을 더해 피로를 줄이고 장점을 줄였다. 그럼에도 장점은 살렸다

     express,fastify를 지원하고

 대부분의 Nest의 코드는 타입스크립트로 만들어졌으며 타입스크립트를 완전하게 지원합니다. 하지만 Nest는 Express와 동급은 아닙니다. Nest는 HTTP 요청을 다루는 웹서버로 내부적으로 Express를 사용하고 있습니다. 즉 Nest는 Express 위에서 돌아가는 레이어에 불과합니다.

ㄴ타임스크립트 못하면 힘들다

NestJS는 국내에서도 점점 인기를 얻고 있고 모두싸인과 당근마켓 등 여러 회사에서 적용되어 사용자가 늘고 있습니다. 이 책을 통해 NestJS의 핵심 기능과 원리를 쉽게 배우고 더 나은 웹 개발 환경을 구축할 수 있는 방법을 소개하고자 합니다. 백엔드 개발을 처음 접하는 사람도 쉽게 따라하면서 백엔드에 필요한 기술들을 습득할 수 있도록 하였습니다.

ㄴ 이거 알기 전에는 타입스크립트가 가장 시대적인 언어였는데 어째...

털렸다

문제점: 1. 회원 정보 불러올 때 기존정보 불러와야지

             사실상 이게 메인인데

하고야 싶은데 뭘 가르쳐 준것도 아니고

프론트인지 벡엔든지 알려준것도 아니고

프론트면 빡시게 하지 말라 한게 엊그제인데 이제와서 뭔 소린지 감도 안옴

오히려 외부 현업이 '비번 수정은 아싸리 따로 빼는게 정신건강에 좋다'가

더 좋은 느낌이 든다

하여간 찾아서 기술할 것

일단 빨리

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 == newPassword) && 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) {
      
        console.log("에러이유:", error);
      },
    });
  }
}

순수한 창작은 아니다

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 드렁가서 저 꼴 남

님 도르신?

날 죽여라