프로그래밍 언어

[RESTful 라우트] DELETE 설정: 댓글 삭제하기

이번 섹션에서는 RESTful 주석 DELETE를 활용하여 댓글을 삭제하는 방법을 알아봅니다. 주로 사용되는 엔드포인트는 /comments/:id로, HTTP 동사는 delete를 활용합니다. 댓글 삭제 엔드포인트 설정 우선, 삭제할 댓글의 경로는 /comments/:id로 설정합니다. 이때, :id는 해당 댓글의 고유 식별자입니다. 클라이언트 측에서 Delete 요청 보내기 클라이언트 측에서는 JavaScript를 사용하여 삭제 요청을 보낼 수 있습니다. 이를 위해 Axios나 fetch API를 활용하거나 클릭 리스너를 사용할 수 있습니다. 서버 측에서 Delete 요청 처리 Express를 이용하여 서버에서 Delete 요청을 처리하는 방법을 살펴봅니다. 해당 라우트에서는 요청된 ID를 통해 댓글을..

[RESTful 라우트] Express 메서드 재정의를 통한 댓글 편집 기능 구현

이번 포스팅에서는 Express의 메서드 재정의를 활용하여 댓글 편집 기능을 구현하는 방법에 대해 알아보겠습니다. 이미 CRUD(Create, Read, Update, Delete)에서 U(Update)에 해당하는 내용은 거의 다 다뤘습니다. 이제 남은 부분은 댓글을 업데이트하는 것인데, 이를 Postman이나 Axios를 이용하여 진행할 수 있습니다. 하지만 댓글을 편집할 수 있는 폼을 만들어 브라우저 상에서도 편집할 수 있도록 해봅시다. 먼저, 클라이언트에서 댓글을 편집할 수 있는 폼을 제공하기 위해 서버에서 해당 댓글을 불러와야 합니다. 이를 위해 라우트를 설정합니다. 클라이언트는 /comments/:id/edit에 GET 요청을 보내면, 해당 댓글의 편집 폼을 제공받게 됩니다. // 서버 측 코드..

[RESTful 라우트] RESTful 주석 업데이트: Patch 요청과 댓글 수정

앞서 CRUD에서 Create와 Read를 다뤘습니다. 이제 특정 리소스를 업데이트하는 U(Update)에 대해 알아보겠습니다. 특히, 댓글을 업데이트하는 경우를 다룹니다. 사용자 이름은 변경하지 않고 댓글 내용만 수정할 것이며, 이를 위해 폼을 생성하는 방법을 살펴봅니다. Patch요청 - 업데이트의 핵심 CRUD에서 U는 주로 두 가지 HTTP 동사, Put과 Patch를 사용합니다. 둘 다 업데이트와 관련이 있지만, 각각의 특징을 이해해야 합니다. Put은 전체 내용을 업데이트하는데 사용되며, 새로운 버전의 리소스를 생성합니다. 반면, Patch는 부분적으로 수정이 가능하며, 일부 내용만 변경할 수 있습니다. Express에서의 Patch 라우트 설정 Express 앱에서는 Patch 라우트를 설정..

[RESTful 라우트] UUID 패키지를 활용한 범용 고유 식별자 생성

최근 강의에서는 댓글을 작성하고 제출할 때 생기는 작은 문제에 대해 다뤄보았습니다. 새로운 댓글을 작성하고 제출하면 인덱스 페이지로 정상적으로 돌아가지만, 해당 댓글을 클릭했을 때의 링크가 /comments로 이동하고 있었습니다. 실제로는 어디로 가야할지에 대한 로직이 부족한 상태였습니다. 그 동안의 작업에서는 하드코딩된 오름차순(ID: 1, 2, 3, ...)으로 ID를 부여하고 있었는데, 이렇게 하면 새로운 댓글이 추가될 때마다 어떻게 ID를 부여할지에 대한 고민이 필요했습니다. 이런 문제를 해결하기 위해 UUID(Universally Unique Identifier) 패키지를 사용하는 방법을 알아보겠습니다. 우선, UUID 패키지를 설치하고 해당 패키지에서 v4 함수를 사용하여 고유한 식별자를 생성..

[RESTful 라우트] RESTful 주석 Show

이번에는 Show 라우트를 구현하는 방법에 대해 알아보겠습니다. Show 라우트는 특정 리소스의 세부 정보를 확장된 형식으로 표시하는 역할을 합니다. 이는 댓글 하나, 게시물, 사용자, 또는 다른 리소스에 해당할 수 있습니다. 이 글에서는 우리의 댓글 시스템을 기준으로 설명할 것이며, 다른 리소스에 대한 Show 라우트를 구현하는 방법도 유사합니다. 먼저, Show 라우트는 하나의 특정 리소스에 대한 정보를 표시하는데, 이를 위해 해당 리소스를 고유하게 식별할 수 있는 식별자(ID)가 필요합니다. 이 ID는 주로 URL에 포함되며, 예를 들어 /comments/1과 같은 형식으로 표현됩니다. 이 ID는 데이터베이스에서 해당 리소스를 찾을 때 사용됩니다. 간단한 예시로, 댓글에 대한 Show 라우트를 구현..

[RESTful 라우트] Express 방향 수정: 리다이렉트와 더 나은 사용자 경험

현재까지 Create 라우트를 구현하여 새로운 댓글을 생성하는 과정을 살펴보았습니다. 그러나 이 구현에서는 사용자 경험이 좋지 않습니다. 글을 작성하고 나면 브라우저에서 다시 전송되는 문제와 데이터베이스가 재시작될 때마다 댓글이 지워진다는 문제가 발생합니다. 이를 개선하기 위해 리다이렉트와 좀 더 나은 사용자 경험을 제공하는 방법에 대해 알아보겠습니다. 리다이렉트와 문제점 새로운 댓글을 작성한 후에 나타나는 "IT WORKED!" 메시지는 사용자 경험에는 도움이 되지 않습니다. 또한, 새로운 댓글을 작성하고 나서 페이지를 새로 고침하면 브라우저가 이전에 전송한 POST 요청을 다시 전송하게 되어 중복된 댓글이 계속해서 추가됩니다. 이 문제를 해결하기 위해 Express에서 제공하는 res.redirect..

[RESTful 라우트] RESTful 주석 - 새로운 댓글 생성하기 (CRUD: Create)

이번 글에서는 RESTful 주석 시스템에서 새로운 댓글을 생성하는 방법에 대해 알아보겠습니다. CRUD에서의 'C'는 'Create'로, 사용자가 새로운 댓글을 생성하는 과정입니다. 현재는 실제 데이터베이스를 사용하지 않고 배열에 데이터를 저장하는 방식을 적용하겠습니다. 새로운 댓글 폼 만들기 새로운 댓글을 생성하기 위해서는 사용자에게 제출할 수 있는 폼이 필요합니다. 이를 위해 'New' 라우트를 만들어 폼을 렌더링하고, 사용자가 폼을 통해 댓글을 제출하면 데이터가 해당 라우트로 전송됩니다. // app.js app.get('/comments/new', (req, res) => { res.render('comments/new'); }); 위 코드에서는 /comments/new로 오는 Get 요청을 처..

[RESTful 라우트] RESTful 주석 Index 구현하기

이번 글에서는 Express를 사용하여 댓글 리소스의 RESTful 라우트를 구현하는 방법에 대해 알아보겠습니다. RESTful 방식으로 앱을 구조화하는 다양한 방법이 있지만, 이번에는 주어진 앱에서 EJS를 활용하여 HTML을 제공하는 RESTful 앱을 만들어보겠습니다. 사용자가 양식과 상호작용하여 새 댓글을 작성하거나 기존 댓글을 편집할 수 있는 기능을 구현할 것입니다. EJS 설정 먼저, EJS를 설치하고 설정합니다. npm i ejs app.js 작성 // app.js const express = require('express'); const app = express(); const path = require('path'); app.set('view engine', 'ejs'); app.set(..