프론트엔드와 백엔드가 분리된 연락처 관리 웹 애플리케이션 개발 사례를 소개합니다. 이 애플리케이션은 Vue.js로 프론트엔드를 개발하고 Node.js와 MongoDB를 사용하여 백엔드를 구축했습니다.
소스 코드 저장소 링크
PSP 표
다음은 소프트웨어 개발 프로젝트에서 시간 관리를 위한 개인 소프트웨어 과정(PSP) 표입니다.
| 단계 |
계획 시간 (시간) |
실제 시간 (시간) |
차이 (시간) |
완료 상태 |
| 계획 단계 |
1.5 |
1 |
-0.5 |
|
| 요구사항 분석 |
0.5 |
0.4 |
-0.1 |
|
| 작업 분해 |
0.5 |
0.4 |
-0.1 |
|
| 시간 추정 |
0.5 |
0.2 |
-0.3 |
|
| 설계 단계 |
5 |
3 |
-2 |
|
| 아키텍처 설계 |
2 |
1 |
-1 |
|
| 인터페이스 설계 |
2 |
0.5 |
-0.5 |
|
| 데이터베이스 설계 |
1 |
1.5 |
+0.5 |
|
| 개발 단계 |
10 |
14 |
+4 |
|
| 코딩 실현 |
7 |
11.5 |
+4.5 |
|
| 유닛 테스트 |
1.5 |
1 |
-0.5 |
|
| 코드 검토 |
1.5 |
1.5 |
0 |
|
| 테스트 단계 |
6 |
9 |
+3 |
|
| 시스템 테스트 |
3 |
5 |
+2 |
|
| 버그 수정 |
3 |
4 |
+1 |
|
| 종합 단계 |
4 |
4 |
0 |
|
| 문서 작성 |
2 |
1.5 |
-0.5 |
|
| 프로세스 개선 분석 |
2 |
2.5 |
+0.5 |
|
| 총계 |
26.5 |
31 |
4.5 |
|
배포 및 시연
웹사이트 링크:
시연 사이트
기능 시연
- 전체 웹페이지: 왼쪽에는 전체 페이지 레이아웃, 오른쪽에는 디버깅 콘솔이 표시됩니다.
- 추가 기능: 새로운 정보를 추가할 수 있습니다.
- 삭제 기능: 특정 항목을 삭제할 수 있습니다.
- 수정 기능: 백엔드에서 연락처 목록을 가져오는 get_list 요청을 통해 데이터를 갱신합니다.
디자인 및 구현 과정
프론트엔드
Vue.js를 활용한 연락처 리스트 애플리케이션의 프로젝트 구조는 다음과 같습니다.
기술 스택
- Vue 3: Composition API와 <script setup> 문법으로 구성.
- Vite: 최신 프론트엔드 빌드 도구.
- Axios: HTTP 요청 처리.
핵심 파일 구조
project/
├── index.html # 주 HTML 입구 파일
├── src/
│ ├── main.js # Vue 애플리케이션 입구
│ ├── App.vue # 주 컴포넌트
│ └── style.css # 전역 스타일 파일
├── package.json # 프로젝트 의존성 설정
└── vite.config.js # Vite 빌드 설정
핵심 함수 구현
async function fetchContacts() {
const response = await axios.get('https://example.com/api/get_contacts');
contacts.value = response.data;
}
async function addContact(newContact) {
await axios.post('https://example.com/api/add_contact', { name: newContact });
fetchContacts();
}
async function removeContact(contactId) {
await axios.post(`https://example.com/api/remove_contact/${contactId}`);
fetchContacts();
}
백엔드
Node.js와 Express를 활용한 백엔드 서비스입니다.
핵심 파일 구조
├── app.js # 프로젝트 주 입구 파일
├── .env # 환경 변수 설정 파일
├── config/ # 설정 파일 디렉토리
│ ├── db.js # 데이터베이스 연결 설정
│ └── logger.js # 로거 설정
├── models/ # 데이터 모델 디렉토리
│ └── Contact.js # 연락처 모델
├── routes/ # 라우터 컨트롤러 디렉토리
│ └── contact.js # 연락처 API 라우터
├── logs/ # 로그 파일 디렉토리
핵심 코드 예시
// 데이터베이스 연결
const connectDB = async () => {
try {
await mongoose.connect(process.env.MONGO_URI);
console.log('데이터베이스 연결 성공');
} catch (error) {
console.error('데이터베이스 연결 실패:', error.message);
process.exit(1);
}
};
// 라우팅 설정
app.use('/api', contactRoutes);
// 에러 핸들링
app.use((err, req, res, next) => {
console.error('서버 에러:', err.stack);
res.status(500).json({ message: '서버 내부 에러' });
});
결론
이 프로젝트는 현대적인 프론트엔드 개발 도구와 백엔드 아키텍처를 적용한 좋은 예입니다. 명확한 프로젝트 구조와 효율적인 모듈화를 통해 유지보수가 용이하며, 다양한 요구사항에 유연하게 대응할 수 있습니다.