ddodoi 님의 블로그
5주차-파트01: Object.keys(), API설계 본문
CHAPTER 1. 빈객체 확인하기: Object.keys()
처음 내가 작성한 로그인 코드이다. 너무 더럽기도 하고 DB양이 많으면 루프문 돌다가 한세월 다 가기 때문에 바꿔준다.
//로그인- userId가 db에 저장된 회원인지 확인 + pwd맞는지 비교
app.post('/login', function(req,res){
const {userId, pwd} = req.body
db.forEach(function(user){
if (user.userId === userId){
if (user.pwd === pwd ){
res.status(200).json({
message : `${user.name}님 환영합니다`
})
}
else{
res.status(404).json({
message : "패스워드가 틀렸습니다"
})
}
}
else{
res.status(404).json({
message : "없는 회원 정보입니다"
})
}
})
})
다음과 같이 loginUser란 배열에 값을 넣어 확인하도록 바꾼다. 그런데 이 코드는 회원가입을 하지 않고 로그인을 해도
//로그인- userId가 db에 저장된 회원인지 확인 + pwd맞는지 비교
app.post('/login', function(req,res){
const {userId, pwd} = req.body
let loginUser = {}
db.forEach(function(user){
if (user.userId === userId){
loginUser = user //db에서 userId를 발견한 경우 loginUser 배열에 담음
}
})
if (loginUser){ //loginUser객체가 있는지 없는지 확인해야함
console.log("아이디 같은 거 찾았다")
//pwd도 맞는지 비교
if (loginUser.pwd === pwd ){
console.log("패스워드도 같다")
}
else{
console.log("패스워드 틀렸다")
}}
else{
console.log("입력하신 아이디는 없는 아이디입니다.")
}
})
다음과 같이 출력된다.
이유는 다음 줄 때문인데 loginUser는 배열이고 로그인시 입력된 userId값이 db에 저장되어있으면 배열안에 데이터를 저장한다. 따라서 loginUser배열이 비어있으면 로그인시 입력한 userId값이 db에 없는 userId이므로 아이디를 틀리게 입력한 것이다.
그러나 실제로 배열이 비어있는 상태여도 중괄호{}가 남아있으면 값이 있는 상태로 인식하기 때문에 다른 방법을 이용하여 배열이 비었다는 것을 알려줘야한다.
if (loginUser){ //loginUser객체가 있는지 없는지 확인해야함
다음처럼 고쳐준다.
if (Object.keys(loginUser).length){ //loginUser객체가 있는지 없는지 확인해야함
회원정보를 저장하지 않고 입력하면 다음처럼 잘 작동한다.
빈 객체인지 확인하는데는 3가지 방법이있다.
✔️빈 객체 확인하는 방법
1. 객체.keys() ⭐추천
2. for in
3. lodash 라이브러리 이용
객체.keys()형태에 대해 자세히 알아보자.
✅Object.keys(객체)
객체의 key값만 반환해준다.
const basket = {
1: "apple",
2: "banana",
3: "orange"
}
console.log(Object.keys(basket)) //객체의 키 값만 출력
✅Object.values(객체)
객체의 value값만 반환해준다.
console.log(Object.values(basket)) //객체의 밸류 값만 출력
.length로 출력한 길이는 3이다.
console.log(Object.keys(basket).length)
이번에는 다음 객체들의 keys를 적용한 형태에 대해 알아보자.
const obj1 = {}
const str1 = "one"
const str2 = "" //문자열도 객체이다
console.log(Object.keys(obj1).length)
console.log(Object.keys(str1).length)
console.log(Object.keys(str2).length)
문자열도 객체이기 때문에 적용된다.
.keys()를 활용하여 길이가 0이면 true를, 0이 아니면 false를 반환하는 함수를 만들어 모듈처럼 사용할 수 있다.
function isEmpty(obj){
if (Object.keys(obj).length === 0){
return true;
}
else{
return false;
}
}
추가로 .constructor를 이용하여 먼저 객체인지부터 확인해줄 수 있다.
if (obj.constructor === Object)
CHAPTER 2. 채널 API 설계
채널 생성 페이지 : 채널 생성버튼 클릭시 => 입력받은 채널명을 받아, 채널 생성(등록) API
채널 관리 페이지 : (1) 화면 출력 => 이 회원이 소유한 전체 채널 조회 API (2) 삭제 버튼 클릭 시 => 채널 삭제
채널 수정 페이지 : (1) 기존 개별 채널 정보 조회 API (2) 수정 완료 버튼 클릭 시 => 개별 채널 수정 API
.route를 이용하여 같은 경로를 이용하는 함수들을 하나로 묶을 수 있다.
app
.route('/channels')
.get()
.post()
다음은 채널을 전체 조회하는 함수이다. 이전과 다르게 배열로 선언해주고 배열에 담아 res.json으로 전체 배열을 출력해줬다. json에 배열 형식도 담을 수 있다.
app
.route('/channels')
//채널 전체 조회
.get((req, res)=>{
if (db.size){
let channels = [] //배열로 담음
db.forEach(function(value, key){
channels.push(value)
})
res.status(200).json(channels)
}
else{
res.status(404).json({
message : "조회할 채널이 없습니다."
})
}
})
배우다 보니 자바스크립트에서 [],{}의 개념이 헷갈려서 정리해보았다.
✅배열 vs Object
[ ] : 배열 선언, 배열은 순서가 있는 리스트 데이터 구조
{ } : Object (객체)선언, 객체는 키-값 쌍으로 데이터를 저장하는 맵 형태의 데이터 구조
'웹풀스택 일일정리' 카테고리의 다른 글
5주차-파트03: DBMS, SQL, DB에서의 연관관계 (1) | 2024.09.12 |
---|---|
5주차-파트02: 라우팅, vs code에서 변수명 한번에 바꾸기 (0) | 2024.09.10 |
4주차-파트 05: 핸들러, find()와 예외처리, ==과 === 비교 (0) | 2024.09.07 |
4주차-파트 04: forEach문, HTTP 매서드, 리팩토링, HTTP 상태 코드 (0) | 2024.09.05 |
4주차-파트 03: Postman 실습 (0) | 2024.09.05 |