1208(금) 팀 회고 (5주차)
- 프로젝트 현황 공유는 **
팀 단위**로 모여, 한 주 동안 팀이 기술적으로 도전한 내용이나 문제 해결 과정, 진행 현황, 앞으로 계획 등 한 주 간 팀의 현황을 발표하고 피드백하는 시간입니다. - 피어세션은 분야별 캠퍼와
**개인 단위**로 만나, 한 주 동안 했던 시행착오나 기술적 도전, 학습한 것과 잘한 점 등을 공유하고 보다 깊게 얘기 나누는 시간입니다.
-
우리 팀의 서비스 주제, 핵심 기능, 이번주 문제 해결 과정과 개선 필요사항을 발표합니다. (10분)
- 이 때, 각 기능이 어떻게 동작해야 하는지에 대한 테스트 시나리오를 포함하면 좋습니다.
-
팀의 서비스를 구석구석 사용해보고, 디테일한 피드백을 남겨보세요. (20분)
**트랙이 세분화된 만큼 더 긴밀하게 피드백을 주고 받아보세요.**- 질문이나 발견한 버그, 좋은 점, 문서화 등 모두 좋습니다.
- 해당 팀이 확인할 수 있도록 피드백 노트에 의견을 상세히 남겨주세요.
프로젝트 진행 상황, 주요 기능, 협업 중 겪은 어려움, 해결 방안 등을 문서로 정리합니다. [프로젝트 현황 공유]에서 받은 질문과 피드백을 정리하여 추가해두길 권장합니다.
- 상시로 진행한 팀 회고 결과가 있다면 해당 기록으로 갈음할 수 있습니다.
- 별 및 글 생성 구현
- 별 커스텀 구현
- API 연동
- 제목 및 내용 작성
- 글 수정 기능 구현
- 좋아요 기능 구현
- 랜덤 위치 생성
- 은하 커스텀 마무리
- 기존에 실시간 반영이 안되던 문제를 해결했다
- 공유 링크 모달 구현
- 별 라벨 디자인 변경
- 우주 검색 기능 구현
- 비슷한 닉네임 추천해주는 기능 구현
- Warp Screen 구현
- AlertDialog 컴포넌트 구현
- 자잘한 버그 수정
- 전체화면 같은 단축키
-
멀티 스테이징을 이용한 도커 이미지 최적화
- 변경사항
-
도커의 멀티 스테이지 빌드(Multi-Stage build)기능을 활용해 빌드 단계에서 빌드 후, 백엔드 배포판 실행환경에 필요한 파일만 선별적으로 이미지에 삽입
-
before
FROM node:20-alpine WORKDIR /app ADD . /app RUN SHARP_IGNORE_GLOBAL_LIBVIPS=1 npm_config_arch=x64 npm_config_platform=linux yarn workspace server add sharp@0.32.6 RUN yarn workspace server build EXPOSE 3000 ENTRYPOINT ["yarn", "workspace", "server", "start:prod"]
-
after
FROM node:20-alpine AS builder WORKDIR /app ADD . /app RUN SHARP_IGNORE_GLOBAL_LIBVIPS=1 npm_config_arch=x64 npm_config_platform=linux yarn workspace server add sharp@0.32.6 RUN yarn workspace server build FROM node:20-alpine AS runner WORKDIR /app COPY --from=builder /app/packages/server/dist /app/packages/server/dist COPY --from=builder /app/packages/server/package.json /app/packages/server/package.json COPY --from=builder /app/.yarn /app/.yarn COPY --from=builder /app/.pnp.cjs /app/.pnp.cjs COPY --from=builder /app/.yarnrc.yml /app/.yarnrc.yml COPY --from=builder /app/yarn.lock /app/yarn.lock COPY --from=builder /app/package.json /app/package.json EXPOSE 3000 ENTRYPOINT ["yarn", "workspace", "server", "start:prod"]
-
- 변경사항
-
어드민 페이지 구현
-
변경사항
간단히 Vite + React + TS를 사용해 리액트 프로젝트 생성
백엔드에 따로 admin 모듈을 만들어서 필요한 데이터 제공
[https://www.별글.site/admin/](https://www.xn--bj0b03z.site/admin/)
-
에러 통계 조회
-
전체 글 조회
-
시스템 정보 (CPU, 메모리, 디스크 사용량) 조회
-
배포 이슈
- 클라이언트와 같은 nginx docker 이미지에 정적파일을 올려서 배포함
- 클라이언트 파일들은
/usr/share/nginx/html에 저장되어 있고, admin 파일들은 그 경로 안에admin폴더에 위치함
location /admin { # /admin url로 시작하면 admin 파일을 서빙하도록 작성 root /usr/share/nginx/html/admin; index index.html; try_files /admin$uri /admin$uri/ /admin/index.html; }- 이렇게 하니
/admin으로 들어오면 admin의 index.html을 찾음 → 그러나 css, js를 찾지 못하는 에러 발생- css, js는
/admin/assets/~~.js이렇게 찾아 오는 것이 아닌/assets/~~.js이렇게 앞에 /admin 없이 찾아와버림
- css, js는
- 그래서 css, js 서빙하는 설정에 원래 경로에서 찾지 못할 경우 /admin을 앞에 붙여서 찾도록 수정
location ~* \.(?:css|js)$ { try_files $uri /admin$uri =404; # 원래 url로 찾지 못하면 /admin$url로 찾기 expires 1y; access_log off; add_header Cache-Control "public"; }- 이렇게 하니 일단 배포는 잘 됨! → 임시방편으로 한거라 설정을 잘 하진 못한 것 같음
-
-
-
감정분석 API 구현
- 변경사항
-
Naver AI API를 래핑하여, 감정 분석된 결과를 색상값으로 변환하여 반환
-
API 결과로 글 내용을 보내면 긍정 몇 퍼센트, 중립 몇 퍼센트, 부정 몇 퍼센트가 나옴
-
긍정을 R, 중립을 G, 부정을 B로 색상 추출
// 0~100 사이의 positive, negative, neutral을 각각 0x00~0xFF 사이의 R, G, B 값으로 변환 const positiveColor = Math.round((Number(positive) / 100) * 0xff); // RR const negativeColor = Math.round((Number(negative) / 100) * 0xff); // GG const neutralColor = Math.round((Number(neutral) / 100) * 0xff); // BB // 무조건 두자리 숫자의 string으로 변환 const toHex = (color: number) => { const hex = color.toString(16); return hex.length === 1 ? `0${hex}` : hex; }; // #RRGGBB 형식으로 변환 const colorRecommendation = `#` + toHex(positiveColor) + toHex(neutralColor) + toHex(negativeColor);
-
아직 프론트에서 적용은 되지 않았지만 나중에 색상을 고를 때 “추천 색상”으로 추천해줄 예정
-
- 변경사항
-
e2e 테스트, 유닛 테스트 개선
- 변경사항
-
변경된 API 인터페이스 및 endpoint에 맞게 e2e테스트 개선
-
코드 커버리지를 높이기 위한 서비스 유닛 테스트 코드 구현 (예외처리 확인)
-
테스트 수행 중 비동기 처리 관련 문제를 발견하여 코드 개선함
- transaction (post) interceptor가 response 이후 종료되어 DB에 반영되지 않는 문제 해결
-
- 변경사항
- 서로 배려하고 유쾌한 분위기 유지
- 함께 해야할 문제가 있으면 만나서 해서 소통이 잘된다
- 닭구이가 맛있다👍
- 페어프로그래밍을 꾸준히 하고 있다
- 너무 늦은 시간까지 열심히 해서 다들 지쳤다
- 그래서 건강 관리가 소홀하다!
- 프론트분들끼리만 회식을 했다ㅠㅠ우리도 닭구이먹고싶다
- 발표자료 만들자
- 우리 시간대에 같이 발표하는 팀들에게 사과 인사 돌리기
테스트 코드 완성
가능하면 admin 페이지 페이지네이션 적용
-
무조건/.무조건무조건 해야하는거
bgm 아이콘이랑 위치 바꾸기 🐧- bgm은 로고 화면에서부터 나오게 하기
- 처음에는 꺼진 상태로 두고 클릭하면 재생되게 변경하기
- 에러처리 → 가은
- 폰트 적용하기
- 버그 수정
- 모달 띄워놓은채로 새로고침했을 때 배경 UI 다시 나타나는거 고치기 🐧
- 모달창 url로 들어왔을 때 UI 안보이게 하기 🐧
- 별 위치 안겹치게 랜덤 포지션 설정 🐧
- 다른 사람 글은 수정/삭제 안되게 처리
- api 요청 두 번씩 가는거
- Oauth 로그인 화면전환 애니메이션 넣기
- 모달창 닫을 때 알럿창 띄우기
감정분석 api 사용하기 🐧- 반응형 디자인 수정하기 (영어 10자 기준으로 해놨음) → 가은
- 언더바 디자인 수정하기
별 스킨 만들기 버튼 삭제 🐧- guest나 search로 들어가면 버튼 disabled가 아니라 없어지도록 하기
- 이미지 슬라이드 아이콘 변경하기 ( 별 커스텀 화살표랑 같은걸루)
- 리팩토링 → 다같이
- 폴더구조 정리
- import 정리 (index.ts에 안들어간것들 추가하기)
- 버튼들 연속 클릭 다 막기
-
무조건은 아니지만 하면 좋을 것
- 페이지 소개 띄우기
- 물음표 기호같은거 넣어서 설명하기 or 코치마크 →🤔 김가은이 코치마크 해보고싶긴함
- leva 디자인 변경 (가능하다면)
- 은하 색 다른것도 적용해보기 → 가은
- 예시 은하 보여주기
- 최적화 (엄청난 비판이 쏟아지는…)
- 페이지 소개 띄우기
이거도 하죠 아좋아요
