[TIL] PreProject 진행, 팀장일지 (22.12.15 ~ 23.01.02)

모든 교육이 끝나고 프리 프로젝트를 시작했다.
프로젝트에 대한 기대가 너무 컸고, 얼른 내가 알고있는 기술들을
사용해보면서 구현을 해보고 싶었다.

그런 마음에서 그런지 이번 프리프로젝트에서는 무조건 팀장을 해야겠다고
생각했었고, 프론트엔드 쪽에서 진행되는 상황이나 팀적으로
어떻게 프로세스를 진행해야 원할할지에 대한 고민을 많이해보고 싶었다.

프리프로젝트가 끝나고는 메인프로젝트에서는 기능개발의
중점을 두어 팀원으로 새로 모르는 기술에 대한 탐구와 적용에 대한
고민을 주로 해볼 것 같다.

---

다행히 팀원들에 동의를 받아
이번 프로젝트는 내가 팀장으로 진행하게 되었다.
부담감은 물론있다. 하지만 그만큼 열심히해서 잘할 자신도 있다.

그때그때 감정과 팀장으로서의 역할을 제대로 수행하고있는지?
프로젝트 진행상황과 여러가지를 적어가보려고한다.

2022.12.15 (목)

팀 빌딩과 시작

팀 빌딩이 시작되는 날이었다.
기술적인 능력은 부족하지만, 어필을 통해 팀장을 해보려한다.
(그렇다고 프로세스를 아예 모르는것도 아니라고 생각한다 ㅎ;)

Frontend 3명, Backend 3명
이렇게 인원 배정을 받았고 모두 처음만나 너무나도 어색한상황..

이런 어색함을 참지 못하 나는 자체적으로 사회자가 되어버렸다 ㅋㅋ
사회자가 된김에 팀장을 정하는 시간에 하고싶다는 의사를 표했고
우리 팀원분들은 대부분이 내향적인 분들이 많아, 자연스럽게 하고싶었던 내가 팀장이되었다.

지난 회사생활 7년간 가장 중요했던 의사소통 관련해서
외향적인 내가 내향적인분들과 소통하는건 항상 쉽지는 않았다.
이해를 해주고 기다려줘야하는 부분도 많았고, 원하는 의견의 표출에 소극적이었던 것을
많이 경험했어서, 여러 충돌이 있었던 경험도 있다.

이러한 부분을 잘 조율해서 팀원의 성격을 먼저 천천히 파악해보고
그에 맞는 소통방식을 찾아 프로젝트를 진행해보려한다.

협업에 대한 셋팅

처음 만나고 진행할 일은 어느 플랫폼을 이용해서 소통할지 였다.
Slack,ZEP,Discord,Google Meet,Zoom등 여러가지 얘기가 나왔는데
우선은 프로젝트에 대한 집중이 중요다는 팀원들의 만장일치로 Discord를 사용하기로 했다.

그리고 기본적으로 notion을 이용해 팀 프로젝트에 대한 정리를 하기로 했다.
예를들어 컨벤션에 대한 정리라든가, 일정에 대한 정보, 회의록 등.

위와 같은식으로 하나씩 정리해갈 예정이다.

팀명은 37℃ 라는 이름으로 정했다. 큰 의미는 없었다 배정받은 조가 37조였고
사람의 정상체온인 37도만큼만 하자라는 의미를 담았다.

그리고 디스코드 방을 개설했다.
전체적인 소통과 공지, 회의는 디스코드로 진행할 예정이고
해당 내용들을 notion에 정리하는 느낌으로하려한다.

차가운 분위기를 바꾸기 위해서 디스코드 팀방 아이콘을 바꾸면 그래도
기분이 살아날 것 같아서 간단한 그림을 그려 팀방 아이콘을 꾸몄다.

정말 아무런 의미도없지만 디스코드 입장할때 한번씩 보면 그래도
상징적인 것을 두면 단합이 더이루어지지 않을까?라는 소망이였다.

그리고 Discord 기능 중 웹후크라는 기능이 있다.
GitHub와 연동해서 우리가 프로젝트로 사용하는 Repository의
Push가 이루어질 때마다 Discord에 알림을 주는 봇을 만들었다.

혹시나 누군가 실수로 Push를 계속한다든가, 아직 초보자인 우리들이
어떻게 작업을 할지 모르기 때문에 최소한 알림이라도 오도록 추가해두었다.

이렇게 첫날은 지나갔고
내일 부터는 모두 Github 협업에 대한 개인적인 공부시간을 가지는 날이다.
정확히 일정은 다음주 월요일 오후부터 시작될 것 같다.

2022.12.16 (금)

GitHub 관련 협업 지식습득

오늘은 코드스테이츠측에서 제공하는 GitHub 협업 프로세스에 대한 공부를 하는 날이다.
나는 코스과정중 스터디원들이랑 친해져 같이 미리 협업 연습을 여러번 했었다.
그래서 어느정도 익숙했고 지금 팀원들이랑 합을 맞춰보는게 중요하다고 생각했다.

Project 칸반과 issue를 잘 이용하는 것을 목적으로 둘 것이고
브랜치 전략을 정해 어떻게 진행할지 의견을 맞춰보는게 핵심이다.
다음주 월요일에 어떤 브랜치 전략으로 해볼지 얘기해보고 최종으로 정해보려한다.
(Git관련 컨벤션도 마찬가지)

issue를 라벨할 수 있게 우선 파트별로 간단하게 나누었다.

그리고 브랜치 전략은 여러 사이트를 돌아디니다 보면서

내가 직접 그려가지고 이렇게 작업해보면 어떨까? 하는 생각이 들었다.
백엔드와 프론트엔드가 다른 브랜치에서 개발하다가
통합 릴리즈 브랜치에 merge를 하여 확인후에 최종적으로 main 브랜치에
통합하는 방식으로 진행하는 방식이다.

사실 이렇게 하는 방법이 맞는지는 모르겠다.
워낙 작은 규모의 프로젝트이고 어떻게 적용을 해야된다는 답을 찾지는 못했지만
우선은 이렇게 먼저 그려보고 팀원과 의견을 나눠보면 어떨가싶었다.

모두가 Github을 이용한 협업을 처음해보기 때문에
합을 마춰보면 어떨가하여 오늘 저녁 7시에 가능한분들만
위 브랜치 전략대로 연습하는 시간을 가지면 어떨까하여 공지를 했었다.

첫번째 모임과 GitHub 협업 연습

갑작스러운 모임 요청이었고, 가능하신분들만 연락을 달라고 조심스럽게 얘기를 했는데
6명중 5분이 참여해주셨다. 정말이지 너무 감사했다.
어떻게 보면 비공식적으로 모두가 만나서 처음 합을 맞춰보는 과정이었다.

결과는 대만족.
오늘 처음으로 같이 얘기해보면서 어떻게 할지?
순서를 정하고 퍼즐맞추듯이 진행을 해보았는데
너무 합이 잘맞게 진행을 했고, 저녁늦은시간까지 다들 지친기색없이
배움에 재미에빠져서 몰두하다보니 늦은시간까지 계속 작업을 했다. ㅎ

위있는 전략을 적용하기전에
main, develop, feat 브랜치로만 구성해 각자 개발해보면서
PR 보내고, Merge도 진행하면서 테스트를 했다.

처음에 살짝 삐걱대긴 했지만 어느정도 모두 감을 익히는데는 충분했다.
아직 Git 컨벤션 관련해 정의한 것이 없기때문에
이름은 막지으면서 스터디를 했지만 다음주 월요일 부터는
FM으로 이름을 정하고 진행하기로 얘기를 마무리했다.

갑작스러운 요청에도 다들 모여서 이렇게 연습을 할 수 있었다는 것에
너무 팀원들에게 감사했고 처음으로 맞춰보는 합이 잘맞아서 시작이 좋은 것 같다.

시작이 반이라는데 이미 반 이상을 넘어온 것 같은 느낌이다.

2022.12.18 (일)

다음주부터 본격적인 협업이 시작될 것 같으니
미리 준비해서 팀원들과 소통일 잘되어야할 것 같아
미리 여러 컨벤션을 어떻게 사용할지?
정리가 필요할 것 같아 주말을 이용해 정리를 해보았다.

정확히 어떻게 해야하는 것이 맞는 것인지?를 가늠하지 못해
여러 선배기수의 프로젝트를 탐방하기 시작했다.

어느정도 비스한 형태안에서 컨벤션을 사용하는 것을 보았고
첫번째 프로젝트인 만큼 가장 많이 사용하는 컨벤션 느낌으로 팀원에게 제안해보려한다.

GitHub 관련 정리

첫번째로 Git Commit 컨벤션이다.

[feat] : 새로운 기능을 추가할 경우
[fix] : 버그를 고친 경우
[design] : CSS 등 사용자 UI 디자인 변경
[!breaking change] : 커다란 API 변경의 경우
[!hotfix] : 치명적인 버그를 고쳐야하는 경우
[style] : 코드 포맷변경, 세미콜론 누락, 코드수정이 없는 경우.
[refactor] : 프로덕션 코드 리펙토링할 경우
[comment] : 필요한 주석 추가 및 변경
[docs] : 문서를 수정한 경우
[test] : 테스 추가 테스트 리펙토링
[chore] : 빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우
[rename] : 파일 혹은 폴더명을 수정하거나 옮기는 작업만 하는 경우
[remove] : 파일을 삭제하는 작업만 수행한 경우

커밋에 대한 규칙이 필요하기 때문에 앞에 이러한 형식으로
작업 내용에 대한 구분을 하는 것이 좋을 것 같다고 생각했다.

두번째로는 Git Branch 컨벤션이다.

main : 메인 배포 브랜치 
release : 릴리즈 브랜치
dev_front : 프론트엔드 브랜치
dev_back : 백엔드 브랜치
feat_프로젝약자+번호 : 기능개발 브랜치 ex) feat_STC001

금요일에 팀원들 거의 전부가 브랜치 전략으로 내가 구성한 전략을
사용하기로 거의 채택?이 되어진 느낌이었다.
그래서 해당 브랜치 전략으로 Git Branch 컨벤션을 만들었다.
아마 기능 개발구현 feat에 대한 내용만 잘 통일시키면 큰 문제는 없어 보인다.

세번째로는 GitHub Issue 컨벤션이다.
우리는 GitHub를 이용해 칸반보드를 관리할 생각이다.
Issue를 이용해 라벨을 붙여 작업내용에 대한 내용과 정리를 할 수 있어
칸반보드에 사용하기 유용하다고 판단해 Issue 제목 작성에 대한 컨벤션이 필요해 보였다.

[FE] 해야할 작업 제목 or 이슈 제목 ex) [FE] 회원가입 화면 구현
[BE] 해야할 작업 제목 or 이슈 제목 ex) [BE] OAuth2 인증 구현

제목은 프론트엔드와 벡엔드 작업으로 구분하려한다.

상세 내용은 작성자의 이름 라벨과 어떠한 작업인지 표시해주는 라벨을
붙여서 issue에 대한 내용을 관리하려고 한다.

대략 이러한 느낌으로 관리를 진행해보려한다.
우선 나의 생각으로만 준비한 것이기 때문에, 월요일에 팀원들의 의견을 들어보고
더 여러가지 방향으로 컨벤션관리하는 것을 적용해보려한다.

Java 컨벤션 정리

마지막으로 Java 컨벤션 관련이다.
클라이언트 컨벤션관련해서는 프론트엔드 측에 우선 얘기는 해두었다.
아무래도 내가 프론트엔드쪽 지식이 풍부하지 않다보니… 프론트엔드 인원에서
우선 정의를 해보고 같이 의논해보는게 좋을 것 같다.

Java 컨벤션 관련해서는 자바 컨벤션 정리 사이트를 참조해서
적어 보았다. 우선 간단한 컨벤션들만 먼저 정리해두었다.

그리고 알아보니까 컨벤션관련해서
SonarLint라는 좋은 Plugin이 있는 것 같아
팀원들끼리 같이 사용해보면 어떨까? 라는 생각이 들어 정리했다.

한번 사용해보니 콘솔로 위치를 알려주고 노란색으로 밑줄도 그어줘서
처음에 컨벤션이 헷갈리는 우리들에게는 정말 좋은 플러그인이 아닐까?
라는 생각을 해봤다.

이렇게 주말에 잠깐 간단하게 컨벤션을 정리했고
월요일에 다같이 회의할때 차질없는 진행을 하고싶어 미리 정리를 하였다.
어느정도 정리하고나니까 마음이 편안.. 이제 다음주에 회의를 통해
컨벤션을 확정시키고, 협업에 대한 룰을 각자 지키면서 어플리케이션을 작업하는
일만 남은 것 같아 어느정도 속이 후련해졌다.

2022.12.19 (월)

팀원한분이 오늘 작업과정에 참가하질 못하셨다.
여러가지 이유로 공부하기가 힘든 상황이라고 하셨다.
코드스테이츠측이랑 상담을 진행 중이라고 연락이 오셨다.

프론트엔드분이셨고, 만약 하차를하게 되신다면 프론트측에는
2명으로 진행해야 부담이 가는 상황이 발생했다…ㅠ

우선 최소한의 작업으로 참가해서 가능하시다면 같이 프로젝트를 마무리하자고는
얘기를 드려보았지만, 아무래도 본인의 선택이기 때문에 우리는 팀원분의
선택을 기다리면서 여러작업들을 미리해야할 것 같다.

프로젝트를 위한 문서 작성

오늘부터는 프로젝트를 위한 사용자 요구사항 정의서를 작성해야한다.
정의서와 API 명세서, 테이블 명세서를 작성해야한다.

한번씩 배웠지만 실제로 적용해보려니까 어떻게 해야할지 손이 안떨어졌다.
우리의 주제는 Stackoverflow 클론코딩이였다.

해당 사이트를 먼저 분석하고, 어떤 기능들이 있을지 정의서에 작성을 먼저했다.

정의서 작성은 위의 큰 토클을 주제로 만들어
작은단위로 쪼개 가면서 정의서 작업을 진행했다.

안에 작은 내용들을 상세하게 적지는 않았고
우선은 요구사항명, 요구사항 설명, 중요도, 비고 등에 대한 내용을 위주로 적어 나갔다.

예를들면 아래와 같은 형식으로 적어 나갔다.

• 설명: 사용자의 정보를 입력받아 회원 가입을 진행한다.
• 회원가입 정보: 이름/ e-mail / password / (Captcha Todo)
• 비고
  • 구글, 깃허브, 페이스북 로그인과 관련한 OAuth 2.0로 구현한다.(Todo)

상세한 정의서 작업은 수요일까지 진행 될 것 같다.

그리고 백엔드 팀원끼리 저녁에 모여
테이블 명세서 관련해서 어떻게 작업을 하는게 좋을지?
생각해보고 연관관계를 ERD를 통해 그려보는 시간을 가졌다.

테이블 안에있에 있는 내용은 아직 제대로 정하지 않았지만
연관관계 맵핑에 집중해서 그려보았다.

팀원분들 2분과 저녁 4시간동안 머리를 써가며 그렸는데
확신도 없고, 이게 맞는지 안맞는지에 대한? 여부도 판단하기 너무 힘들다.

저녁까지 시간을 계속 사용해서 공부를 해야할 필요성을 느꼈다.
정말 알면알수록 공부할게 너무 많아져서 일분일초가 부족한 느낌이 든다.

2022.12.20 (화)

오늘은 사용자 정의서 작성을 완성하고
프론트엔드는 화면 정의서 작성과
백엔드는 테이블 명세서, API 명세서를 만들기로 했다.

팀원들과 얘기를 맞춰 화요일,수요일 이렇게 이틀은 문서작업에
힘을 써보기로했다. 어느정도 우리도 작성하는 법에 익숙해져야하고
처음에 체계를 잡 갖춰놓고 충분히 토론해가며 정리하다보면
프로그램을할 때 덜 뜯어고치지 않을까?라는 생각이었다.

사용자 정의서 작성

어제 노션을 통해서 크게 어떻게 사용자 정의서를 작성할지?
기능을 구분해주어서 정리를 완료했었다.

정리해둔 내용을 오늘은 엑셀 스프레드시트를 이용해 표로 정리하기로 하였다.
원래는 노션의 내용만 정리하려고 했으나, 가독성이 떨어지는 관계로
팀원들과 스프레드시트 작업을 진행했다.

적어가다보니 내용이 엄청 많아졌다.
이 내용을 짧은 프로젝트 기간안에 전부 처리할 수 있을지는 의문이다.

그래서 조금 제거하는 작업을해야할 것 같다는 생각이 들었고
프론트엔드, 백엔드에서 나머지 명세서같은걸 작업한 후에
범위가 너무 넓다 생각하면 하나씩 없애기로 얘기하였다.

아마 내용을 제거하는 작업은 내일 마무리하지 않을까 싶다.

화면 정의서 작성

사용자 정의서를 토대로 우리가 만들기로 했던 내용을
화면정의서로 만들어본 사진이다. 프론트엔드쪽에서 만들어주었고
figma라는 사이트를 이용해서 작업을 했다.

화면이 총 16개정도 나왔고, 한분이 계속 불참을 하고계셔서
2명에서 작업을해야하는 상황인데, 상당히 많은 양이 나와버려서
몇개의 작업을 선정해 보류로 우선 빼두었다.

애플리케이션의 완성을하는 것도 중요하지만
이번 프로젝트의 진정한 의미는 우리가 협업에 대한 프로세스를 익히는 것과
많은 기능을 구현하기보다는 현재 가능한한 할 수 있는 만큼의
구현의 기술을 집중해서 체득하는 것이라 생각한다.

테이블 명세서 작성

어제 정리하지 못한 테이블 연관관계 맵핑을 진행했다.
어느정도 정리가 되었고, 우선 우리가 생각한 이론대로 맵핑을 진행했는데
후에 프로그램을 작성하다가 잘못된 관계가 발견될 것 같다는 전제를 두었다.

이제 테이블에 대한 연관관계 맵핑을 정리하였으니

해당 테이블을 정리할 테이블 명세서를 작성하기로 했다.
마찬가지로 구글 스프레드시트로 진행하기로 했고

일부분만 캡처하긴했지만 아래에 우리가만든 테이블에 대한 내용을 쭉 적어내려갔다.
작성하면서 느낀건데 Type, Length 부터 Default에 어떤값이
들어가야하는지 등등… 우리가 대충은 알지만 작성하려고하니
손인 안떨어졌고 모르는 내용들이 너무 많았던 것 이다…

어떻게 하다보니 1차적으로는 작성을 완료했고
이후에 여러사람들의 레퍼런스를 보면서 틀린게 있으면 수정할 생각이다.

2022.12.21 (수)

오전 회의

오늘은 프론트엔드 쪽은 화면정의서 작성 완성과
백엔드는 API 명세서 작성을 완료하면 된다.
오전에 잠깐모여서, 오늘의 일정을 공지하고 어떻게 진행방향을 갈지
팀원과 합의를 마친다음 프론트,백엔드 각각 팀으로 나뉘어 작업하기 시작했다.

API 명세서 작성

백엔드 쪽에서는 API 명세서를 작업하기로 했다.
처음에는 테스트 코드를 작성해 Restdocs를 이용해 문서 자동화를 하려했다.
하지만 문서자동화도 좋지만 수기로 작성해보고 고민해보고 싶어 팀원들과 직접 하나씩
페이지를 보면서 작성해보기로 했다.

50%정도 작업을 완료했고 나머지는 내일 마무리 짓기로 했다.
그리고 오늘 저녁은 프로젝트 기본 셋팅과 엔티티 작업들을 진행하려한다.

프론트엔드 측 상황 정리

프론트엔드 측도 화면 정의서를 전부 작업완료했고
개발에 들어가기 시작했다. 개발을 하기전에 정리해둔
GitHub 컨벤션을 재정의했고, 브랜치도 이름을 다시 통일 시켰다.

프론트엔드 인원은 총 3명인데, 어제 얘기했던 것과 같이
현재까지 프로젝트에 대한 미참석을 하고계신 상태이다…
프론트엔드 2분에게 부하가 많이 갈 것 같고, 해당 인원분은 스킬적인 문제 때문에
코드스테이츠측과 상담을 진행 중 이다. 오늘 상담이 마무리되셔서

우선 복귀를 하셨는데, 가장 난이도가 낮은 작업 1개부터 맡기기로
프론트엔드 분들과 얘기를 정리했다. 아무래도 처음부터 끝까지
현재 계셔주신 2분이 고생을 많이 할 것 같아 걱정이다 🥲

회의록 및 정리

📢  공통

1. 사용자요구정의서 제출 완료
2. Github Repo release 브랜치 생성 완료

🖥  프론트엔드 작업

1. 화면 정의서 작성 완료
2. 칸반 보드 정리 및 마일스톤 작성 완료
3. 깃헙 dev/front 브랜치 생성 및 초기설정 완료
4. 연환 ) → feat/FE/Right Sidebar 진행시작
   혜원) → feat/FE/Header 진행시작
    

🔙  백엔드 작업

- 금일 수행사항
1. 테이블 명세서 및 ERD 작성 완료
2. API명세서 현 50% 작성 진행 중 

- 향후계획
1. 태스크에 따른 칸반 보드 정리 및 마일스톤 작성 필요
2. API명세서 명일(’22. 12. 22.) 내 작성완료 예정
3. 백엔드 프로그램 프로젝트 생성 및 기본 셋팅 진행 예정 (금일 19:30~)

금일 토의 사항

- REST API Response 더미데이터 추가 작성 및 누락된 property 확인 시 요청 요망
- User 기본이미지 표시
    - image 경로 지정은 DB에 하고 실제 이미지 파일은 AWS S3 버킷에 저장여부 토의
- 질문게시글 등록(Ask question)
    - 스택오버플로우 상 질문 작성 영역(Body)은 2개로 나눠어짐
    - 하나의 Body로 POST 할 지 두개의 Body로 나눠 POST 할지 논의

오늘 정리한 회의록이다.
하루에 17:00~18:00까지 오늘 한 것에 대한 브리핑과
백엔드,프론트엔드와 상의할 내용을 공유하기로 했다.

이렇게 3일 동안 문서만 작성했지만
이제 얼추 정리되어 뭔가 하나씩 진행되는 느낌이든다 !!

2022.12.22 (목)

오늘은 프론트엔드 백엔드 각각 파트에 맞춰서 작업을 진행하는 날이다.
오전부터 백엔드끼리 모여서 작업을 진행하기로 했다.

일정 및 TODO 리스트 정리

서로의 역할에 대한 내용을 Issue에 적어 마일스톤과 칸반보드로
일정을 관리하기로 협의를 했다. 우선 프론트 엔드쪽만 마무리하였다.

쭉 해야하는 일을 전부 정리해 Todo로 올려놓고
진행중인 것들은 In Progress에
완료한 것들은 Done에 올려 놓기로 하였다.

일정상 뒤로 미뤄놓은 기능은 Back Log에 두었다.
일찍 개발을 마친다면 진행해볼 예정이다. 프론트엔드 일정정리를 마친다음에

백엔드쪽도 API 명세서를 다시 작업을 하기 시작했다.
오전에 모든 API 명세서를 작성 완료하였고
명세서가 있으니 작업을 서로 어떤걸할지 뭔가 명확하게 나눠지는 느낌을 받았다.

내용을 보고 우선 팀원들에게 의견을 물어보고
작업을 분배해드렸다. 오후 부터는 이제 개인 코딩의 시간이고
모르는 거나, 정해야할게 있을 수 있으니 디스코드에 상주하는 룰을 세웠다. (14:00~18:00)
그리고 이제 백엔드도 일정과 역할 분담을위해 마일스톤과 칸반 보드 작업을 진행했다.

백엔드 서버 프로그래밍을 위한 기초 셋팅

API별로 서로 개입없는 엔티티를 기준으로 우선 나누었다.
아마 서로 겹치는 부분들이 많아질 수도 있을 것 같아 지속적인 소통이 필요할 것 같고

초기셋팅을 위한 프로그램을 IntelliJ 원격 연결을 이용해
작업을하기로 진행했다.

원격으로 연결한 JetBrain Client의 화면 모습이다.
3명이 동시에 접속에 코드를 수정하기도 라이브로 지켜보는 것도 가능하다.
우선 의존라이브러리 관련 설정을 마친다음에 ERD와 테이블 명세서를 바탕으로
기본적은 Entity 필드를 채우고 연관관계 맵핑을 진행했다.

연관관계 맵핑완료한다음 mysql을 로컬로 접속한다음에
ER 다이어그램을 그려주는 툴을 이용해 자동생성해 보았는데
이전에 우리가 ERD에서 설계한 모습과 동일하게 뽑혔다.

왠지모르게 우리가 설계한대로 딱 들어맞으니까 기분이 좋았고
방향성을 잘 잡고 가고있구나? 라는 느낌을 받았다 ㅎㅎ..

이렇게 오늘은 기초셋팅을 끝낸다음에
내일부터 각자의 분량을 feat 브랜치로 만들어 작업하기로했다.

회의록 및 정리

📢  공통

- 릴리즈 시 모두 git pull
- 오후 시간 14:00 ~ 18:00 내 회의방 접속 유지

🖥  프론트엔드 작업

1) Header 컴포넌트 디자인 및 레이아웃 작성 + 반응형 디자인 구현 완료    
2) All Questions 컴포넌트 작업 진행 (우측 네비게이션바 등)  
3) Sign up 페이지 레이아웃 작성 완료  
4) right sidebar 컴포넌트 레이아웃 작성 완료    
5) main page 레이아웃 작성중 (오늘 중 완료 예정)

🔙  백엔드 작업

- API 명세서 1차 작성 완료(Backlog : grey color로 표기)
- API Controller 개발관련 백엔드 업무분장 완료(Github 내 이슈 및 칸반 업데이트 완료)

2022.12.23 (금)

개인 코딩 집중 시간

오늘은 본격적으로 각자 프로그램을 하면서
API 명세서를 통해 각자 담당한 프로그램을 작성하는 날이다.

역할분담이 명확하게 나눠져서 얼추 시작하는데는 무리가 없을 것 같다.
이제 프로그램을 작성해가면서 uri 혹은 Json 안에 내용들이 조금씩 변경 될 것 같긴하다.
그래도 가이드라인이 있으니 뭔가 빨리할 것 같은 느낌이다 ㅎㅎ

GitHub Insights의 Network로 Branch 작업이 잘되는지 확인이 가능하다. 모두가 각자 역할에 맞게 작업을 진행하고 있다.

초반에 컨벤션과 브랜치 전략을 잘 정하고
연습하는 시간을 다 같이 가져가서 그런지
모두들 실수없이 작업을 잘해주고 있는 모습이다.

내가 맡은 기능 중 오늘 작업을 완료한 것은
질문 포스팅하기, 질문한 포스팅 조회, 답변 포스팅하기 이다.

위에 내용들은 우선 작업을 끝냈다.
작업하면서 태그 관련 내용도 겹쳐서 그부분 관련해서도 완료를 해버렸다.
그렇게 오늘 작업을 어느정도 끝마치고 클라이언트에서 로그인된 사용자로
게시글 포스팅, 답변 포스팅에 foreign key로 객체를 지정해줘야하는데
현재 Spring Security 부분을 프로그램하지 않아 Mock 데이터로 먼저 넣어두었다.

기본적인 Spring Security 틀을 작성하였고
나머지는 내일 마무리 해보려한다.

회의록 및 정리

📢  공통 토의사항

- 기본 유저 이미지 저장방법 검토 및 URL 전달 방식 확인 필요
- 로그인 인증 방법
    1. 유저네임, 패스워드 프→백으로 전달
    2. 백엔드 패스워드 암호화 및 백→프로 JWT토큰 전달
    3. 추후 요청시 JWT토큰 포함하여 프 →백으로 전달
    4. 백엔드 JWT토큰으로 유저 일치 판단

🖥  프론트엔드 작업

- Ask a Question 페이지 레이아웃 / 반응형 구현 완료
- 메인페이지 일부 수정 및 반응형 구현 완료
- Sign up 페이지 반응형 구현 완료
- Header 모바일 페이지 사이즈 반응형 구현 완료(버그 픽스)
- Left Nav 레이아웃 작성 중
- Footer 레이아웃 영역 확보

🔙  백엔드 작업

- API기능 구현 완료
    - 회원가입(signup)
    - 질문 게시글  작성 및 확인
    - Tags  화면 이동및 페이지네이션
    - Users 화면 이동 및 페이지네이션
    - 개인 프로필
- API기능 구현 진행
    - Spring Security 로그인 기능 및 인증 구현 중
    - Home 화면 구현 진행 예정
        
        
- 프론트 요청사항
    - Tag, User 이동 화면 내 페이지네이션 더미데이터 최대 100개 추가 요망(5~6page)

2022.12.24 (토)

Spring Security 적용

오늘 정규 코딩 시간은 끝이났고
이제 남은 API를 작성하면 되는데, 작성하기 전에
Spring Security를 먼저 작업해야겟다고 생각했다.

기본적인 메서드에 대한 권한과 인증, 인가 관련해
Spring Security + JWT 기본 뼈대를 잡아갔다.

회원 가입 -> 로그인 하였을 때, 가입된 사용자의
username과 password가 일치하면 JWT를 Header에 담아 응답해줬다.

후에 사용자가 어떤요청을 할때 request에 JWT를 담아서 보내주면
해당 정보로 우리가 어떤 사용자인지 판단하고, 인가과정을 진행한다.

PAYLOAD안에 권한과, MemberId를 넣어 두었고
sub에는 이메일 정보를 넣어놓았다. (사실 sub에 어떤걸 넣어야 잘 만든 토큰인지 아직모르겠음)
해당 memberId로 JWT가 담긴 요청이 왔을 경우 애노테이션을 커스터마이징해
받을 수 있도록 추가해줬다.

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .headers().frameOptions().sameOrigin()
                .and()
                .csrf().disable()
                .cors(Customizer.withDefaults()) // corsConfigurationSource라는 이름으로 등록된 Bean을 사용한다고 정의
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS) // 세션 정책 추가 (JWT사용으로 STATELESS로 설정)
                .and()
                .formLogin().disable() // CSR 방식사용으로 formLogin 비활성화
                .httpBasic().disable() // UsernamePasswordAuthenticationFilter 등 비활성화
                .exceptionHandling() // 예외처리 기능이 작동
                .authenticationEntryPoint(new MemberAuthenticationEntryPoint())  // 인증 실패시 처리
                .accessDeniedHandler(new MemberAccessDeniedHandler()) // 인증 실패시 처리
                .and()
                .apply(new CustomFilterConfigurer()) // 커스터마이징한 필터를 추가할 수 있음
                .and()
                .authorizeHttpRequests(authorize -> authorize
                        .antMatchers(HttpMethod.POST, "/users/**").permitAll()
                        .antMatchers(HttpMethod.GET, "/users/**").permitAll()
                        .antMatchers(HttpMethod.PATCH, "/users/**").hasRole("USER")
                        .antMatchers(HttpMethod.DELETE, "/users/**").hasRole("USER")
                        .antMatchers(HttpMethod.POST, "/questions/**").hasRole("USER")
                        .antMatchers(HttpMethod.GET, "/questions/**").permitAll()
                        .antMatchers(HttpMethod.PATCH, "/questions/**").hasRole("USER")
                        .antMatchers(HttpMethod.DELETE, "/questions/**").hasRole("USER")
                        .antMatchers(HttpMethod.POST, "/tags/**").hasRole("USER")
                        .antMatchers(HttpMethod.GET, "/tags/**").permitAll()
                        .antMatchers(HttpMethod.PATCH, "/tags/**").hasRole("USER")
                        .antMatchers(HttpMethod.DELETE, "/tags/**").hasRole("USER")
                        .antMatchers(HttpMethod.POST, "/answers/**").hasAnyRole("USER")
                        .antMatchers(HttpMethod.GET, "/answers/**").permitAll()
                        .antMatchers(HttpMethod.PATCH, "/answers/**").hasAnyRole("USER")
                        .antMatchers(HttpMethod.DELETE, "/answers/**").hasAnyRole("USER")
                        .anyRequest().permitAll()
                );
        return http.build();
    }

로그인 사용자에 맞게 권한 설정도 완료하여 테스트까지 끝 !!!

오늘은 Spring Security 작업을 다 끝낸 것만해도
너무 만족스러운 하루였고.. 직접 다시 짜보기 시작하니까 (거의 복붙이지만)
다시 머릿속에 적립이 되어지는 느낌을 받아 너무 좋았다.

2022.12.25 (일)

오늘은 크리스마스~ 🎄
오전, 점심 내내 놀다가 저녁이 되서야 작업을 해본다..

투표 기능 개발

어제 Spring Security 관련 테스트를 완료했고
오늘은 투표 기능을 전부 마무리하려한다. (게시글, 답변 투표 up,down)

@Service
@Transactional
@RequiredArgsConstructor
public class QuestionVoteService {

    private final QuestionVoteRepository questionVoteRepository;

    public void increaseVote(Member member, Question question){
        QuestionVote questionVote = findQuestionVote(member, question);

        if(questionVote.getStatus().toString().equals("UP")){
            throw new BusinessLogicException(ExceptionCode.VOTE_NOT_ALLOW);
        } else if(questionVote.getStatus().toString().equals("NONE")) {
            questionVote.setStatus(VoteStatus.UP);
        } else if(questionVote.getStatus().toString().equals("DOWN")) {
            questionVote.setStatus(VoteStatus.NONE);
        }
        question.setQuestionVoteCount(question.getQuestionVoteCount() + 1);
    }

    public void decreaseVote(Member member, Question question){
        QuestionVote questionVote = findQuestionVote(member, question);

        if(questionVote.getStatus().toString().equals("DOWN")){
            throw new BusinessLogicException(ExceptionCode.VOTE_NOT_ALLOW);
        } else if(questionVote.getStatus().toString().equals("NONE")) {
            questionVote.setStatus(VoteStatus.DOWN);
        } else if(questionVote.getStatus().toString().equals("UP")) {
            questionVote.setStatus(VoteStatus.NONE);
        }
        question.setQuestionVoteCount(question.getQuestionVoteCount() - 1);
    }

    public QuestionVote findQuestionVote(Member member, Question question){
        Optional<QuestionVote> findQuestionVote = questionVoteRepository.findByMemberAndQuestion(member, question);
        return !findQuestionVote.isPresent() ? createVote(member, question) : findQuestionVote.get();
    }

    public QuestionVote createVote(Member member, Question question){
        QuestionVote questionVote = QuestionVote.builder()
                .status(VoteStatus.NONE)
                .member(member)
                .question(question)
                .build();
        return questionVoteRepository.save(questionVote);
    }
}

서비스 로직 작성에는 그렇게 큰 어려움을 겪지는 않았다.
다만 JPA가 아직 익숙하지가 않아… 쿼리를 어떻게 작성하지? 라는
의문이 계속생겼고… 내가 원하는 엔티티의 데이터를 정리해서 가져오는 일은
그렇게 쉬운 일이 아니였다고 느꼈다…

public interface QuestionVoteRepository extends JpaRepository<QuestionVote, Long> {
    Optional<QuestionVote> findByMemberAndQuestion(Member member, Question question);
}

어떤 사용자가 눌럿는지와 어떤 질문에 눌럿는지를 확인하기 위해서
findByMemberAndQuestion으로 만들어 쿼리를 날려주었다.
두개의 객체와 동일한 데이터만 가져오고 싶었기 때문이다.

JPA관련 공부를 계속하면서… 아…
내가 제대로 이해하지 못하고 사용하는 부분이 많았구나 느끼는 하루였다.
조금더 사용에 익숙해지도록 지식습득을 계속 해야할 것 같다.

이제 게시글, 답변 삭제,편집에 대한 API 기능만 처리해주면
얼추 사용하는데 무리없이 진행이될 것 같다.
삭제할 경우에는 연관관계되어있는 부분을 모두 제거해줘야하므로
CascadeType.REMOVE에 대한 공부가 조금 필요할 것 같다는 생각이 든다.

2022.12.26 (월)

프로젝트가 어느덧 절반을 달려왔다.
이제 요번주만 작업을 하면 다음주까지 제출해야하므로
이번주부터는 정말 할일이 많아질 것 같다.

우선 배포하는 부분에 대해 … 비용이 나올 수 있어서 AWS관련 정독을 얼른 해봐야하고
테스트케이스와 유효성 검증관련된 부분은 아직 손도 못댄 상태이다.
얼른 오늘 API 개발을 마무리하고 이제 부수적인 작업들을 들어가야할 것 같다.

OAuth2 적용

저번에주 Spring Security + JWT를 이용해 인증과 인가를 구현했었다.
TODO로 미뤄두었던 OAuth2 소셜로그인을 구현해보려한다.
일전에 Github, kakao, naver 등 구현해본 경험이 있었고

미리 만들어둔 템플릿으로 어찌저찌 빠른 시간안에 구현을 하였다.

Github 로그인도 추가하고 싶지만…
이유를 모르겠지만 scope 범위에 email이 포함되지 않는
문제가 발생해… 시간을 엄청 투자했지만 진전이 없어
구글 로그인만 우선 사용하기로 결정했다. 추후 TODO로 다른 소셜 로그인 정보를 가져오는 방법을 시도해봐야겠다.

우선 구글 계정으로 로그인하면 우리 DB에 정보를 저장하도록 했다.
그리고 가입된 memberId로 어느 사용자가 사용중인지 구분하도록 판단했다.
얼추 동작 확인도 전부 잘 끝났고 실제 배포환경에서 테스트해보는 일만 남은 것 같다.

이제 오늘 저녁에는 Test 프로그램을 작성할 예정이고
Mockito를 이용해 Controller 계층만 테스트할 수 있도록 분리 후
Restdocs를 이용해 API 자동 문서화를 진행할 예정이다.

회의록 및 정리

📢  공통

1. 로그아웃 관련 브라우저에서 JWT 토큰을 삭제하는 방식으로
2. 게시글, 답변 삭제 버튼은 추가 (API는 TODO로 설계 예정)
→ 로그인된 유저에게만 버튼이 보이도록 추가.
3. 사용자 기본 이미지 관련되서 url로 처리 시도해볼 것
→ 실패할 경우 폴더 경로로 지정 예정.


진행 일정 (12.26~12.30)  
1. 12.26 : API 개발 전수 완료 예정
2. 12.27 : Testing 기능 작성, 클라이언트 API 테스트 진행 가능
3. 12.28 : AWS 배포 과정 진행
4. 12.29 ~ 12.30 : AWS 배포 및 테스팅 완료


🖥  프론트엔드 작업

1. Profile 페이지 제외 레이아웃 작성 완료
2. API 명세서를 보고 더미 데이터 작성 후 클라이언트에 반영 예정
3. Profile 페이지에서 default 까지만 작성( Edit, Delete Todo)


🔙  백엔드 작업

1. 홈화면 이동 API 작성 진행중
2. Users, Tags 화면 이동 작성 완료
3. 질문 투표, 답변 투표 기능 추가 완료
4. OAuth2 구글 로그인 인증 완료
5. 프로필 API 마무리 작업 진행중

2022.12.27 (화)

하루하루 지날때 마다 작업이 되어간다는게 체감이 더해지는 것 같다.
큰 뼈대기능은 전부 완료했고, 이제 짜잘짜잘하게 부가적인 기능과
API 유효성 검토를 계속 진행해보면 될 것 같다.

클라이언트 쪽도 2명에서 계속 작업을 하고 계시는데도
작업속도가 엄청 빠르시고, 저녁늦게까지 다들 열심히해줘서 너무 기쁘다.
사실 대학교 조별과제처럼… 어려운 팀원분들도 있을거라고 생각했지만

다행히 우리팀에는 시간약속을 어긴다거나, 일정을 공유하지 않는다거나
이런 기본적인 팀원에대한 예티켓을 안지키시는 분은 없다.
처음 프로젝트를 해보는데 이정도면 축북받은 것 아닐까라는 생각을 잠시해본다 ㅎㅎ..

테스트 프로그램 작성

이제 테스팅 프로그램을 작성하면 된다.
계층별로 팀원들이 테스트 할 수 있게, 미리 패키지 정리와 준비를 끝냈다.
기존과 동일하게 Mockito를 이용해 계층별 테스트가 가능하게
작성하고 진행중 엄청 큰 난관에 봉착했다…..

테스트 프로그램 실행히 403 Fobidden 부터.. Security 관련된 에러가
연속적으로 발생하는 현상이 생겼다.

하나해결하면 하나가 나오고… 너무 어지러운 상황속에서
새벽 4시까지 컴퓨터랑 싸우면서 어찌저찌 해결을 했다.
Spring Security 테스트 코드 작성시 설정관련해서 내가 작성한 글이고
밤새 고민해본걸 적어보긴했지만 사실 이게 맞는지에 대한 공부는 더필요해 보인다.

어찌저찌 테스트 코드 기반은 전부 완료했고
진짜 테스트 계층만 작업하면 API 문서도 자동화할 수 있다.

다행이 해결을해서 남은 팀원들이 편하게
테스트 프로그램을 작성할 수 있다는 것에,, 너무 큰 안도감이 몰려왔다.

이미지 관리를 어떻게 할지?

우선 파일 업로드 관련해서는 TODO로 넘기기로 했다.
프로필 화면에서 본인의 서진을 바꾸는 기능이고..

기본적으로 회원가입을 하면 Dummy 이미지로 셋팅이 되어진다.

몇개를 따와서 구글 드라이브에 우선 저장해놓았고
해당 URL을 회원가입할때 String 값으로 저장해두게했다.

처음에는 클라이언트쪽의 경로를 저장하려고 했지만
어떤 방법이 맞는지?에 대한 판단이 서질 않아서
우선 구글 OAuth2 인증시에 가져오는 이미지도 url이기 때문에
사진에 대한 정보는 이미지 주소로 통일하기로 프론트 쪽과 얘기를 마쳤다.

이후에 사진관리, 파일 관리에 대한 공부를 계속 해봐야할 것 같다…

회의록 및 정리

👥  참여 인원 : 이재혁, 이동우, 박종식, 김연환, 김혜원, 박평환

📢  공통

1. 수요일 AWS 배포 설정 진행
2. API 테스트 지속적 검증 필요

🖥  프론트엔드 작업

1. 프로필 EDIT,DELETE 보류 (👤 김혜원)
2. 로그인 페이지 유효성 검증 작업 중 (👤 김혜원)
3. 게시글 페이지 질문 삭제버튼 추가 (👤 김혜원)
4. 백엔드와 로직 맞춰서 데이터 받아오는 작업까지 구현 - 태그, 유저, 페이지네이션 등등 (👤 박연환)
5. footer 작업 진행 예정 (👤 박평환)

🔙  백엔드 작업

1. Pagenation → size 16로 수정할 것 (👤 이동우)
2. 기본로그인 이미지 랜덤화(14개) 및 구글로그인 자체이미지 반영 완료 (👤 이재혁)
3. 게시글 삭제 추가 예정 및 (👤 이재혁)
4. 테스트 기반으로 API 문서화 작업 자동으로 진행하도록 셋팅 진행 (👤 이재혁)
5. 상단 게시글 검색 기능 작업 완료 (부가 적인 user:1234 등의 기능 구현 예정) (👤 이동우)
6. 메인 화면 정렬 기능, 홈화면 이동기능 완료. (👤 이동우)
7. 시간 처리 작업 진행 (sec, min, hour, day, month, year) (👤 박종식)

레포지토리가 삭제되었다 😰

모든 일정이 끝나고 각자 작업을 진행하던중
이전에 프로젝트에 참여가 적었던 클라이언트 측 분이
실수로 Github 레포지토리를 삭제를 하였다….

얼른 긴급히 모여서 수복하는데 집중을 하였다.

코드스테이측 Organization에 속해있는 레포지토리라
우리가 어떻게 만들고 할 수가 없는 상태였고…
급하게 임시 대피 레포지토리를 내 계정에 파놓아서
코드를 취합하는데 집중했다. 다행히 로컬에 모두가 가지고 있는 프로그램을
푸쉬해서 PR하여 합치는데 큰 무리는 없었고, 최종적으로 합쳐진 프로그램을 가지고
브랜치를 나눠 작업을하다가, 다음날 코드스테이츠 측에서 답변이 오면
후속 조치를 하기로하고 각자 다시 작업에 들어갔다.

너무 깜짝놀라기도했고,, 이런 상황을 겪고나니 어떻게 대처를 해야할지?
경험하게되는 좋은(?)시간이 었던 것 같다.
팀원들이 저녁에 다들 바쁠텐데 전부모여서 작업을해줘서 너무 고마웠고
실수하신분도 경험으로 남아, 앞으로 좀더 주의하게되는 기회를 얻게 된 것 같아서
개인적으로는 도움이 되셨을거라고 생각한다 !!

2022.12.28 (수)

AWS 셋팅

오늘은 오전부터 AWS 셋팅을 진행할 것 같다.
비용이 나오면 안되기 때문에 S3, EC2, RDS 프리티어를 꼼꼼히
팀원들과 읽어보기로 하였다. 우선 팀장인 내계정으로 만들기로 정했고
너무 많이 사용하기보다는 우선 EC2 인스턴스를 만들어, 클라이언트, DB를 해결하려한다.

EC2에 스프링 톰캣서버를 사용해 서버를 배포하고
Nginx를 사용해 클라이언트와 서버를 연결할 생각이다.
DB는 EC2에 mysql을 다운받아 사용하려한다.

오늘은 EC2에 mysql을 다운 받고
스프링 빌드파일을 배포해 DB에 저장과 연결되는 것 까지는 완료했다.
EC2 mysql과 WorkBench 연결에 문제가 있어
문제 해결방법을 포스팅 해두었다.

이번에 배포를 해보면서 정말 많은걸 배웠고, 계속 오류가 발생하니
찾고 해결하고 진행하고를 무한 반복한 것 같다..

그래도 Mysql을 EC2에 사용할 수 있도록 셋팅하는거 하나는 확실히
배운 것 같아 뿌듯 했다.

회의록 및 정리

👥  참여 인원 : 이재혁, 이동우, 박종식, 박연환, 김혜원, 박평환

📢  공통

- EC2 퍼블릭 IPv4 주소 매일 변동 가능성 인지
- EC2 MySQL 상 더미데이터 주입
- 클라이언트 간단한 빌드파일 프→백으로 전달 및 백엔드 cors 테스트 진행예정
- API테스트 가능시간 아직 미정

🖥  프론트엔드 작업

1. Ask questions 페이지 유효성 검사
2. signup input 유효성 검사 (백엔드에서 보내준 정규표현식이 통과 안 되는 이슈 있음)
3. Post 페이지 로그아웃 상태에서도 게시물을 볼 수 있게 수정
4. 로그인 페이지 로직 구현중 ( + 로그인 토큰 유효기간 30분에 따른 로그인/로그아웃 구현 필요)
5. 푸터 작업 진행 

🔙  백엔드 작업

1. AWS EC2 인스턴스 생성

📌  AWS 작업전 체크 사항

*AWS 자료 조사

1. 프리티어 무료 제공 범위 체크
2. GitHub에 인스턴스 관련된 키 등등 (❌  절대 올리지 말것 ❌ )
- 운영환경 설정 내역:
    - EC2
        - Ubuntu, 22.04 LTS (HVM), SSD Volume Type , 64비트(x86)
        - t2.mirco
        - 스토리지(볼륨) - 30GiB
        - IO 2백만개, 스냅샷 1GB, 대역폭 100GB
    

✅  인스턴스 초기 셋팅 

- Git Setting & Github Connecting
    - ssh키 생성 : ssh-keygen
    - 공개키 github 계정 내 등록 : Setting → SSH and GPG keys 
    `cat ~/.ssh/id_rsa.pub`
    - Repository clone
- Java installation
    - Open JDK 설치
        - `sudo apt update`
        - `sudo apt install openjdk-11-jre-headless`
- Build
    - `./gradlew build`
    - 에러 발생 →`./gradlew` → `sudo chmod 777 ./gradlew`
    무한 반복 → FileZilla로 직접 build 파일 넣어줌
    - java -jar build/libs/stackoverflowclone-0.0.1-SNAPSHOT.jar
    - 환경 변수 설정 `vi ~/.bshrc` 파일 설정(JWT, OAuth 2.0)
- EC2 인바운드 설정
    - 사용자 TCP 8080
    - HTTP 80
    - HTTPS 443
    - MySQL 3306
- MySQL 설치
    - `sudo apt-get install mysql-server`
    - `mysql --version`
    - `sudo systemctl start mysql`
    - MySql 계정: root, user
    - 실행: `mysql -uroot -p` : mysql -u root team37
    - name : seb password : team37 (seb)
- MySQL 환경설정
    - application-server.yml 생성 후 JDBC datasource 설정
        - db 스키마, username, password 작성
    - 외부접속 허용
        - cd/etc/mysql/mysql.conf.d
        - sudo vi mysqld.cnf
        - bind-address 127.0.0.1 → 0.0.0.0 수정
        - sudo systemctl restart mysql
    - MySQL 계정생성 및 권한 부여(외부접속 허용)
    - EC2 인바운드 추가
        - 
    - 

*코드 적으로 변경해야할 것

1. 불필요한 시스템로그 주석처리, 삭제
2. profile 설정을 해야함 (배포용, 로컬용 분리)
3. DB 변경 → yml 설정 변경 필요

✅  아키텍쳐 구성

방법1. S3 ↔  EC2 ↔  RDS

방법2. EC2 사용. (NginX, mysql 다운)

오늘 구성, 진행 과정을 회의록에 적어보면서 기록을 하였다.
추후에 내 블로그에 여러 방법들에 대한 포스팅을 해야
정말로 내가 잘 찾아쓸 수 있을 것 같다.

2022.12.29 (목)

NginX 도메인 연결

클라이언트를 연결하기 위해 빌드된 파일을 클라이언트에서 전달해줬다.
서버쪽에서는 NginX 서버를 EC2에 다운 받아 도메인과 연결해줬다.

도메인은 ‘내 도메인 한국’이라는 곳에서 받았고
EC2 클라우딩 컴퓨터의 주소를 연결해두었다.

설치하는 과정은 간단했지만… 셋팅하는 과정은 쉽지않았다..
팀원들과 여러가지 시도를 계속해보고 바꿔가면서 테스트를 해보았고
최종적으로는 Nginx에서 클라이언트 화면이 잘표시되었고
API를 요청할때 스프링 톰켓서버로 API 요청이 정상적으로 잘 들어왔다.

CORS 에러 조치

하지만… CORS에러가 발생했고… 이를 해결하는데 정말
많은 시간와 의논을 나누며 테스트를 해보았던 것 같다.

최종적으로는 CorsFilter를 빈으로 등록하고 구현해주었다.

@Configuration
@RequiredArgsConstructor
public class SecurityCorsConfig {

    @Bean
    public CorsFilter corsFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOriginPattern("http://localhost:3000");
        config.addAllowedOriginPattern("http://stackoverflowpre.p-e.kr");
        config.addAllowedHeader("*"); //특정 header만 허용
        config.addAllowedMethod("*"); //특정 메소드만 허용 //
        config.addExposedHeader("Authorization");
        source.registerCorsConfiguration("/**", config); //corsConfiguration으로 등록

        return new CorsFilter(source);
    }
}

로컬에서 테스트하고 있는 클라이언트 주소와 EC2 도메인 주소
그리고 addExposedHeader를 추가해주었다.

addExposedHeader를 추가하지 않았을 때에는 JWT 토큰이
response Header에 담기기는 하지만… 클라이언트 측에서
undefined가 받아와진다고하여 추가해주게 되었다.

public class CustomFilterConfigurer extends AbstractHttpConfigurer<CustomFilterConfigurer,HttpSecurity> {
    @Override
    public void configure(HttpSecurity builder) throws Exception {
      AuthenticationManager authenticationManager = builder.getSharedObject(AuthenticationManager.class); // AuthenticationManager 객체얻기
  
      JwtAuthenticationFilter jwtAuthenticationFilter = new JwtAuthenticationFilter(authenticationManager, jwtTokenizer); // JwtAuthenticationFilter 객체만들기 (생성하면서 DI하기)
  
      jwtAuthenticationFilter.setFilterProcessesUrl("/users/login");
      jwtAuthenticationFilter.setAuthenticationSuccessHandler(new MemberAuthenticationSuccessHandler());
      jwtAuthenticationFilter.setAuthenticationFailureHandler(new MemberAuthenticationFailureHandler());
  
      JwtVerificationFilter jwtVerificationFilter = new JwtVerificationFilter(jwtTokenizer, authorityUtils);
  
      builder
              .addFilter(corsFilter) // <- corsFilter 추가
              .addFilter(jwtAuthenticationFilter)
              .addFilterAfter(jwtVerificationFilter, OAuth2LoginAuthenticationFilter.class);
    }
}

최종적으로 SecurityFilter에 CorsFilter를 DI받아 추가를 진행해주었다.
이렇게 설정을 완료하고나니까 CORS 에러가 말끔히 사라졌다!!
이전에 @CrossOrigin 어노테이션 사용밖에 해보지않았는데
이런 방법으로 CorsFilter를 사용해 하는 방법도 있구나 세삼 새로웠다.

회의록 및 정리

👥  참여 인원 : 이재혁, 이동우, 박종식, 박연환, 김혜원, 박평환

📢  공통

- 프론트, 백 연말 일정 정리

🖥  프론트엔드 작업

1. 빌드한 파일과 거의 유사 (회원가입, 로그인, 포스트 검색 기능, 정렬, 질문 작성 등등…)
2. 로그인해야 질문 작성할 수 있게 함
3. 유저 검색 기능 추가해야 
4. 로그인 구현 성공
5. vote 기능 / 답변 작성 기능 / 게시물 삭제 기능 / 유저 상세페이지 구현 중
6. 이미지 소스를 데이터 사용해서 표현하기
7. 버그 수정
8. 404 에러 페이지 구현 진행중

🔙  백엔드 작업

1. EC2 내 Nginx 설치 및 환경설정 완료
    - config 파일(client, sever) 생성
    - IP 의존성을 해결하기 위한 Elastic IP 생성 및 설정 고려 필요

2022.12.30 (금)

이번주만 지나고 다음주 월요일이되면
프로프로젝트가 종료된다.

서버쪽에서는 우선 어느정도 테스트는 완료해서 프론트엔드 측에서
테스트가 가능할때 같이 문제가 있는지? 유효성 검증에 문제될 만한 것이 있는지
체크를 해보면 된다. 오늘은 정리차원에서 테스트 + GitHub README 파일을
작성해보기로 하였다.

Readme 작성

---

</br>

• 팀 명 : 🌡 37℃
• 프로젝트 명 : Stackoverflow
• 프로젝트 기간 : 2022.12.15 - 2023.01.02
• 한줄 소개 : Stackoverflow ! 개발자간의 질의응답 커뮤니티입니다.
• 팀원 : 이재혁(팀장), 이동우, 박종식, 박연환(부팀장), 김혜원, 박평환
• 배포 링크 : 🌐 stackoverflowpre.p-e.kr

💼 Team

이재혁 (BE, 팀장)	이동우 (BE)	박종식 (BE)	박연환 (FE)	김혜원 (FE)	박평환 (FE)
- 로그인 인증처리 (JWT 발급,인증) - OAuth2 로그인 인증 처리(구글) - 질문 등록,조회 삭제,투표기능 - 답변 등록,조회 삭제,투표기능 - 예외처리 로직 기능 구현 - 게시글,답변 유효성 검증 처리 구현 - 회원 프로필 이미지 관리 -JUnit 초안작성 (Security 등) - 배포환경 구축	- 메인화면 API - 게시글 검색기능 - 게시글 정렬기능 - User화면 조회 페이지네이션구현 - Tag화면 조회 기능구현 페이지네이션구현 - User,Tags 검색 - 회원 프로필 게시글,댓글 조회 기능 추가 - 배포환경 구축	- 회원등록,삭제 - 회원 프로필 조회,수정 삭제,편집 - 회원 가입 유효성 검증 - 시간관리 기능 - 배포환경 구축	-Main페이지구현 (검색, 정렬 조회) -Users 페이지구현 (검색 기능) -Tags페이지구현 (검색 기능) -페이지네이션 구현(모든화면) -Signup 페이지 구글 OAuth2.0 회원가입 구현 -Right Sidebar 컴포넌트 구현	-Header 컴포넌트 구현 -Left Nav 컴포넌트 구현 -Post페이지 구현 (조회, 삭제 공유, 투표) -유저 Profile 페이지 구현 - 회원 Login 페이지구현 (JWT 로그인 OAuth2.0 로그인 구현) -모바일,태블릿 반응형 웹 작업	- Footer 컴포넌트 작업 - 404 Page

name	Github
이재혁	@MyCatlikesChuru
이동우	@eastmeet
박종식	@jongsic17
박연환	@yeonhwan
김혜원	@zemma0618
박평환	@Parkpyunghwan

⚙️ Tools

Github	Discord	Notion

🖥 Front-end

Html	CSS	JavaScript	React	Styled- Components	axios	Tanstack-Query	zustand	React-Quill

🔒 Back-end

Java	mySQL	NginX	AWS	Spring	Spring Boot	JWT	Spring Security

🌟 Pages & Features

메인 페이지(검색,정렬)	로그인 / 회원가입 페이지
구글 OAuth2 인증	프로필 관리
질문 게시글 작성	게시글 조회,답변
게시글 답변 투표(추천)기능	USER & TAG 페이지

👩🏻‍💻 User flow

🔖 DB Diagram

📎 Git

🌲 Branch

main : 서비스 운영 브랜치입니다.
release : 메인 브랜치 배포전 릴리즈 브랜치입니다.
dev/front : 프론트엔드 개발 환경 브랜치입니다.
dev/back : 백엔드 개발 환경 브랜치입니다.
feat/역할군/개발명 : 기능 개발 브랜치 입니다. ex) feat/BE/security

📌 Pull Request Merge 담당 📌
❗️주의 : 해당 브랜치별로 담당 인원분들은 전부 모여 코드리뷰 및 동의 후에 
Merge를 진행해주시기 바랍니다

main <- release : 이재혁 (팀장) (김혜원, 박연환, 박평환, 이재혁, 이동우, 박종식)

release <- dev_front : 박연환  (김혜원, 박연환, 박평환, 이재혁, 이동우, 박종식)
release <- dev_back : 이동우 (김혜원, 박연환, 박평환, 이재혁, 이동우, 박종식)

dev_front <- feat : 박연환 (김혜원, 박연환, 박평환)
dev_back <- feat : 이동우 (이재혁, 이동우, 박종식)

✉️ Commit Message

Message	설명
[feat]	새로운 기능을 추가할 경우 ex) [feat] 로그인 기능 추가
[fix]	버그를 고친 경우
[design]	CSS 등 사용자 UI 디자인 변경
[!breaking change]	커다란 API 변경의 경우
[!hotfix]	치명적인 버그를 고쳐야하는 경우
[style]	코드 포맷변경, 세미콜론 누락, 코드수정이 없는 경우.
[refactor]	프로덕션 코드 리펙토링할 경우
[comment]	필요한 주석 추가 및 변경
[docs]	문서를 수정한 경우
[test]	테스트 코드 작업을할 경우
[chore]	빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우
[rename]	파일 혹은 폴더명을 수정하거나 옮기는 작업만 하는 경우
[remove]	삭제하는 작업만 수행한 경우
[init]	브랜치 초기화 및 초기셋팅 관련된 설정일 경우

---

이러한 느낌으로 작성을 해보려한다.
Github IO 블로그를 쓰면서 MarkDown 문법에 익수해졌던 것이
어느정도 도움이 많이되서 수월하게 작업을 했던 것 같다.

아직 프론트엔드측 작업 취합이 되지 않아 백엔드쪽만 먼저 넣을 수 있는
내용을 적어 놓고, 월요일에 테스트를 마친다음에 작성을 완료하려한다.

그리고 HTTPS를 적용하려고 하였지만…
AWS 프리티어 인스턴스의 램이 느려서 그런지… 계속 하다가 진행이 안되어
적용하지 못해서 조금 아쉬웠다. 많은 사람이 Oracle Cloud를 사용한다고
하여서 나도 계정을 가입해놓고 이제 나만의 서버를 만들어보려한다.

회의록 및 정리

# ****회의록 (2022.12.30 , 금)

👥  참여 인원 : 이재혁, 이동우, 박종식, 박연환, 김혜원, 박평환

📢  공통

1. [READMD.md](http://READMD.md) 파일 작성 필요
→ GIF 동작별 플로우 진행 캡처
→ 기술 스택 및 아키텍처 정리

🖥  프론트엔드 작업

1. 포스트 페이지 거의 구현 완료(게시물 vote/downvote, delete 기능 추가 예정)
2. 프로필 페이지도 거의 구현 완료 (user post 기능 추가 예정)
3. 구글 로그인 로그아웃 작업중
4. 우축 Relative 목록 추가, 자잘한 버그 수정
5. 구글 로그인 작동되게 설정함
6. 리팩토링 작업 중

🔙  백엔드 작업

1. HTTPS 적용해보기(Let’s Encrypt)
    1. Cerbot PPA 추가
    → sudo apt install software-properties-common
    → sudo add-apt-repository universe
    → sudo add-apt-repository ppa:certbot/certbot
    2. 서버의 용량 문제로 적용 pass….ㅠㅠ
    
2. 코드 리뷰하기

2022.01.02 (월)

마치며..

드디어 프리프로젝트 마지막날이 왔다.

짧으면 짧지만… 밤을 많이 새서 그런지 살짝 길기도했던
프리프로젝트가 그래도 마무리가 되어진 것 같다.

오늘은 서버에 배포한다음에 마무리해보는 시간이었다.
게시글 삭제 등 예외에대한 테스트를 계속 진행했고
무리없이 프로젝트는 잘 마무리되었다.

자동화 배포, Docker 사용, Restdocs를 제대로 사용해보진 못했지만
그래도 전반적인 클라이언트와의 서버 흐름을 파악할 수 있는 시간이었다.

얼추 기한까지 우리가 구현하고자 했던 기능들은
전부구현을 완료했고, 배포까지 정상적으로 끝마쳤다.
프리프로젝트 팀장을 맡으면서, 일을 어떻게 유연하게 진행할 수 있을지
어떤 순서부터 맞춰가야 돌아가지않고 작업을하는지?에 대해서 정말 많이 생각했고
코딩 공부외에도 진행적인 측면에서 놓치지 않으려고 많은 걸 생각하고
챙기면서 프로젝트를 진행 했던 것 같다.

결과적으로는 우리팀에 낙오자는 없었고, 전부다 참여를 열심히해주었기에
이렇게 좋은 결과를 낼 수 있었던 것 같다.

Java, Spring을 배우고 처음해보는 프로젝트.
너무 재미있게했고 앞으로도 회사에 취업해서 일하면서도
쭈욱 하고 싶다는 생각을 하게된 시간인 것 같다.