OnSpot Project

OnSpot — 위치 기반 소셜 미디어 플랫폼

내 주변의 경험을 공유하고, 지도 위에서 새로운 사람들의 이야기를 발견하는 공간

1. 시스템 아키텍처 (MVC Architecture)

JSP(View), Servlet(Controller), DAO/DTO(Model) 패턴을 준수한 고전적인 웹 아키텍처를 구현했습니다.

graph LR
    User((User))
    subgraph Frontend
        JSP["JSP Views
(HTML/Bootstrap)"]
        Map["Kakao Map SDK"]
    end
    subgraph Backend
        Controller["Servlet
(Controller)"]
        Model["DAO / DTO
(Data Access)"]
        FileSys["File System
(Images)"]
    end
    subgraph Database
        Oracle[("Oracle DB 11g")]
    end

    User -->|Request| JSP
    JSP -->|Form Submit| Controller
    Controller -->|Business Logic| Model
    Controller -->|Multipart| FileSys
    Model -->|JDBC Query| Oracle
    Oracle -->|ResultSet| Model
    Model -->|DTO Return| Controller
    Controller -->|Forward| JSP

▲ Servlet/JSP 기반의 MVC 패턴 데이터 흐름도

2. 주요 기능 및 화면 (UI/UX)

지도 기반 탐색

Kakao Map API를 활용하여 사용자의 현재 위치 주변, 팔로워의 게시물 위치, 최근 게시물 위치를 마커로 시각화합니다.

게시물 업로드

사진 업로드 시 위치 정보를 함께 저장하여, 단순한 시간 순 정렬이 아닌 '장소' 중심의 피드를 제공합니다.

3. 핵심 로직: 위치 기반 게시물 등록

파일 업로드(COS 라이브러리)와 위치 데이터 처리를 동시에 수행하는 프로세스입니다.

sequenceDiagram
    actor User
    participant Browser
    participant Server as Tomcat Server
    participant DB as Oracle DB

    User->>Browser: 1. 사진 선택 및 위치 지정
    Browser->>Server: 2. POST /upload (Multipart/form-data)
    
    activate Server
    Note right of Server: COS Library 처리
    Server->>Server: 3. 파일명 중복 처리 및 저장
    Server->>Server: 4. 위도(Lat), 경도(Lng) 추출
    Server->>DB: 5. INSERT INTO BOARD VALUES (...)
    DB-->>Server: 성공(1)
    deactivate Server
    
    Server-->>Browser: 6. 업로드 완료 및 지도 갱신
    Browser->>User: 7. 지도에 새 마커 표시

4. 데이터베이스 설계 (ERD)

Oracle Database를 사용하여 회원, 게시물, 댓글, 팔로우 관계를 정규화하여 설계했습니다.

▲ Oracle DB 테이블 관계도

5. 기술 스택 (Tech Stack)

Frontend

HTML5/CSS3 JavaScript (ES6) Kakao Maps SDK Bootstrap JQuery

Backend

Java 8 JSP / Servlet Apache Tomcat 8.5 COS (Multipart) JDBC

Database

Oracle 11g XE SQL Developer DBCP (Connection Pool)

6. 트러블 슈팅

"Tomcat 서버 실행 시 'Connection refused' 오류"

Tomcat 서버 실행 시 'Connection refused' 오류가 발생했습니다. 이는 Tomcat이 정상적으로 실행되지 않았기 때문입니다. Tomcat을 실행하기 전에 먼저 포트 8080이 사용 중인지 확인해야 합니다. 포트 8080이 사용 중이라면, 다른 포트를 사용하거나 포트를 변경해야 합니다.

Project Info

Category
웹 애플리케이션 (1인 프로젝트)
Role
전체 개발 (백엔드 + 프론트엔드 + DB)
Date
2022.07 – 2022.09 (2개월)
GitHub
GitHub