2022 01 10 월요일 공부 (Sub PJT 1 웹 기술 명세서 : 프로젝트 개요, 개발 환경 설정, 프로젝트 디렉토리 구조)

1. 프로젝트 개요

 

소개

 

본 프로젝트에서는 WebRTC를 활용한 그룹 화상 회의 기능을 갖춘 "그룹 비디오 컨퍼런스 서비스"를 개발할 것입니다.

 

프로젝트를 진행하면서 단순히 토이 프로젝트를 완성하는 수준에 머물지 않고 제공된 스켈레톤을 활용하여 명세서의 과제를 수행해 나갈뿐만 아니라 서비스 관점에서 다양한 기능들을 구현하면서 실무에서 활용 가능할 정도의 결과묵을 최대한 완성해 보는 것을 목표로 해야 합니다.

 

스켈레톤 프로젝트는 크게 Front-End 영역과 Back-End 영역으로 구성되어 있으며, Front-End 영역은 Vue(ver.3)를 기반으로 하는 반응형 SPA(Single Page Application)로 구현할 것입니다. Back-End 영역은 Java 와 Spring Boot 를 기본으로 WebSocket, WebRTC 프로토콜을 활용하여 필요 기능을 구현하고 Rest API 를 적용할 것입니다. 또한  WebRTC 프로토콜을 활용하여 필요 기능을 구현하고 Rest API 를 적용할 것입니다. 또한, WebRTC 프로토콜을 효과적으로 사용하기 위해, Media Server 를 설치하여 별도의 스트리밍 서버로 활용할 것을 권장합니다.

 

Sub PJT1 부터 sub PJT 3 에 이르기까지 프로젝트 진행에 필요한 기본 개념과 더불어 각 단계별 구현에 필요한 소프트웨어 요구사항 명세서를 포함하고 있으므로 본 명세서를 참고하여 팀원들과 구체적인 목표를 계획하고 역할을 분담하여 진행하는 등 효과적인 팀 프로젝트를 위한 노력을 해 나가시길 바랍니다.

 

진행

 

목표한 프로젝트를 완성해 나가기 위해 Sub PJT 는 아래와 같이 세 단계로 나누어 진행하게 될 것입니다. 세부적인 내용과 일정을 확인하여, 프로젝트 진행에 참고하시기 바랍니다.

 

Sub PJT 1 (Week 1)

1) 개발 환경 설정

2) 프로젝트 디렉토리 구조 설명

3) Sub 1 진행에 필요한 주요 개념 정리

4) 회원가입, 로그인 기능 구현

 

Sub PJT 2 (Week 2-3)

1) 방 정보에 대한 CRUD API 기능 구현

2) 방 목록 조회/검색/정렬 기능 구현

3) 방 상세 보기 기능 구현

4) 방 정보 편집 기능 구현

5) WebRTC를 위한 미디어 서버 설정

6) Dockerizing 및 배포 가이드

 

Sub PJT 3 (Week 4-6)

1) 그룹 화상 컨퍼런스 콜 기능 구현

2) 그룹 채팅 기능 구현

3) 심화 기능 구현

 

목표

 

본 공통 프로젝트의 목표는 다음과 같습니다. 아래 목표들을 참고하여, 각 개인 및 팀의 추가 목표나 구체적인 사항을 검토해보시기 바랍니다.

 

1) 웹 서비스 개발에 대한 기본적인 이해

2) Vue 웹 Front-end 어플리케이션 개발 스킬 습득

3) 반응형 웹 Front-end 개발 스킬 습득

4) Back-end 애플리케이션 개발 스킬 습득

5) WebRTC 기술을 활용한 프로젝트 개발 경험

6) Git 과 Jira 를 활용한 이슈 트래킹 등의 개발 실무 경험

 

팀이 하나가 되어 소프트웨어 요구사항 명세어의 기능 개발을 완료해나가는 과정을 진행하면서 기본적인 웹 어플리케이션 개발 스킬을 습득하고, 창의적인 아이디어를 통해 심화된 기능을 직접 개발하여, 다른 팀 보다 더 수준 높고 완성도 있는 프로젝트 결과에 이를 수 있기를 기대하겠습니다.

 

 

 

2. 개발 환경 설정

 

백엔드 / 프론트엔드

 

Java Open JDK 1.8.x (https://github.com/ojdkbuild/ojdkbuild) Zulu-8

MySQL 5.7.x (https://downloads.mysql.com/archives/installer/) 8.0.26

- root 961224 로 applicaton.properties 설정 해 주었을 때 jdbc 에러가 나서 그냥 ssafy ssafy 로 설정해주었다.

- ssafy_web_db 데이터베이스를 만들어 준 후에 jdbc 에러가 나지 않았다.

jdbc 어쩌구 에러 내용

 

Caused by: javax.persistence.PersistenceException: [PersistenceUnit: default] Unable to build Hibernate SessionFactory; nested exception is org.hibernate.exception.GenericJDBCException: Unable to open JDBC Connection for DDL execution

Eclipse IDE 2020-06 R Package Enterprise Java Developers 2018-09, Spring Tool 3, Lombok

- 백앤드 개발 시 IntelliJ를 사용할 예정이여서 STS 부분을 건너뛰었다.
IntelliJ IDEA Community

- build.gradle 수정

- applicaton.properties 수정

- clone 한 스켈레톤 코드에서, 디렉토리 중 백앤드가 backend-java 로 이름이 설정되어 있어서 빌드?하는 과정에서 뭐가 안맞았던 것 같고 페이지를 표시할 수 없다고 떴는데 backend-java 디렉토리 이름을 backend로 바꿔주니까 웹 브라우저에서 localhost:8080/ 을 호출했을 때 아래와 같이 화면이 출력되는 것을 확인할 수 있었다.

- localhost:8080/swagger-ui/ 를 호출 했을 때 Swagger UI 실행도 잘 된다.

Node JS

VS Code

- npm install, npm run serve 를 한 후 postcss received undefined instead of css string 에러가 자꾸 떠서 구박사님께 물어보았더니 npm install node-sass, npm rebuild node-sass 이 명령어를 추가적으로 써줘야 한다고 알려주었다. 아래와 같이 화면이 출력되는 것을 확인할 수 있었다.

프론트엔드 빌드

생성경로 : /backend/main/resources/dist

 

통합 빌드 및 실행

 

프론트엔드 프로젝트와 백엔드 프로젝트 전체를 통합 빌드

클론한 레파지토리의 /backend 경로에서 다음 명령어 실행

backend/ 경로에서 gradlew clean build 명령어 실행

backend/build/libs 경로에 .jar 파일이 생성

통합 빌드 된 Spring Boot Applicaton 구동을 위해, java -jar ssafy-web-project-1.0-SNAPSHOT.jar 명령어 실행

프로젝트 구동 정상적으로 진행 확인

웹 브라우저로 localhost:8080/ 에 접속하여 서비스 구동 확인

 

 

3. 프로젝트 디렉토리 구조

 

/backend

 

 

/frontend

 

또잉 src/common/lib/ 에 명세서에 나타난 대로 있어야 하는 axois.js, element-plus.js, i18n.js, store.js, vue-router.js 가 없는뎅?