최종프로젝트 - 중간점검

Notice

Recent Posts

Recent Comments

Link

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

김묭의 자기개발

최종프로젝트 - 중간점검 본문

내일배움캠프/최종 프로젝트

최종프로젝트 - 중간점검

포령 2023. 6. 26. 21:49

<MVP 중간발표 자료(기입)>

서비스명: 우리들의 해방일지(our liberation note)
- 서비스 기획 의도: 친구들과 의 여행 계획을 세우고, 우리만의 사진첩을 공유하고, 여행 루트를 짜주는 사이트가 있으면 좋겠다는 생각에 기획하게 되었습니다.
- 프로젝트 한 줄 설명: 우리들의 해방일지는 기본적으로는 그룹별 노트를 제공하고 그 속에서 다양한 계획과 사진공유, 여행 루트짜주는 ai, 내가 간 곳을 스탬프를 찍어 보관할 수 있고 유저의 흥미를 높히기 위해 여행mbti테스트, 해방네컷등 다양한 서비스를 제공하는 프로젝트입니다!
- 최종 MVP 스펙
  - 유저 : 소셜로그인, 이메일인증, 그룹 crud, 유저 이메일 검색
  - 노트 : 노트 생성, 표지선택, 수정, 삭제
  - 계획표 : 계획생성, 키워드검색, 요소 드래그시 날짜 수정, 내용 수정, 삭제, 결과 이메일전송
  - 사진첩 : 사진 저장, 키워드검색, 내용 수정, 삭제, 댓글 생성&수정&삭제
  - 스탬프 : 스탬프 생성 및 지도표시, 스탬프 취소
  - 휴지통 : 노트, 사진, 그룹 삭제시 휴지통에서 복원, 영구삭제가능
  - 여행mbti테스트
  - 해방 네컷 : 가로 세로버전
  - AI : 목적지의 최적의 경로 생성 및 openai의 주변 목적지 설명, 지도 핀
프로젝트 결과물
- Github 링크(Back-End): https://github.com/Msgun7/Our_liberation_note
- Github 링크(Front-End): https://github.com/ORN-group/Our_liberation_note_front
- 서비스 배포 URL: https://liberation-note.com
- 팀 노션 URL: https://www.notion.so/Liberators-b1028835a61843dc9b85c0c7b7d0cd98

2. 기술적 의사결정 & 트러블슈팅 기록

<aside> 🗿 트러블슈팅

</aside>

배포시 mysplclient install 오류

문제상황 : 로컬 mysplclient는 homebrew를 통해 해결할 수 있었지만 배포 환경에서 오류 발생
해결방안

# 1번 해결책
sudo apt-get install python3.10-dev
sudo apt-get install mysql-client
sudo apt-get install libmysqlclient-dev
sudo apt-get install libssl-dev

pip install mysqlclient

# 2번 해결책
sudo apt update
sudo apt install build-essential

# Python 개발 헤더 파일과 라이브러리, 그리고 mysqlclient 패키지를 위한 MySQL 개발 파일
sudo apt install python3-dev libmysqlclient-dev

pip install mysqlclient

c. 설명→ mysqlclient 라이브러리는 C 확장을 사용하므로 컴파일을 위해 gcc가 필요

→ 우분투(Ubuntu)에서는 다음과 같이 build-essential 패키지를 설치하여 이 문제를 해결
→ **x86_64-linux-gnu-gcc**와 같은 필요한 컴파일 도구가 시스템에 없어서 'No such file or directory'와 같은 오류가 발생
소셜로그인 url 오류
1. 문제상황 : 소셜 로그인 구현 중 프론트에서 백엔드로 fetch로 전송은 되는데 계속 500번 서버에러가 뜨는 오류 발생
2. 해결
```
URI = ""

# 네이버 소셜 로그인
class NaverLoginView(APIView):
    def post(self, request):
        ``` 생략 ```
          access_token_request = requests.post(
              "<https://nid.naver.com/oauth2.0/token>",
              headers={"Content-Type": "application/x-www-form-urlencoded"},
              data={
                  "grant_type": "authorization_code",
                  "client_id": client_id,
                  "client_secret": client_secret,
                  "redirect_uri": redirect_uri,
                  "code": code,
              },
          )
```
3. // 프론트 uri는 백엔드 서버로 보내야하니까 이대로 설정 // 네이버 로그인 데이터 서버로 전송 async function naverLoginApi(Code) { const response = await fetch(`${backend_base_url}/user/naver/`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ "code": Code }), }) response_json = await response.json() // 가독성을 위해 나머지 코드는 생략!
4. 원인
  1. 원인은 각 서비스의 애플리케이션 uri와 백엔드 헤더에 등룍된 uri가 일치하지 않아 발생하는 에러
  2. 각 서비스의 애플리케이션의 도메인과 uri와 백엔드 uri를 통일을 해줘야 한다.

homebrew 오류(brew install mysql오류)

문제상황 : mysql install 오류 -> brew install mysql 을 통해 해결하려고 했으나 homebrew의 경로가 잘못되어 있었음 -> brew --prefix 를 통해 경로 확인
해결

맥북
m1칩일 경우 /opt/homebrew
intel칩일 경우 /user/local 로 되어있어야 함

=> 변경이 안되서 삭제했다가 다시 설치
1. sudo /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/master/uninstall.sh>)"을 통해 homebrew 삭제
2. sudo rm -rf /opt/homebrew 로 폴더까지 다 삭제
3. /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/master/install.sh>)"을 통해 brew 재설치
4. enter 눌러서 계속 진행
하면 재설치가 잘 되어서 다시 원래 프로젝트 터미널로 가서
brew install mysql 하고
pip install -r requirements.txt 하면 잘 설치 완료!

프로젝트 배포와 젠킨스를 같은 인스턴스에 올린 문제
1. 문제상황 : 젠킨스의 인스턴스를 따로 파야하는데 프로젝트 서버 내에 올림
2. 해결
  1. 백엔드 서버와 젠킨스 서버를 각자의 인스턴스로 배포 후 ssh인증서를 통한 연결!
  2. 젠킨스 쪽에서 배포서버의 이미지 빌드와 이미지 정리까지 처리
```
cd ~/deploy/
sudo docker system prune -f
sudo docker-compose pull
sudo docker-compose up --force-recreate --build -d
```

🍀 MySQL

관련 링크↗️
사용 이유

초보자가 다루기 쉽고, 데이터를 다루는데 있어서 빠르고 안정성이 뛰어나기 때문
다루는 데이터 타입이 많지 않아서 postgressql을 사용하기 보다 빠르게 처리가 가능한 mysql을 선택!

그 밖의 장점

웹사이트와 온라인 트랜잭션에 적합
기능이 많지 않기 때문에 "속도와 안정성"에 중점
LAMP 스택(Linux, Apache HTTP Server, MySQL, PHP로 구성된 웹 애플리케이션의 오픈 소스 제품군)의 표준 구성 요소
관계형 데이터베이스 구조 덕분에 대용량 데이터 세트를 빠르고 효율적으로 처리 가능

🍀 Python

<aside> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHLN0RrPTmNUSMhl6MTeX0p_uIIj6Qzoxok9gjmzjELFRCeJaN34K8nOSaG56rrrw-evQ&usqp=CAU" alt="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHLN0RrPTmNUSMhl6MTeX0p_uIIj6Qzoxok9gjmzjELFRCeJaN34K8nOSaG56rrrw-evQ&usqp=CAU" width="40px" /> Python(3.10.6)

</aside>

관련 링크↗️
사용 이유

최신 버전 중에서 Maintenance status가 security로 3.11(bugfix)보다 안정화된 것으로 판단했고, 최대한 오랜 기간 지원을 받기 위해 선택!
3.11 버전은 최대 60% 속도가 향상 되었지만 비교적 최신 버전이기에 사용하는 library가 지원을 안 할 가능성이 있기 때문에 3.10 선택!

🍀 Jenkin(Backend)

관련링크↗️
사용 이유

배포의 자동화 : 테스트, 빌드, 배포 등의 과정을 자동화하여 수작업으로 인한 오류를 줄이고 효율성을 향상 시킬 수 있음.
피드백 반영 : 피드백과 문제의 해결의 빠른 반영이 가능!
다양한 플러그인 제공 : 슬랙 등 다양한 플러그인을 제공하여 실시간으로 배포 상황을 확인 가능!
배포의 시각화

🍀 GitGub Actions(Frontend)

관련링크↗️
사용 이유

통합성 : 깃허브 플랫폼에 내장되어 있기 때문에 별도의 통합 작업 없이 즉시 사용 가능!
간단한 배포 : main.yml 파일을 작성하고, 관련 키를 등록해 주면 되기 때문에 jenkins보다 쉽고 빠르게 배포 가능

<aside> 📢 중간 발표 이후 기재

</aside>

3. 중간발표 피드백 기록

발표자료에 알고리즘 관련 추가
서로의 로직 공유하기

4. 중간 발표 후 회고

1) 미구현 된 MVP 기능

필수기능은 모두 구현

2**) 추가/개선 할 기능과 그 이유**

노트 - 즐겨찾기 기능
계획페이지 - 플랜 색상 변경 가능하게 하기, 간단한 스티커
사진첩 - 여러개의 사진을 함께 업로드, 댓글 보여주는 부분 댓글 2-3개만 보여주고 더보기 버튼 만들어서나머지 로드하기/좋아요 기능, 댓글을 수정하거나 작성한 후에도 모달이 꺼지지 않도록
휴지통 - 전체 삭제/복원 가능, 다중 선택으로 여러개 한번에 복원/삭제 가능, 이름이 길면 줄이기
mbti테스트 - 테스트 결과 유저DB에 저장/마이페이지에서 보여주기
다크모드 지원
마이페이지 - 지도 스탬프 모달에서도 스탬프 선택해서 삭제할 수 있도록?
유저 - 유효기간이 지난 불필요한 이메일 인증 코드 데이터를 자동으로 삭제하는 기능 —> django-celery-beat 라이브러리 사용
해방네컷 페이지 - 프레임 색 변경 가능하게 하기, 날짜 추가 가능하게
그룹 삭제 시 노트, 계획, 사진, 댓글 데이터 status 변경

3**) 추가/개선할 기능을 어떻게 구현 할 것인지**

노트 즐겨찾기 : 북마크 기능을 모방해 erd에 모델 추가 후, 즐겨찾기한 요소가 먼저 보여지게 수정
계획페이지 : 플랜 색상 변경 → 미리 색들을 뽑아두고 선택해서 적용하는 식으로 예정, 달력에 스티커는 이미지 누끼 따서 넣을 예정!
사진첩 : 댓글 일부만 보여주고 더보기 기능으로 펼치기 구현
휴지통 : 라디오버튼을 체크박스로 변경 후 백엔드 코드에서 다중으로 받을 수 있게 변경..!
mbti테스트 : 테스트 결과 유저DB에 저장/마이페이지에서 보여주기
다크모드 : css에서 유저의 컴퓨터가 다크모드일 때 보여지는 색상 추가
- 참고링크 : https://velog.io/@yijaee/다크모드-구현하기
마이페이지 : 지도 스탬프 모달에서도 스탬프 선택해서 삭제가능
유저 : django-celery-beat 라이브러리 숙지 후 도전..!!
해방네컷 페이지: 플랜페이지 처럼 색 뽑아두고 적용, 날짜 추가 가능하게 자바스크립트 추가
그룹 : delete 메소드 실행되면 관련된 데이터 status 변경되게 오버라이드

4. 앞으로의 계획 및 우선순위

| 순위 | 구분 | 앞으로의 계획 (구체적으로) | 마감예정일자 |
| --- | --- | --- | --- |
| 1 | 개선 | 휴지통 전체 복원 및 삭제/ 그룹, 노트, 계획, 사진, 댓글 status연계 | 2023-06-30 |
| 2 | 개선 | 사진첩 댓글 더보기 기능 | 2023-06-30 |
| 3 | 개선 | mbti 테스트 결과 가져오기 | 2023-06-30 |
| 4 | 개선 | 마이페이지 스탬프 삭제 | 2023-06-30 |
| 5 | 추가 | 유저 django-celery-beat 라이브러리 (유효기간 지나면 자동삭제) | 2023-06-30 |
| 6 | 추가 | 다크모드 | 2023-06-30 |
| 7 | 추가 | 해방네컷 테마 추가, 날짜 추가 | 2023-06-30 |
| 8 | 추가 | 계획 일정 색상변경, 스티커 | 2023-06-30 |
| 9 | 개선 | 이미지 다중 업로드 및 상세페이지에서 다중 이미지 보여주기 | 2023-06-30 |

5. 앞으로 해야 할 일(4주차)

팀 전체 (리더와 부리더님께서 필두로 정리해 주세요.)
- [ ] 전체 코드에 대한 팀원들의 이해도 높이기
- [ ] 발표자료에 알고리즘 관련 추가
- [ ] 서로의 로직 공유하기
- [ ] 주석 추가하기
- [ ] 기능 개선사항부터 시작하기
- [ ] 예상질문지 작성하고 공유하기
- [ ] 추가사항은 못해도 슬퍼하지 않기 ㅠㅅㅜ
- [ ] 끝까지 화이팅하기^ㅇ^>
팀원 개인별로 작성해 주세요.
- [ ] 연제건 : 사진첩의 추가기능 부분 구현을 목표로 하며 모든 기능이 어떠한 식으로 이루어져있는지 이해하는 시간을 갖는다. 이미지 삭제 했을때 댓글도 같이 포함 해서 삭제 복원이 가능하도록 하기
- [ ] 김미영 : 예상질문지 작성, 자료 수집및 공유, 코드 로직 다시한번 확인하기, 버그 찾기
- [ ] 김정은 : 그룹 delete 메소드 수정, 이메일 인증 데이터 자동삭제 구현, 보이는 에러가 있다면 수정, 전체 코드 이해하기
- [ ] 양예린 : 여행mbti 테스트결과 유저DB랑 연결, 휴지통/스탬프 자바스크립 수정
- [ ] 최예지 : 해방네컷 프레임색 추가, 날짜 추가, 다크모드, 피그마 수정

저작자표시 변경금지

'내일배움캠프 > 최종 프로젝트' 카테고리의 다른 글

배포 관련 자료 (0)	2023.07.04
🔫 트러블슈팅 💥 (0)	2023.07.03
최종프로젝트 - 9일차 (0)	2023.06.19
최종프로젝트 - 8일차 (0)	2023.06.16
최종프로젝트 - 5일차 (0)	2023.06.12

'내일배움캠프/최종 프로젝트' Related Articles

김묭의 자기개발

최종프로젝트 - 중간점검 본문

최종프로젝트 - 중간점검

<MVP 중간발표 자료(기입)>

2. 기술적 의사결정 & 트러블슈팅 기록

🍀 MySQL

🍀 Python

🍀 Jenkin(Backend)

🍀 GitGub Actions(Frontend)

3. 중간발표 피드백 기록

4. 중간 발표 후 회고

4. 앞으로의 계획 및 우선순위

5. 앞으로 해야 할 일(4주차)

'내일배움캠프 > 최종 프로젝트' 카테고리의 다른 글

티스토리툴바