2주차 : 인프라 작업 & 테스트 API 수신 확인

👟 2주차 스프린트 계획 회의록

🎥 2주차 데모 사이트

2주차 데모 시나리오

테스트 목적과 상황

서버 구성, CI / CD 같은 인프라, API, DB 등 설계를 보여주면 어떨까? + 곁들여서 디자인 정도 (레이아웃 끝난다면)
API 서버와 클라이언트 서버가 통신이 된다.

시나리오 진행에 필요한 데이터

API 명세
DB ERD
CI / CD 파이프라인
서버 인프라 시각화 자료
아무거나 Mock API (CORS랑 관련되면 좋겠다.)
(레이아웃)

시나리오 진행에 필요한 조건

API 명세 작성
DB ERD 설계
CI / CD 파이프라인 설계
서버 인프라 구축
아무거나 Mock API 구현
(레이아웃 구현)

시나리오 완료 시 보장하는 결과

API 서버와 클라이언트 HTTP 통신에 성공한다
MySQL 물리적 데이터 모델
인프라 서버들 (CI / CD)
(클라이언트 화면)

2주차 작업내용

백엔드

프론트엔드

페이지 디자인
페이지 설계 (인터랙션, 컴포넌트 추상화)
프론트엔드 서버 배포
프론트엔드 서버 CI / CD
ESLint, prettier, tsconfig 설정하며 코딩 스타일 맞추기
페어프로그래밍으로 관리자페이지 구현하며 컴포넌트 구현 스타일 싱크 맞추기
랜딩 페이지 구현
테스트용 API 수신 확인 구현

3주차 : 핵심 기능 구현

👟 3주차 스프린트 계획 회의록

🎥 2주차 데모 사이트

3주차 데모 시나리오

테스트 목적과 상황

기술적인 도전에 대해 다시 이해하고, 핵심 기능에 대해서 초점을 새롭게 잡았다.
핵심기능(기술적인 도전, 오래 고민 및 개선 필요)을 먼저 구현하여 데모에 사용하고, 추후 보완을 해야한다.

시나리오 진행에 필요한 데이터

키워드 데이터 (키워드, 개수, 연관관계)
키워드 연관관계 알고리즘
키워드 시각화 배치 알고리즘

시나리오 진행에 필요한 조건

성능을 신경쓰지 않고 & 키워드 가중치에 따른 변화 없이 데이터 시각화 구현 (개수에 따라서만)
성능을 신경쓰지 않고 키워드 자동완성 (이미 있는 단어로 맞춰줌)
성능을 신경쓰지 않고 키워드 추천 구현 (현재 단어에서 추천)

시나리오 완료 시 보장하는 결과

기초적인 수준이라도 유저가 핵심 기능을 이용할 수 있다.

3주차 갱신된 Feature List

공통

이번주 핵심 기능에 대한 API 명세 갱신하기

프론트엔드

갱신된 Feature List 토대로 UI / UX 디자인 그려서 공유하기
그룹 키워드 데이터 시각화 (워드 클라우드)

⇒ 이번 주의 프론트엔드 핵심기능
키워드 입력시 키워드 자동완성

⇒ 꼭 검색창으로 안띄워도됨
키워드 입력시 키워드 추천

⇒ 꼭 검색창으로 안띄워도됨
참여자의 키워드 목록 UI 구현 (내가 가진 키워드들)

백엔드

키워드(소그룹) 추천 알고리즘

⇒ 이번 주의 백엔드 핵심기능
Username 접속 시 쿠키 값 넘겨주기
User 로그인 확인 API
키워드(소그룹) 생성 API
키워드(소그룹)에 유저 진입 시, 키워드(소그룹) 참여자 수 갱신

⇒ 참여자 수가 있어야 초기 워드 클라우드가 가능해용

4주차 : 데이터 시각화 완료 & 실시간 서버 통신

👟 4주차 스프린트 계획 회의록

## 테스트 목적과 상황

테스트 목적

서버 통신을 통한 데이터 제공과 시각화가 제대로 되는가?

현재 상황

물리엔진 배치 계산기 구현 끝나감.
소켓 API 서버 ⇒ REST API 서버로 이동

테스트 상황

부스트캠프 캠퍼들에게 제공

시나리오 진행에 필요한 데이터

실제 키워드 데이터 (미리 넣어두는)

시나리오 진행에 필요한 조건

OAuth 로그인 구현
키워드 CRUD
데이터 시각화
short polling을 통한 실시간 통신 구현
(우선순위 하) 스레드 CRUD와 UI

시나리오 완료 시 보장하는 결과

데모 사이트 MVP를 캠퍼들이 이용이 할 수 있다.
서버 통신이 포함된다.
로그인이 가능하다.
short polling을 통해 실시간 통신이 가능하다.

Feature List backlog 보완 및 갱신

⚠️ 처음 백로그 설계와 많이 달라져서 github의 백로그를 따름.

⇒ 조금 더 큰 목표를 잡고 세세한 건 이후에 잡았어야했구나라는 생각이 들었다.

프론트엔드

물리엔진 마무리
short polling을 통한 서버 통신
로그인을 위한 처리
스레드 UI 구현 (소일거리)

⇒ 각 도메인과 구현 단계별로 몇 공수(MD)인지 뽑아보기

백엔드

REST API 전체
- 각 도메인별 CRUD
- OAuth
- (어려운 것) 키워드 복수 개의 병합과 삭제

⇒ 각 도메인과 구현 단계별로 몇 공수(MD)인지 뽑아보기

5주차 : 데모 배포 준비

👟 5주차 스프린트 계획 회의록

테스트 목적과 상황

이제 우리에게 물러설 곳은 없다.
캠퍼분들께 진짜로 배포하고 데이터를 모아야한다.

시나리오 진행에 필요한 데이터

프론트엔드

jennifer front 입력 확인

백엔드

키워드 데이터 좀 유사하게라도 수정하기

⇒ 넣고 싶은 키워드 10개 씩 가져오기

시나리오 진행에 필요한 조건

프론트엔드

커뮤니티 입장 구현 (키워드 입력 모달)
키워드 추가 / 탈퇴 가능 - 자동완성 포함 완성
키워드 추천 완성
키워드 데이터 시각화 완성
스레드 추가 / 삭제 가능
스레드 댓글 추가 / 삭제 가능

백엔드

서버 죽으면 자동 복구 및 에러 로그
배포용 DB 분리

시나리오 완료 시 보장하는 결과

캠퍼들이 우리의 서비스를 이용할 수 있다.
이후 여기에서 나온 데이터를 수집할 수 있다.
이번주 발표 J069_문성현 ⇒ 프로젝트 소개 + 현재까지의 진행상황 공유

사용하도록 유도하기 (jennifer front?)
변하는 키워드 시각화 보여주기

최종 발표 J022_김관경 ⇒ 전체 데모 + 테스트 결과까지

이번 주 Feature List와 담당자

공통

이력서
프로젝트 소개 기술스택 선정 이유 보완
프로젝트 소개 트러블 슈팅 아티클 작성

⇒ 이후 목요일에 트러블 슈팅 쳐내기

프론트엔드

페어프로그래밍

J022_김관경

커뮤니티 페이지
- 키워드 그룹 입장 API 연결
- 키워드 그룹 탈퇴 API 연결
- 회원가입 시 커뮤니티 1번으로 가입되도록, 영상 촬영에는 2번 커뮤니티를 쓴다.
- 초기 로그인에 따라 초기 입력 모달창 띄워주기
- 나의 키워드, 추천 키워드 상태 관리 (서버 상태로 관리 필요)

J069_문성현

스레드 페이지
- 유저 로그인 상태 API 연결
- 스레드 + 댓글 목록 읽기 API 연결
- 스레드 쓰기 API 연결
- 스레드 삭제 API 연결
- 댓글 쓰기 API 연결
- 댓글 삭제 API 연결

백엔드

페어프로그래밍

주말 작업사항 배포 (API 최신화)
테스트 코드 작성 및 리팩토링
- 예외처리 / 반환값 수정
API 별 성능 측정 및 튜닝
- 각 쿼리문 explain과 index
각 API 점검 (코드 스타일링)
- RESTful URL
- 변수명 / 함수명 수정
- 레포지토리 레이어, JPA로 마이그레이션

J026_김대호

키워드 병합 / 삭제만 PR
키워드 데이터 좀 유사하게라도 수정하기

⇒ 넣고 싶은 키워드 10개 씩
키워드 추천 API 고도화작업

J144_이승민

운영용 DB 띄우기 + J069_문성현
서버 성능 측정 스크립트 작성
더미데이터 스크립트 수정

📢 MD와 마감기한 설정은 Issue 발행하며 하기

6주차 : 최종 스프린트

👟 6주차 스프린트 계획 회의록

주말 한 일

공통

프로젝트 소개 보완
공통 도전 과제 작성
아티클 보완
대본 내용 작성

백엔드

스레드 서비스 레이어 테스트 코드 작성
폴더 구조 개선
예외상황처리 로직 분리
커스텀 에러
메인 코드 관심사 분리

프론트엔드

Thread, Keyword API 도메인 별 분리
Thread, Keyword Query 관련 훅 도메인 별 분리
사용자 피드백을 통한 버그 해결
- 스레드 유저 목록 제목 바뀌지 않는 현상 해결
- 커뮤니티 페이지 접속시 최근 접속 기록 갱신되지 않는 현상 해결
- 유저목록 접속 중 유저 먼저 보이지 않는 현상 해결
- 키워드 입장하기 후에 모달이 닫히지 않는 현상 해결
- 로그인 아닌 상태에서 메인 페이지 이동 시 무한 로딩 현상 해결
- 모달 클릭 시 모달이 이동하는 현상 해결
parallax 구현

프로젝트 관련

발표 영상

발표 방식 선정

게더타운에서 기술공유하듯이
화면 공유 자료 ⇒ PPT (부캠 템플릿)
오가는 장면까지 녹화하고 편집하기

공통 : 프로젝트 소개 및 공통 도전 내용

프로젝트 소개 : 중규모 커뮤니티 소그룹 관리 서비스, 간단한 기능 소개.

⇒ 기획과정보다는 뭘 하는 서비스인지까지만

⇒ 실시간성을 보장하는 데이터 시각화와 성능 개선
공통 도전 과제 : 학습한 내용을 기반으로 지속가능한 개발자로의 성장을 확인하기 위해, 우리만의 기술적인 도전을 결정해서 도전하였음.

프론트엔드 : 데이터 시각화와 성능 개선

프론트엔드 도전에 대한 소개 (30초)
- 직접 만들어보기
- 성능 개선
각각의 과정
- 물리엔진 제작기
  - Why? : 데이터 시각화는 서비스의 핵심기능이므로 라이브러리 의존이 애매했다.
  - What? : 원래는 정적인 배치 ⇒ 동적인 배치를 위해 물리엔진
  - How? : 물리를 모델링하여 물리엔진 구현
  - Result : 성능 개선된 내용 (크롬 개발자 도구)
- 수치화 할 수 있는 성능 개선
  - 데이터 중심
- 수치화 할 수 있는 성능 개선
  
  프론트엔드의 두번째 도전은 수치화 할 수 있는 성능 개선 결과를 얻는 것 이었습니다.
  - 수치화 할 수 있는 성능 개선을 목표로 한 이유?
  키워드 자동완성(1분)
  - 대표적 사례가 될 수 있다 하지만 너무 구체적인 사례가 앞으로 나오는 느낌
  첫번째 예시로 키워드 자동 완성 기능의 알고리즘 최적화가 있습니다.
  
  저희는 소그룹이 비슷한 이름으로 여러개가 생성되면서 사용자가 분산되는 상황을 문제로 삼고, 검색어 자동 완성을 개발하였습니다.
  
  처음에는 단순히 정규 표현식을 통해서 검색어가 바뀔 때마다 모든 키워드를 탐색하고자 하였으나 이 과정에서 커뮤니티의 키워드가 많은 경우 큰 부하가 발생하는 것을 알게 되었습니다.
  
  (무엇을 통해서 알게되었는지가 강조되면 더 좋겠다.)
  
  그래서 저희는 효율적인 탐색 시간을 위해 정규표현식, 이진 탐색, 트라이를 통한 방법 등을 조사하였고,
  
  결과적으로 사전 생성 시간이 있고, 메모리를 많이 차지하는 단점이 있지만, 커뮤니티 접속 시 한번만 생성하면 되고, 탐색이 빈번하게 발생하는 검색 엔진 특성상 트라이가 가장 효율적이라는 결론을 통해 검색 알고리즘을 수정하였고, 그 결과로 탐색의 시간 복잡도를 O(N * M)에서 O(M) 까지 낮추는 것에 성공하였습니다.
  
  Lighthouse 성능개선(40초)
  - 순서 상 조금 더 포괄적인 내용인 lighthouse가 먼저 나오면 어떨지
  다른 예시로 저희 팀은 lighthouse와 크롬 개발자 도구의 성능 지표를 통해서 웹 페이지의 성능을 측정하였고,
  - 왜 기준으로 삼았는지 추가
  앞서 말씀드린 데이터 시각화에서의 개선과 SSR, SSG을 통한 코드 스플리팅, 모달 등의 조건부로 사용되는 컴포넌트에 대한 레이지 로딩 적용 등을 통해서 퍼포먼스 점수를 60점에서 95점까지 상승시켰으며,
  
  그 외에도 색 대비율, HTML Language 설정 등을 통해 접근성을 개선하고,
  
  Meta tag과 Robot.txt 등을 통해서 SEO 또한 개선하여 다음과 같은 개선된 결과물을 수치적으로 얻을 수 있었습니다.
  - lighthouse에서 수치보다 과정을 더 강조하도록 변경
  테스트 코드(30초?)
  - 월요일 작업보고 테스트 코드 넣을지 결정
  - 테스트 코드를 넣는다면 더 간략하게

백엔드 : 프로젝트 도전 내용과 과정

백엔드 도전에 대한 소개 (30초)
- 꼭 새로운걸 해야돼? 기본에 집중해보는 도전!(+ 배운거에 대한 적용)
  - 부캠 과정에서 “학습 하는 방법”을 크게 배웠다고 생각해, 새로운 언어와 프레임워크에 도전해보고 싶었음. (지속가능한 발전?)
  - JAVA/SPRING 선택 이유에도 해당 될 것 같음
각각의 과정
- 웹소켓 및 인프라 (2분)
  - 우리가 겪었던 과정과 결론
  - 얻은점 : “stateless한 HTTP 서버의 강력함을 이해하게 되었음”, “실시간은 웹소켓과 동의어가 아님을 알게 됨”
  - “polling vs sse vs websocket” 분석 및 비교후 선택하였음
- *테스트 코드 및 리팩토링 (2분)
  - 잘못된설계?(TDD의 효용)
    - 서비스레이어 메서드 단위 테스트를 구성하고자 시도
    - 컨트롤러에 너무 많은 관심사
    - 컨트롤러의 관심사를 서비스로 내리려다 보니, 에러 핸들링에 대한 구조도 생각하게 됨
    - 전역 에러 핸들링 구조에 대해 적용
  - 테스트 코드를 구성해 놓았더니, 기능 수정 및 확장과 리팩토링 진행에 있어 효용을 느낄 수 있었다.
- 목 데이터 & 스트레스 테스트 (1분)
  - dry한 과정 서술
  - 테스트 이후 개선 과정
(*위 각각의 항목에 있어서 부스트캠프 챌린지/멤버십 내용과의 연계를 잘 해보도록)

데모 영상

시나리오대로 찍는게 어려울 것 같음 ⇒ 무조건 1분이 넘음
원테이크로 촬영하기

⇒ (스크롤 애니메이션은 시간 보고 빼기)

⇒ 커뮤니티 관리 페이지 vs 스크롤 애니메이션

트러블 슈팅 줄이기

각 파트별로 날리기
아직 작성되지 않는 내용은 일단 삭제하고, 작성이 끝나면 추가하기

백엔드 기술 도전 과제

기술 도전 과제 변경됨
오늘까지 써주세요.

프로젝트 구조 개선

프론트엔드

type 폴더 분리
type 역할에 따라 모듈 분리 작업
hook 폴더 분리
Query 관련 Hook 도메인 별로 디렉토리 분리
- Keyword, Thread까지만 완료 - 나머지 도메인은 나눌만큼 양이 많지 않음
API 폴더 분리
API 호출 함수 도메인 별로 디렉토리 분리
- 위와 동일
test 폴더
테스트 파일을 위한 구조 논의
컴포넌트 폴더 분리
sass 공통 파일 분리

백엔드

도메인 통폐합
도메인 별 폴더 구성
예외처리를 위한 계층 추가
controller 계층과 service 계층에 있던 예와상황처리부분 분리
계층별 관심사 분리

테스트 코드 추가 계획

프론트엔드

Trie 검색엔진 테스트코드 작성 및 보완
물리엔진 테스트코드 작성
물리엔진 변경이 일어났을 때, 정상작동을 확인하여 생산성을 높이기 위함.
안정적인 동작을 보장하기 위함.
utils 내부의 함수들

백엔드

계층별, 단위 테스트 코드 작성
Mock Framework인 mockito를 통해 계층별 단위테스트 구성
메인 코드의 관심사 분리와 코드 품질 보완
API의 동작 안정성을 보장하여 리팩토링과 코드 수정에 있어서 생산성을 높인다.
controller, service, repository
테스트 코드 커버리지 높이기
부하테스트 스크립트 작성 및 성능 개선

리팩토링 계획

프론트엔드

커스텀 훅으로 반복로직 분리
sass mixin, animation 등 공통 파일 분리
아이콘들 하나로 통일 (React Icons)
사용하지 않는 모듈 정리
컴포넌트 단일책임원칙에 맞게 쪼개기
constants 폴더 없애기

백엔드

DB JPQL + JPA ⇒ QueryDSL + Spring Data JPA로 리팩토링
Optional, 함수형 문법, 람다를 사용하여 함수형 코드로 변경
테스트 코드 커버리지 높이기

코드 품질 개선 계획

프론트엔드

import 순서와 같은 컨벤션 설정
뮤테이션 후처리 함수 작성
Next 13 기준으로 문법 수정 고민해보기
주석 달기
변수명, 함수명 개선시키기

백엔드

HumanLint 사용
테스트 코드 작성하며 코드 품질 개선하기

추가할 내용들

버그 수정한 것

프론트엔드

스레드 유저 목록 제목 바뀌지 않는 현상 해결
커뮤니티 페이지 접속시 최근 접속 기록 갱신되지 않는 현상 해결
유저목록 접속 중 유저 먼저 보이지 않는 현상 해결
키워드 입장하기 후에 모달이 닫히지 않는 현상 해결
로그인 아닌 상태에서 메인 페이지 이동 시 무한 로딩 현상 해결
모달 클릭 시 모달이 이동하는 현상 해결

👟 🎥 주차별 스프린트 계획 & 데모 사이트 - boostcampwm-2022/web17-waglewagle GitHub Wiki

2주차 : 인프라 작업 & 테스트 API 수신 확인

👟 2주차 스프린트 계획 회의록

🎥 2주차 데모 사이트

2주차 데모 시나리오

테스트 목적과 상황

시나리오 진행에 필요한 데이터

시나리오 진행에 필요한 조건

시나리오 완료 시 보장하는 결과

2주차 작업내용

백엔드

프론트엔드

3주차 : 핵심 기능 구현

👟 3주차 스프린트 계획 회의록

🎥 2주차 데모 사이트

3주차 데모 시나리오

테스트 목적과 상황

시나리오 진행에 필요한 데이터

시나리오 진행에 필요한 조건

시나리오 완료 시 보장하는 결과

3주차 갱신된 Feature List

공통

프론트엔드

백엔드

4주차 : 데이터 시각화 완료 & 실시간 서버 통신

👟 4주차 스프린트 계획 회의록

테스트 목적

현재 상황

테스트 상황

시나리오 진행에 필요한 데이터

시나리오 진행에 필요한 조건

시나리오 완료 시 보장하는 결과

Feature List backlog 보완 및 갱신

⚠️ 처음 백로그 설계와 많이 달라져서 github의 백로그를 따름.

프론트엔드

백엔드

5주차 : 데모 배포 준비

👟 5주차 스프린트 계획 회의록

테스트 목적과 상황

시나리오 진행에 필요한 데이터

프론트엔드

백엔드

시나리오 진행에 필요한 조건

프론트엔드

백엔드

시나리오 완료 시 보장하는 결과

이번 주 Feature List와 담당자

공통

프론트엔드

페어프로그래밍

J022_김관경

J069_문성현

백엔드

페어프로그래밍

J026_김대호

J144_이승민

📢 MD와 마감기한 설정은 Issue 발행하며 하기

6주차 : 최종 스프린트

👟 6주차 스프린트 계획 회의록

주말 한 일

공통

백엔드

프론트엔드

프로젝트 관련

발표 영상

발표 방식 선정

공통 : 프로젝트 소개 및 공통 도전 내용

프론트엔드 : 데이터 시각화와 성능 개선

키워드 자동완성(1분)

Lighthouse 성능개선(40초)

테스트 코드(30초?)

백엔드 : 프로젝트 도전 내용과 과정

데모 영상

트러블 슈팅 줄이기

백엔드 기술 도전 과제

프로젝트 구조 개선

프론트엔드

백엔드

테스트 코드 추가 계획

프론트엔드

⚠️ GitHub.com Fallback ⚠️