[멋쟁이사자] 백엔드 - 45, 46일차 회고록

45일차

학습 목표

1. 사용자가 입력한 데이터를 백앤드 (Node.js) 를 통해 MySql 데이터 베이스에 저장할 수 있다.
2. 저장된 내용을 통해 CRUD를 구현하고 FE 와 BE흐름을 이해하고 구현할 수 있다.
3. 브라우저 상위 객체를 통해 레이아웃 분할 화면을 설계 할 수 있다.
4. FE, BE 통합 구조를 설계할 수 있다.

최종 목표

사용자가 여행지를 등록하고 카드 형태로 볼 수 있는 웹 애플리케이션 형태로 코드를 작성하는것.

해당 과정에서는 React를 통한 프론트엔드 UI를 구성하고, Node.js를 통해 REST API를 구현하는 학습을 완료했다.

백엔드의 경우에는 MVC 패턴으로 구조화 했다.

코드 분석

디렉토리 구조

MVC\_TravelApp/  
├── backend/  
│ ├── config/  
│ │ └── db.js # MySQL 연결 설정  
│ ├── controllers/  
│ │ └── travelController.js # CRUD 로직  
│ ├── models/  
│ │ └── travelModel.js # DB 쿼리 정의  
│ ├── routes/  
│ │ └── travelRoutes.js # REST API 라우팅  
│ └── app.js # Express 서버 시작점  
├── frontend/  
│ ├── components/  
│ │ ├── Header.jsx # 상단 네비게이션  
│ │ ├── Footer.jsx # 하단 푸터  
│ │ ├── TravelCard.jsx # 여행지 카드 UI  
│ │ └── TravelForm.jsx # 여행지 등록 폼  
│ ├── App.jsx # 전체 앱 구성  
│ └── index.js # React 진입점  
└── notice.txt # 실행 안내 파일

백엔드

Config (db)

• 데이터베이스 연결 설정
• MySQL 데이터베이스와 연결된 pool 객체 생성 및 외부로 제공

Model (travelModel)

• MySQL 쿼리를 정의하고 실행

Controller (travelController)

• 클라이언트 요청을 받아 Model을 호출하고 응답 반환
• travelRoutes에서 HTTP 요청을 처리할 핸들러로 등록

Router (travelRoutes)

• 클라이언트의 HTTP 요청 경로를 컨트롤러에 연결

Main (app)

• Express 서버의 진입점, 미들웨어 등록 및 라우터 연결
• 프로젝트 실행 시 node app.js로 서버가 시작되고 API 경로가 열림

프론트

index

• React 앱의 진입점
• HTML의 <div id="root">에 App 컴포넌트를 렌더링

App

• 전체 페이지 구성과 상태 관리
• useState, useEffect를 사용

TravelForm

• 여행지 등록 폼
• 사용자가 여행지를 입력하고 제출하면 POST /api/travels 요청
• 성공 시 onAdd() 호출 → App에서 window.location.reload() 실행

TravelCard

• 여행지 카드 UI
• 여행지 데이터를 카드 형태로 렌더링
• 제목 클릭 시 상세 설명 아코디언(toggle) 열림

Header

• 상단 내비게이션 바
• 상단에 타이틀과 아이콘을 표시하는 단순한 UI 구성

Footer

• 하단 푸터
• 페이지 하단에 고정된 푸터 메시지 제공

travelData

• 샘플 여행지 데이터
• API 연동 전 또는 테스트용 더미 데이터 제공

학습 회고

그동안 학습한 내용으로 간단하게 백엔드, 프론트를 구성하는 시간이었다.

아직 스프링과 스프링부트를 학습하지않아 node로 대신하여 구성했는데 node의 경우에는 써본적이 없었기 때문에 조금 어려웠던것 같다.

이번 기회를 통해 node에 대해 알아보는 시간이 되었고, 나중에 사용할 일이 생긴다면 금방 적응하는 계기가 될 것 같다.

여기서 추가적인 기능에 대해 생각해봤는데 검색 기능을 filter()를 사용하면 적용할 수 있을것 같다.

기본적으로 MVC 패턴을 적용해서 코드를 작성했기 때문에 확장성을 고려한 결과 검색 기능은 별 문제없이 추가가 가능할듯 하다.

Code 확인하기

Github