개발일지

[최종 결과] 항공 서비스 이용 후기 (개인 프로젝트)

오늘도개발 2024. 10. 17. 15:13

 

* 2019년도에 진행한 개인 Web/Server 개발 프로젝트 기록을 옮김.

 

0. 항공  서비스  이용  후기 (기본 CRUD 프로젝트)

 

  해당 프로젝트는 Web / Server 를 공부하면서 개념을 익히고, 해당 내용을 프로젝트로 진행한 내용으로 Java Web Project로 개발 후, Spring으로 리펙토링한 내용을 담고있습니다. Spring으로 리펙토링 후, Restful 한 구조로 Spring 구조를 변경해 보았습니다. 또한, 기본적인 웹 보안 관련 내용을 포함하고 있습니다.

 

 

0. 목차 ( 클릭시 해당 위치로 이동)

1. 프로젝트 개요 및 기획

2. 프로젝트 설계

3. 중간결과

4. Web 리펙토링 (Jsp, Html 분리, JQuery, Bootstrap 4)

5. DAO 리펙토링 ( MyBatis 적용)

6. 프로젝트 리펙토링 ( Spring 전환 )

7. 기능 추가 ( 조회수 / 좋아요/ 싫어요 / top 5 )

8. 업로드 파일 관리 리펙토링( Server -> DB )

9. 최종결과

 

1. 프로젝트 개요 및 기획

 

   개요

 

  약 한달 반 정도의 기간 동안 기본 JAVA Web 기본 프로젝트( CRUD )를 진행하였다. 항공 이라는 주제에 맞추어 UI/UX 개발부터 실제 Front-End, Back-End 전체를 구현하며 Web / Server에 대하여 학습 및 실습하였다.

 

  

프로젝트 개발 일정

 

 

프로젝트 리펙토링 과정 요약

 

   프로젝트 기획 

 

1. 주제선정

 

   항공이라는 Keyword와 Web/Server 에 맞는 주제를 선정하기 위해 브레인 스토밍 과정을 진행하였고, 유사 경쟁 서비스를 찾아서 분석하였다.

 

UI / UX

 

2. 업무 분석

 

 프로젝트 기간에 맞게 MVP를 지정하여서 USECASE 를 작성하고 간단한 기능을 작성해보았다.

 

간단한 기능 명세

 

 

2. 프로젝트 설계

 

   화면 설계

 

  프로토 타입 및 와이어 프레임을 통하여 USECASE에 맞게 화면을 구상하였다.

 

프로토타입 및 와이어프레임

 

   DB 설계

 

 작성한 요구사항 명세서을 참고하여 DB를 모델링 하였다.

 

 

 

   기능별 상세 설계

 

 요구사항 명세서를 더욱 구체화 하여서 전체적인 프로그램을 설계였다.

 

 

3. 프로젝트 중간 결과(MVP)

 

로그인 / 회원가입 / Main

 

 

게시글 작성자 일치 여부 확인

 

 

게시글 검색 기능

 

 

게시글 등록

 

 

게시글 수정

 

 

댓글 기능

 

 

이메일 중복 체크

 

4. Web 리펙토링 (JSP, HTML 분리, JQuery, Bootstrap 4)

 

 JSP에 HTML 와 자바 코드가 섞여 있어서 유지보수에 불편함을 느꼈고 이를 개선하기 위해서 Restful 한 구조로 코드를 분리하였다. 또한, 반응형 웹을 경험해보기 위하여 Bootstrap 4 를 적용하였고 보안 강화(암호화) 및 외부 API도입을 통하여 유저 편의성을 증가 시켰다.

 

 

JSP 에서 HTML 코드 분리

 

 

분리된 HTML ( 동적인 부분은 Jquery 를 이용하여 처리 )

 

 

비동기 통신 방식 수정 ( XML -> Jquery)

 

 

Bootstrap 4 적용 ( 반응형 )

 

 

Bootstrap 적용 후 Main 화면 Web / Mobile 비교

 

 

RSA 암호화 방식으로 보안 강화

 

 

PW 암호화 후 DB 저장

 

 

네이버 스마트 에디터 적용

 

5. DAO 리펙토링 ( Mybatis 적용 )

 

MyBatis 적용 전 후 구조 비교

 

 

Mapping을 이용하여 코드 유지 보수 향상

 

6. 프로젝트 리펙토링 ( Spring Framework 적용 )

 

 기존의 JAVA Web 프로젝트를 Spring 프로젝트로 전환 후, 비효율 적인 구조를 수정하여 적용하였다. 또한, 유저 피드백을 수용하여서 추가기능을 개발하였다.

 

Spring MVC 구조

 

 

정적 요청과 동적 요청 분리

 

 

스프링 구조에 맞게 기능 상세 명세 수정

 

 

어노테이션 활용 DI 적용

 

 

결과 JSP 통합 ( 라우팅 기능만 수행 )

 

7. 기능 추가 ( 조회수, 좋아요, 싫어요, Top 5 )

 

추가된 요구 사항 간단 명세

 

 

DB 모델 수정

 

 

조회수 기능 추가 결과

 

 

좋아요, 싫어요, Top 5 추가 결과

 

 

8. 업로드 데이터 관련 리펙토링 ( Server 저장 -> DB 내 저장 )

 

서버 저장 -> DB 저장 코드 수정

 

 

DB 저장 결과

 

 

DB 데이터 Load

 

 

 

9. 최종 결과

 

main (Web)

 

 

main (App)

 

 

회원가입

 

 

로그인

 

 

게시글 조회 및 검색 기능

 

 

게시글 등록

 

 

게시글 조회 및 좋아요 기능

 

 

게시글 댓글 기능

 

 

10. 회고

 

 지난 과정을 돌이켜 보면 많은 부족함이 느껴지는 프로젝트였다. 하지만 자신의 수준에서 더욱 발전 해보려고 다양한 시도를 해본 것은 좋은 경험이었던 것 같다. 사용한 기술 스택이 오래되었지만, 기본을 충실히 반영한 프로젝트 였다고 생각하며 앞으로도 진행한 프로젝트를 하나씩 정리하면서 다시 보면 좋을 것 같다. 

'개발일지' 카테고리의 다른 글

실전 프로젝트  (2) 2024.10.21
[최종 결과] 위치 기반 상품 추천 프로젝트  (2) 2024.10.17
[최종 결과] 실전 프로젝트  (0) 2024.05.05
개발일지 10주차 WIL  (0) 2024.04.07
개발일지 9주차 WIL  (0) 2024.03.31