프로그래머스 데브코스, 국비지원교육, 코딩부트캠프
🚩 프로그래머스 데브코스 웹 풀사이클 과정 5주차 DAY 4
정말 폭풍 같았던 하루... 강의 양도 제법 많았는데 하나 당 담긴 내용도 꽤 있어서 평소보다 시간이 좀 더 걸렸다. 물론 강의만 들었으면 금방 끝났겠지만 이거저거 찾아보면서 수정도 하고 하느라 좀 더 걸렸다.
💡유저 기능 만들기
기본적인 회원가입(은 어제 했지만 기능을 좀 추가했다)과 로그인 API를 만들었다.
✨ 유저 로그인
강의에서 가르쳐주신 것과는 살짝 다르게 body로 들어오는 아이디와 패스워드를 비구조화 할당을 이용하여 따로 담아줬다.
입력한 아이디가 디비에(지금은 진짜 디비는 아니지만) 존재하는지 먼저 확인해주고 그렇지 않다면 404를 돌려준다. 아이디가 일치한다면 패스워드까지 일치하는지 확인하고 일치하면 로그인 성공, 일치하지 않으면 패스워드가 다르다는 오류를 리턴한다.
(실수로 status를 404라고 했는데 400이 맞다.)
디비를 연결하지 않았기 때문에 우선 회원가입으로 유저를 생성해주고 로그인을 테스트해보면 정상적으로 결과가 나타나는 걸 알 수 있다.
✨ 유저 회원가입
회원가입 기능은 어제 만들었지만 추가로 이미 아이디가 존재할 때 예외처리를 추가해줬다. 마찬가지로 비구조화 할당으로 각각 아이디, 패스워드, 이름을 따로 담아주고 exist라는 변수를 추가해 디비(맵)에서 userId를 찾아본다. 만약 존재한다면 true를 반환해줄 테니 true를 반환했을 때 400 에러를 리턴해준다.
위처럼 정상적으로 테스트에 성공했지만... vscode 터미널 상에서 오류가 발생했다는 걸 알 수 있었다.
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
쉽게 말하자면 서버가 클라이언트에 둘 이상의 응답을 보내려고 할 때 발생하는 오류다.
내가 작성한 코드를 보면 아이디가 존재하는지 확인해주는 if문이 한 번 돌고 else 처리를 해주지 않아 해당 if문이 끝난 후 가입을 환영한다는 201 응답을 다시 보내게 된다.
해결 방법은 간단하다. else 처리를 해주거나 아니면 그냥 해당 if문 내의 응답을 return문을 추가해서 400 에러가 클라이언트에 전송되면 종료되게 한다.
💡 채널 API
채널을 생성, 삭제, 조회, 수정하는 API를 만들었다. 지금까지 배웠던 걸 응용하는 거라 크게 어렵지는 않았다.
✨ 채널 생성
POST 요청을 할 때 body로 채널명을 보낼 거라 요청 바디로 들어온 데이터를 맵에 추가해준다. 여기서 201 성공 응답을 해줄 때 우리가 입력한 채널명도 함께 보여주고자 한다.
바로 req.body.channelTitle로 보여주는 방법도 있지만 디비에 잘 저장되었는지 겸사겸사 확인하기 위해 디비에서 get으로 꺼내서 해당 채널명을 보여주었다.
정상적으로 채널이 등록되는 걸 확인할 수 있다.
✨ 채널 개별 삭제
생성한 채널을 삭제하는 API다. URL param으로 들어온 id를 받아 디비에서 찾아 꺼내주고 map.delete()를 이용하여 삭제해준다. 마찬가지로 어떤 채널을 삭제했는지 200 성공 응답을 보낼 때 메시지로 함께 전달한다.
정상적으로 삭제되는 걸 볼 수 있다.
✨ 채널 개별 조회
param으로 받은 id의 채널을 조회한다. get으로 꺼내준 데이터를 클라이언트로 전송한다.
정상적으로 조회가 되는 걸 볼 수 있다.
채널 개별 수정
바꾸고 싶은 채널명을 바디로 받는다. 여기서 기존 채널명과 바꾼 이후 채널명을 모두 응답에 메시지로 함께 보낼 예정이기 때문에 채널명을 업데이트 하기 이전의 채널명을 oldTitle로 미리 저장을 해둔다. 새로 받아온 채널명은 newTitle로 저장해주고, 만약 새로 바꾼 채널명이 기존의 채널명과 같다면 에러를 보내는데...
여기서 403 에러를 보낼지 409 에러를 보낼지 좀 고민했다.
- 403 (Forbidden)
클라이언트가 권한이 없기 때문에 작업을 진행할 수 없는 경우의 에러코드
403 같은 경우에는 인증 문제가 있을 때 주로 사용하는 에러 코드라고 한다. 서버가 요청을 이해했지만 승인을 거부함을 나타낸다고.
- 409 (Confilct)
클라이언트의 요청이 서버의 상태와 충돌이 발생한 경우의 에러코드
클라이언트가 문제를 해결할 수 있다고 기대할 수 있는 경우에 사용된다고 한다. 조금 찾아보니 특히 PUT 요청에서 많이 쓰이는 것 같아서 최종적으로 409 에러를 선택했다.
변경하려는 채널명이 다르면 수정을 하는데, 맵은 key 값이 중복될 수 없다는 점을 이용하여 map.set()으로 업데이트를 해준다.
도움 받은 사이트들
정상적으로 작동하는 걸 볼 수 있다.
채널 전체 조회
채널 조회는 어렵지 않다. forEach를 사용하여 모든 채널을 배열에 추가해주고 해당 배열을 반환한다.
강의 들을 때 어지간히도 졸렸나보다;;;
정상적으로 나타나는 걸 볼 수 있다.
💡 자바스크립트에서 빈 객체 확인하기
위 로그인 API를 구현할 때 아이디가 존재하는지 확인할 때 쓴 isEmpty 함수다. 객체가 비었는지 확인하는 방법에는 여러가지가 있는데 흔히 사용되는 방법이 Object.keys 메서드를 사용하는 거다.
Object.keys()
: Object.keys() 메서드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 배열로 반환한다. 쉽게 말하자면 그냥 key 값만 반환해주는 거라고 볼 수 있다.
const object1 = {
a: 'somestring',
b: 42,
c: false,
};
console.log(Object.keys(object1));
// Array ["a", "b", "c"]
console.log(Object.keys(object1).length);
// 3
위처럼 key 값이 총 몇 개인지 확인하고 길이가 0이면 빈 객체라고 볼 수 있다.
객체가 비었거나, 혹은 문자열이 아닌 값이 변수에 저장되었을 때는 Object.keys 길이가 0이 된다. 따라서 위 예시에서는 true가 반환된다.
해당 방법을 이용하여 객체가 비었는지 확인할 수 있다.
❓파일을 저장할 때마다 바로 서버에 자동 반영이 되도록 할 수는 없을까?
코드를 짜다보면 중간중간 확인할 것도 많고 API 테스트를 하면서 수정도 많이 하게 되는데 그럴 때마다 우리는 서버를 중지 시키고 새롭게 실행해야만 했다.
프론트엔드는 vscode 확장 프로그램인 라이브서버를 이용해서 수정을 할 때마다 수정 사항이 반영된 웹 사이트를 볼 수 있었다. 이렇게 알아서 서버를 다시 실행해주는 게 없을까 찾아보다가 발견하고 말았다.
nodemon의 존재를...
이건 따로 게시글을 작성해보았다👍
