문제은행 DB 설계 분투기 9 - 라우팅 엔드포인트 선언 순서, params와 query의 차이점

양태환·2023년 9월 19일

DB_설계 문제은행 인턴

인턴기

목록 보기

9/14

오늘은 어제(문제은행 DB 설계 분투기 8) 만들어봤던 로그인 API를 기반으로 다른 기능의 API도 만들 예정입니다.

라우팅 엔드포인트 선언 순서의 중요성

그 전에 이 프로젝트를 실행했을 때 무슨 미들웨어가 작동하는지, 어떤 동작이 자동으로 수행되는지 확인해보려합니다. 오류가 계속 뜨더라고요.

문제는 이곳에서 시작되었습니다.

주소창에 /login?어쩌구저쩌구 url로 들어가게되면
/:vodCd 패턴으로 먼저 인식하면서
vodDetail 함수를 호출하게 되는 것이죠

그렇다면 이 오류를 바텀업이나 탑 다운 방식으로 찾아간다면 좀 더 수월하게 찾을 수 있었겠네요
또 그러기 위해서는 전체적인 구조를 정확히 이해하고있어야 탑 다운이던 바텀 업이던 할 수 있을 것이기에
전체적인 구조를 잘 이해하는 게 중요하다는 것을 배웠습니다.

해결 완료!

추가적인 의문

라우터 패턴의 인식 알고리즘은 어떻게 될까?

-> 코드 선언 순서가 중요합니다.

이런 순서의 경우 login 패턴으로 먼저 인식해서 login함수로 연결해주고

이런 순서의 경우 :vodCd 패턴으로 먼저 인식해서 vodDetail함수로 연결해줍니다.

헷갈리는 params와 query 차이

참고한 블로그

req.param 이 또한 엔드포인트에 포함되고 주소에 변수를 담는다.
api/:vodCd 라는 라우팅 패턴이 있다고 했을 때
vodCd에 변수를 담아서 가져오는 방식이 param방식

req.query 엔드포인트 주소의 ? 뒤에 등장하며 변수를 담음
api/login 이라는 라우팅 패턴이 있다고 했을 때
/login 엔드포인트 뒤에 ?를 달고 넘겨줄 변수를 key=value 형태로 제공한다.

두 개는 각각 언제 사용할까요?
path 파라미터는 특정 리소스를 정의할 필요가 있을 때, query 파라미터는 정렬 혹은 필터링이 필요할 때 사용한다.

그래서 알게 된

params 라우팅 방식의 특징

이렇게 params로만 받게끔 되어있다면 query문은 무시되는 것 같습니다.

사진의 url 코드를 넣었음에도

이런 결과가 나옵니다.

params 라우팅 방식의 특징을 검색해봤지만 따로 나오는 건 없네요.
단지 하나의 데이터를 받는데 적합하다고 합니다.

나중에 params에 왜favicon이 들어가있는지 알아보기

그럼 왜 favicon이 나오는지도 알아보겠습니다
이건 나중에 - https://ryusm.tistory.com/9

null이 아닌 NULL을 쓰면 오류가 납니까?

실제로 그러하네요?
와우 이것때문에 40분은 날려먹은 것 같은데
왜 자바스크립트에서 대문자 NULL은 안 되는 건가요?

null로만 정의해놨다. Null, NULL은 정의되지 않은 변수로 인식 - 출처

자바스크립트에서 문자열 자르는 방법

검색해보면 출처 - https://gent.tistory.com/414 substr, substring, slice 3가지 방법이 있다고 하는데 substring을 쓰면 이런 오류가 뜨더라구요?

이것도...!

TypeError: lastCode.substring is not a function
TypeError: lastCode.substr is not a function
TypeError: lastCode.match is not a function

왜 그런가 검색해봤더니

해당 함수를 사용하는 변수의 타입이 string이 아니어서 그렇다고 합니다. - 출처

분명 확인한 것 같은데 아니었습니다.
그 이유는 사용하는 commonDao함수에서 리턴하는 값이 string이 아닌 object였기 때문이죠. 리턴값이 변수 이름을 카멜케이스로 바꾼 뒤 object에 담은 값이기 때문에 이러한 오류가 발생했었습니다.

String type의 문자열이면 무조건 가능하다
사용이 안 된다면 그렇다면 그 변수는 String type이 아닌 것

QQYYMM000000 코드에서 앞부분을 자른 뒤 뒷 6자리 문자열을 정수로 바꿔준 뒤 1을 더해서 다시 코드를 붙여주는 일

let lastCode = await getQustnInfoLastCode(); // QQYYMM123456 코드 받기
let textPartInLastCode = String(lastCode).substring(0,6); // QQYYMM123456의 문자부분 QQYYMM
let numPartInLastCode = String(lastCode).substring(6,12); // QQYYMM123456의 숫자부분 123456
let nextNum = Number(numPartInLastCode) + 1; // 코드 +1해주기 // ex) 10 + 1 = 11
let nextNumPod0 = String(nextNum).padStart(6, '0'); // ex) 0000011

이렇게 진행되면 완료!

한국 표준시 출력하기

const curr = new Date();
const utc = curr.getTime() + (curr.getTimezoneOffset() 60 1000);
const KR_TIME_DIFF = 9 60 60 * 1000;
const kr_curr = new Date(utc + KR_TIME_DIFF));
코드로 한국 표준시 출력
(제 컴퓨터는 UTC로 되어있나봅니다.)
출처 - https://hianna.tistory.com/451

YYMMDD형식 출력
function () {
var yyyy = this.getFullYear().toString();
var MM = pad(this.getMonth() + 1,2);
var dd = pad(this.getDate(), 2);
var hh = pad(this.getHours(), 2);
var mm = pad(this.getMinutes(), 2)
var ss = pad(this.getSeconds(), 2)
return yyyy + MM + dd+ hh + mm + ss;
};