맹수개발

02. 클린코드 리액트(React) - State

최맹수 — Thu, 21 Mar 2024 23:07:15 +0900

1. 올바른 초기값 설정

const [count, setCount] = useState();
const [list, setList] = useState();

위의 초기값설정은 아래처럼 변경되어야 올바른 초기값 설정입니다.

const [ count, setCount ] = useState(0);
const [ list, setList ] = useState([]);

왜 이렇게 값을 설정해야하는지 한번 알아보겠습니다.

초기값 ?

가장 먼저 렌더링될대 순간적으로 보여질 수 있는 값이기도 하다.
당연히 초기에 렌더링 되는 값

초기값 지키지 않을 경우 ?

렌더링 이슈, 무한루프, 타입 불일치로 의도치 않은 동작 발생 -> 런타임 에러
초기값을 넣지 않으면 ? : undefined
상태를 CRUD => 상태를 지울때도 초기값을 잘 기억해놔야 원상태로 돌아간다.

초기값을 잘 설정해주면 빈값이나 NULL 처리를 할때 불필요한 방어코드도 줄여준다

예시코드를 보면 아래코드에서는 list라는 상태값에 아무런 초기값도 할당하지 않은 상태입니다. 그 상태에서 useEffect로 api의 데이터를 fetch해서 list 상태값에 받아옵니다. 그리고 return문에서 해당 상태값을 이용해 map으로 요소들을 보여주는 코드입니다.

import { useEffect, useState } from "react";
import "./App.css";

function App() {
	const [count, setCount] = useState(0);
	const [list, setList] = useState();
	useEffect(() => {
		const fetchData = async () => {
			const response = await fetch("https://api.example.com/data");
			const result = await response.json();

			setList(result);
		};
		fetchData();
	}, []);
	return (
		<>
			<p>Count:{count}</p>
			<button
				onClick={() => {
					setCount(count + 1);
				}}>
				Increment
			</button>

			{list.map((item) => {
				console.log(item);
			})}
		</>
	);
}

export default App;

위의 코드를 실행시켜보면 해당 값이 빈값이거나 null값일때 처리를 해주지 않아서 렌더링 오류가 발생하고 아무런 화면이 보이지 않게 됩니다. 그래서 위의 코드에서 list 상태값을 선언할때 빈배열 ' [] ' 을 넣어주게 된다면 이를 방지할 수 있습니다.

const [list, setList] = useState([]);

요약

초기상태를 올바르게 설정하자

2. 업데이트 되지 않는 값

업데이트가 되지 않는 일반적인 객체라면 리액트 외부로 내보내는 것이 좋습니다. 예를 들어보면 아래의 코드에서 INFO라는 싱글리터럴객체가 있습니다. 이런 케이스는 상수를 다루거나 아니면 일반적인 방치가 흔한 케이스입니다. 중요한것은 이 객체는 어디서도 지금 업데이트가 되고 있지 않습니다. 즉 이객체에 있는 속성을 바꾸는 경우가 전혀 존재하지 않습니다. 그리고 return문을 보면 props로 객체를 전달해주고 있습니다.

import { useEffect, useState } from "react";
import "./App.css";

function App() {
	const INFO = {
		name: "My Component",
		value: "Clean Code React",
	};
	const [count, setCount] = useState(0);
	const onIncrement = () => {
		setCount(count + 1);
	};
	const onDecrement = () => {
		setCount(count - 1);
	};
	return (
		<>
			<ShowCount info={INFO} count={count} />
		</>
	);
}

export default App;

위와 같은 경우는 정말 좋지 못한 케이스입니다. 일단 리액트 컴포넌트 내부에 있기 때문에 매번 렌더링 될때마다 같은 값이더라도 또 다시 참조해서 트리거하고 계산해야 될 시기와 기억해야 될 시기에 대한 로직이 전혀 들어가 있지 않습니다. 그러다 보니까 불필요하게 참조하고 물고 있는 겁니다. 그래서 어떻게 하냐면 컴포넌트 외부로 빼주면됩니다.

import { useEffect, useState } from "react";
import "./App.css";

const INFO = {
	name: "My Component",
	value: "Clean Code React",
};

function App() {
	const [count, setCount] = useState(0);
	const onIncrement = () => {
		setCount(count + 1);
	};
	const onDecrement = () => {
		setCount(count - 1);
	};
	return (
		<>
			<ShowCount info={INFO} count={count} />
		</>
	);
}

export default App;

요약

업데이트가 되지 않는 일반적인 객체라면 리액트 외부로 내보내기

3.플래그 상태

플래그 값 : 프로그래밍에서 주로 특정 조건 혹은 제어를 위한 조건을 불리언으로 나타내는 값

플래그 상태의 가장 흔한 예는 무엇일까? 바로 로그인이다. 우리가만드는 리액트 앱은 대채적으로 client state 프론트단에서 상태를 가지고 화면을 보여주는 경우가 많기 때문에 이러한 값들을 가지기 위해 정말 많은 값들을 다룹니다. 토큰, 쿠키, valid한지,새로운유저인지 등 수많은 값을 조건으로 분기합니다. 아래처럼 useEffect로 다 잡아서 관리하고 분기문을 넣어서 때려넣는 경우가 많습니다.

import { useEffect, useState } from "react";
import "./App.css";

function FlagState() {
	const [isLogin, setIsLogin] = useState(false);

	useEffect(()=>{
		if(hasToken){
			setIsLogin(true);
		}
		if(hasCookie){
			setIsLogin(true);
		}
		if(isValidCookie){
			setIsLogin(true);
		}
		if(isNewUser===false){
			setIsLogin(true);
		}
		if(isValidToken){
			setIsLogin(true);
		}
	},[hasToekn,hasCookie,isValidCookie,isNewUser,isValidToken]);
	return (
		<>
			<div>{isLogin&&'안녕하세요! 반갑습니다!'}</div>
		</>
	);
}

export default App;

위의 코드를 좀더 깔끔히 해보면 아래처럼 if문을 하나로 합칠 수 있습니다.

import { useEffect, useState } from "react";
import "./App.css";

function FlagState() {
	const [isLogin, setIsLogin] = useState(false);
	
	useEffect(()=>{
		if( hasToken &&
			hasCookie &&
			isValidCookie &&
			isNewUser==false &&
			isValidToken
			)
			{
			setIsLogin(true);
			}
	},[hasToekn,hasCookie,isValidCookie,isNewUser,isValidToken]);
	return (
		<>
			<div>{isLogin&&'안녕하세요! 반갑습니다!'}</div>
		</>
	);
}

export default App;

아니면 isLogin으로 아래처럼 묶어볼 수 있습니다. 그런데 이전에 '불필요한 상태를 최대한 만들지 않는것'이 좋다고 했습니다. 그러면 useEffect안의 isLogin을 밖으로 뺄 수 있습니다.

function FlagState() {
	const [isLogin, setIsLogin] = useState(false);

	useEffect(()=>{
		const isLogin=hasToken &&
		hasCookie &&
		isValidCookie &&
		isNewUser==false &&
		isValidToken;

		if(isLogin){
			setIsLogin(true);
		}
	},[hasToekn,hasCookie,isValidCookie,isNewUser,isValidToken]);
	return (
		<>
			<div>{isLogin&&'안녕하세요! 반갑습니다!'}</div>
		</>
	);
}

그래서 최종적인 코드를 보면 토큰과 쿠키가 true인지 쿠키와토큰이 유효한값을 가지는지 그리고 새로운 유저가 아닐때 라는 조건이 지금 매 랜더링마다 다시계산이 되면서 isLogin에 들어가고 아래 return에서 불리언 값이 판단이 되기 때문에 굳이 상태가 필요하지 않다는 겁니다.

function FlagState() {
	const isLogin =
		hasToken &&
		hasCookie &&
		isValidCookie &&
		isNewUser == false &&
		isValidToken;

	return (
		<>
			<div>{isLogin && "안녕하세요! 반갑습니다!"}</div>
		</>
	);
}

이런식으로 하면 굳이 상태를 만들고 그 상태를 위한 분기문을 칠 필요가 없습니다. 무슨 얘기냐면 로그인 대상에 무언가 값이 또 바뀌어서 추가적으로 요구사항이 생긴다면 정말 골치 아파집니다. 이럴때마다 if문이 늘어나고 switch케이스가 늘어나고 계속 조건들이 늘어나는데 이렇게 한번 플래그 변수를 컴포넌트 내부에서 만들고 이 조건만 잘 관리하면 굳이 큰 수정 없이 큰버전 변경없이 관리할 수가 있습니다.

요약

usetState 대신 플래그로 상태를 정의할 수 있다.

불필요한 상태

완료한 일만 가지고 있는 유저(MOCK_DATA에 리스트객체의 속성 중 completed 값이 true인) 리스트를 만든다고 했을때 filter로 completed가 true인 녀석들만 넣어준다고 할 수 있습니다. 하지만 이렇게 하면 큰 낭비입니다.

const [userList,setUserList] = useState(MOCK_DATA);  // 1. 초기상태선언
const [complUserList,setComplUserList]=useState(MOCK_DATA); // 2. 변경 후 저장할 상태 선언

useEffect(()=>{
	const newList = complUserList.filter((user):boolean=>user.completed==true);
	setUserList(newList);
},[userList]);

위의 코드에서 불필요한 상태를 제거 해보면 아래처럼 됩니다.

const complUserList = complUserList.filter((user):boolean=>user.completed===true);

렌더링마다 고유한 값을 가질 수 있다라고 가정을 하면 렌더링 될때마다 값이 바뀌고 관여되지만 이 값은 굳이 상태로 만들 필요가 없다는 겁니다. 결국엔 렌더링될때마다 고유의 'complUserList'가 생성이 되기 때문에 관리할 필요도 없고 set할 필요도 없어집니다.

그럼 React컴포넌트 내부에서 변수는 어떤 역할을 할까?라는 생각이 들 수 있습니다.

컴포넌트 내부에서의 변수 : 렌더링마다 고유한 값을 가지는 계산된 값을 가진다. 즉, Computed value 랜더링마다 고유한 값을 가지는 값

요약

props를 useState에 넣지 않고 바로 return문에 사용하기
컴포넌트 내부 변수는 렌더링마다 고유한 값을 가짐

useState 대신 useRef

보통 useState랑 useRef를 직접적으로 비교하기보다 useRef는 필요에 따라 많이 사용합니다. 하지만 간혹 useState를 대신해서 useRef를 사용할 때가 있습니다. 기본적인 차이는 useState와 다르게 useRef는 가변 컨테이너 라고볼 수 있습니다. 즉 한번 고정된 값을 컴포넌트에서 계속해서 사용하는 값을 굳이 useState로 사용할 필요가 없습니다. 즉 '컴포넌트의 전체적인 수명과 동일하게 지속된 정보를 일관적으로 제공해야 하는 경우' useState로 만들 필요가 없습니다. 만약 useState로 사용할 경우에는 setState를 사용하면서 리렌더가 컴포넌트에 발생하기 때문에 좋지 않습니다.

export const component = () => {
	const [isMount, setIsMount] = useState(false);

	useEffect(() => {
		if (!isMount) {
			setIsMount(true);
		}
	}, [isMount]);

	return <></>;
};

꼭 DOM과 관련할때만 useRef를 사용할 필요가 없습니다.

export const component = () => {
	const isMount = useRef(false);

    useEffect(()=>{
        isMount.current=true;

        return()=>(isMount.current=false);
    },[]);

	return <></>;
};

01. 클린코드 리액트(React) - 클린코드, Vite

최맹수 — Wed, 20 Mar 2024 22:59:34 +0900

클린코드란

1. 클린코드는 무적이 아니다

클린코드가 무조건 최고는 아니다
무조건 클린코드 === 좋은코드는 아니다
클린코드를 지켰다며 TDD를 통과했다며 기뻐하지만 React 앱이 동작하지 않음
성급한 기술 도입으로 과도한 추상화 팀원들에게 피해를 줌

2. 클린코드보다 중요한 것은 상당히 많다.

작성한 코드의 확장성
React 앱의 완성도
앱의 완성도가 떨어지는 경우 사소한 동작에도 잦은 버그가 발생
함께 개발하는 팀원들과의 코드를 두고 할 수 있는 소통

Vite란?

공식문서에 따르면 프랑스어로 빠르다를 의미하고, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.

개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공
번들링 시, Rollup 기반의 다양한 빌드 커멘드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다.

Creact React App 대신 사용하는 이유?

CRA는 JS로 구성된 Webpack을 사용하는데 속도가 느린편입니다. 평소에는 못느길 쑤 있지만 처리해야할 코드의 양이 많아질수록 느린 속도를 체감할 수 있고 현재 React 공식문서에 가보면 과거에는 CRA를 사용하라고 되어 있었지만 현재는 나와있지 않습니다. 그래서 Esbuild를 기반으로 만들어진 빌드툴인 Vite(비트)를 사용하게 됩니다.

Esbuild : Go 언어로 작성된 Js빌드툴로 속도가 빠르다.

본인은 Window환경이기 때문에 아래의 명령어를 입력해줬습니다.

npm create vite@latest cleanCodeReact -- --template react

을 입력하면 아래처럼 명령어가 표시되고 그대로 입력하면 정말 빠르게 build가 됩니다. npm install까지 입력해보면

실제 생성된 폴더

Vs Code로 폴더를 열어보면

한번 실행시켜 보겠습니다. npm run dev를 입력하면 됩니다.

아래 화면을 보시면 정말 빠르게 리액트 개발환경을 구축했습니다.

자바 - 변수, 연산자, 반복문, 스코프, 형변환, Scanner, 배열, 메소드

최맹수 — Mon, 26 Feb 2024 22:32:14 +0900

변수

변수초기화

변수를 선언하고, 선언한 변수에 처음으로 값을 저장하는 것을 변수 초기화라고 한다. 자바는 변수를 초기화 하도록 강제한다.(초기화 하지 않으면 에러가 발생) -> 지역변수

String

문자열을 다룬다. 큰따옴표를 사용해야 한다. 예) "hello java"

String은 첫글자가 대문자로 시작하는 특별한 타입이다.

리터럴

코드에서 개발자가 직접 적은 100, 10.5, true, 'A', "Hello Java"와 같은 고정된 값을 프로그래밍 용어로 리터럴(literal)이라 한다.

변수의 값은 변할 수 있지만 리터럴은 개발자가 직접 입력한 고정된 값이다. 따라서 리터럴 자체는 변하지 않는다.

변수 타입 정리

아래 타입은 실무에서 거의 사용하지 않는다.

byte : 표현 길이가 너무 작다. 또 자바는 기본으로 4byte(int)를 효율적으로 계산하도록 설계되어 있다. int를 사용하자
- byte 타입을 직접 선언하고 여기에 숫자값을 대입해서 계산하는 일은 거의 없다
- 대신에 파일을 바이트 단위로 다루기 때문에 파일 전송, 파일 복사 등에 주로 사용된다
short : 표현길이가 너무 작다. 또 자바는 기본으로 4byte(int)를 효율적으로 계산하도록 설계되어 있다. int 사용하자.
float : 표현 길이와 정밀도가 낮다. 실수형은 double을 사용하자.
char : 문자 하나를 표현하는 일은 거의 없다. 문자하나를 표현할 때도 문자열을 사용할 수 있다.
- 예를 들어 String a = "b"와 같이 사용하면 된다.

실무에서 자주 사용하는 타입은 아래와 같다.

정수 int, long : 자바는 정수에 기본으로 int를 사용한다. 만약 20억이 넘을 것 같으면 long을 쓰면 된다.
- 파일을 다룰 때는 byte를 사용한다.
- 숫자가 어느정도 크다고 생각되면 뒤에 'L'을 붙이자.

long num1 = 10000000000L;

실수 double : 실수는 고민하지 말고 double을 쓰면된다.
불린형 boolean : true, false 참 거짓말을 표현한다. 이후 조건문에서 자주 사용된다.
문자열 String : 문자를 다룰 때는 문자 하나든 문자열이든 모두 String을 사용하는 것이 편리하다.

변수 명명 규칙

자바에서 변수의 이름을 짓는데는 규칙과 관례가 있다. 규칙은 필수이다. 규칙을 지키지 않으면 컴파일 오류가 발생한다. 관례는 필수가 아니지만 전세계 개발자가 해당 관례를 따르기 때문에 사실상 규칙이라고 생각해도 된다.

규칙

변수 이름은 숫자로 시작할 수 없다.(ex. 1num, 1st)
- 그러나 숫자를 이름에 포함하는 것은 가능하다. (ex. myVar1, num1)
이름에는 공백이 들어갈 수 없다.
자바의 예약어를 변수 이름으로 사용할 수 없다.
변수 이름에는 영문자(a-z, A-Z), 숫자(0~9),달러기호($) 또는 밑줄(_)만 사용할 수 있다.

관례

소문자로 시작하는 낙타 표기법
- 변수 이름은 소문자로 시작하는 것이 일반적이다. 여러 단어로 이루어진 변수 이름의 경우, 첫번째 단어는 소문자로 시작하고 그 이후의 단어는 대문자로 시작하는 낙타 표기법(camel case)를 사용한다. (ex. orderDetal, myAccount)
클래스는 대문자로 시작, 나머지는 소문자로 시작
- 자바에서 클래스 이름의 첫 글자는 대문자로 시작한다. 그리고 나머지 모두 첫 글자를 소문자로 시작한다.
  - 클래스 : Person, OrderDetail
  - 변수를 포함한 나머지 : firstName, userAccount
- 여기에 딱 예외가 2개 있다.
  - 상수는 모두 대문자를 사용하고 언더바로 구분한다. (ex. USER_LIMIT )
  - 패키지는 모두 소문자를 사용한다.(ex. org.spring.boot )

참고 : 변수 이름은 의미있고, 그 용도를 명확하게 설명해야 한다.

a,b : 이런 변수는 용도를 설명하지 않는다.
studentCount, maxScore, userAccount, orderCount : 용도를 명확하게 설명한다.

연산자

문자열 더하기

아래 식은 문자열과 숫자를 더한다. 자바에서 문자와 숫자를 더하면 숫자를 문자열로 변경한 다음에 서로 더한다. 쉽게 말해서 문자열에 더하는 것은 다 문자열이 된다.

String result3 = "a + b = "+10;

연산자 우선순위 정리

연산자 우선순위는 상식선에서 생각하고, 애매하면 괄호를 사용하자
누구나 코드를 보고 쉽고 명확하게 이해할 수 있어야 한다. 개발자들이 연산자 우선순위를 외우고 개발하는 것이 아니다! 복잡하면 명확하게 괄호를 넣어라!
개발에서 가장 중요한 것은 단순함과 명확함이다! 애매하거나 복잡하면 안된다.

비교연산자 문자열비교

문자열이 같은지 비교할 때는 ==이 아니라 .equals() 메서드를 사용해야 한다. ==를 사용하면 성공할 때도 있지만 실패할 때도 있다. 지금은 이 부분을 이해하기 어려우므로 지금은 단순히 문자열의 비교는 .equals() 메서드를 사용해야 한다 정도로 알고 있자.

        String str1 = "문자열1";
        String str2 = "문자열2";

        boolean result1 = "hello".equals("hello");
        boolean result2 = str1.equals("문자열1");
        boolean result3 = str1.equals(str2);

        System.out.println(result1);
        System.out.println(result2);
        System.out.println(result3);

        System.out.println("hello"=="hello");

반복문(while vs for)

정해진 횟수만큼 반복을 수행해야 하면 for문을 사용

그렇지 않으면 while문 사용 항상 정답은 아님.

스코프

스코프존재이유

package scope;

public class Scope1 {
    public static void main(String[] args) {
        int m = 10;
        int temp = 0;
        if(m>0){
            temp = m * 2;
            System.out.println("temp = " + temp);
        }
        System.out.println("m = " + m);
    }
}

비효율적인 메모리 사용 : temp는 if코드 블록에서만 필요한데 main()이 종료될때까지 메모리에 유지된다. 따라서 불필요한 메모리가 낭비된다. -> if문안에 temp선언하면 효율적인 메모리 사용 가능
코드 복잡성 증가 : 좋은 코드는 단순한 코드이다. temp는 if코드 블록에서만 필요하고 여기서만 사용하면 된다. 만약 if블록안에 temp를 선언했다면 if가 끝나고 나면 temp를 전혀 생각할 필요가 없다. 머리속에서 생각할 변수를 하나 줄일 수 있다. 누군가 이 코드를 유지보수 할 때 m은 물론이고 temp까지 계속 신경써야 한다.

while vs for문 - 스코프관점

while

package loop;

public class While1 {
    public static void main(String[] args) {
        int sum = 0;
        int i = 1;
        int endNum = 3;
        while(i<=endNum){
            sum = sum + i;
            System.out.println("i="+i+" sum="+sum);
            i++;
        }
        //... 아래에 더 많은 코드들이 있다고 가정
    }
}

For

package loop;

public class For2 {
    public static void main(String[] args) {
        int sum = 0;
        int endNum=3;
        for(int i=1; i<=endNum; i++){
            sum = sum + i;
            System.out.println("i="+i+" sum="+sum);
        }
        //..아래에 더 많은 코드들이 있다고 가정
    }
}

while문의 경우 변수 i의 스코프가 main() 메서드 전체가 된다. 반면에 for문의 경우 변수 i의 스코프가 for문 안으로 한정된다.
따라서 변수 i와 같이 for문안에서만 사용되는 카운터 변수가 있다면 while문 보다는 for문을 사용해서 스코프의 범위를 제한하는 것이 메모리 사용과 유지보수 관점에서 더 좋다.

정리

변수는 꼭 필요한 범위로 한정해서 사용하는 것이 좋다. 변수의 스코프는 꼭 필요한 곳으로 한정해서 사용하자. 메모리를 효율적으로 사용하고더 유지보수하기 좋은 코드를 만들 수 있다.
좋은 프로그램은 무한한 자유가 있는 프로그램이 아니라 적절한 제약이 있는 프로그램이다.

형변환

자바에서 숫자를 표현할 수 있는 범위는 다음과 같다.

int < long < double

int -> long -> double

작은 범위에서 큰 범위로는 대입할 수 있다. ( 이것을 묵시적 형변환 또는 자동 형변환이라 한다.)

큰 범위에서 작은 범위의 대입은 다음과 같은 문제가 발생할 수 있다. 이때는 명시적 형변환을 사용해야 한다.

소수점 버림
오버플로우 ( long -> int로 변경한경우 전혀 다른 숫자가 표현된다. 중요한 것은 오버플로우가 발생하는 것 자체가 문제라는 점이다. 오버플로우가 발생했을 때 결과가 어떻게 되는지 계산하는데 시간을 낭비하면 안된다! 오버플로우 자체가 발생하지 않도록 막아야 한다. 대입하는 변수(intValue)의 타입을 int -> long으로 변경해서 사이즈를 늘리면 해결)

캐스팅 : 영어단어 "cast"에서 유래되었다. "cast"는 금속이나 다른 물질을 녹여서 특정한 형태나 모양으로 만드는 과정을 의미한다.

자바에서 계산은 다음 2가지를 기억하자

같은 타입끼리의 계산은 같은 타입의 결과를 낸다.
- int + int는 int를, double + double은 double의 결과가 나온다.
서로 다른 타입의 계산은 큰 범위로 자동 형변환이 일어난다.
- int + long은 long + long으로 자동 형변환이 일어난다.
- int + double은 double + double로 자동 형변환이 일언난다.

연산과 형변환

같은 타입은 같은 결과를 낸다
서로 다른 타입의 계산은 큰 범위로 자동 형변환이 일어난다.

Scanner

System.out을 통해서 출력을 했듯이, Systems.in을 통해서 사용자의 입력을 받을 수 있다. 그런데 자바가 제공하는 System.in을 통해서 사용자 입력을 받으려면 여러 과정을 거쳐야해서 복잡하고 어렵다.

자바는 이런 문제를 해결하기 위해 Scanner라는 클래스를 제공한다.

package scanner;

import java.util.Scanner;

public class Scanner1 {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);

        System.out.print("문자열을 입력하세요:");

        String str = scanner.nextLine();
        System.out.println("입력한 문자열: "+str);

        System.out.print("정수를 입력하세요:");
        int intValue = scanner.nextInt();
        System.out.println("입력한 정수: "+intValue);

        System.out.print("실수를 입력하세요:");
        double doubleValue = scanner.nextDouble();
        System.out.print("입력한 실수: "+doubleValue);
    }
}

scanner.nextLine() : 엔터(\n)을 입력할 때까지 문자를 가져온다.
scanner.nextInt() : 입력을 int형으로 가져온다. 정수 입력에 사용한다.
scanner.nextDouble() : 입력을 double형으로 가져온다. 실수 입력에 사용한다.

주의해야 할점은 입력받는 타입과 입력하는 타입이 다르면 오류가 발생한다.

정수값을 입력받고 문자를 입력받을때 10\n 처럼 공백값이 들어갈 수 있다. 그래서 input.nextLine()을 사용해서 값을 비워준다.

배열

배열선언과 생성

int[] students; // 1. 배열 변수 선언
students = new int[5]; // 2. 배열 생성

배열 변수 선언
- 배열을 사용하려면 int[] students;와 같이 배열 변수를 선언해야 한다.
- 배열 변수를 선언한다고 해서 아직 사용할 수 있는 배열이 만들어진 것은 아니다.
  - int a 에는 정수를, double b 에는 실수를 담을 수 있다. int[] students와 같은 배열 변수에는 배열을 담을 수 있다.( 배열 변수에는 10,20같은 값이 아니라 배열이라는 것을 담을 수 있다)
배열 생성
- 배열을 사용하려면 배열을 생성해야 한다.
- new int[5] 라고 입력하면 5개의 int형 변수가 만들어진다.
- new는 새로 생성한다는 뜻이고, int[5]는 int 형 변수 5개라는 뜻이다.
배열 초기화 : 자바는 배열을 생성할 때 그 내부값을 자동으로 초기화한다.
배열 참조값 보관
- new int[5]로 배열을 생성하면 배열의 크기만큼 메모리를 확보한다.(int형 5개 -> 20byte)
- x001은 참조값이다.
- 앞서 선언한 배열 변수인 int[] students에 생성된 배열의 참조값(x001)을 보관한다.
- int[] students 변수는 new int [5]로 생성한 배열의 참조값을 가지고 있다.

참조값을 확인하고 싶다면 배열의 변수를 출력해보면 된다.

System.out.println(students); // [I@6acbcfc0 @앞의 [I는 int형 배열을 뜻한다. @뒤에 16진수는 참조값을 뜻한다.

기본형 vs 참조형

자바의 변수 데이터 타입을 가장 크게보면 기본형과 참조형으로 분류할 수 있다.

기본형(Primitive Type) : int, long, double, boolean 처럼 변수에 사용할 값을 직접 넣을 수 있는 데이터 타입
참조형(Reference Type) : int[] students와 같이 데이터에 접근하기 위한 참조(주소)를 저장하는 데이터타입

배열은 왜 참조형을 사용할까? 단순히 그 안에 값을 넣고 사용하면 되는 것 아닐까? 기본형은 모두 사이즈가 명확하게 정해져있다.

int i; // 4byte
long l; // 8byte
double d; //8byte

그런데 배열은 동적으로 사이즈를 변경할 수 있다.

int size = 10000; // 사용자가 입력한 값을 넣었다고 가정
new int[size]; // 이 코드가 실행되는 시점에 배열의 크기가 정해진다.

기본형은 선언과 동시에 크기가 정해진다. 따라서 크기를 동적으로 바꾸거나 할 수 없다. 반면에 앞서본 배열과 같은 참조형은 크기를 동적으로 할당할 수 있다. 이런 것을 동적메모리 할당이라 한다. 기본형은 선언과 동시에 사이즈가 정적으로 정해지지만, 참조형을 사용하면 이처럼 동적으로 크기가 변해서 유연성을 제공할 수 있다.

참조형은 더 복잡한 데이터구조를 만들고 관리, 기본형은 더 빠르고 메모리를 효율적으 로 처리

배열 생성 및 초기화

int[] students;
students = new int[]{90.80,70,60,50}; // 배열 생성과 초기화 

------
int[] students = new int[]{90,80,70,60,50}; // 배열 변수 선언, 배열 생성과 초기화


----
int[] students = {90,80,70.60,50}; // 자바내부에서 배열 요소의 크기를 보고 new int[5]를 사용해서 생성

2차원배열

2차원 배열은 행과 열로 구성된다.

int[][] arr = new int[2][3];

향상된 for문

for( 변수 : 배열 또는 컬렉션 ) { 
  // 배열 또는 컬렉션의 요소를 순회하면서 수행할 작업
}

아래의 일반 for문에서는 int i 와 같은 인덱스를 탐색할 수 있는 변수와 배열의 끝 조건을 지정해주는 i<numbers.length와 마지막으로 배열의 값을 하나 읽을 때 마다 인덱스를 하나씩 증가시켜줘야한다. 개발자 입장에서는 단순히 배열을 순서대로 끝까지 탐색하고 싶은데, 너무 번잡한 일 일수도 있다. 그래서 향상된 for문이 등장했다.

int[] numbers = {1,2,3,4,5};

//일반 for문
for(int i = 0; i<numbers.length; i++){
       int number = numbers[i];
       System.out.println(number);
}

//향상된 for문, for-each문
for (int number : numbers) {
       System.out.println(number);
}

향상된 for문을 사용하지 못하는 경우가 있다. 향상된 for문에서는 증가하는 인덱스 값이 감추어져 있다. 따라서 int i와 같은 증가하는 인덱스 값을 직접 사용해야 하는 경우에는 향상된 for문을 사용할 수 없다.

메서드

메서드 호출과 용어정리

메서드를 호출할 때는 다음과 같이 메서드에 넘기는 값과 매개변수(파라미터)의 타입이 맞아야 한다. 물론 넘기는 값과 매개변수(파라미터)의 순서와 갯수도 맞아야 한다.

호출 : call("hello" , 20 )

메서드 정의 : int call(String str, int age)

인수(Argument) : "hello", 20처럼 넘기는 값을 영어로 Argument(아규먼트), 한글로 인수 또는 인자라 한다
매개변수(Parameter) : 메스드를 정의할때 선언한 변수인 String str, int age를 매개변수,파라미터라 한다. 메서드를 호출할 때 인수를 넘기면, 그 인수가 매개변수에 대입된다.

용어정리

인수(인자) : 메스더 내부로 들어가는 값
매개변수(파라미터) : 매개 + 변수의 합성어로 '중간에서 전달하는 변수'라는 의미를 가진다. 즉, 메서드 호출부와 메서드 내부 사이에서 값을 전달하는 역할을 하는 변수

참고자료

https://www.inflearn.com/course/%EA%B9%80%EC%98%81%ED%95%9C%EC%9D%98-%EC%9E%90%EB%B0%94-%EC%9E%85%EB%AC%B8/dashboard

[지금 무료] 김영한의 자바 입문 - 코드로 시작하는 자바 첫걸음 강의 - 인프런

프로그래밍에 처음 입문하는 분들을 위한 자바 강의입니다. 코드를 따라하면서 손쉽게 자바를 배울 수 있습니다., 국내 개발 분야 누적 수강생 1위, 제대로 만든 김영한의 자바 입문[사진][임베

www.inflearn.com

도서주문관리 프로젝트 - 5. JWT적용, 예외처리(토큰만료)

최맹수 — Fri, 12 Jan 2024 21:24:37 +0900

지금까지는 사용자(로그인이 된 회원)의 권리를 가진 사용자만이 할수있는 좋아요추가/취소, 장바구니담기/조회 등을 Request(요청)할때 단순히 유저id 또는 이메일 등의 방식으로 요청을 했습니다. 이번에는 이러한 방식에서 벗어나 JWT를 이용해 Header에 JWT를 담아서 서버에 보내고 요청을 할 수 있도록 설계해보겠습니다.

이전에 한번 jwt가 무엇인지 어떻게 발행하고 어떻게 검증하는지에 대해 다뤄봤습니다.

https://myeongsu0257.tistory.com/231

JWT

인증과 인가 인증(Authentication) = 로그인 : 관리자든 고객이든 인증을 통해서 사이트에 가입된 사용자라는 걸 증명하는 것 ex) : ID, PW로 로그인 하는 행위 인가(Authorization) : 인증 이후의 프로세스로

myeongsu0257.tistory.com

이번에는 좀 더 자세히 어떻게 cookie에 실어서 클라이언트로 token을 보내는지 알아보겠습니다. 먼저 발행입니다.

token을 발급하고 cookie에 담아서 보내는데 postman으로 확인해보겠습니다.

const express = require('express');
const app = express();
const dotenv = require('dotenv');
let jwt=require('jsonwebtoken');
dotenv.config();
app.listen(process.env.PORT);

// GET + "/jwt" : 토큰 발행
app.get('/jwt', function (req, res) {
  let token = jwt.sign({foo:'bar'},process.env.PRIVATE_KEY);
  console.log(token);
  res.cookie("jwt",token,{
    httpOnly:true
  });
  res.send('토큰 발행');
});

요청을 해보니 이상한점을 발견할 수 있습니다. Request Headers에 Cookie값이 있었습니다. 저는 분명 Cookie값을 보낸적이 없는데?

이전 Request

일단 한번 더 요청해봤습니다. 그랬더니 똑같이 Request에 Cookie가 또 담겨있었습니다. 하지만 자세히보니 Request의 Cookie값이 바로 전 요청에 있는 Reoseponse의 Set-Cookie값과 똑같음을 알게 되었습니다.

이 현상으로 인해 발생할 수 있는 문제점은 이렇게 쿠키에 계속 다른값을 담아주고 이전의 쿠키값과 혼동이되어 문제가발생할 수 있습니다. 그래서평소에 사이트를 이용하면서 쿠키삭제와같은 것들을 해주면 오류가 해결되는 현상이 있었습니다.

결과적으로 토큰을 쿠키에 발급할고 다음번에 토큰이 필요한 요청을 할때 header에 Authorization에 토큰의 값을 담아서 보내주면 됩니다.

const express = require("express");
const app = express();
const dotenv = require("dotenv");
let jwt = require("jsonwebtoken");
dotenv.config();
app.listen(process.env.PORT);

// GET + "/jwt" : 토큰 발행
app.get("/jwt", function (req, res) {
	let token = jwt.sign({ foo: "bar" }, process.env.PRIVATE_KEY);
	console.log(token);
	res.cookie("jwt", token, {
		httpOnly: true,
	});
	res.send("토큰 발행");
});

// GET + "/jwt/decoded" : 토큰을 검증
app.get("/jwt/decoded", function (req, res) {
	let receivedJwt = req.headers["authorization"];
	console.log(receivedJwt);
	let decoded = jwt.verify(receivedJwt, process.env.PRIVATE_KEY);
	res.json(decoded);
});

토큰을 발행하고 해당 토큰값을 postman의 콘솔의 response의 set-cookie의 jwt= 여기값을 header에 실어서 보내주면됩니다. 참고로 ;(세미콜론)은 빼야 됩니다.( 이걸로 시간을 좀 잡아먹었습니다...)

JWT 프로젝트에 적용

프로젝트에서 좋아요 api에서 Request Body에 token을 보내서 접근이 가능한 사용자인지 아닌지 확인하는 부분을 설계해보겠습니다. 먼저 이전에 설계한 api는 body에 user_id값을 받아서 확인을 했었는데 아래 명세처럼 jwt를 받아서 확인해보겠습니다.

좋아요 추가

Method	POST
URI	/likes/{bookdId}
HTTP status code	200
Request Body	// 로그인할 때 받은 token > req.header "Authorization" // payload 값을 읽는다 -> 사용자의 id를 읽어낼 수 있다.
Response Body

좋아요 취소

Method	DELETE
URI	/likes/{bookdId}
HTTP status code	200
Request Body	// 로그인할 때 받은 token > req.header "Authorization" // payload 값을 읽는다 -> 사용자의 id를 읽어낼 수 있다.
Response Body

이전 코드입니다. 2개의함수 좋아요추가(addLike), 좋아요삭제(removeLike) 두개 다 모두 body에 user_id를 받아서 sql문을 실행했었습니다.

const conn = require("../mariadb");
const {StatusCodes}= require('http-status-codes');

const addLike=(req,res)=>{
    const {id}=req.params;
    const {user_id}=req.body;
    const sql = `INSERT INTO likes VALUES(?,?)`;
    let values=[user_id, Number(id)];
    conn.query(sql,values,
        (err,results,fileds)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            return res.status(StatusCodes.CREATED).json(results);
        })
}

const removeLike = (req,res)=>{
    const {id} = req.params;
    const {user_id} = req.body;
    const sql = `DELETE FROM likes WHERE user_id= ? AND liked_book_id=?`;
    let value = [user_id,Number(id)]
    conn.query(sql,value,
        (err,results,fields)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            return res.status(StatusCodes.OK).json(results);
        })
}

module.exports={
    addLike,
    removeLike
}

jwt를 이용해서 바뀐코드를 보기전에 로그인을 할때 어떤값을 payload에 담아서 보내줄건지 정해야합니다. 저는 아래와 같이 유저의 email과 id값을 담아서 보내줍니다.

아래의 코드에서 receivedJwt에 Request의 Header에서 전송한 Authorization의 토큰값을 저장하고 해당 값을 이용해 복호화를 한후 decodedJwt에 담아주면 해당변수에는 Payload의 값이 담깁니다.

....
const jwt = require("jsonwebtoken");

const addLike = (req, res) => {
	const { id } = req.params;

	const receivedJwt = req.headers["authorization"];
	const decodedJwt = jwt.verify(receivedJwt, process.env.PRIVATE_KEY);

	const sql = `INSERT INTO likes VALUES(?,?)`;
	let values = [decodedJwt.id, Number(id)];
	conn.query(sql, values, (err, results, fileds) => {
		if (err) {
			console.log(err);
			return res.status(StatusCodes.BAD_REQUEST).end();
		}
		return res.status(StatusCodes.CREATED).json(results);
	});
};

const removeLike = (req, res) => {
	const { id } = req.params;

	const receivedJwt = req.headers["authorization"];
	const decodedJwt = jwt.verify(receivedJwt, process.env.PRIVATE_KEY);

	const sql = `DELETE FROM likes WHERE user_id= ? AND liked_book_id=?`;
	let values = [decodedJwt.id, Number(id)];
	conn.query(sql, values, (err, results, fields) => {
		if (err) {
			console.log(err);
			return res.status(StatusCodes.BAD_REQUEST).end();
		}
		return res.status(StatusCodes.OK).json(results);
	});
};

....

아래처럼 console에 decodedJwt를 찍어보았을때 email과 id가 잘 담겨져 있는 것을 확인할 수 있습니다. 그래서 해당값에서 id를 value에 담아서 사용해주면됩니다.

위의 코드에서 중복되는 부분을 함수로 만들어주고 나머지들도 정리한 최종본코드입니다.

const conn = require("../mariadb");
const { StatusCodes } = require("http-status-codes");
const jwt = require("jsonwebtoken");


const addLike = (req, res) => {
	const bookId = req.params.id;

	const decodedJwt = decodeJwt(req);

	const sql = `INSERT INTO likes VALUES(?,?)`;
	let values = [decodedJwt.id, Number(bookId)];
	conn.query(sql, values, (err, results, fileds) => {
		if (err) {
			console.log(err);
			return res.status(StatusCodes.BAD_REQUEST).end();
		}
		return res.status(StatusCodes.CREATED).json(results);
	});
};

const removeLike = (req, res) => {
	const bookId = req.params.id;

	const decodedJwt = decodeJwt(req);

	const sql = `DELETE FROM likes WHERE user_id= ? AND liked_book_id=?`;
	let values = [decodedJwt.id, Number(bookId)];
	conn.query(sql, values, (err, results, fields) => {
		if (err) {
			console.log(err);
			return res.status(StatusCodes.BAD_REQUEST).end();
		}
		return res.status(StatusCodes.OK).json(results);
	});
};


function decodeJwt(req) {
	const receivedJwt = req.headers["authorization"];
	return jwt.verify(receivedJwt, process.env.PRIVATE_KEY);
}

module.exports = {
	addLike,
	removeLike,
};

JWT 토큰만료 예외처리

토큰을 Header에 넣어서 요청을 해주다가 아래처럼 JWT가 만료되었다고 나옵니다.(만료시간이 지났기때문) 이럴때는 예외처리를 해줘야 합니다.

아래는 JWT가 발생할 수 있는 대표적인 에러 2가지입니다. 이 에러에 대해 try-catch문을 이용해 예외처리를 해주겠습니다.

TokenExpiredError : 유효기간이 지난 토큰 = 만료된 토큰
JsonWebToken : 문제 있는 토큰

먼저 TokenExpiredError입니다. 복호화하는 함수에서 try-catch문을 이용해 정상적이면 복호화된 jwt값을 에러가 발생하면 err를 리턴해주었습니다.

function decodeJwt(req, res) {
	try {
		const receivedJwt = req.headers["authorization"];
		return jwt.verify(receivedJwt, process.env.PRIVATE_KEY);
	} catch (err) {
		console.log(err);
		return err;
	}
}

위의 함수를 호출하는 api에서는 if-else문과 instanceof를 이용해 토큰이 만료되었으면 message를 아니면 기존에 sql문을 실행하도록 해주었습니다.

const addToCart = (req, res) => {
	const { book_id, quantity } = req.body;

	const decodedJwt = decodeJwt(req, res);
	if (decodedJwt instanceof jwt.TokenExpiredError) {
		return res.status(StatusCodes.UNAUTHORIZED).json({
			message: "로그인 세션이 만료되었습니다. 다시 로그인 해주세요",
		});
	} else {
		const sql = `INSERT INTO cartItems(book_id,quantity,user_id) VALUE(?,?,?)`;
		let values = [book_id, quantity, decodedJwt.id];
		conn.query(sql, values, (err, results, fields) => {
			if (err) {
				console.log(err);
				return res.status(StatusCodes.BAD_REQUEST).end();
			}
			return res.status(StatusCodes.CREATED).json(results);
		});
	}
};

다음으로 JsonWebTokenError입니다. 이 에러는 토큰이 이상한값일때 에러를 출력합니다. 실제로 토큰에서 이상한값을 넣었더니 아래의 에러가 발생하였습니다.

else-if문으로 아래처럼 해당 오류가 발생했을때 에러만 처리해주면됩니다.

if (decodedJwt instanceof jwt.TokenExpiredError) {
		return res.status(StatusCodes.UNAUTHORIZED).json({
			message: "로그인 세션이 만료되었습니다. 다시 로그인 해주세요",
		});
	} else if (decodedJwt instanceof jwt.JsonWebTokenError) {
		return res.status(StatusCodes.UNAUTHORIZED).json({
			message: "토큰 값을 확인해주세요",
		});

근데 문제가 발생합니다. 아래의 처리를 모든 api함수에서 다해주면 코드가 중복되는 부분이 많아집니다.

도서주문관리 프로젝트 - 4.비동기(async-awiat)이용한 쿼리실행(주문)

최맹수 — Thu, 11 Jan 2024 19:10:14 +0900

주문하기컨트롤러를 설계하면서 3개의sql문을 한번에 실행해야하는 코드가 있습니다.

const order = (req,res)=>{
    const {items,delivery,totalQuantity,totalPrice,userId,firstBookTitle}=req.body;
    let delivery_id;
    let order_id;
    let sql ="INSERT INTO delivery(address,receiver,contact) VALUES(?,?,?)"

    let values = [delivery.address, delivery.receiver, delivery.contact];
    conn.query(sql,values,
        (err,results,fields)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            console.log(results);
            delivery_id=results.insertId; //여기

            
        })
    sql = `INSERT INTO orders(book_title, total_quantity, total_price, user_id, delivery_id)
     VALUE(?,?,?,?,?)`;
    values =[firstBookTitle,totalQuantity,totalPrice,userId,delivery_id];
     conn.query(sql,values,
        (err,results,fields)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            console.log(results);
            order_id=results.insertId;//여기
            
        })
    sql =`INSERT INTO orderedBook(order_id,book_id,quantity) VALUE(?)`;
    values=[];
    items.forEach((item)=>{
        values.push([order_id,item.book_id,item.quantity]);
    })

    conn.query(sql,values,
        (err,results,fields)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
           
            return res.status(StatusCodes.OK).json(results);
        })


};

현재 위 코드를 실행시키면 delivery_id와 order_id를 할당하기 전에 아래 sql문이 실행되어 값이 할당되지 않아 null이라는 값이 들어가 있다고 나옵니다. 이러한이유는 node의 논블로킹이라는 특징때문에 그렇습니다. 간단하게 말해 논블로킹이란 어떤 함수가 실행되는 중에도 다른 작업을 동시에 진행할 수 있다는 것입니다. 따라서 위의코드에서도 값을 할당하는것을 기다리지 않고 바로 아래의 sql문으로 진행되었던 것 입니다.

따라서, 하나의 작업(sql문)이 끝날때 다음 작업(sql문)을 실행시키는 즉, 순서를 맞춰서 코드를 실행시켜주는 비동기 처리를 해야 합니다. 비동기처리의 방식은 대표적으로 4가지가 있습니다.

콜백 함수 : 할 일 다하고, 이거 실행해줘(순서 맞춰서 실행)
promise(resolve, reject)
then & catch
EX2017 promise => async & await

1번의 콜백함수는 지금까지 사용했던 방식이였고 4번 async & await방식을 사용해보겠습니다. async-await는 비동기로 실행되는 것들을 끝날 때 까지 기다린다는 의미로 callback처럼 동기방식으로 처리가 가능하게 해주는 문법입니다. 즉, Promise객체를 좀 더 쉽게 편하게 사용하는 문법입니다.

let promise = new Promise(function(resolve,reject){
    setTimeout(() => resolve('완료!'),3000);
});

promise.then(
    function(result){
        console.log(result);
    },
    function(error){}
);

위의 코드를 실행하면 3초뒤에 완료!가 출력됩니다.위의 코드에서는 promise.then을 코드 밖에 선언을해서 사용해줬지만 아래의 코드에서는 await를 사용해 똑같이 Promise객체 일이 끝날 때까지 기다릴 수 있게 해줍니다. 아래의코드를 실행해도 3초뒤에 완료!가 출력됩니다.

async function f(){
    let promise=new Promise(function(resolve,reject){
        setTimeout(()=>resolve("완료!"),3000);
    });

    let result = await promise;
    console.log(result);
};

f();

async-await 적용

async-await를 적용한 주문하기 api입니다. 기존에 작성하던 api설계에서 다른점은 크게 3가지 입니다.

mysql2/promise : 기존에는 mysql2만 사용
conn : 상단부에서 require해서 사용해오던 방식을 api함수안에서 선언하여 사용
conn.query : conn.execute로 변경하여 사용

먼저 asnyc-await를 사용하기 위해서는 mysql2/promise를 사용해야합니다. 그리고 conn을 require해서 사용했었는데 비동기처리를 해주기 위해 api함수안에서 정의하여 사용했습니다. 마지막으로 conn.query()대신 conn.execute()를 사용해줍니다. 코드를 보면 마지막부분쯤에 conn.query()를 사용한 부분이 있는데 이유는 SQL의 insert문에서 여러개의 행들(데이터)를 넣어줘야 하는데 conn.execute()는 insert가 되지 않아서 query를 사용했습니다. (WHERE의 IN과 같은 곳에서도 안됨, 즉 여러개의 값들을 이용할때 안되는것같음)

const mysql = require('mysql2/promise');
//const conn = require('../mariadb');
const {StatusCodes} = require('http-status-codes');

const order = async (req,res)=>{
    const conn = await mysql.createConnection({
        host:"localhost",
        user:'root',
        password:'root',
        database:'Bookshop',
        dateStrings:true
    });

    //배송지
		const { items, delivery, totalQuantity, totalPrice, firstBookTitle } = req.body;
		let sql = "INSERT INTO delivery(address,receiver,contact) VALUE(?,?,?)";
		let values = [delivery.address, delivery.receiver, delivery.contact];
		let [results] = await conn.execute(sql, values);
		let delivery_id = results.insertId;

		//주문
		sql = `INSERT INTO orders(book_title, total_quantity, total_price, user_id, delivery_id)
         VALUE(?,?,?,?,?)`;
		values = [firstBookTitle, totalQuantity, totalPrice, decodedJwt.id, delivery_id];
		[results] = await conn.execute(sql, values);
		let order_id = results.insertId;
		console.log("주문번호");
		console.log(order_id);

		//장바구니에서 선택한 상품 목록 조회
		sql = `SELECT book_id,quantity FROM cartItems WHERE id IN(?)`;
		let [orderItems, fields] = await conn.query(sql, [items]);
		console.log(orderItems);

		//주문된 책 목록 조회
		sql = `INSERT INTO orderedBook(order_id,book_id,quantity) VALUES ?`;
		values = [];
		orderItems.forEach((item) => {
			values.push([order_id, item.book_id, item.quantity]);
		});
		console.log(values);
		[results] = await conn.query(sql, [values]);
		console.log(results);

		//장바구니에서 선택한 상품 삭제
		let result = await deleteCartItems(conn, items);
		console.log(result);

		return res.status(StatusCodes.OK).json(results[0]);
};

그래서 아래코드에서도 conn.execute()대신 conn.query()를 사용해주었습니다.

const deleteCartItems = async(conn,items)=>{
    let sql =`DELETE FROM cartItems WHERE id IN(?)`;
    let values=items;
    let result = await conn.query(sql,values);
    return result;
}

추가적으로 이전에는 conn.query()를 한후 결과값을 단순히 results라는 변수에 받아서 사용했는데 conn.execute()처리를 하고나서 결과값들은 [rows,fields]에 담아줘야 활용할 수 있습니다.(rows, fields 이름은 바꿔도 상관없습니다). 그거에 대한 예시로 주문목록조회, 주문상세조회코드입니다.

const getOrders = async (req,res)=>{
    const conn = await mysql.createConnection({
        host:"localhost",
        user:'root',
        password:'root',
        database:'Bookshop',
        dateStrings:true
    });

    // let {id}=req.body;
    let sql = `SELECT orders.id,book_title,total_quantity,total_price,created_at,address,receiver,contact
     FROM orders LEFT OUTER JOIN delivery ON orders.delivery_id=delivery.id`;
    let [rows,fields] = await conn.execute(sql,[]);
    console.log(rows);
    return res.status(StatusCodes.OK).json(rows);
};

const getOrderDetail = async (req,res)=>{
    const conn = await mysql.createConnection({
        host:"localhost",
        user:'root',
        password:'root',
        database:'Bookshop',
        dateStrings:true
    });
    let {id}=req.params;
    let sql = `SELECT books.id,books.title,books.author,books.price,orderedBook.quantity
     FROM orderedBook LEFT OUTER JOIN books
     ON orderedBook.book_id=books.id
      WHERE order_id=?`;
    let values = [id];
    let [rows,fields] = await conn.execute(sql,values);
    console.log(rows);
    return res.status(StatusCodes.OK).json(rows);
};

여러개의 VALUES, WHERE IN

insert into에서 id값을 제외한 모든값들을 삽입해야하는 경우가 있습니다. 그럴때는 아래처럼 사용합니다. SQL문을 보면 VALUES에 ?를 적어주고 values라는 배열에 값들을 넣은뒤 conn.query문에서 처리해주면됩니다. (어떻게 보면 Values가 2차배열이 된다고 볼 수 있겠네요)

//주문된 책 목록 조회
		sql = `INSERT INTO orderedBook(order_id,book_id,quantity) VALUES ?`;
		values = [];
		orderItems.forEach((item) => {
			values.push([order_id, item.book_id, item.quantity]);
		});
		console.log(values);
		[results] = await conn.query(sql, [values]);
		console.log(results);

그래고 WHERE IN에서도 (?)를 적어준뒤 아래에서 items라는 배열을 한번더 배열을 씌워서 처리해줍니다.

//장바구니에서 선택한 상품 목록 조회
		sql = `SELECT book_id,quantity FROM cartItems WHERE id IN(?)`;
		let [orderItems, fields] = await conn.query(sql, [items]);
		console.log(orderItems);

도서주문관리 프로젝트 - 3. 도서,좋아요 API(SQL시간범위, 페이지네이션,서브쿼리)

최맹수 — Thu, 11 Jan 2024 16:12:48 +0900

도서

전체 도서 조회

전체도서조회입니다. query로 4개의 값을 받는데 이 중 필수적으로 받아야 하는 값들은 limit와 currentPage입니다. category_id는 카테고리별로 도서의 개수를 알고 싶을때, news는 현재 날짜로부터 1달이내에 출간된 도서를 조회하고 싶을때 받아서 사용합니다. 따라서 category_id와 news의 값이 있는 경우들을 if문으로 작성하여 기본적인 sql문( 모든책조회) 에 WHERE로 조건을 걸어주었습니다.

const allBooks = (req,res)=>{
    const {category_id,news,limit,currentPage} = req.query;
    // limit : page 당 도서 수 ex. 3
    // currentPage : 현재 몇 페이지 ex. 1, 2, 3 ...
    // offset : 0, 3, 6, 9, 12... ( limit * (currentPage-1) )
    let offset = limit * (currentPage-1);
    const values = [];
    let sql = "SELECT *, (SELECT count(*) FROM likes WHERE books.id=liked_book_id) AS likes FROM books"
    if(category_id&&news){
        sql = sql + " WHERE category_id=? AND pub_date BETWEEN DATE_SUB(NOW(), INTERVAL 1 MONTH) AND NOW()" 
        values.push(category_id);
    }
    else if(category_id){  
        sql = sql + ` WHERE category_id=?`;
        values.push(category_id);
    }
    else if(news){
        sql = sql + " WHERE pub_date BETWEEN DATE_SUB(NOW(), INTERVAL 1 MONTH) AND NOW()"
    }
    values.push(Number(limit));
    values.push(offset);
    sql = sql + " LIMIT ? OFFSET ?";

    conn.query(sql,values,
        (err,results,fields)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            if(results)
                return res.status(StatusCodes.OK).json(results);
            else
                return res.status(StatusCodes.NOT_FOUND).end();
        })
   
};

페이지네이션

위의 코드 중 페이지네이션을 조금더 설명해보자면 limit는 페이지 당 도서의 개수이고 currentPage는 현재 몇 페이지인지를 알려주는 수 입니다. 즉, 페이지네이션을 구현하기 위해 limit와 currentPage를 받아주었고 그 값을 이용해 offset을 설정해주었습니다. offset은 어떤 데이터부터 시작할지 정해주는 기준점과 같습니다. 예를 들면 1~100까지 데이터가 있고 offset이 10(데이터베이스 상 데이터 순서때문에 10-1=9) 이면 10번째 행부터 데이터를 가져올 수 있습니다.

limit : 페이지 당 도서 개수 ex) 4, 8, 12 등과 같은다양한 배수의 값들로 이루어짐
currentPage : 현재 페이지 ex) 1,2,3 페이지 .. 등
orrset : 조회를 시작할 기준점(가져올 데이터의 초기 위치값)

개별 도서 조회

개별 도서 조회입니다. like테이블을 이용해 개별 도서의 좋아요수, 좋아요여부를 알 기 위해 서브쿼리를 사용했습니다. COUNT함수를 사용해 좋아요갯수를 가져왔고 EXISTS함수를 이용해 좋아요여부를 알 수 있었습니다.

const bookDetail = (req,res)=>{
    let {user_id} = req.body;
    let book_id = req.params.id;
    const sql = `SELECT *,
        (SELECT count(*) FROM likes WHERE liked_book_id=books.id) AS likes, 
        (SELECT EXISTS (SELECT * FROM likes WHERE user_id=? AND liked_book_id=?)) AS liked
         FROM books LEFT OUTER JOIN category ON books.category_id=category.category_id WHERE books.id=?`;
    const values = [user_id,book_id,book_id];
    conn.query(sql,values,
        (err,results,fields)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            if(results[0])
                return res.status(StatusCodes.OK).json(results[0]);
            else
                return res.status(StatusCodes.NOT_FOUND).end();
        })
};

좋아요 추가입니다.

const addLike=(req,res)=>{
    const {id}=req.params;
    const {user_id}=req.body;
    const sql = `INSERT INTO likes VALUES(?,?)`;
    let values=[user_id, Number(id)];
    conn.query(sql,values,
        (err,results,fileds)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            return res.status(StatusCodes.CREATED).json(results);
        })
}

좋아요 삭제입니다.

const removeLike = (req,res)=>{
    const {id} = req.params;
    const {user_id} = req.body;
    const sql = `DELETE FROM likes WHERE user_id= ? AND liked_book_id=?`;
    let value = [user_id,Number(id)]
    conn.query(sql,value,
        (err,results,fields)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            return res.status(StatusCodes.OK).json(results);
        })
}

도서주문관리 프로젝트 - 2. 유저API(컨트롤러, 단뱡향암호화(crypto),jwt token)

최맹수 — Wed, 3 Jan 2024 01:54:04 +0900

Express-generator 프로젝트 구조

bin/www : 포트번호 등과 같은 웹 서버를 구축하는데에 필요한 설정 데이터가 정의되어 있는 파일
- .env파일과 같이 설정값을 가지고 에러처리, 기타추가 설정을 해주는 파일
node_modules : Node.js, Express에 필요한 모듈들이 설치되는폴더
public : images, javascripts, stylesheets -> 정적(ex. 로고, 회사 소개 페이지) 파일
routes : 각 경로를 담당하는 모듈들이 들어있는 폴더 = 라우팅 로직을 구현하는 모듈들 : 클라이언트에서 어떤 요청을 주냐에 따라서 어떤 로직을 수행할 지 파일별로 분할 해서 관리하는 정도
- 자바의 controller 역할
views : 클라이언트에게 html코드로 "화면을 보내는파일"
app.js(서버의 시작점) -> URL에 따라서 라우팅
package.json : 이 프로젝트에 설치된 모듈 이름, 버전 등등 정보들이 작성되어 있는 파일

컨트롤러

계층분리의필요성

지금까지 Express를 학습하면서 계층구조는 단순히 app.js에서 routes를 설정해주고 url에 따른 사용자의 요청이 오면 해당 url의 routes로가서 로직을 실행시켜주는 구조였다.

routes에서 로직을 정의하고 실행시키는 것의 장점은 어떤 엔드포인트로 접근햇을 때 어떤 동작을 하게 되는지 한 눈에 볼 수 있어 유용했다. 하지만 단순한프로젝트가 아닌 규모가 커지게 된다면 하나의 routes안에서 코드가 많아져 관리하는 것이 힘들어 질 수 있다. 즉 유지보수가능한코드가 되기 어렵다. 따라서 장기적인 측면을 생각했을때 정확한 계층 분리는 꼭 필요하다.

Router : 엔드포인트와 해당 엔드포인트에서 실행되어야 할 로직을 연결해주는 역할
Controller : Middlewar의 일종이지만 메인 로직을 담당하므로 분리해서 관리
Middleware : 메인 로직의 Controller 앞뒤로 추가적인 일을 담당

따라서 Router는 정말 코드의 전체적인 흐름, 경로만 나타내주고 Controller가 메인 로직을 담당(Service 계층으로연결, Service는 DB계층으로 연결), Middleware는 그 외의 특별한 일을 함수로 따로 빼서 거치도록 해주는 느낌이다.

아래는 회원가입을 컨트롤러를 통해 분리하였다.

users.js

...
const join = require('../controller/UserController');
...
//회원가입
router.post('/join',
    [
        body('email').notEmpty().isEmail().withMessage('이메일확인필요'),
        body('password').notEmpty().isString().withMessage('비밀번호 확인필요'),
        validate
    ]
    ,join);

UserController.js

const conn = require('../mariadb'); //db모듈
const {StatusCodes} = require('http-status-codes');//status code 모듈

const join = (req,res)=>{
    let {email,password}=req.body;
    const sql = `INSERT INTO users (email,password) 
    VALUES(?,?)`
    let values =[email,password];
    conn.query(sql,values,
        function(err,results,fields){
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            return res.status(StatusCodes.CREATED).json(results);
        })
}

module.exports=join;

추가적으로 로그인, 비밀번호초기화요청, 비밀번호초기화까지 모두 컨트롤러에 작성해보았다.

먼저 유저라우터인 users.js이다

const express = require('express'); //express 모듈
const router = express.Router();
const conn = require('../mariadb'); //db모듈
const {body,validationResult}= require('express-validator');

const {
    join,
    login,
    passwordResetRequest,
    passwordReset
    } = require('../controller/UserController');
router.use(express.json());

const validate = (req,res,next)=>{
    const err = validationResult(req);
    if(err.isEmpty()){
        return next();
    }
    else{
        return res.status(400).json(err.array());
    }
}

//회원가입
router.post('/join',
    [
        body('email').notEmpty().isEmail().withMessage('이메일확인필요'),
        body('password').notEmpty().isString().withMessage('비밀번호 확인필요'),
        validate
    ]
    ,join);

router.post('/login',login);  //로그인
router.post('/reset',passwordResetRequest); //비밀번호 초기화 요청
router.put('/reset',passwordReset); //비밀번호 초기화 

module.exports=router

다음을 유저 컨트롤러인 UserController.js이다.

const conn = require('../mariadb'); //db모듈
const {StatusCodes} = require('http-status-codes');//status code 모듈
const jwt = require('jsonwebtoken');
const dotenv = require('dotenv');
dotenv.config();

const join = (req,res)=>{
    let {email,password}=req.body;
    const sql = `INSERT INTO users (email,password) 
    VALUES(?,?)`;
    const values =[email,password];
    conn.query(sql,values,
        (err,results,fields)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            return res.status(StatusCodes.CREATED).json(results);
        })
};

const login = (req,res)=>{
    let {email,password}=req.body;
    const sql = `SELECT * FROM users WHERE email=?`;
    const values = [email,password];
    conn.query(sql,values,
        (err,results,fields)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            const loginUser=results[0];
            if(loginUser&&loginUser.password==password){
                const token = jwt.sign({
                    email:loginUser.email,
                    name:loginUser.name
                },process.env.PRIVATE_KEY,{
                    expiresIn:'5m',
                    issuer:"choims"
                });      
                res.cookie("token",token,{
                    httpOnly:true
                });
                console.log(token);
                return res.status(StatusCodes.CREATED).json({
                    message:`${loginUser.email}님 로그인 되었습니다.`
                });
            }else{
                return res.status(StatusCodes.UNAUTHORIZED).end();
            }
        })
};
const passwordResetRequest = (req,res)=>{
    const {email} = req.body;
    let sql ='SELECT * FROM users WHERE email=?';
    conn.query(sql,email,
        (err,results)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }

            const user = results[0];
            if(user){
                return res.status(StatusCodes.OK).json({
                    email:email
                })
            }else{
                return res.status(StatusCodes.UNAUTHORIZED).end();
            }
            
        })
};
const passwordReset = (req,res)=>{
    const {email,password} = req.body;
    const sql = "UPDATE users SET password=? WHERE email=?";
    let values =[password,email];
    conn.query(sql,values,
        (err,results)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            if(results.affectedRows==0)
                return res.status(StatusCodes.BAD_REQUEST).end();
            else   
                return res.status(StatusCodes.OK).json(results);
        })
};

module.exports={
    join,
    login,
    passwordResetRequest,
    passwordReset
};

비밀번호 암호화

현재 user의 db를 보면 password가 암호화가 되어있지 않고 그대로 있는 것을 볼 수 있는데 만약 db가 해킹당하게 되면 회원의 password가 그대로 노출이 될 수 있다. 따라서 반드시 암호화를 해야합니다.

암호화 방법

단방향 암호화 : 복호화(암호화된 문자열을 다시 원래 문자열로 돌려놓는 것) 할 수 없는 암호화 방법
- 복호화 할 수 없으면 왜필요? -> 잘생각해보면 홈페이지 비밀번호 같은 경우는 복호화 할 필요가 없다. 비밀번호를 암호화해서 db에 저장해둔 후, 나중에 로그인할 때, 다시 입력받은 비밀번호를 같은 알고리즘으로 암호화해서 DB에 저장된 문자열과 비교하면 된다. 즉 원래 비밀번호는 어디에도 저장되지 않고, 암호화된 문자열로만 비교
양방향 암호화 : 비대칭형 암호화, 대칭형 암호화

단방향 암호화를 해보겠습니다. 기본 내장 모듈인 크립토모듈(crypto)를 불러와서 암호화를 해주겠습니다.

...
const crypto = require('crypto'); // crypot 모듈 : 암호화
...
//비밀번호 암호화
     const salt = crypto.randomBytes(64).toString('base64');
     const hashPassword = crypto.pbkdf2Sync(password, salt, 10000, 64,'sha512').toString('base64');

여기서 salt(소금)라는 특정값을 통해 레인보우테이블을 방지할 수 있습니다.

레인보우 테이블 : 서로 다른 유저가 '1234', '1234' 비밀번호로 회원가입을 했다고 가정하면, 둘의 암호화된 비밀번호가 같아진다. 해커는 이를 통해 비밀번호를 유추할 수 있다.(이를 찾는 문자열의 목록을 레인보우 테이블)

즉 slat는 랜덤 문자열을 생성해서 비밀번호와 같이 DB에 저장하면 된다. 위의 코드를 자세히 살펴보면

randomBytes : 메서드르 64바이트 길이의 salt를 생성, base64문자열 salt로 변경
pbkdf2Sync : 인자는 차례대로 비밀번호, salt, 반복 횟수, 비밀번호 길이, 해시 알고리즘 순
- 반복 횟수는 해시함수를 몇번 반복하느냐를 나타낸다. 이 숫자가 높을수록 슈퍼컴퓨터를 써도 레인보우 테이블을 만들기 힘들어진다.

그래서 이제 위의 코드를 가지고 어떻게 활용하나면

회원가입 시, 비밀번호를 암호화해서 암호화된 비밀번호와, salt 값을 같이 저장
로그인 시, 이메일&비밀번호(날 것) -> salt 값 꺼내서 비밀번호 암호화 해보고 -> 디비 비밀번호랑 비교

그러기 위해서는 db를 수정해줘야 한다. users테이블에 salt라는 열을 하나 추가해준다.

위의 코드를 추가한 회원가입 api코드이다.

const join = (req,res)=>{
    let {email,password}=req.body;
    const sql = `INSERT INTO users (email,password,salt) VALUES(?,?,?)`;

    //암호화된 비밀번호와 salt값을 같이 DB에 저장 
    const salt = crypto.randomBytes(10).toString('base64');
    const hashPassword = crypto.pbkdf2Sync(password, salt, 10000, 10,'sha512').toString('base64');

    const values =[email,hashPassword,salt];
    conn.query(sql,values,
        (err,results,fields)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            return res.status(StatusCodes.CREATED).json(results);
        })
};

수정한 후 post를 해본뒤 db를 확인해보면

그 뒤 로그인을 할때는 어떻게 할까요? db에서 salt를 꺼내서 비밀번호를 body에 받고 다시 암호화를 해서 비교해주면됩니다. 코드입니다.

const login = (req,res)=>{
    let {email,password}=req.body;
    const sql = `SELECT * FROM users WHERE email=?`;
    const values = [email,password];
    conn.query(sql,values,
        (err,results,fields)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            const loginUser=results[0];
            //salt값 꺼내서 비밀번호를 암호화하고 디비 비밀번호랑비교
            const hashPassword = crypto.pbkdf2Sync(password, loginUser.salt, 10000, 10,'sha512').toString('base64');
           
            if(loginUser&&loginUser.password==hashPassword){
                const token = jwt.sign({
                    email:loginUser.email,
                    name:loginUser.name
                },process.env.PRIVATE_KEY,{
                    expiresIn:'5m',
                    issuer:"choims"
                });      
                res.cookie("token",token,{
                    httpOnly:true
                });
                console.log(token);
                return res.status(StatusCodes.CREATED).json({
                    message:`${loginUser.email}님 로그인 되었습니다.`
                });
            }else{
                return res.status(StatusCodes.UNAUTHORIZED).end();
            }
        })
};

비밀번호 초기화

비밀번호초기화입니다. UPDATE SET WHERE을 사용하는데 새로운 비밀번호로 업데이트할때 새로운 salt를 생성해서 회원가입처럼 똑같이 하면됩니다.

const passwordReset = (req,res)=>{
    const {email,password} = req.body;
     
    const sql = "UPDATE users SET password=? , salt=? WHERE email=?";
    const salt = crypto.randomBytes(10).toString('base64');
    const hashPassword = crypto.pbkdf2Sync(password, salt, 10000, 10,'sha512').toString('base64');
    let values =[hashPassword,salt,email];
    conn.query(sql,values,
        (err,results)=>{
            if(err){
                console.log(err);
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            
            if(results.affectedRows==0)
                return res.status(StatusCodes.BAD_REQUEST).end();
            else   
                return res.status(StatusCodes.OK).json(results);
        })
};

도서주문관리 프로젝트 - 1.API 설계(API,테이블)

최맹수 — Thu, 28 Dec 2023 20:20:46 +0900

회원 API

회원가입

Method	POST
URI	/users/join
HTTP status code	201
Request Body	{ email : "사용자가 입력한 이메일", password : "사용자가 입력한 비밀번호" }
Response Body

로그인

Method	POST
URI	/users/login
HTTP status code	200
Request Body	{ email : "사용자가 입력한 이메일", password : "사용자가 입력한 비밀번호" }
Response Cookie	JWT token

비밀번호 초기화 요청

Method	POST
URI	/users/reset
HTTP status code	200
Request Body	{ email : "사용자가 입력한 이메일" }
Response Body	{ email : "이메일" }

비밀번호 초기화(=수정)

Method	PUT
URI	/users/reset
HTTP status code	200
Request Body	{ email :"이전 페이지에서 입력했던 이메일", password : "사용자가 입력한 비밀번호" }
Response Body

도서 API

전체 도서 조회(이미지경로 n개씩 보내줘야함)

Method	GET
URI	/books?limit={page당 도서 수}&currentPage={현재 page}
HTTP status code	200
Request Body
Response Body	// 전체 도서 목록에는 도서의 상세 정보를 포함합니다 // 필요한 데이터만 선별하여 구현 부탁드립니다 { books:[ { id : 도서 id, title : "도서 제목", img : 이미지 id(picksum image #id), summary : "요약 정보", author : "도서 작가", price : 가격, likes : 좋아요 수, pubDate :"출간일" }, { id : 도서 id, title : "도서 제목", img : 이미지 id, summary : "요약 정보", author : "도서 작가", price : 가격, likes : 좋아요 수, pubDate :"출간일" }, ... ]. pagination : { currentPage : 현재 페이지, totalBooks : 총 도서 수 } }

개별 도서 조회

Method	GET
URI	/books/{bookid}
HTTP status code	200
Request Body
Response Body	{ id: 도서 id, title : "도서 제목", img : 이미지 id, categoryName:"카테고리", form:"포맷", isbn : "isbn", summary : "요약 설명", detail :"상세 설명", author : "도서 작가", pages : 쪽 수, contents : "목차", price : 가격, likes : 좋아요 수, liked : boolean, pubDate :"출간일" }

카테고리별 도서 목록 조회

new : true -> 신간 조회(기준: 출간일 30일 이내)

Method	GET
URI	/books?limit={page당 도서 수}&tPage={현재 page}&categoryId={categoryId}&new={boolean}
HTTP status code	200
Request Body
Response Body	{ books:[ { id : 도서 id, title : "도서 제목", img : 이미지 id(picksum image #id), summary : "요약 정보", author : "도서 작가", price : 가격, likes : 좋아요 수, pubDate :"출간일" }, { id : 도서 id, title : "도서 제목", img : 이미지 id, summary : "요약 정보", author : "도서 작가", price : 가격, likes : 좋아요 수, pubDate :"출간일" }, ... ]. pagination : { currentPage : 현재 페이지, totalBooks : 총 도서 수 } }

카테고리API

카테고리 전체 조회

Method	GET
URI	/category
HTTP status code	200
Request Body
Response Body	[ { id:0, categoryName : "동화" }, { id:1, categoryName:"소설" } ... ]

좋아요 API

좋아요 추가

Method	POST
URI	/likes/{bookdId}
HTTP status code	200
Request Header	"Authorization" : 로그인 할때 받은 JWT TOKEN(문자열)
Request Body
Response Body

좋아요 취소

Method	DELETE
URI	/likes/{bookdId}
HTTP status code	200
Request Header	"Authorization" : 로그인 할때 받은 JWT TOKEN(문자열)
Request Body
Response Body

장바구니 API

장바구니 담기

Method	POST
URI	/cart
HTTP status code	201
Request Header	"Authorization" : 로그인 할때 받은 JWT TOKEN(문자열)
Request Body	{ bookId : 도서 id, count : 수량 }
Response Body

장바구니 아이템 목록 조회 / 선택한 장바구니 목록 조회

Method	GET
URI	/cart
HTTP status code	200
Request Header	"Authorization" : 로그인 할때 받은 JWT TOKEN(문자열)
Request Body	{ selected : [cartIemId,cartItemId, ...] }
Response Body	{ { id : 장바구니 도서 id, bookId : 도서 id, title : "도서 제목", summary : "도서 요약", quantity : 수량, price : 가격 }, { id : 장바구니 도서 id, bookId : 도서 id, title : "도서 제목", summary : "도서 요약", count : 수량, price : 가격 } }

장바구니 도서 삭제

Method	DELETE
URI	/cart/{cartItemId}
HTTP status code	200
Request Body
Response Body

선택한 장바구니 목록 조회

Method	GET
URI	/cart
HTTP status code	200
Request Body	[ cartItemId, cartItemId, ... ]
Response Body	{ { cartItemId : 장바구니 도서 id, bookId : 도서 id, title : "도서 제목", summary : "도서 요약", count : 수량, price : 가격 }, { cartItemId : 장바구니 도서 id, bookId : 도서 id, title : "도서 제목", summary : "도서 요약", count : 수량, price : 가격 } }

(결제)주문 API

결제하기 = 주문하기 = 주문등록 데이터베이스 주문 insert = 장바구니에서 주문된 상품은 delete

Method	POST
URI	/orders
HTTP status code	200
Request Header	"Authorization" : 로그인 할때 받은 JWT TOKEN(문자열)
Request Body	{ items : [ 장바구니 도서 id, 장바구니 도서 id ... ], delivery : { address : "주소", reveiver : "이름", contact : "010-0000-0000" }, totalQuantity : "총수량", totalPrice : "총금액", firstBookTitle: 대표 도서 제목 }
Response Body

주문 목록(내역) 조회

Method	GET
URI	/orders
HTTP status code	200
Request Header	"Authorization" : 로그인 할때 받은 JWT TOKEN(문자열)
Request Body
Response Body	[ { id : 주문 id, createdAt : "주문일자" , address : "주소", reveiver : "이름", contact : "010-0000-0000", bookTitle : "도서 제목", totalPrice: 결재금액, totalQuantity: 총 수량 }, { id : 주문 id, createdAt : "주문일자" , address : "주소", reveiver : "이름", contact : "010-0000-0000", bookTitle : "도서 제목", totalPrice: 결재금액, totalQuantity: 총 수량 }, ... ]

주문 상세 상품 조회

Method	GET
URI	/orders/{orderId}
HTTP status code	200
Request Body
Response Body	[ { bookId : 주문 id, title : "도서 제목", author : "작가명", price:"가격", quantity : "수량" }, { bookId : 주문 id, title : "도서 제목", author : "작가명", price:"가격", quantity : "수량" } ]

테이블

users

id	email	password
1	kim@mail.com	1111
2	lee@mail.com	2222
3	park@mail.com	3333
4	choi@mail.com	4444
5		5555

books

id	title	img	category	form	isbn	summary	detail	author	pages	contents	price	pub_date
1	어린왕자들	7	0	종이책	0	어리다..	어림	미상	100	목차~	20000	2019-01-01
2	신데렐라들	10	0	종이책	0	유리구두..	구두	미상	100	목차~	20000	2023-12-01
3	백설공주들	60	1	종이책	0	사과..	사과	미상	100	목차~	20000	2023-11-01
4	흥부와 놀부들	90	2	종이책	0	제비..	제비	미상	100	목차~	20000	2023-12-31

cateogry

id	category_name
0	동화
1	소설
2	사회

likes

user_id	liked_book_id
1	1
1	5
1	7
3	1
4	5
6	5

cartItems

id(PK)	book_id(FK)	quantity	user_id
1	1	1	1
2	3	2	1
3	2	1	1
4	1	1	2
5	2	1	2

delivery

id	address	receiver	contact
1	서울시 중구	최명수	010-1234-5678

orders

order_id	delivery_id	total_price	created_at	book_title	total_count	user_id
1	1	28000	2023-12-01	대표책제목	4	1

ordredBook

order_id	book_id	quantity
1	2	1
1	4	2
1	6	1

JWT

최맹수 — Tue, 26 Dec 2023 19:37:29 +0900

인증과 인가

인증(Authentication) = 로그인 : 관리자든 고객이든 인증을 통해서 사이트에 가입된 사용자라는 걸 증명하는 것
- ex) : ID, PW로 로그인 하는 행위
인가(Authorization) : 인증 이후의 프로세스로, 인증된 유저가 어떠한 자원에 접근할 수 있는지 확인하는 절차
- ex) : 같은 사이트 내에 관리자/고객에 따라 접근할 수 있는 페이지가 다르다,

쿠키 vs 세션 vs JWT

쿠키

쉽게 말하면, 로그인을 하면 서버가 쿠키를 구워서 준다. 그 후 사용자랑 서버가 쿠키를 가지고 핑퐁한다.

웹에서 서버와 클라이언트가 주고받는 데이터 중 하나
생성은 웹 서버에서 하여 웹 브라우저에게 주면, 브라우저가 자기 메모리에 저장한 후 다음번에 같은 웹서버 방문할 때 쿠키를 들고 요청한다.
장점
- 기존 로그인 정보를 사용하기 때문에 인증을 위한 추가적인 데이터 저장이 필요없다.(쿠키는 서버가 아닌 클라이언트 웹 브라우저에 한다) -> Stateless(상태저장하지않는다)하다 -> RESTful
단점
- 사용자의 주요 정보를 매번 요청에 담기 때문에 보안상 문제가 있다.
- 클라이언트에서 쿠키 정보를 쉽게 변경,삭제할 수 있고, 가로채기 당할 수 도 있다.
- 쿠키사이즈가 커질수록 네트워크 부하가 심해진다.

이처럼 Cookie에 담아서 계속 사용하기에는 누가 중간에 쿠키를 낚아채서 뜯어 볼까 걱정이된다. 그래서 해결방안이 Session이다.

세션

쉽게 말하면,로그인을 하면 서버가 금고를 만들어서 정보를 저장 하고 그 금고 번호를 준다. 그 후 사용자와 서버는 금고 번호만 가지고 핑퐁을 한다.

Cookie에 중요한 정보를 담지 말고 중요한 정보는 서버에 저장해두고 그 정보가 어딨는지 주소만 적어서 Cookie에 담는 것
쿠키에 넣어서 보내기엔 너무 중요한 내용은 서버가 가진 금고(Session)에 넣어두고, 그 금고번호(Seesion ID)만 쿠키에 넣어서 통신함
장점
- 사용자의 로그인 정보를 주고 받지 않기 대문에 상대적으로 안전
- 사용자마다 고유한 세션 ID가 발급되기 때문에, 요청이 들어올 때마다 회원 DB를 찾지 않아도 된다.
단점
- 사용자를 식별할 수 있는 값인 세션 ID를 생성하고, 서버에 저장해야 하는 작업이 생긴다. -> Stateless하지 않다
- 서버세션저장소를 사용하므로 요청이 많아지면 서버 부하가 심해진다.

JWT(JSON Web Token)

JSON 형태의 데이터를 안전하게 전송하기 위한(웹에서 사용하는) 토큰 즉 토큰을 가진 사용자가 "증명"하기 위한 수단

토큰 : (인증용) 입장 가능한 유저, (인가용) 관리자권환&일반 유저 권한
장점 : 보안에 강하다(암호화가 되어 있다), Stateless하다(서버가 상태를 저장하지 않는다), 서버 부담을 줄일 수 있다

https://jwt.io/

JWT.IO

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

jwt.io

JWT 구조

헤더 : 토큰을 암호화하 데 사용한 알고리즘, 토큰의 형태(jwt)
페이로드 : 사용자 정보(이름, 주소, 핸드폰, ... 비밀번호 X)
서명 : 만약 페이로드 값이 바뀌면, 이 서명값이 통째로 바뀌기 때문에 우리는 JWT를 믿고 쓸 수 있다.

JWT로 인증/인가 하는 절차

https://velog.io/@hahan/JWT%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

로그인 요청( HTTP body에 username과 password)
내부로직을 통해 DB에서 사용자 확인
로그인 정보를 Payload에 담고, Secret Key를 사용해서 JWT(토큰, Access Token) 발행
서버가 JWT를 Client에 전달( 전달방법은 개발자가 정함)
클라이언트는 전달받은 토큰(JWT)를 저장(쿠키, Local Storage 등)
클라이언트가 서버에 요청할 때마다 토큰(JWT)를 요청 Header의 Authorization에 포함시켜 함께 전달
서버는 클라이언트가 전달한 토큰의 Signature(서명)를 secret Key로 복호화한 후, 위변조 여부 및 유효기간을 검증
검증에 성공하면 jwt에 사용자 정보를 확인하고 요청에 응답

JWT 구현

https://www.npmjs.com/package/jsonwebtoken

jsonwebtoken

JSON Web Token implementation (symmetric and asymmetric). Latest version: 9.0.2, last published: 4 months ago. Start using jsonwebtoken in your project by running `npm i jsonwebtoken`. There are 26011 other projects in the npm registry using jsonwebtoken.

www.npmjs.com

npm install jsonwebtoken

var jwt = require('jsonwebtoken');
var token = jwt.sign({foo:'bar'},'shhhhh');
//token생성 = jwt 서명을 했다!(페이로드, 나만의 암호키) + SHA256

console.log(token);

콘솔에서 확인한 토큰 값

방금 발급한 토큰을 jwt.io에서 검증해보면 Decoded된 정보들을 확인할 수 있습니다.

// verify a token symmetric
var decoded = jwt.verify(token, 'shhhhh');
console.log(decoded);

매번 검증을 jwt.io에서 할 수 없으므로 위의 코드를 실행시켜 확인해보면 iat가 위의 jwt.io랑 다르게 나옵니다. 즉, iat(Issued at)는 토큰이 발행한 시간을 초로 나타낸 것입니다.

한번더 실행해보면 마찬가지로 Header의 값은 같은데 Payload의 값과 서명값은 다릅니다.

위코드에서 verify(token, 'shhhhh') 에서 'shhhhh'는 나만의 암호키입니다. 저렇게 코드에 유출하면 안 되고 따로 파일에 저장하든가 해야합니다.

.env(environment : 환경변수 '설정 값')

개발을 하다가 포트넘버, 데이터베이스 계정, 암호키 등 외부에 유출되면 안 되는 중요한 환경변수(깃허브에 올라가면 안되는 값)들을 다로 관리하기 위한 파일
파일 확장자 : . env

.env 파일은 환경변수파일이기 때문에 프로젝트 최상위 패키지에 존재해야한다.

# install locally (recommended)
npm install dotenv --save

최상단에 .env파일을 만들어주고 키값을 작성해준다.

env파일을 불러와서 수정한 코드이다. 포트넘버도 해당파일에서 config해준뒤 process.env.PORT를 하면 사용가능하다

var jwt = require('jsonwebtoken');
var dotenv = require('dotenv');
dotenv.config();

//서명 = 토큰발행 
var token = jwt.sign({foo:'bar'}, process.env.PRIVATE_KEY);
//token생성 = jwt 서명을 했다!(페이로드, 나만의 암호키) + SHA256

console.log(token);

//검증
// 만약 검증에 성공하면 ,페이로드 값을 확인할 수 있음

// verify a token symmetric
var decoded = jwt.verify(token, process.env.PRIVATE_KEY);
console.log(decoded);

cookie

서버에서 클라이언트에게 token 값을 아래처럼 body에 실어서 보낼 수는 있지만 보통 cookie에 많이 실어서 보냅니다.

//token 발급
 const token = jwt.sign({
       email : loginUser.email,
       name : loginUser.name
}, process.env.PRIVATE_KEY);

 res.status(200).json({
   message: `${loginUser.name}님 로그인 되었습니다.`,
   token : token
})

cookie에 token이라는 상자를 하나 만들어서 여기에 위의 token을 담아서 보내주겠습니다.

//token 발급
const token = jwt.sign({
  email : loginUser.email,
  name : loginUser.name
}, process.env.PRIVATE_KEY);

res.cookie("token",token);

res.status(200).json({
  message: `${loginUser.name}님 로그인 되었습니다.`
})

postman에서 확인해보겠습니다.

위의 postman에서 Cookies탭에 Secure,HttpOnly를 확인해보면 false인것을 알 수 있습니다.

Secure는 HTTP이면 false HTTPS이면 true가 됩니다.

HTTP
- http:://localhost:1234/login
HTTPS(secure)
- https:://www.naver.com

HTTPOnly( true가 되면 프론트엔드신경쓰지 않고 API 호출"만"허락하게 한다) : XSS 공격(프론트엔드 공격: 웹 브라우저 JS접근 => 공격) true로 바꿀려면 아래처럼 httpOnly:true 해줍니다.

res.cookie("token",token, {
    httpOnly:true
 });

jwt 유효기간 설정

jwt토큰에 유효기간을 설정할 수 있습니다. expriesIn를 이용해 토큰의 유효기간을 설정할 수 있습니다. 30m 즉 30분으로 설정했고 추가적으로 누가 토큰을 생성했는지 issuer을 통해 설정할 수 있습니다.

//token 발급
const token = jwt.sign({
     email : loginUser.email,
     name : loginUser.name
     }, process.env.PRIVATE_KEY, {
        expiresIn : '30m',
        issuer : "choims"
});

res.cookie("token",token, {
   httpOnly:true
});
console.log(token);
res.status(200).json({
  message: `${loginUser.name}님 로그인 되었습니다.`
})

발급된 토큰을 jwt.io 에서 확인해보면 PAYLOAD를 보면 정확하게 나옵니다.

토이프로젝트 유튜브4 (유효성검사,next)

최맹수 — Sat, 23 Dec 2023 18:58:04 +0900

https://myeongsu0257.tistory.com/229

토이프로젝트 유튜브4(회원API,채널API sql적용)

이전 회원 API 설계 토이프로젝트 유튜브1(회원API설계), router 유튜브 회원 로그인 회원가입 회원정보조회 회원탈퇴 회원은 계정 1개당 채널 100개를 가질 수 있다. 채널 채널 생성 채널 수정 채널

myeongsu0257.tistory.com

이전 포스팅까지 api를 설계하면서 body에 담겨온 값들을 그냥 무조건 사용하는 방식으로 했는데 이러한 방식은 좋지않습니다. 따라서 유효성검사에 대해 알아보고 코드에 적용해보겠습니다.

유효성검사

유효성 : "사용자가 입력한 값" 유효성(타당성)을 확인하는 것

express-validator

https://express-validator.github.io/docs

express-validator | express-validator

Overview

express-validator.github.io

npm install express-validator

설치를 완료했으면 코드 맨위에 아래와같이 선언해줍니다.

const {body,validationResult}=require('express-validator')

채널생성 유효성검사

그리고 기존의 채널생성api에서 상단에 코드도 추가해줍니다.

//채널 개별 생성
    .post(
        [body('userId').notEmpty().isInt().withMessage('숫자 입력필요'),
        body('name').notEmpty().isString().withMessage('문자 입력필요')]
        , (req, res) => {
            const err = validationResult(req)
            if (!err.isEmpty()) {
                return res.status(400).json(err.array())
            }
            const { name, userId } = req.body
            conn.query(
                `INSERT INTO channels (name,user_id) VALUES(?,?)`, [name, userId],
                function (err, results, fields) {
                    res.status(201).json(results);
                }
            )
        })

비정상적인 값(userid에 문자열)을 body에 넣었을때 콘솔에 아래처럼 출력됩니다. 따라서 위의코드처럼 userId나 name을 if문에서 예외처리를 해주지 않아도 됩니다. 추가적으로 유효성검사에서 에러가 발생했을때 return을 추가해주어서 함수를 종료해줍니다.(아래를 코드를 읽게하지 않게 하기 위해)

body에서 name과 userId에 형식에 맞지 않은 값을 넣은 경우

sql 에러

현재 DB에 없는 userId를 넣으면 아무런 오류를 리턴해주지 않습니다. 따라서 위의 코드에서 query에 아래의 코드로 수정해줍니다. 즉 err가 발생하면 400에러를 돌려줍니다.

  conn.query(
                `INSERT INTO channels (name,user_id) VALUES(?,?)`, [name, userId],
                function (err, results, fields) {
                    if(err){
                        console.log(err);
                        return res.status(400).end();
                    }
                    res.status(201).json(results);
                }
            )

DB에 없는 userId를 넣은 경우

채널 전체조회 유효성검사

query문안의 if(results.length)이 부분은 사용자의 요청에 대한 내용이 아니기 때문에 if문으로처리했습니다.

//채널 전체 조회 
    .get(
        body('userId').notEmpty().isInt().withMessage('숫자 입력필요')
        ,(req, res) => {
            const err = validationResult(req)
            if(!err.isEmpty()){
                return res.status(400).json(err.array())
            }
        let { userId } = req.body
        if (userId) {
            conn.query(
                `SELECT * FROM channels WHERE user_id=?`, userId,
                function (err, results, fields) {
                    if(err){
                        console.log(err);
                        return res.status(400).end();
                    }
                    if (results.length) {
                        res.status(200).json(results);
                    }
                    else {
                        notFoundChannel(res)
                    }
                }
            )
        }
        
    })

채널 개별조회 유효성 검사

채널 개별조회 api는 param로 url의 id를 받아와서 사용합니다. 따라서 코드 맨위에 param을 추가해주고 사용합니다. param은 notEmpty()즉 비어있지만 않으면 됩니다. 어차피 문자열로 들어올 것이고 그걸 숫자로 변환해주고 있기 때문입니다.

...
const { body,param, validationResult } = require('express-validator')
...
//채널개별조회
    .get(
        param('id').notEmpty().withMessage('채널id 필요')
        ,(req, res) => {
        const err = validationResult(req)
        if(!err.isEmpty()){
            return res.status(400).json(err.array())
        }
        
        let { id } = req.params
        id = Number(id)
        conn.query(
            `SELECT * FROM channels WHERE id=?`, id,
            function (err, results, fields) {
                if(err){
                    console.log(err);
                    return res.status(400).end();
                }
                
                if (results.length) {
                    res.status(200).json(results);
                }
                else {
                    notFoundChannel(res)
                }
            }
        )
    })

채널명수정(put)

채널수정입니다. param으로 채널의 id를 받아오고 body에 변경하고 싶은 name을 받아왔습니다. 그리고 sql문을 실행하는데 param에 현재 db에 없는 id를 넣은경우도 200처리가 되길래 아래처럼 afftedRows가 0보다 크면 200을 아니면 400처리를 해주었습니다.

//채널수정
    .put(
        [param('id').notEmpty().withMessage('채널id 필요'),
        body('name').notEmpty().isString().withMessage('채널명 옲')]
        ,(req, res) => {
            const err = validationResult(req)

            if(!err.isEmpty()){
                return res.status(400).json(err.array())
            }
        
            let { id } = req.params
            id = Number(id);
            let {name} = req.body

            conn.query(
                `UPDATE channels SET name=? WHERE id=?`,[name ,id],
                function(err,results,fields){
                    if(err){
                        console.log(err)
                        return res.status(400).end();
                    }
                    if(results.affectedRows>0)
                    {
                        res.status(200).json(results);
                    }
                    else{
                        res.status(400).end()
                    }
                }
            )
        })

채널삭제(delete)

채널삭제 delete입니다. put과 마찬가지로 db에없는 채널id를 받은 경우 200처리하는것을 막아주기 위해 afttedRows를 활용했습니다.

//채널삭제
    .delete(
        param('id').notEmpty().withMessage('채널 id 필요')
        ,(req, res) => {
            const err = validationResult(req)
            if(!err.isEmpty()){
                return res.status(400).json(err.array())
            }    
            
            let { id } = req.params
            id = Number(id)

            conn.query(
                `DELETE FROM channels WHERE id=?`,id,
                function(err,results,fields){
                    if(err){
                        console.log(err)
                        return res.status(400).end();
                    }
                    if(results.affectedRows>0)
                    {
                        res.status(200).json(results)
                    }
                    else{
                        res.status(400).end()
                    }
                }
            )
    })

db에 있는 채널 id값을 넣은 경우 affectedRows가 0이아닌 변경된 로우의 숫자를 리턴합니다.

검사 미들웨어 분리(next)

현재 모든 api를 보면 validationResult하는 부분이 중복됩니다. 그래서 이부분을 분리해주겠습니다.

아래처럼 validate라는 함수를 만들어줍니다. 추가한코드는 else인데 else의 next()함수를 사용하지 않으면 validate함수호출이후에 코드 진행이 안됩니다. 그래서 next를 사용해주었습니다.

const validate=(req,res,next)=>{
    const err = validationResult(req)
    if(!err.isEmpty()){
        return res.status(400).json(err.array())
    }else{
        return next(); //다음 할일(미들웨어,함수)
    }
    
}

유효성검사를 추가한 최종코드입니다.

채널

//express 모듈 셋팅
const express = require('express')
const router = express.Router()
const conn = require('../mariadb')
const { body,param, validationResult } = require('express-validator')

router.use(express.json())

const validate=(req,res,next)=>{
    const err = validationResult(req)
    if(err.isEmpty()){
        return next(); //다음 할일(미들웨어,함수)
    }else{
        return res.status(400).json(err.array())
    }
}

router
    .route('/')
    //채널 전체 조회 
    .get(
        [
            body('userId').notEmpty().isInt().withMessage('숫자 입력필요'),
            validate
        ]
        ,(req, res,next) => {
        let { userId } = req.body
        if (userId) {
            conn.query(
                `SELECT * FROM channels WHERE user_id=?`, userId,
                function (err, results, fields) {
                    if(err){
                        console.log(err);
                        return res.status(400).end();
                    }
                    
                    if (results.length) {
                        res.status(200).json(results);
                    }
                    else {
                        notFoundChannel(res)
                    }
                }
            )
        }
        
    })
    //채널 개별 생성
    .post(
        [body('userId').notEmpty().isInt().withMessage('숫자 입력필요'),
        body('name').notEmpty().isString().withMessage('문자 입력필요'),
        validate]
        , (req, res) => {
            const { name, userId } = req.body
            conn.query(
                `INSERT INTO channels (name,user_id) VALUES(?,?)`, [name, userId],
                function (err, results, fields) {
                    if(err){
                        console.log(err);
                        return res.status(400).end();
                    }
                    res.status(201).json(results);
                }
            )
        })

router
    .route('/:id')
    //채널개별조회
    .get(
        [param('id').notEmpty().withMessage('채널id 필요'),
        validate]
        ,(req, res) => {
        let { id } = req.params
        id = Number(id)
        conn.query(
            `SELECT * FROM channels WHERE id=?`, id,
            function (err, results, fields) {
                if(err){
                    console.log(err);
                    return res.status(400).end();
                }
                if (results.length) {
                    res.status(200).json(results);
                }
                else {
                    notFoundChannel(res)
                }
            }
        )
    })
    //채널삭제
    .delete(
        [param('id').notEmpty().withMessage('채널 id 필요'),
        validate]
        ,(req, res) => {
            let { id } = req.params
            id = Number(id)

            conn.query(
                `DELETE FROM channels WHERE id=?`,id,
                function(err,results,fields){
                    if(err){
                        console.log(err)
                        return res.status(400).end();
                    }
                    if(results.affectedRows>0)
                    {
                        res.status(200).json(results)
                    }
                    else{
                        res.status(400).end()
                    }
                }
            )
    })
    //채널수정
    .put(
        [param('id').notEmpty().withMessage('채널id 필요'),
        body('name').notEmpty().isString().withMessage('채널명 옲'),
        validate]
        ,(req, res) => {
            let { id } = req.params
            id = Number(id);
            let {name} = req.body

            conn.query(
                `UPDATE channels SET name=? WHERE id=?`,[name ,id],
                function(err,results,fields){
                    if(err){
                        console.log(err)
                        return res.status(400).end();
                    }
                    if(results.affectedRows>0)
                    {
                        res.status(200).json(results);
                    }
                    else{
                        res.status(400).end()
                    }
                }
            )
        })

function notFoundChannel(res) {
    res.status(404).json({
        message: `채널 정보를 찾을 수 없습니다`
    })
}

module.exports = router

회원

const express = require('express')
const router = express.Router()
const conn = require('../mariadb')
const {body, param, validationResult} = require('express-validator')

router.use(express.json())

const validate = (req, res, next) => {
    const err = validationResult(req)
    if (err.isEmpty()) {
        return next(); //다음 할일(미들웨어,함수)
    } else {
        return res.status(400).json(err.array())
    }
}


//로그인
router.post('/login',
    [
        body('email').notEmpty().isEmail().withMessage('이메일 확인필요'),
        body('password').notEmpty().isString().withMessage('비밀번호 확인필요'),
        validate
    ]
    , (req, res) => {
        const { email, password } = req.body
        conn.query(
            `SELECT * FROM users WHERE email=?`, email,
            function (err, results, fields) {
                if (err) {
                    console.log(err);
                    return res.status(400).end();
                }
                var loginUser = results[0];

                if (loginUser && loginUser.password == password) {
                    res.status(200).json({
                        message: `${loginUser.name}님 로그인 되었습니다.`
                    })
                }
                else {
                    res.status(404).json({
                        message: "이메일 또는 비밀번호가 틀렸습니다."
                    })
                }
            }
        )
    })

//회원가입
router.post('/join',
    [
        body('email').notEmpty().isEmail().withMessage('이메일 확인필요'),
        body('name').notEmpty().isString().withMessage('이름확인필요'),
        body('password').notEmpty().isString().withMessage('비밀번호 확인필요'),
        body('contact').notEmpty().isString().withMessage('연락처확인필요'),
        validate
    ]
    , (req, res) => {
            const { email, name, password, contact } = req.body
            conn.query(
                `INSERT INTO users (email,name,password,contact) VALUES(?,?,?,?)`, [email, name, password, contact],
                function (err, results, fields) {
                    if (err) {
                        console.log(err);
                        return res.status(400).end();
                    }
                    res.status(201).json(results);
                }
            )
    })

router
    .route('/users')
    .get(
        [
            body('email').notEmpty().isEmail().withMessage('이메일 확인필요'),
            validate
        ]
        , (req, res) => {
            let { email } = req.body;
            console.log(email);
            conn.query(
                `SELECT * FROM users WHERE email=?`, email,
                function (err, results, fields) {
                    if (err) {
                        console.log(err);
                        return res.status(400).end();
                    }

                    if (results.length) {
                        res.status(200).json(results);
                    }
                    else {
                        notFoundUsers(res)
                    }
                }
            )

        })
    .delete(
        [
            body('email').notEmpty().isEmail().withMessage('이메일 확인필요'),
            validate
        ]
        , (req, res) => {
            let { email } = req.body;
            console.log(email);
            conn.query(
                `DELETE  FROM users WHERE email=?`, email,
                function (err, results, fields) {
                    if (err) {
                        console.log(err);
                        return res.status(400).end();
                    }

                    if (results.length) {
                        res.status(200).json(results);
                    }
                    else {
                        notFoundUsers(res)
                    }
                }
            )
        })
function notFoundUsers(res) {
    res.status(404).json({
        message: `회원 정보를 찾을 수 없습니다`
    })
}
module.exports = router