반응형 javascript7 바이브코딩 툴 입문 - 프론트엔드와 백엔드 연결하기: 내가 만든 화면과 서버를 하나로 묶는 방법 지난 글에서는 Node.js와 Express를 사용해 간단한 백엔드 API 서버를 만들어봤습니다.서버에서 처리한 기능은 다음과 같았습니다.GET /api/todos → 할 일 목록 가져오기POST /api/todos → 새 할 일 추가하기PATCH /api/todos/:id → 완료 상태 수정하기DELETE /api/todos/:id → 할 일 삭제하기 이제 중요한 단계가 남았습니다.프론트엔드 화면과 백엔드 서버를 실제로 연결하는 것.지금까지는 프론트엔드 코드와 백엔드 코드를 따로 배웠습니다.하지만 실제 웹앱은 둘이 함께 움직입니다.이번 글에서는 초보자도 따라 할 수 있도록 Express 서버에서 프론트엔드 파일을 제공하고, 프론트엔드에서 내가 만든 API 서버를 .. 2026. 5. 13. 바이브코딩 툴 입문 7 - 백엔드 서버가 왜 필요할까? Node.js와 Express 기초 이해하기 지난 글에서는 프론트엔드에서 CRUD 앱 구조를 만드는 방법을 알아봤습니다.우리는 fetch()를 사용해서 다음 요청을 연결했습니다.GET → 목록 불러오기POST → 새 데이터 추가하기PATCH → 일부 수정하기DELETE → 데이터 삭제하기 하지만 아직 중요한 한 가지가 남아 있습니다.지금까지는 테스트용 API를 사용했습니다.즉, 우리가 직접 만든 서버가 아니었습니다.이제 다음 단계는 분명합니다.직접 API 서버를 만들어보는 것.이번 글에서는 프론트엔드에서 한 단계 더 나아가, 백엔드 서버가 왜 필요한지, 그리고 Node.js와 Express로 간단한 API 서버를 만드는 흐름을 정리해보겠습니다.프론트엔드만으로는 왜 부족할까?프론트엔드는 사용자가 보는 화면을 담당합니다.예를 들어 To-do.. 2026. 5. 12. 바이브코딩 툴 입문 - 프론트엔드 CRUD 앱 구조 만들기: GET·POST·PATCH·DELETE 한 번에 연결하기 지금까지 우리는 API 요청을 하나씩 나눠서 배웠습니다.GET → 데이터 가져오기POST → 데이터 추가하기PATCH → 일부 수정하기DELETE → 데이터 삭제하기 이번 글에서는 이 개념들을 하나로 묶어보겠습니다.이제 단순히 “요청 하나 보내보기”가 아니라, 실제 앱처럼 동작하는 프론트엔드 CRUD 구조를 만들어보는 단계입니다.CRUD는 웹앱의 가장 기본적인 데이터 흐름입니다. 게시판, 댓글, 쇼핑몰 상품 관리, 회원 관리, 할 일 앱 모두 결국 CRUD 구조를 바탕으로 움직입니다.CRUD란 무엇일까?CRUD는 데이터를 다루는 네 가지 기본 동작을 의미합니다.구분의미HTTP 요청Create새 데이터 만들기POSTRead데이터 읽기GETUpdate데이터 수정하기PUT / PATCHDelete데.. 2026. 5. 11. 바이브코딩 툴 입문5 - PUT, PATCH, DELETE 요청 이해하기: 수정과 삭제까지 완성하기 지난 글에서는 API 요청이 실패할 수 있다는 점을 기준으로 에러 처리와 로딩 처리를 알아봤습니다.이제 API 요청의 기본 흐름은 어느 정도 잡혔습니다.지금까지 다룬 내용은 다음과 같습니다.GET → 데이터 가져오기POST → 데이터 새로 만들기 하지만 실제 앱은 여기서 끝나지 않습니다.To-do 앱을 예로 들면, 사용자는 할 일을 추가만 하지 않습니다.할 일 제목을 수정하고완료 상태를 바꾸고필요 없는 할 일을 삭제합니다. 이때 필요한 요청 방식이 바로 PUT, PATCH, DELETE입니다.이번 글에서는 바이브코딩을 처음 접하는 사람도 이해할 수 있도록 수정과 삭제 API 요청을 To-do 앱 기준으로 쉽게 정리해보겠습니다.API 요청은 결국 CRUD로 이어진다웹앱에서 데이터를 다루는 기본 흐름을 흔.. 2026. 5. 8. 이전 1 2 다음 반응형
