간단 게시판 만들기 과제

데이터 베이스 연동 없이, 로그인 회원가입 없는 게시판을 만드는 과제

 

express를 이용한 간단한 게시판 api를 만들어 보았다

 

▼구현할 API

경로	HTTP 메서드	설명
/	get	게시판 목록을 가져옴
/posts	post	게시판에 글을 씀
/posts/:id	delete	게시글 아이디가 id인 글을 삭제
/posts/:id	put	게시글 수정
/posts/:id/like	put	게시글 좋아요
/posts/:id/comments	get/post/delete	댓글 조회/수정/삭제

 

put 함수

: Express에서 HTTP PUT 요청을 처리하기 위해 사용되는 함수

주로 클라이언트가 서버에 데이터를 업데이트할 때 사용됨. 예를 들어 클라이언트가 특정 리소스의 정보를 변경하고자 할 때 PUT 요청을 사용

- 인수 : URL 패턴, 해당 패턴에 매칭되는 요청을 처리할 콜백 함수

---

클라이언트에서 서버로 요청을 보냈을 때 그냥 body 데이터를 읽을 경우 → undefined

 

JSON 미들웨어 활성화 필요

 

JSON 미들웨어를 활성화하지 않는다면?

클라이언트가 JSON 형식으로 데이터를 서버로 보내더라도, 서버는 해당 데이터를 문자열로만 인식한다. 즉, JSON 데이터를 파싱하여 자바스크립트 객체로 변환할 수 없기 때문에 요청된 데이터에 접근하거나 이를 처리하는 것이 어렵다.

app.use(express.json());

: 클라이언트가 서버로 보내는 JSON 형식의 데이터를 파싱하여 자바스크립트 객체로 변환

 

app.use(express.urlencoded({extended: true}));

: 클라이언트가 서버로 보내는 URL-encoded 형식의 데이터를 파싱. HTML 폼을 통해 전송된 데이터를 처리하는 데 주로 사용

- extended 옵션: true로 설정하면 qs 라이브러리를 사용하여 중첩된 객체를 지원함. false로 설정하면 기본 querystring 라이브러리를 사용하여 중첩된 객체를 지원하지 않는다.

 

✎ URL-encoded 타입

키-값 쌍으로 되어있으며, 키-값 쌍을 =로 구분하고, 각 쌍은 &로 연결함. 특수 문자는 %와 16진수 값으로 인코딩 함.

 

왜 따로 사용하는 것인가?

이 두 가지 미들웨어를 따로 사용하는 이유는 데이터 형식에 따라 다른 파싱 방법이 필요하기 때문 

• JSON 데이터: API 요청, JSON 기반 데이터 교환
• URL-encoded 데이터: HTML 폼 제출, 간단한 키-값 쌍 데이터 교환

 

 

게시글 수정

findIndex 함수

배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소의 인덱스를 반환하는 함수

※ 자체적으로 내부에서 배열을 순회하며 콜백 함수를 각 요소에 적용 (반복문 필요없음)

게시글 삭제

filter 함수

배열의 요소를 순회하면서 콜백 함수를 사용하여 원하는 조건에 따라 필터링하는 함수; 필터링된 배열을 반환

≫ 로직

삭제하려는 게시글의 id를 제외한 나머지 게시글들 필터링해서 filteredPosts에 저장

---

어려웠던 점

 

1. curl 사용 익숙하지 않음 문제 

    ➡️코드를 먼저 실행 후 curl 입력해야됨 → 안 그럼 서버 연결할 수 없다는 오류 계속 발생함

코드 실행없이 명령 입력해서 발생한 오류

   ➡️ vscode에서 curl 만 입력하는 것이 아니라 curl.exe 로 입력해야됨!!

2. 원래의 정보를 변경할 때에 PUT 요청을 사용한다는 것을 새로이 알게됨

3. 코드에 문제가 발생시 디버깅 코드를 입력하여 도움을 받을 수 있음

app.use((req, res, next) => {
    console.log(`${req.method} ${req.url}`);
    next();
  });

이 코드를 사용하면 각 HTTP 요청이 서버에 도달했을 때 요청의 메서드와 URL이 콘솔에 출력되어 어떤 요청이 서버로 들어오고 있는지 확인하는 데에 용이함

 

---

더 생각해보기

 

✍좋아요 취소기능

 

1. URL을 다르게 사용하여 구분하기

• PUT/posts/:id/like : 좋아요
• PUT/posts/:id/unlike : 좋아요 취소

이렇게 URL 다르게 해서 둘 다 PUT 함수로 각각 구현하면 됨

 

 

2. 좋아요 추가, 취소 둘 다 동일한 엔드포인트에서 처리

어떤 작업을 수행할 것인지 새로운 변수에 저장해서 사용자에게 요청

 

이때 만들어진 새로운 변수는 좋아요를 추가하거나 취소하는 행동을 구분하기 위한 임시 데이터일 뿐, 실제 게시글 데이터에 저장할 필요는 없으므로 PUSH 할 필요 없음

 

---

피드백 내용

 

☛ 내용 수정이 필요한 경우 부분 수정 PATCH 를 이용하는 것이 더 효과적임

put은 전체 내용을 다시 필요로 하는 반면, patch를 이용할 시 수정이 필요한 부분에 대해서만 다시 보냄

 

☛ requirement.txt 필요

프론트와 백의 협업이나 규모가 더 커질경우 실행환경의 차이가 발생할 수 있고 오류 발생가능. 지금부터 작성 연습하기

 

☛ api test 는 주로 'postman' 이용