반응형

1부에서는 LogLy가 어떤 프로젝트인지 소개해드렸죠? 이번 편에서는 좀 더 깊이 들어가서 실제로 어떻게 만들었는지 얘기해볼게요!

API 설계하면서 "아, 이렇게 하면 되겠구나!" 싶었던 것들이 많았는데, 그런 것들 위주로 공유해볼게요 😊

API 만들 때 생각한 것들

처음 API 설계할 때 이런 걸 고민했어요:

  • 직관적이어야 한다: URL만 봐도 뭐 하는 건지 알 수 있게
  • 보안은 필수: 내 노트 남이 못 보게 JWT로 잠궈놓기
  • 에러 메시지는 친절하게: 뭐가 문제인지 바로 알 수 있게
  • 일관성: 응답 형식이 통일되면 프론트 만들기 편하더라고요

그럼 이제 실제 API들을 하나씩 살펴볼까요?


1. 회원가입하고 로그인하기 (/api/auth)

아이디 중복 체크부터!

회원가입하기 전에 아이디 쓸 수 있는지 확인해야죠?

GET /api/auth/check-username?username=coolguy123

이렇게 보내면...

{
    "available": true  // 쓸 수 있어요!
}

 

회원가입 고고!

POST /api/auth/register
Content-Type: application/json

{
    "username": "coolguy123",
    "password": "mysecretpassword"
}

성공하면 이렇게 와요:

{
    "message": "회원가입이 완료되었습니다."
}

간단하죠? ㅎㅎ

로그인은 더 간단!

POST /api/auth/login
Content-Type: application/json

{
    "username": "coolguy123",
    "password": "mysecretpassword"
}

그러면 토큰을 줘요:

{
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}

이 토큰이 중요해요! 이제부터 모든 요청에 이걸 붙여서 보내야 해요.
Authorization: Bearer {토큰} 이런 식으로요!


2. 내 정보 관리하기 (/api/user)

이름 바꾸고 싶을 때

PUT /api/user/me
Authorization: Bearer {토큰}
Content-Type: application/json

{
    "username": "newcoolguy"
}

 

이름을 바꾸면 새 토큰을 줘요. 그거 다시 저장하는 거 잊지 마세요!

탈퇴하고 싶을 때 😢

DELETE /api/user/me
Authorization: Bearer {토큰}

주의! 이거 누르면 다 날아가요. 노트, 프로젝트, 템플릿 전부요. 진짜 확실할 때만 누르세요!


3. 프로젝트로 노트 정리하기 (/api/projects)

내 프로젝트 목록 보기

GET /api/projects
Authorization: Bearer {토큰}

이렇게 오죠:

[
    {
        "id": 1,
        "name": "개인 공부",
        "user": {
            "id": 1,
            "username": "coolguy123",
            "email": "cool@example.com",
            "provider": "local"
        }
    },
    {
        "id": 2,
        "name": "회사 업무",
        "user": { ... }
    }
]

새 프로젝트 만들기

POST /api/projects
Authorization: Bearer {토큰}
Content-Type: application/json

{
    "name": "사이드 프로젝트"
}

프로젝트 지우기

DELETE /api/projects/1
Authorization: Bearer {토큰}

참고: 프로젝트 지워도 노트는 안 지워져요! 노트들은 '미분류'로 이동해요. 안심하세요 😊


4. 노트 쓰기! (/api/entries)

여기가 제일 중요한 부분이에요!

노트 하나 작성하기

파일도 첨부할 수 있어서 multipart/form-data로 보내야 해요.

POST /api/entries
Authorization: Bearer {토큰}
Content-Type: multipart/form-data

entry: {
    "title": "오늘 배운 것",
    "content": "<p>Spring Boot 재미있다!</p>",
    "researcher": "나",
    "tags": ["개발", "공부"]
}
projectId: 1
file: [파일 선택]

내 노트 보기

전체 노트:

GET /api/entries?projectId=all

프로젝트별로 보기:

GET /api/entries?projectId=1

정리 안 된 노트들:

GET /api/entries?projectId=uncategorized

검색하기:

GET /api/entries?search=Spring

검색하면 제목, 내용, 작성자, 태그 전부 다 찾아줘요!

노트 자세히 보기

GET /api/entries/5
Authorization: Bearer {토큰}

노트 수정하기

PUT /api/entries/5
Authorization: Bearer {토큰}
Content-Type: multipart/form-data

entry: {
    "title": "오늘 배운 것 (수정)",
    "content": "<p>React도 재미있다!</p>",
    "researcher": "나",
    "tags": ["개발", "완료"]
}
projectId: 2
file: [새 파일]

꿀팁: 수정하면 이전 버전이 자동으로 저장돼요! 나중에 복구할 수 있어요 👍

노트 지우기

DELETE /api/entries/5
Authorization: Bearer {토큰}

에디터에 이미지 넣기

글 쓰다가 이미지 바로 넣고 싶을 때:

POST /api/entries/images
Authorization: Bearer {토큰}
Content-Type: multipart/form-data

image: [이미지 파일]

그러면 URL을 줘요:

{
    "url": "/uploads/images/abc123.jpg"
}

이걸 에디터에 넣으면 끝!


5. 실수해도 괜찮아! 버전 관리 기능

이거 만들면서 제일 뿌듯했어요 ㅎㅎ

이전 버전들 보기

GET /api/entries/5/versions
Authorization: Bearer {토큰}

이렇게 나와요:

[
    {
        "id": 1,
        "title": "첫 번째 버전",
        "content": "<p>처음 쓴 내용</p>",
        "researcher": "나",
        "tags": ["개발"],
        "versionTimestamp": "2024-01-15T10:30:00"
    },
    {
        "id": 2,
        "title": "두 번째 버전",
        "content": "<p>수정한 내용</p>",
        "researcher": "나",
        "tags": ["개발", "수정"],
        "versionTimestamp": "2024-01-16T14:20:00"
    }
]

예전 버전으로 되돌리기

POST /api/entries/5/versions/1/restore
Authorization: Bearer {토큰}

안심 포인트: 복구하기 전에 지금 상태도 버전으로 저장해요. 완전 안전!


6. 템플릿으로 편하게! (/api/templates)

똑같은 형식을 계속 쓸 때 편해요.

내 템플릿 보기

GET /api/templates
Authorization: Bearer {토큰}

템플릿 만들기

POST /api/templates
Authorization: Bearer {토큰}
Content-Type: application/json

{
    "name": "회의록",
    "content": "<h1>회의록</h1><p>날짜: </p><p>참석자: </p><p>안건: </p>"
}

템플릿 지우기

DELETE /api/templates/1
Authorization: Bearer {토큰}

만들면서 배운 것들 📚

JWT는 편한데 조심해야 해요

JWT는 서버에 저장 안 해도 돼서 좋은데, 클라이언트에서 잘 관리해야 해요. 지금은 LocalStorage에 저장했는데, 나중에 보안 강화하려면 HttpOnly 쿠키 쓰는 게 나을 것 같아요.

파일 업로드는 생각보다 간단!

처음엔 복잡할 줄 알았는데, Spring Boot의 @RequestPart 쓰니까 생각보다 쉽더라고요. JSON이랑 파일을 같이 보내는 것도 어렵지 않았어요!

버전 관리는 데이터베이스 설계가 중요!

처음엔 어떻게 만들지 고민 많이 했어요. 결국 EntryVersion 테이블을 따로 만들었는데, 나중에 보니 이게 정답이더라고요.

검색 기능, 생각보다 중요해요

노트가 많아지니까 검색이 진짜 필요하더라고요. 지금은 데이터베이스에서 바로 검색하는데, 나중에 Elasticsearch 같은 거 써보고 싶어요.


이제 뭘 만들까요? 🚀

LogLy 만들면서 정말 많이 배웠어요. 이제 추가하고 싶은 기능들:

  • 🔍 더 강력한 검색: Elasticsearch 도입해보기
  • 📱 모바일 최적화: 핸드폰에서도 편하게
  • 🤝 공유 기능: 친구들이랑 노트 같이 보기
  • 🎨 다크모드: 눈 편하게!
  • 📊 대시보드: 내가 얼마나 열심히 쓰는지 보기
  • 🔔 알림 기능: 중요한 노트 놓치지 않게

혹시 "이런 기능도 있으면 좋겠어요!" 하는 게 있으면 댓글로 알려주세요! 🙏


마무리하며

긴 글 읽어주셔서 정말 감사해요! 😊

처음에는 "그냥 메모장 하나 만들자" 했는데, 하다 보니까 이것저것 넣고 싶어져서 여기까지 왔네요 ㅎㅎ

코드가 궁금하신 분들은 댓글 남겨주세요. GitHub에 올릴지 고민 중이에요!

다음에는 프론트엔드 개발기도 한번 써볼게요. React로 UI 만드는 것도 재미있더라고요!

그럼 다음에 또 만나요! 👋

반응형
반응형

안녕하세요! 👋

요즘 메모장 앱이 너무 많아서 어떤 걸 써야 할지 모르겠더라고요. 그래서 생각했습니다. "내가 직접 만들면 되지 않을까?" 😅

이렇게 시작된 프로젝트가 바로 LogLy입니다!

개인적으로 쓰려고 만들었는데, 생각보다 재미있어서 이렇게 개발 과정을 공유해보려고 해요.


LogLy가 뭐냐면요?

간단히 말하면 나만의 똑똑한 노트 앱이에요. 그냥 메모만 쓰는 게 아니라 이런 것들이 가능합니다:

  • 📝 노트 쓰고, 수정하고, 삭제하고 (기본 중의 기본!)
  • 📁 프로젝트별로 노트 정리하기
  • 📎 파일도 첨부할 수 있어요 (이미지, 문서 등등)
  • 🎨 자주 쓰는 형식은 템플릿으로 저장
  • ⏱️ 실수로 지워도 괜찮아요! 버전 관리 기능이 있거든요
  • 🔍 검색도 당연히 됩니다

처음엔 간단하게 만들려고 했는데... 하나하나 추가하다 보니까 이렇게 됐네요 ㅎㅎ


어떤 기술로 만들었나요?

백엔드는 Spring Boot로!

사실 처음엔 Node.js도 고민했는데, Spring Boot를 선택한 이유가 있어요:

  • 안정적이에요: 이미 많은 기업에서 쓰고 있으니까 믿을 수 있죠
  • 개발이 빨라요: Spring Boot가 알아서 설정을 많이 해줘서 편해요
  • 자료가 많아요: 막히면 구글링하면 다 나와요 👍

주요 기술 스택:

  • 언어: Java (역시 자바는 안정적이에요)
  • 빌드 도구: Gradle (Maven보다 빠르고 좋더라고요)
  • 데이터베이스: MariaDB (무료고 MySQL이랑 호환돼서 선택!)
  • 인증: JWT (요즘 대세죠)
  • 소셜 로그인: Google OAuth2 (구글 계정으로 로그인!)

프론트엔드는 React.js로!

요즘 프론트엔드는 React 아니면 안 되죠! (물론 다른 것도 좋지만...)

  • 언어: JavaScript (TypeScript는 나중에...)
  • 패키지 매니저: npm
  • 스타일링: CSS + Bootstrap (디자이너가 아니라서... 😅)

React 쓰니까 컴포넌트 재활용하기 좋고, 화면 업데이트도 빠르고 좋더라고요!

로그인은 어떻게 하나요?

귀찮은 거 싫어하는 분들 많잖아요? 그래서 두 가지 방법을 준비했어요:

1. 그냥 일반 로그인

  • 아이디랑 비밀번호로 가입하면 끝!
  • JWT 토큰으로 보안도 챙겼어요

2. 구글 계정으로 간편 로그인

  • 구글 계정 있으시면 클릭 한 번이면 끝
  • 귀찮은 회원가입 과정 생략!

개인적으로는 구글 로그인이 편해서 저도 그걸로 쓰고 있어요 ㅋㅋ

JWT 쓰니까 서버 부담도 줄고, API 만들기도 편하더라고요. 나중에 모바일 앱 만들 때도 같은 API 쓸 수 있을 것 같아요!

파일도 올릴 수 있어요!

노트 쓰다 보면 이미지나 파일 첨부하고 싶을 때 있잖아요? 그래서 이것도 만들었어요:

  • 노트에 파일 첨부: 각 노트당 파일 하나씩 첨부 가능
  • 에디터에 이미지 넣기: 글 쓰면서 이미지 바로바로 넣을 수 있어요
  • 서버에 안전하게 저장: 파일 잃어버릴 걱정 없어요!

특히 에디터에서 이미지 바로 넣는 기능이 편해요. 복사-붙여넣기처럼 간단하게!

다음 편 예고 🎬

이번 편에서는 LogLy가 어떤 프로젝트인지 소개해드렸어요!

다음 편에서는 좀 더 기술적인 얘기를 해볼게요:

  • API는 어떻게 설계했는지
  • 회원가입/로그인은 어떻게 구현했는지
  • 노트 CRUD는 어떻게 만들었는지
  • 버전 관리 기능은 어떻게 동작하는지

코드 예제랑 함께 자세히 설명해드릴 예정이니까 기대해주세요! 😊

반응형
반응형
💻 프로젝트 미리보기

 

 

서울로 이사하고 회사에 입사한 지 4개월이 지나서 OJT를 하면서 업무를 배우고 시간을 보내다가 여유가 생겼다. 주말에 사이드 프로젝트를 만들어보자고 마음먹고, 웹소켓을 이용한 채팅 프로그램을 개발했다.

스프링 부트를 취업 전에 사용하여 여러 프로젝트를 진행했었는데, 회사에 입사한 이후로는 잘 사용하지 않아서 잊어버린 부분이 많았다.

우선 회사를 다니면서 혼자서 사이드 프로젝트를 진행하는 일이 보통 힘든일이 아니였다...
회사에서도 프로젝트를 진행하는데 퇴근하고 집에 오면 바로 침대행이기 때문.....

 

실시간 채팅 애플리케이션
 
 
우선, 프로젝트 구성은 대충 이런식으로 구성하였다.
프로젝트 루트
│
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── example
│   │   │           └── chatapp
│   │   │               ├── config
│   │   │               │   └── WebSocketConfig.java
│   │   │               │   └── WebConfig.java
│   │   │               ├── controller
│   │   │               │   └── ChatController.java
│   │   │               └── service
│   │   │                   └── UserService.java
│   │   └── resources
│   │       └── application.properties
│   │
│   └── webapp
│       └── WEB-INF
│           └── jsp
│               └── chat.jsp
│               └── username.jsp

먼저 사용자가 닉네임을 입력하는 부분인 username.jsp를 만들고 채팅방을 입장하게 되면 chat.jsp가 실행된다.

 

WebSocket은 취업 준비를 하면서 팀 프로젝트에서 사용해본 경험이 있었지만, 그때는 웹소켓에 대한 이해가 부족한 상태에서 사용한 느낌이었다. 이번에는 웹소켓에 대해 깊이 공부하고 구현해보았다.

 


기술 스택

  • 백엔드: Spring Boot, WebSocket
  • 프론트엔드: JSP, JavaScript, CSS
 

주요 기능

  • 실시간 채팅: 사용자는 메시지를 실시간으로 주고받을 수 있다.
  • 사용자 목록: 현재 접속 중인 사용자 목록을 표시한다.
  • 이모지 선택기: 사용자가 메시지 입력 시 이모지를 쉽게 선택할 수 있는 기능을 제공한다. 이모지는 카테고리로 구분되어 있어 사용자가 원하는 이모지를 쉽게 찾을 수 있다.
  • 사용자 입장/퇴장 알림: 사용자가 채팅방에 입장하거나 퇴장할 때 시스템 메시지를 통해 알림을 제공한다.
 

주요 파일 및 구성

  • ChatController.java: 사용자 목록 관리 및 메시지 전송 로직을 처리한다.
  • chat.jsp: 사용자 인터페이스를 구성하며, 이모지 선택기와 사용자 목록을 포함한다.

UI/UX 개선

 

이모지 선택기의 디자인을 개선하여 사용자 경험을 향상시켰다. 이모지를 카테고리별로 구분하고, 마우스 오버 시 확대되는 효과를 추가하여 시각적으로 더 매력적으로 만들었다.

 

의존성 설정

plugins {
    id 'java'
    id 'org.springframework.boot' version '3.3.4'
    id 'io.spring.dependency-management' version '1.1.6'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'

java {
    toolchain {
        languageVersion = JavaLanguageVersion.of(17)
    }
}

configurations {
    compileOnly {
        extendsFrom annotationProcessor
    }
}

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-websocket'
    implementation 'org.springframework.boot:spring-boot-starter-data-jdbc'
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
    implementation 'org.springframework.boot:spring-boot-starter-web'

    // JSP Support Dependencies
    implementation group: 'org.glassfish.web', name: 'jakarta.servlet.jsp.jstl', version: '2.0.0'
    implementation 'jakarta.servlet.jsp:jakarta.servlet.jsp-api:3.0.0'
    implementation 'jakarta.servlet:jakarta.servlet-api:6.0.0'
    implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'
    implementation 'org.apache.taglibs.taglib-standard-impl:1.2.5'
    implementation 'org.apache.taglibs.taglib-standard-spec:1.2.5'

    compileOnly 'org.projectlombok:lombok'
    developmentOnly 'org.springframework.boot:spring-boot-devtools'
    runtimeOnly 'mysql:mysql-connector-java:8.0.33'  // MySQL Connector
    annotationProcessor 'org.projectlombok:lombok'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
tasks.named('test') {
    useJUnitPlatform()
}

 

WebConfig.java 파일만들기

/**
 * WebConfig 클래스는 Spring MVC의 CORS(Cross-Origin Resource Sharing) 설정을 구성합니다.
 * CORS는 다른 출처의 웹 페이지가 현재 출처의 리소스에 접근할 수 있도록 허용하는 메커니즘입니다.
 * 이 설정을 통해 특정 출처에서 오는 요청을 허용하고, 허용할 HTTP 메서드 및 자격 증명 사용 여부를 지정합니다.
 */
package com.example.chatproject.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // CORS 설정 추가
        registry.addMapping("/chat/**") // "/chat/**" 경로에 대한 CORS 설정
                .allowedOrigins("http://localhost:8080", "http://localhost:3000") // 허용할 출처
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 허용할 HTTP 메서드
                .allowCredentials(true); // 자격 증명(쿠키, 인증 헤더 등) 허용
    }
}

 

 

WebSocketConfig.java 파일만들기

/**
 * WebSocketConfig 클래스는 Spring WebSocket 메시지 브로커를 설정하는 클래스이다.
 * 이 클래스에서는 STOMP 프로토콜을 사용하여 웹소켓 엔드포인트를 등록하고,
 * 메시지 브로커를 구성하여 클라이언트와 서버 간의 실시간 메시지 전송을 가능하게 한다.
 */
package com.example.chatproject.config;

import com.example.chatproject.listener.CustomHttpSessionInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;


@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // STOMP 엔드포인트 등록
        registry.addEndpoint("/ws") // 웹소켓 엔드포인트를 "/ws"로 설정
                .setAllowedOriginPatterns("http://localhost:8080") // 허용할 출처를 설정
                .withSockJS() // SockJS를 사용하여 브라우저 호환성 제공
                .setInterceptors(new CustomHttpSessionInterceptor()); // 커스텀 HTTP 세션 인터셉터 사용
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // 메시지 브로커 설정
        config.enableSimpleBroker("/topic"); // 메시지 브로커가 "/topic" 경로를 구독하도록 설정
        config.setApplicationDestinationPrefixes("/app"); // 애플리케이션 목적지의 접두사를 "/app"으로 설정
    }
}

 

이 파일들은 각각 CORS 설정과 WebSocket 메시지 브로커 설정을 담당한다.

이 두 설정 파일은 Spring Boot 기반의 웹 애플리케이션에서 중요한 역할을 한다. 

WebConfig.java는 CORS 설정을 통해 외부 출처의 요청을 허용하고, WebSocketConfig.java는 실시간 메시지 전송을 위한 웹소켓 설정을 담당한다. 이러한 설정을 통해 사용자에게 더 나은 경험을 제공할 수 있다.

 

 

 

반응형
반응형

🔹 프로젝트 기간 : 2024.03.11 ~ 2024.03.26 (총 12일)

🔹 Git : https://github.com/CyberUniversityProject/CyberUnivProject

 

GitHub - CyberUniversityProject/CyberUnivProject

Contribute to CyberUniversityProject/CyberUnivProject development by creating an account on GitHub.

github.com

🔹 PDF : https://drive.google.com/file/d/1htnvcKOFypTGXwcoz49CLErcanUjPlBU/view?usp=sharing

 

학사관리시스템 프로젝트(CU)_ 보고서

 

drive.google.com

 

 

 

🧑🏻‍💻 프로젝트 선정배경

  • 다양한 프로젝트를 거치면서 ERP 시스템에 대해 팀원 모두가 관심을 가지게 됨
  • 대학생 시절에 사용해본 학사관리시스템을 주제로 선정하여 개발 프로젝트 진행

🧑🏻‍💻 역할

  • 프로젝트 팀장 역할
  • 사이트 기본 디자인 구현
  • 로그인/로그아웃/ID/PW 찾기
  • 교직원 기능
    1. 학생/교수 명단조회
    2. 학생/교수/교직원 등록
    3. 등록금 고지서 발송
    4. 휴학 처리
    5. 수강신청기간 설정
    6. 강의 등록
    7. 단대별 등록금 설정
  • 학생 기능
    1. 수강신청
  • 커뮤니티
  • 캠퍼스맵

 

 

🛠️ 기술 스택

🔻 Front-End

  • HTML5
  • CSS3
  • JavaScript (1.16.1)
  • JQuery (3.6.4)
  • bootstrap (4.6.2)

🔻 Back-End

  • JAVA 17
  • SpringBoot (3.1.8)
  • MyBatis
  • JSP
  • MySQL (8.0.26)
  • lombok
  • Apache Tomcat(10.1.19)

🔻 API

  • 포트원 결제 API
  • 나이스 식단 API
  • 카카오맵 API

🔻 Collaboration

  • Git
  • GitHub Desktop
  • Discord
  • Notion
  • Slack

 

📖 전체 기능 둘러보기

https://youtu.be/G59X8qBfSrg?si=2Mh7UqbNjgkcKI10

 

 

 

📖 주요 담당 기능

🔹 아이디/비밀번호 찾기

  • 이름과 이메일 그리고 계정 유형을 선택하여 해당하는 유저가 있는 경우 아이디 찾기 결과를 보여줌
  • 비밀번호 찾기는 이름과 (아이디 학번(사번)) 이메일을 입력하여 임시비밀번호를 발급하는 형태
  • 일치하는 회원정보가 있다면 임시비밀번호 발급, 임시발급된 비밀번호를 입력하여 로그인

🔹 학생, 교수 명단조회 + 검색기능

https://youtu.be/BP67nSln-aM?si=QIcM-G5nhwsaGnXs

  • 등록된 학생, 교수들의 목록을 확인할 수 있음
  • 학과 번호 또는 학번 검색 기능

🔹 학생, 교수, 교직원 등록

https://youtu.be/IpTRca01Cik?si=ivBCTcWhuPlCB4w4

  • 유저 별 계정 생성 시 직책에 따라 DB에 생성됨
  • 학생의 경우 사진 이미지 업로드 가능

🔹 등록금 고지서 전송

https://youtu.be/gXovzd8V_iM?si=73zckNHgbrlzuV71

  • 교직원이 등록금 고지서 전송 버튼을 누르면 이번 학기까지 재학중인 학생들에게 등록금 고지서 발송
  • 고지서가 생성되었다는 알림창이 뜨게 되며 학생 로그인 > 등록금 납부 조회페이지에서 확인 가능

🔹 휴학처리

https://youtu.be/tcoHlq5n7w4?si=WrRWcdRZMKSM3WkH

  • 학생이 휴학신청에서 휴학원 양식을 작성 후 신청을 하면 교직원이 신청 내역을 확인할 수 있음
  • 교직원이 신청 내역을 확인 후 휴학 승인 또는 반려처리

🔷 수강신청기간 설정

https://youtu.be/exCFo_XNTDU?si=QKVM3C98vyE5K6JJ

  • 기본값은 수강신청기간 종료
  • 예비수강신청 > 수강신청 > 종료 순으로 변경

https://youtu.be/pU1mA1hMil8

[예비 수강신청]

  • 대상 : 현재 학기에 재학 상태가 되는 학생
  • 신청/취소할 때마다 강의 현재 인원 변경
  • 신청 강의의 정원 초과 가능 (찜하기 기능과 유사)
  • 최대 수강 가능 학점 초과 불가능 (최대 18학점)
  • 신청자 본인의 시간표와 겹치는 강의 신청 불가능

[수강신청]

  • 정원 ≥ 신청인원인 강의 : 예비 수강 신청 내역이 수강 신청 내역으로 자동으로 이월됨
  • 정원 < 신청인원인 강의 : 신청 인원이 0명으로 초기화되며, 학생이 직접 신청해야 함
  • 예비 수강 신청 내역이 있는 경우, 신청이 용이하도록 수강 신청 탭에 가장 먼저 출력됨
  • 수강신청 대상 : 현재 학기에 재학 상태가 되는 학생
  • 신청/취소할 때마다 강의 현재 인원 변경
  • 신청 강의의 정원 초과 불가능
  • 최대 수강 가능 학점 초과 불가능 (최대 18학점)
  • 신청자 본인의 시간표와 겹치는 강의 신청 불가능
  • 페이징 처리, 검색 기능
반응형
반응형

이번 팀 프로젝트는 도서관 플랫폼으로 주제를 정하고 사이트 이름은 북허브(BookHub)로 정하였습니다.

작업기간은 2024.02.13 ~ 2024.03.05 (총 15일) 소요되었습니다.

 

이번 프로젝트에서는 저는 부팀장역할을 맡아 사이트 전체 프론트 디자인 부분과

발표 PPT 제작 및

관리자페이지, 포인트 결제 기능부분을 맡아 개발을 진행하였습니다.

 

💡 프로젝트 선정 배경

  • 환경을 생각한 도서 서비스 → 책 생산시 낭비되는 종이를 막기 위해 책 공유 기능을 넣어 자원낭비를 최소화
  • 모임을 개설하여 서로의 의견을 주고 받을 수 있는 모임 서비스
  • 포인트 결제 수수료, 배너광고 수익을 통한 사이트 수익창출
  • 도서 검색, 대출/반납, 도서관 내 포인트를 이용한 베이커리, PC 사용 서비스

 

💡 내가 개발한 기능

  • 메인페이지 전체 디자인
  • 포트원 결제 API를 이용한 포인트상품 결제/환불 기능 구현(사이트 수익모델)
  • 관리자페이지 광고배너 등록/수정/삭제
  • 관리자페이지 상품 등록/수정/삭제

 

💡 기능 개발하면서 힘들었던점

  • 결제 환불 부분에서 직접 api를 만들면서 첫번째 환불 내역은 취소가 되는데 두번째...n번째 내역은 취소가 안되는 오류가 발생해 밤 낮으로 고민하고 검색하고 할 수 있는 방법을 찾은 결과 정상적으로 환불요청 구현을 완료하여서 뿌듯하였음

 

🛠️ 기술 스택

🔻 Front-End

  • HTML5
  • CSS3
  • JavaScript : 1.16.1
  • JQuery : 3.6.4
  • bootstrap : 4.6.2

🔻 Back-End

  • SpringBoot 3.1.8
  • JAVA 17
  • MySQL 8.0.26
  • lombok
  • Apache Tomcat : 9.0
  • MyBatis
  • JSP

🔻 API

  • OAuth2.0 (구글, 카카오, 네이버)
  • 포트원 결제 API
  • 카카오 주소 API

🔻 Collaboration

  • Git
  • GitBash
  • Discode
  • Notion

💡 전체 기능 시연 영상

📖 주요 담당 기능 미리보기

🔷 메인페이지

  • 웹 페이지를 개발하면서 가장 공들인 부분
  • 사이트 로고도 직접제작하여 실제로 운영하는 사이트 처럼 디자인함

 

🔷 포트원 API를 이용한 포인트 상품 결제

  • 저번 게임쇼핑몰 프로젝트에는 토스페이먼츠 api를 이용하였는데 확실히 포트원 api가 사용하기가 쉬웠다.

 

🔷 포트원 API를 이용한 포인트 상품 환불

  • 가장 시간을 많이 쓴 작업
  • 환불로직에 대한 이해가 부족해서 몇번이고 공식문서를 정독해서 완성한 기능이자 애착이 가는 기능

 

🔷 관리자 페이지 배너 등록

  • 수익 모델을 생각하다가, 배너 광고 클릭시 클릭 횟수마다 금액을 지정하면 괜찮을거 같아서 만든 기능
  • 한번 클릭시마다 550원이 광고수익으로 넘어간다.

 

 

🔷 관리자 페이지 상품 등록

  • 위에서 봤던 포인트 결제 상품들을 등록하는 관리자 페이지 부분
  • BookHub 포인트 상품을 추가하는 관리자 페이지 부분
  • 관리자 계정으로 로그인 후 포인트 관리 → 포인트 상품 등록 페이지에서 해당상품명, 포인트, 실제 결제될 가격 입력 후 등록
  • 메인 페이지 포인트 구매하기 페이지에 실제 등록된 상품이 보이게 구현

 

✅  총평

  • 1차 프로젝트이다 보니 부족한 부분이 많았고, 구현했다가 시간 부족으로 폐기한 기능들이 많아 아쉬웠다.
  • 팀원들끼리 남아서 서로 피드백하고 회의하면서 작업하는게 작업 퀄리티를 높힐 수 있어서 좋았다.
반응형
반응형

사이트 바로가기 : http://playhost.shop

 

이번 23년 11월 15일부터 12월 8일 대략 3주간 팀 프로젝트를 진행하였습니다.

 

팀원은 총 6명이 진행하였으며 팀당 2명씩 역할 분담을 나누어 사이트를 제작하였습니다.

 


📝 프로젝트 선정배경

프로젝트 선정배경은 프로젝트 주제 선정과정에서 강의 시간에 배웠던 API를 활용한 사이트을 제작하기로 회의 때 이야기를 하였고, 그 중 게임 소프트웨어 유통망 사이트인 Steam(스팀)의 API를 활용한 게임 판매 사이트를 제작하기로 결정하였습니다.

 


📝 프로젝트 목표

저희 playhost 사이트의 목표는 다음과 같습니다.

  • 직관적이고 한눈에 보기 쉬운 사이트 일 것
  • 스팀 API를 활용한 다양한 게임 조회 기능 구현
  • 사이트 관리자가 직접 판매할 게임을 추가/삭제할 수 있는 기능 구현
  • 포인트 구매 기능 구현

제작 기간은 23년 11월 15일 ~ 12월 08일 약 3주간 진행되었습니다.


📝 담당 역할

저는 사이트 프론트 + 백엔드 부분을 담당하였고 상세 기능은 아래와 같이 기능을 구현하였습니다.

  • 구매한 게임을 담을 수 있는 장바구니 기능 구현
  • 토스페이먼츠 API를 활용한 결제 시스템 구현
  • 게임 뉴스를 게시할 수 있는 News 페이지 기능 구현
  • 팀원 소개 및 사이트 소개 페이지 구현

📝 프로젝트에 사용한 기술

프로젝트에서 사용한 기술은 다음과 같습니다.

🔶 개발 툴

1) intellij IDEA - 백앤드 부분

2) VSCode - 프론트앤드 부분

3) Github - 형상관리

4) Oracle DB - DB

5) 배포 - 아마존 AWS


📝 시스템 구성도


📝 ERD Table

 


📝 로그인 기능

 

먼저 사이트 로그인 기능입니다.

로그인은 이메일, 비밀번호를 입력하여 로그인을 할 수 있습니다.

회원가입의 경우 이름, 이메일, 비밀번호, 비밀번호 재입력을 통해 회원가입을 합니다.

 

회원가입을 진행하면 회원가입시 입력한 이메일로 인증번호가 전송되며 전송된 인증번호를 입력하여 회원가입을 진행합니다.

 

비밀번호 찾기 기능은 가입시 입력한 이메일을 입력하면 이메일 주소로 인증번호가 전송됩니다.

그 인증번호를 입력하여 일치하면 비밀번호 변경 부분으로 넘어가게 되고, 새로운 비밀번호로 변경이 가능합니다.

 

소셜로그인 부분입니다.

 

소셜로그인은 구글, 카카오로 로그인이 가능하며 별도 회원가입 없이 구글과 카카오에 로그인이 되어있으면 다이렉트로 로그인이 진행됩니다.

 


📝 메인페이지

메인페이지는 사이트 처음 접속시 보이는 페이지입니다.

  • 추천게임 목록 부분은 관리자 페이지에서 해당 상품에 이미지를 업로드 한 경우 메인 화면에 표시가 됩니다.
  • 금주의 할인 게임은 관리자 페이지에서 판매 제품에 할인율을 적용할 경우 할인 게임 탭 부분에 표시가 됩니다.


📝 상세 조회

상세 조회 페이지부분은 게임 태그별(액션, 어드벤처 등...) 게임 목록들을 보여주는 페이지입니다.

쇼핑몰로 치면 카테고리별로 상품을 보여주는 부분이라 생각하시면 됩니다.


📝 게임 상세조회

게임 목록에서 해당 게임을 선택하면 보이는 페이지 입니다.

화면 상단에는 썸네일 이미지 + 타이틀이름 + 리뷰 상태를 표시하며

화면 중간 부분에는 게임 스크린샷, 게임 트레일러 영상 등이 표시됩니다.

스크롤을 내리면 게임 설명부분과 사이드바 부분으로 나누어져 있으며 장바구니 추가 버튼이 존재합니다.

 

해당 게임에 대한 리뷰도 작성이 가능합니다. 단, 게임을 구매한 경우에만 리뷰 작성이 가능하도록 설정되어 있습니다.


📝 장바구니 기능

 

장바구니 부분은 게임 상세조회에서 장바구니 탭 부분에 금액이 적힌 버튼을 누르게 되면 장바구니에 추가가 됩니다.

 

장바구니 페이지로 넘어가게 되면 해당 장바구니에 담긴 개수 표시와 장바구니에 담긴 제품 상세 표시, 주문하기 버튼으로 구성되어 있습니다.

 


📝 결제 페이지

위의 장바구니 페이지에서 결제하기 버튼을 누르면 결제 페이지로 넘어가게 됩니다.

 

결제 페이지부분은

유저의 주문내역 부분과 포인트 영역, 토스페이먼츠 API를 이용한 결제 선택창이 표시됩니다.

토스페이먼츠 API를 이용하여 실제 결제는 되지 않고 테스트 결제가 되어 결제가 진행됩니다.

 

구매완료시 해당 계정 이메일로 구매내역을 전송합니다.

 

 

 

다음시간에는 그 외 기능을 포스팅하겠습니다~🙋‍♂️

반응형

+ Recent posts