Assignment
Assignment 4에서 만들었던 app.js 파일에 이어서 과제를 진행해주세요.
app.js 파일에 게시글 삭제 수정 엔드포인트 구현 코드를 작성해주세요.
알맞은 API 호출 URL을 설정하여서 클라이언트와(httpie/postman) 통신을 성공해주세요. 삭제 요청을 보낼때는 http method 중에 DELETE를 사용합니다.$ http -v DELETE 127.0.0.1:8000posts 배열에 담겨 있는 데이터를 삭제하고, 데이터가 삭제 될 때에 알맞는 http 상태코드를 반환해주세요.
http response로 반환하는 JSON 데이터의 형태가 다음과 같은 구조를 갖도록 만들어주세요.{ "message" : "postingDeleted" }
1. 전체 소스코드
const http = require("http");
const server = http.createServer();
const users = [
{
id: 1,
name: "Rebekah Johnson",
email: "Glover12345@gmail.com",
password: "123qwe",
},
{
id: 2,
name: "Fabian Predovic",
email: "Connell29@gmail.com",
password: "password",
},
];
let posts = [
{
id: 1,
title: "간단한 HTTP API 개발 시작!",
content: "Node.js에 내장되어 있는 http 모듈을 사용해서 HTTP server를 구현.",
userId: 1,
},
{
id: 2,
title: "HTTP의 특성",
content: "Request/Response와 Stateless!!",
userId: 1,
},
];
const data = function(){
let dataArray = [];
for(let i = 0; i<posts.length; i++){
for(let j = 0; j<users.length; j++){
if (users[j].id === posts[i].userId){
let userPost = {
"userID" : users[j].id,
"userName" : users[j].name,
"postingId" : posts[i].id,
"postingTitle" : posts[i].title,
"postingContent" : posts[i].content
}
dataArray.push(userPost);
}
}
}
return dataArray;
}
// 입력받은 배열arr의 키id가 입력받은 num과 같으면 그 요소를 제거하고 나머지를 배열로 반환하는 함수
const subA = function(arr, num){
arrNew =[];
for(let i=0; i<arr.length; i++){
if(arr[i].id!==num){
arrNew.push(arr[i]);
}
}
return arrNew;
}
const httpRequestListener = function(request, response){
const { url, method } = request;
if (method === 'GET'){
if (url === '/ping'){
response.writeHead(200, {'Content-Type' : 'appliction/json'});
response.end(JSON.stringify({message : 'pong'}));
}else if (url === '/posts/inquire'){
response.writeHead(200, {'Content-Type' : 'appliction/json'});
response.end(JSON.stringify({ "data" : data() }));
}
}else if(method === "POST"){
//response.writeHead(200, {'Content-Type':'appliction/json'})
// url이 /users/signup 이면 회원가입을 실행:
if (url === "/users/signup") {
let body = "";
//콜백함수: 데이터를 모아서 하나의 스트링으로
request.on("data", (data) => {
body += data;
});
//콜백함수:
request.on("end", ()=>{
// 하나의 스트링으로 만든 body를 파싱해서 user에 할당
const user = JSON.parse(body);
// 전역변수 users에 입력받은 객체를 추가
users.push({
id: user.id,
name: user.name,
email: user.email,
password: user.password,
});
// 데이터타입은 json으로
response.writeHead(200, {'Content-Type':'appliction/json'});
// json으로 작성된 stringify(...)의 ...을 응답'body'에 표시
response.end(JSON.stringify({
message : "userCreated",
"users" : users
}));
});
// url이 /posts/signup 이면 게시글 입력을 실행:
}else if(url === "/posts/signup"){
let body = "";
//콜백함수: 데이터를 모아서 하나의 스트링으로
request.on("data", (data) => {
body += data;
});
//콜백함수: 요청의 body(end)에 대해 실행하겠다?
request.on("end", ()=>{
// 스트링 body를 JSON형태로 파싱해서 post에 할당
const post = JSON.parse(body);
// 전역변수 posts에 입력받은 객체를 추가
posts.push({
id: post.id,
title: post.title,
content: post.content,
userId: post.userId,
});
// 데이터타입은 json으로
response.writeHead(200, {'Content-Type':'appliction/json'});
// json으로 작성된 stringify()의 객체 내용을 응답'body'에 표시
response.end(JSON.stringify({
message : "postCreated",
"posts" : posts }));
});
}
}else if(method === "PATCH"){
if(url === '/posts/change'){
let body = "";
request.on("data", (data) => {
body += data;
});
request.on("end", ()=>{
const post = JSON.parse(body);
for(let i in posts){
if (posts[i].id === post.id){
posts[i].content = post.content;
}
/*}*/
}
response.writeHead(200, {'Content-Type' : 'appliction/json'});
response.end(JSON.stringify({ "data" : data() }));
});
}
}else if(method === "DELETE"){
if(url === '/posts/delete'){
let body = "";
request.on("data", (data) => {
body += data;
});
request.on("end", ()=>{
const post = JSON.parse(body);
posts = subA(posts, post.id);
response.writeHead(200, {'Content-Type' : 'appliction/json'});
response.end(JSON.stringify({ "message" : "postingDeleted", "posts" : posts }));
});
}
}
}
server.on("request", httpRequestListener);
const IP = '127.0.0.1';
const PORT = 8000;
server.listen(PORT, IP, function(){
console.log(`Listening to request on ip ${IP} & port ${PORT}`);
})1-1. 추가된 소스코드
// 배열arr, 게시글번호num을 입력받아
// num과 불일치하는 요소만 배열로 반환하는 함수subA
const subA = function(arr, num){
arrNew =[];
for(let i=0; i<arr.length; i++){
if(arr[i].id!==num){
arrNew.push(arr[i]);
}
}
return arrNew;
}if(method === "DELETE"){
if(url === '/posts/delete'){
let body = "";
request.on("data", (data) => {
body += data;
});
request.on("end", ()=>{
const post = JSON.parse(body);
posts = subA(posts, post.id);
response.writeHead(200, {'Content-Type' : 'appliction/json'});
response.end(JSON.stringify({ "message" : "postingDeleted", "posts" : posts }));
});
}
}2. 리스닝
3. 실행결과
3-1. posts 게시물 추가하기
3-2. posts 게시물 삭제하기
- id=1 지우기
-
id=2 지우기
-
id=3 지우기
4. TIL
어려웠던 점
아래 코드의 실행 결과는 무엇일까?
if(method === "DELETE"){
if(url === '/posts/delete'){
let body = "";
let arrNew =[];
request.on("data", (data) => {
body += data;
});
request.on("end", ()=>{
const post = JSON.parse(body);
for(let i=0; i<posts.length; i++){
if(posts[i].id!==post.id){
arrNew.push(arr[i]);
}
}
});
response.writeHead(200, {'Content-Type' : 'appliction/json'});
response.end(JSON.stringify({ "message" : "postingDeleted",
"posts" : arrNew }));
}
}👉
"message" : "postingDeleted",
"posts" : []request.on("end", 콜백함수 블록{ }) 안에서 for문으로 배열arrNew에 요소가 추가되었지만 response.writeHead(), response.end()가 블록{ } 밖에 있어 블록{ } 밖의 arrNew의 초기값인 [ ]만 계속 출력됐다.
console.log()로 찍어보며 블록 안/밖의 차이도 확인했고
request, response 등 서버관련 코드를 제외한 순수한 코드만 따로 뽑아서 동작여부도 확인했는데
변수arrNew의 선언 위치만 의심했지
response.writeHead, response.end가 request.on의 블록 밖에 있어서 문제가 된다는 건 한참 후에 함수 subA()를 별도로 빼서 선언하고, PATCH 코드와 비교하고 나서야 알았다..
검색하고 기록하며 학습하는 백엔드 개발자