지난 주에는 미니 프로젝트 주차가 진행되었다. 우리조는 스프링2명 리액트1명으로 구성되었는데 예상보다 인원이 적게 구성되어서 스코프를 최대한 작게 잡아야 겠다는 생각이 우선 들었다.
우선 프로젝트 주제는 팀원분 중 미술 전공자분이 있었는데 그분의 아이디어를 선정하여 미술품 공유 웹사이트로 정하였고 mvp 기능으로는 회원 관리 없이 전체에게 조회되는 게시글 작성 및 조회 수정 삭제로 정하였다. 또한 당연히 미술품 공유 웹사이트이므로 이미지를 보여주어야 했는데 아직 이미지 업로드 기능을 배우지 않았기 때문에 게시글 작성 시 우선 이미지 파일 업로드가 아닌 이미지 주소를 제출하기로하고 모든 기능이 완료되고 난 뒤 이미지 업로드 기능을 구현해보기로 하였다.
와이어 프레임, .API명세서 작성 등 모든 SA가 완료되고 난 뒤 프로젝트를 진행하던 중 매니저님이 백엔드는 CI/CD와 Https를 먼저 구현하고 스코프를 최소한으로 잡아 최소기능부터 완성하고 모든것이 완료되면 조금씩 살을 붙여가라는 지시를 해주었다.
나는 이전에 개발경험이 아에 없었고 항해99부트캠프를 시작하고 나서 프론트와 백의 협업과정이 처음이었기 때문에 혼자 스프링 개발을 하듯 뚝딱뚝딱 만들면 끝이라고 생각하였지만 협업시에는 생각해볼것이 많았다. 예를 들어 크게는 CORS라던가 사소하게는 API명세서상의 변수명, 데이터의 구조 등 혼자 개발할때와 다르게 예상치 못한 곳에서 발생하는 문제들이 많았다.
CI/CD
CI/CD는 지속적인 통합 / 지속적인 개발 및 배포라는 뜻으로 개발 외의 과정인 빌드와 테스트, 배포의 과정을 자동화하여 개발자는 개발에 더 집중할 수 있게해준다.
나는 Github Actions를 이용하여 CI/CD를 구성하였다.
https://tjsdn9803.tistory.com/67 CI/CD구성 - (1)
https://tjsdn9803.tistory.com/70 CI/CD구성 - (2)
개발이 완료되고 난 뒤 깃허브 원격 레포지토리의 master 브랜치에 merge하면 트리거가 발생되어 빌드 및 테스트가 진행되고 정상적으로 빌드 및 테스트가 끝나면 실행 파일을 압축하여 aws 클라우드 스토리지 서비스인 S3에 파일을 압축하여 업로드하고 CodeDeploy에 배포 명령을 내린다. CodeDeploy는 명령을 받고 S3스토리지로 부터 파일을 Ec2로 옮기고 Ec2에게 배포 명령을 한다.
CI/CD구축 이전에는 개발이 완료되면 직접 파일을 빌드하고 그 파일을 Ec2인스턴스로 복사한 후 Ec2인스턴스에 접속하여 jar파일을 실행시켜줬어야 했는데 CI/CD를 구축하여 이 번거로운 과정을 생략할 수 있었다.
CORS
우리는 mvp기능이였던 CRUD기능 중 우선 CR만 구현한 뒤 프론트와 통신해보고 UD를 추가로 개발하기로 하였다.
CR기능개발 자체는 그동안 많이 해보았던 게시판 프로젝트와 같은 유형이었기도 하고 회원기능도 없기 때문에 ERD도 복잡하지 않아 빠르게 개발할 수 있었고 CI/CD를 통해 빠르게 배포까지 진행하였다. 하지만 CORS 정책이 위반되어 프론트에서 데이터를 받는것이 불가능하였다.
https://tjsdn9803.tistory.com/69
[WIL]20230710~20230716 CORS
CORS(Cross-Origin Resource Sharing) CORS는 Cross-Origin Resource sharing의 줄임말로 직역하면 교차 출처 리소스 공유이다. URL은 다음과 같은 구성 요소로 이루어져있는데 출처(Origin)란 Protocol과 Host 그리고 포트
tjsdn9803.tistory.com
떄문에 프론트와 백모두 CORS에 대한 대비를 하고 통신을 해보았더니 성공하였다.
S3이미지 업로드
통신에 성공하여 게시글 수정, 삭제 기능또한 개발하였다. 그 이후 이미지 업로드 방식을 구현하기 위해 방법을 공부해보았다.
https://tjsdn9803.tistory.com/71
이미지 업로드 방식에는 이미지 자체의 이진코드 자체를 DB에 저장하는 방법과 이미지원본은 다른곳에 저장하고 DB에는 이미지의 경로를 저장하는 방법이 있다. 첫번째 방법은 이미지 파일의 크기가 크기도하고 병목현상이 발생할 수 있어 비효율적이다. 때문에 우리는 두번째 방법을 선택하였고 그 중에서도 이미지 파일을 프로젝트 폴더 내에 저장하는 방식이 아닌 클라우드 저장소인 S3저장소에 저장하는 방식을 택하였다.
이렇게 이미지 업로드 기능구현까지 완료되면서 미니 프로젝트주차는 끝났다.
비록 처음협업하는 과정에서 그전까진 몰랐던 오류나 돌발상황을 해결하느라 회원 기능이나 많은것들을 구현해보진 못했지만 해결하는 과정에서도 새로운 것들을 많이 배운것 같다. 또한 이전까지 개발만 해온 느낌이라고 깨닫게 되었고 일 잘하는 개발자가 되려면 프론트와의 커뮤니케이션, 같은 백 팀원간의 커뮤니케이션또한 매우 중요한 것이라는것을 깨닫게 되었다.
https://www.youtube.com/watch?v=cHCN78UOvNk
'WIL(Weakly I Learned)' 카테고리의 다른 글
[WIL]20230731 ~ 20230806 - 최종 프로젝트 1주차 회고 (0) | 2023.08.08 |
---|---|
[WIL]20230724~20230730 - 인스타 그램 클론 코딩 회고 (0) | 2023.07.31 |
[WIL]20230710~20230716 CORS (0) | 2023.07.16 |
[WIL]20230703~20230709 ORM과 JPA (0) | 2023.07.09 |
[WIL]20230626~20230702 DI, IoC, Bean (0) | 2023.07.02 |