백엔드 개발 포트폴리오 | 반려동물 자랑 커뮤니티
내일배움캠프 4기 웹 개발 과정 Spring 트랙 수료생 최종 프로젝트 '펫팸'을 소개합니다.
Aug 17, 2023
🛠️ 아키텍쳐
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fc4683485-699b-4aef-a174-329f78e568fb%252FUntitled.png%3Ftable%3Dblock%26id%3D21831613-9b43-42e8-97d9-5bb6d2db739b%26cache%3Dv2&w=3840&q=75)
🛠️ 기술적 의사결정
사용 기술 | 기술 설명 |
MySql | 우리 프로젝트가 게시판 기능을 중심으로 구성되어 있기 때문에, 사용자들이 작성한 글과 댓글 등의 데이터를 안정적으로 저장하고 관리해야 했고, MySQL은 오픈 소스 관계형 데이터베이스 관리 시스템으로 효율적인 서버관리를 위하여 관계형 DB를 선택했습니다. |
S3 | S3는 AWS기반으로 용량을 무제한으로 확장 할 수 있기 때문에, 트래픽이 늘어나더라도 서버 리소스를 추가로 할당하지 않아도 되는 장점이 있을 뿐더러,
AWS의 보안 기능을 활용, S3는 암호화된 데이터 전송을 제공, 데이터를 두 번 이상 복제하여 내구성 역시 보장되고, 사용한 만큼만 값을 지불하면 되는 비용 효율성 때문에 선택했습니다. |
Cookie | 클라이언트에 저장되기 때문에 서버의 자원을 사용하지 않음. 따라서 서버의 부하를 줄일 수 있다는 점과 쿠키는 웹에서 일반적으로 사용되는 기술이므로 다양한 브라우저에서 일관된 동작을 보장할 수 있기 때문에 선택했습니다. |
🎯 트러블 슈팅
Cascade
❓이미 작성된 게시글에 댓글이 달려있는 경우 삭제가 되지 않음
❗️cascade 옵션을 주지 않아서 생긴 문제로, 옵션을 주고나니 해결
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F8ed10eb4-3b91-43a5-afac-4837fb8527fa%252FUntitled.png%3Ftable%3Dblock%26id%3D4acbcdb6-0cbd-4e61-bc0b-0290879ee387%26cache%3Dv2&w=3840&q=75)
CORS
❓프론트엔드 서버와 백엔드 서버를 구분하는 과정에서 두 서버의 IP가 달라 CORS오류가 발생
❗️백엔드 서버에서 securityFilter에 cors를 허용해줌으로써 해결
@Bean public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception { http.cors().and().csrf().disable(); // 중간 코드 생략 } @Override public void addCorsMappings(CorsRegistry corsRegistry) { corsRegistry.addMapping("/**") .allowedOrigins("http://localhost:8080", "http://127.0.0.1:5500/") .allowedMethods("GET", "POST", "PATCH", "DELETE", "OPTIONS", "HEAD") .exposedHeaders(AUTHORIZATION_HEADER,REFRESH_AUTHORIZATION_HEADER) .allowCredentials(true) .maxAge(3600); }
EC2 프리티어 메모리부족
❓배포시에 aws EC2인스턴스프리티어 기본 램이 1GB밖에 되지 않아서 프로그램이 실행되다가 서버가 다운되는 경우가 자주 발생했다.
❗️SWAP메모리를 활용해서 EC2인스턴스에 가상 램공간을 2GB를 확보해 주었다. 그 이후로 서버를 보다 안정적으로 실행하는것이 가능했다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fa4c2c604-e1c2-462b-9532-85efc50f96df%252FUntitled.png%3Ftable%3Dblock%26id%3D11c364ee-f18f-4dc9-8a34-c24966a98981%26cache%3Dv2&w=3840&q=75)
📌 주요 기능
🧩 메인 페이지
- 매달 좋아요 갯수가 많은 순서로 3개 글을 불러옴
- 반려동물 자랑 카테고리 중 최신 6개 글을 불러옴
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F2c633fc1-fbd8-4e65-9baa-3492d927683f%252FUntitled.png%3Ftable%3Dblock%26id%3D05fc41c6-fcaf-4232-95c5-4d34da7d7696%26cache%3Dv2&w=3840&q=75)
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Faa17f103-e125-4ce6-bd6c-02b09e11e4d4%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-07_%2525E1%252584%252589%2525E1%252585%2525B5%2525E1%252584%252580%2525E1%252585%2525A1%2525E1%252586%2525AB_20.02.33.png%3Ftable%3Dblock%26id%3Ddb87a797-fcf7-4862-89c6-93e8f6c7ab6d%26cache%3Dv2&w=3840&q=75)
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Ffaf94cbd-d539-464d-9ca9-4c5c18b2ada7%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-07_%2525E1%252584%252589%2525E1%252585%2525B5%2525E1%252584%252580%2525E1%252585%2525A1%2525E1%252586%2525AB_20.02.45.png%3Ftable%3Dblock%26id%3D32298396-df96-4d1e-82a9-4c055e4681d4%26cache%3Dv2&w=3840&q=75)
🧩 카테고리 별 페이지
- 글 작성 시 분류한 카테고리 별, 최신순으로 페이징 된 글 목록을 불러옴.
- 각 글의 좋아요 수와, 조회수를 볼 수 있음.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fc9cdab94-94cb-4918-91d8-3bd94594ade5%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-07_%2525E1%252584%252589%2525E1%252585%2525B5%2525E1%252584%252580%2525E1%252585%2525A1%2525E1%252586%2525AB_20.03.14.png%3Ftable%3Dblock%26id%3Dc19fb471-c3a4-4fff-a2bd-8409f66ad619%26cache%3Dv2&w=3840&q=75)
🧩 상세 페이지
- 게시물 수정/삭제 기능 모두 가능
- 한사람 당 한 게시물, 한 댓글, 한 대댓글에 좋아요를 누를 수 있음
- 한번 더 누를시 좋아요 취소 가능
- 게시물과 댓글은 1대다, 댓글과 대댓글도 1대다 관계를 가짐
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fcb9c162e-ef92-4b15-9d99-ca73333c7e81%252F%2525E1%252584%252589%2525E1%252585%2525B3%2525E1%252584%25258F%2525E1%252585%2525B3%2525E1%252584%252585%2525E1%252585%2525B5%2525E1%252586%2525AB%2525E1%252584%252589%2525E1%252585%2525A3%2525E1%252586%2525BA_2023-03-07_%2525E1%252584%252589%2525E1%252585%2525B5%2525E1%252584%252580%2525E1%252585%2525A1%2525E1%252586%2525AB_20.03.30.png%3Ftable%3Dblock%26id%3D1c3e57c0-7e59-446c-98b7-1fd92caa863d%26cache%3Dv2&w=3840&q=75)
🧩 관리자 페이지
- 전체 가입 유저 목록을 볼 수 있음
- 목록 클릭할 시 유저 정보 상세 페이지로 이동
Share article
Subscribe to our newsletter