[팀 프로젝트] 이상형 월드컵 프로젝트

프로젝트 깃허브 링크

• https://github.com/LeeKangHo1/projectwc

<Project 개요>

• 월드컵과 같이 토너먼트 방식으로 자신이 선호하는 것을 선택하여 최종적으로 이상형을 찾는 게임을 제공하는 웹페이지

프로그램 주요 기능

• 회원 관련(로그인, 로그아웃, 회원 가입, 정보 수정 등)

• 월드컵 생성, 플레이, 랭킹

<담당 업무>

• 월드컵 목록(메인 화면), 내가 만든 월드컵 화면

• 로그인 여부에 따라 상단 navigation bar 메뉴 동적 변화

• 월드컵 랭킹에서 댓글 기능

• 회원 정보 수정 화면

<문제 해결>

1. DB 설계

1. 초기 DB 설계 과정에서 월드컵 경기 정보 엔티티와 월드컵 플레이 정보를 저장하는 엔티티 간의 상호 의존 관계가 발생했습니다.

2. 상호 의존 관계 해결을 위해 중간 테이블 생성 등 방법을 찾아가는 과정입니다.

[이상형 월드컵 프로젝트 문제 해결] DB 설계 중 발생한 상호 의존 관계 해결 - devleekangho

프로젝트이야기

https://inblog.ai/devleekangho/%EC%9D%B4%EC%83%81%ED%98%95-%EC%9B%94%EB%93%9C%EC%BB%B5-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0-db-%EC%84%A4%EA%B3%84-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%98%A4%EB%8A%94-%EC%A0%95%EB%B3%B4%EB%A5%BC-%EA%B2%80%EC%A6%9D%ED%95%B4%EC%84%9C-%EB%B0%B1%EC%84%9C%EB%B2%84%EC%97%90-%EB%B0%98%EC%98%81-39380

• DB 설계 완료 후 ERD

2. 메인화면 상단 navigation bar 관련

1. 서버에서 사용자 정보를 비동기로 받기 위해 코드를 작성하던 중 발생한 일입니다.

2. 받아온 사용자 정보를 가지고 자바스크립트로 조건문을 통해 노출되는 메뉴가 달라지게 하려고 했으나 적용이 되지 않았습니다.

3. 자바스크립트 코드를 이리저리 수정해도 결국 잘되지 않아 SSR 방식으로 선회하는 등 꽤 시간을 소비했으나 알고 보니 간단한 문제였습니다.

4. fetch로 받은 사용자 정보는 response.body에 있었는데 response에서 가져오는 바람에 생긴 일이었습니다.

[이상형 월드컵 프로젝트 문제 해결] 비동기로 유저 정보 받다가 발생한 문제 - devleekangho

프로젝트이야기

https://inblog.ai/devleekangho/%EC%9D%B4%EC%83%81%ED%98%95-%EC%9B%94%EB%93%9C%EC%BB%B5-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%A1%9C-%EC%9C%A0%EC%A0%80-%EC%A0%95%EB%B3%B4-%EB%B0%9B%EB%8B%A4%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%9C-%EB%AC%B8%EC%A0%9C-39382

3. 댓글 관련

1. Repository delete 쿼리문을 작성한 다음 테스트 과정에서 댓글이 삭제되지 않는 과정에서 일어난 문제입니다.

2. JPA 라이브러리를 사용 중이었고 영속성 컨텍스트의 캐싱에 대해 머리로는 이해하고 있었으나 실제 코드에는 적용하지 했습니다.

3. 하이버네이트의 쿼리문 출력과 System.out.println의 중요성을 다시금 깨닫게 되었습니다.

[이상형 월드컵 프로젝트 문제 해결] Comment 삭제 테스트 중 문제 - 영속성 컨텍스트 관련 - devleekangho

프로젝트이야기

https://inblog.ai/devleekangho/%EC%9D%B4%EC%83%81%ED%98%95-%EC%9B%94%EB%93%9C%EC%BB%B5-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0-comment-%EC%82%AD%EC%A0%9C-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A4%91-%EB%AC%B8%EC%A0%9C-%EC%98%81%EC%86%8D%EC%84%B1-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8-%EA%B4%80%EB%A0%A8-39381

4. 깃 커밋 관련

1. 커밋 rebase, push 및 pull request 과정에서 발생한 일입니다.

2. push 후 pull request를 통해 merge를 진행했는데 중복 커밋이 발생했습니다.

[이상형 월드컵 프로젝트 문제 해결] Pull Request 실행 후 커밋 메세지 중복 발생 - devleekangho

프로젝트이야기

https://inblog.ai/devleekangho/%EC%9D%B4%EC%83%81%ED%98%95-%EC%9B%94%EB%93%9C%EC%BB%B5-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0-pull-request-%EC%8B%A4%ED%96%89-%ED%9B%84-%EC%BB%A4%EB%B0%8B-%EB%A9%94%EC%84%B8%EC%A7%80-%EC%A4%91%EB%B3%B5-%EB%B0%9C%EC%83%9D-39383

<사용 기술>

• Git 협업

[이상형 월드컵 프로젝트 사용 기술] Git 활용 협업 - devleekangho

프로젝트이야기

https://inblog.ai/devleekangho/%EC%9D%B4%EC%83%81%ED%98%95-%EC%9B%94%EB%93%9C%EC%BB%B5-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%82%AC%EC%9A%A9-%EA%B8%B0%EC%88%A0-git-%ED%99%9C%EC%9A%A9-%ED%98%91%EC%97%85-39368

• 메인 화면 디자인

[기술 정리] 17. Bootstrap 5로 HTML 문서 작성하는 방법 - devleekangho

기술정리

https://inblog.ai/devleekangho/36904

• 월드컵 목록 출력 - 페이지네이션

[이상형 월드컵 프로젝트 사용 기술] Pagination - devleekangho

프로젝트이야기

https://inblog.ai/devleekangho/%EC%9D%B4%EC%83%81%ED%98%95-%EC%9B%94%EB%93%9C%EC%BB%B5-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%82%AC%EC%9A%A9-%EA%B8%B0%EC%88%A0-pagination-39376

• 로그인 여부에 따라 상단 navigation bar 메뉴 동적 변화

[이상형 월드컵 프로젝트 사용 기술] Mustache 에서 조건문 - devleekangho

프로젝트이야기

https://inblog.ai/devleekangho/%EC%9D%B4%EC%83%81%ED%98%95-%EC%9B%94%EB%93%9C%EC%BB%B5-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%82%AC%EC%9A%A9-%EA%B8%B0%EC%88%A0-mustache-%EC%97%90%EC%84%9C-%EC%A1%B0%EA%B1%B4%EB%AC%B8-39378

• 로그인 테스트

[이상형 월드컵 프로젝트 사용 기술] 시큐리티 로그인, 로그아웃 설정 - devleekangho

프로젝트이야기

https://inblog.ai/devleekangho/%EC%9D%B4%EC%83%81%ED%98%95-%EC%9B%94%EB%93%9C%EC%BB%B5-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%82%AC%EC%9A%A9-%EA%B8%B0%EC%88%A0-%EC%8B%9C%ED%81%90%EB%A6%AC%ED%8B%B0-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%A1%9C%EA%B7%B8%EC%95%84%EC%9B%83-%EC%84%A4%EC%A0%95-39379

• 월드컵 검색

[이상형 월드컵 프로젝트 사용 기술] 검색어 입력 후 엔터키로 검색 - devleekangho

프로젝트이야기

https://inblog.ai/devleekangho/%EC%9D%B4%EC%83%81%ED%98%95-%EC%9B%94%EB%93%9C%EC%BB%B5-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%82%AC%EC%9A%A9-%EA%B8%B0%EC%88%A0-%EA%B2%80%EC%83%89%EC%96%B4-%EC%9E%85%EB%A0%A5-%ED%9B%84-%EC%97%94%ED%84%B0%ED%82%A4%EB%A1%9C-%EA%B2%80%EC%83%89-39377