[개발 완료] SQL 교육 사이트 - SQL Practice

<실행 영상>

https://youtu.be/QXeQ2FfAfCQ

 

 

 

Github 링크 (소스 코드)

https://github.com/2022-Summer-Team-Project/SQL-Learning-Web-Application

GitHub - 2022-Summer-Team-Project/SQL-Learning-Web-Application

 

 

프로젝트 소개

• 프로젝트 이름 : SQL 교육 사이트 - SQL Practice
• 프로젝트 설명 : SQL 입문자들에게 SQL의 기본 문법부터 다중 테이블 연산까지의 내용을 교육시켜주고 학습 테스트 및 Q&A 게시판을 제공한다.
• 기술 스택 : SpringBoot, JPA Hibernate, Spring AOP, Validation, OpenAPI(JSON), Spring Security(PasswordEncoder), MyBatis, DB(MySQL, H2), Ajax, Spring Test, JUnit, Front-end(mustache, bootstrap, html, css, js)
• 진행 인원 및 작업 기간 : 4인, 2022.7.08 ~ 2023.01.11 (~8월 학습 기간, 9월~ 프로그래밍 기간)
• 사용 에디터 : IntelliJ
• 사용 프로젝트 : Spring Maven
• 버전 관리 툴 : Git

 

 

 

본인 담당 작업

• 프로젝트 팀장을 맡아 팀원들이 프로젝트에 잘 참여할 수 있게끔 1~2주 간격으로 모든 기술에 대한 강의 및 회의를 진행 
• 팀의 작업 효율을 위해 최적화, 샘플 코드, 템플릿(기반 코드) 제공
• 학습 테스트 채점 기능 베이스 로직 제공

※ 강의 및 회의 기록 : https://kimcoder.tistory.com/category/%EA%B0%9C%EB%B0%9C%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/%5B%ED%8C%80%5D%20Web%20-%20SQL%20%EA%B5%90%EC%9C%A1%20%EC%82%AC%EC%9D%B4%ED%8A%B8

'개발 프로젝트/[팀] Web - SQL 교육 사이트' 카테고리의 글 목록

 

 

 

프로젝트 내용

<개요>

• 웹 애플리케이션 구성
• UI 구성
• 동작 부가 설명
• 최적화 내용

 

1. 웹 애플리케이션 구성

(글씨가 선명하지 않다면 이미지 클릭)

 

 

 

2. UI 구성

1) Home

- nav를 통한 메뉴의 이동

- 동적인 슬라이드쇼를 지원하는 carousel을 사용하여 웹 페이지의 개요를 보여줌

[이미지 1] Home

 

2) 학습하기

- 총 17개의 학습 주제로 구성

[이미지 2] 리스트 상단

 

[이미지 3] 리스트 하단

 

[이미지 4] 학습하기 Unit 1

 

 

3) 테스트

- 총 17개의 학습 테스트로 구성

- "/test"에서 해결 여부에 따른 [해결] 및 [미해결] 표시

- 해결한 테스트 개수를 "/test"의 우측 유저 정보창에 표시

[이미지 5] 학습 테스트 리스트

 

[이미지 6] 학습 테스트 Unit 12 문제

 

- 문제 제출 시 바로 아래에 결과 표시

[이미지 7] 학습 테스트 Unit 12 채점 결과

 

 

4) Q/A 게시판 & 버그 문의 게시판

- 하단에 최대 5개의 페이지 인덱스 표시, 한 페이지 당 10개의 글 표시

- 글 수정/삭제, 댓글 수정/삭제 기능 (댓글의 경우 ajax로 동작)

 

 

5) 자료실

- DB 쿼리 변환 사이트, 프로그래머스 SQL 고득점 Kit 등 SQL 학습에 도움이 될 만한 자료를 공유

 

 

 

3. 동작 부가 설명

1) 학습 테스트 채점 로직

- 사용자에게 받은 주관식(SQL) 답안의 경우에는 금지 키워드(DROP, DELETE, UPDATE 등)가 포함되어 있는지를 검증하고, 사용자가 작성한 SQL문을 Mybatis으로 실행하여 가져온 결과를 채점함

- 상세 채점 로직은 "[팀 프로젝트] SQL 교육 사이트 - 채점 로직 상세 설명" 포스팅에 작성함

https://kimcoder.tistory.com/557

[팀 프로젝트] SQL 교육 사이트 - 채점 로직 상세 설명

- 채점 결과 반영 : 채점 메소드의 반환을 AOP가 감지(@AfterReturning)하여 채점 결과 객체(TestResult)를 통해 유저의 테스트 현황 정보를 DB에 업데이트

 

 

2) OpenAPI 호출

- 데이터 샘플은 OpenAPI로 수집함

- RestTemplate을 통해 다른 서버에 있는 OpenAPI를 가져오는 방법과 csv파일로 다운받아서 파싱하는 방법을 사용함. 데이터를 가져오는 동작은 서버 실행 시 Listener을 통해 최초 1회만 실행됨

 

 

3) 게시판

- Jpa Auditing을 통해 게시글 엔티티의 생성과 변경 시간을 감지하여 시간 정보를 필드에 저장

- 댓글의 생성과 삭제는 Ajax로 동작

- 글 엔티티와 댓글 엔티티는 지연로딩 방식의 JPA 연관관계 매핑으로 관리

 

 

4) 계정

- Spring Security의 PasswordEncoder를 통해 사용자의 비밀번호를 암호화한 상태로 DB에 저장하고, 로그인 시 암호 복호화 후 검증

- Bean Validation(@Pattern, @Size)와 정규표현식을 이용한 패스워드, 이메일 값 검증

- 로그인한 유저에 대한 객체는 HttpSession에 최대 7200초동안 저장

- mustache에서 session에 있는 객체를 참조할 수 있도록 아래 설정을 application.properties에 추가

spring.mustache.expose-session-attributes=true

 

 

 

 

4. 최적화 내용

- 모든 JPA 연관관계 매핑에 지연로딩(Lazy) 방식 적용

※ 지연 로딩으로 설정된 필드를 강제로 초기화해야 할 때는 EagerService라는 서비스 계층에서 트랜잭션을 열어 Hibernate.initializer 메소드로 해결

- 중복되는 채점 결과 반영 로직은 AOP를 통해 처리

- 중복되는 샘플 데이터 수집 로직은 별도의 Template을 만들어 처리

- 중복되는 mustache 코드는 파일을 분리하여 다른 파일에서 분리된 파일을 참조하도록 구성

 

 

 

프로젝트 진행 과정

[20220708 회의]

- 주제 선정

- 설문 진행 및 결과 취합

- 실력 테스트 진행 및 결과 취합

- 팀 과제 : OpenAPI 질의 응답 10문제

https://kimcoder.tistory.com/476

 

[20220712 회의]

- 실습 환경 준비 : IntelliJ와 Git 연동

- 팀 과제 : Git 질의 응답 6문제

https://kimcoder.tistory.com/478

 

[20220718 회의]

- Git & 인코딩 이슈 해결

- 팀 과제 : 당일 이슈 & SQL 질의 응답 3문제

https://kimcoder.tistory.com/482

 

[20220724 회의]

- 개괄적 역할분담 및 기술 사용 회의 완료

- 추후 계획 안내

https://kimcoder.tistory.com/484

 

[20220801 강의]

- AOP, JPA 강의

https://kimcoder.tistory.com/489

 

[20220806 강의]

- OpenAPI 강의

- 팀 과제 : Programmers SQL 문제 풀이, 데이터 샘플 자바 객체화

https://kimcoder.tistory.com/494

 

[20220823 강의]

- 2개의 DB 적용법

https://kimcoder.tistory.com/502

 

[20220912 강의]

- Listener, Validation, Mybatis 강의

- 팀 과제 : 당일 설명한 로직 서술

https://kimcoder.tistory.com/516

 

[20220917 강의 및 회의]

- @Primary, 오브젝트 검증, 이미지 삽입 강의

- UI 설계 회의

https://kimcoder.tistory.com/522

 

[20220925 회의]

- 중반 작업 소개

https://kimcoder.tistory.com/529

 

[20221009 회의]

- 중반 작업 역할 분담 완료

- 작업별 지시사항 안내

https://kimcoder.tistory.com/539

 

[20221103 강의]

- 채점 로직 상세 설명

https://kimcoder.tistory.com/557

 

[20221212 회의]

- 후반 작업 안내 및 역할 분담 완료

https://kimcoder.tistory.com/565

 

[20221227 강의]

- 테스트 코드 강의

https://kimcoder.tistory.com/569

 

★ [20230111 프로젝트 종료] ★

 

 

 

프로젝트를 마치며...

처음에 팀원을 모집할 때는 실력보다는 의지가 강해보이는 인원을 모집했다. 예상대로 첫 회의에서 실력 테스트를 했을 때 팀원들끼리의 실력은 천차만별이었으며 팀장인 내가 프로젝트에 참여할 수 있는 수준까지 끌어 올려야 했다. 그래서 첫 2달 동안은 학습 기간을 가지게 되었고 강의와 과제물을 통해 프로젝트에 필요한 기술들을 모두 전수했다. 결과적으로 팀원 모두가 잘 따라와주었고 큰 무리 없이 프로젝트를 진행할 수 있었다. 나를 믿고 열심히 따라와준 팀원에게도 너무 감사한 마음이다. 팀장을 하면서 책임감이 많이 들었던 만큼 부담감도 꽤 느껴졌지만 팀원들의 고맙다는 말과 수고했다는 말로 힘든 마음이 모두 녹아들곤 했다. 배우기만 하고 프로젝트에 실제 응용해본 적 없었던 기술들을 이번 프로젝트에 많이 활용해볼 수 있었기에 얻은게 아주 많은 프로젝트였던 것 같다.