| 파트 | 개발 기술 |
|---|---|
| Frontend |         |
| Backend |      |
| Deployment |  |
| Management |  |
- 3인 팀 프로젝트
- 환경보호를 위한 기록 커뮤니티라는 주제로 간단한 분리수거 방법부터 친환경Tip이나 제로웨이스트, 미니멀 라이프 등 나의 발자취를 기록하고 공유하는 SNS 공간을 만들었습니다.
- 사용자, 게시글 작성에 대한 CRUD
- 해당 게시글에 대한 좋아요, 신고, 댓글과 대댓글 기능
- 게시글 검색, 태그를 이용한 검색기능
- 채팅 기능
- 관리자 페이지
-
Frontend
- React(Hooks)와 Javascript ES6+ 문법을 사용한 UI개발
- Redux-toolkit을 사용한 상태관리
- Next.js를 사용한 동적 웹 페이지의 SSR
- TailwindCSS을 사용한 디자인과 퍼블리싱
- 반응형 웹
- StompJS와 SockJS를 사용한 채팅 구현
- REST API 서버 연동
- 회원가입과 신고를 제외한 프론트엔드 전체 담당
-
Backend
- 비밀번호 변경, 좋아요 기능
-
Deployment
- AWS Lightsail을 사용한 프론트엔드 파트 배포
Next.js의 CORS에러
FormData사용시 FileReader로 이미지 리스트 만들기
검색 구현을 위한 Reducer사용
Sock.js와 Stomp.js를 사용한 채팅 구현
tailwindCSS사용시 Next의 SSR이 동작하지 않는 경우
AWS Llightsail에서 Burstable Zone을 넘어갔을 때의 Swap Memory사용
서버에서 게시글 받아올 때 댓글 API를 따로 보내야 게시글+댓글이 받아지는 현상이 있어 댓글이 늘어날수록 최적화에 불리해집니다.
원인을 찾는중입니다.
이번 프로젝트는 빠르게 기능이나 기술 위주의 공부를 해보자는 취지였기 때문에 사용하고 싶은 기술들을 다 도입했습니다.
먼저 Redux-toolkit을 사용해 Redux + Redux-Saga 보다 보일러 플레이트를 줄여 코드를 깔끔하게 하고 작업시간을 단축시켰습니다.
또, Typescript나 Next.js를 더 심도있게 배울 수 있었고, 처음으로 SockJs와 StompJS를 이용해 채팅 기능을 만들어 볼 수 있었습니다.
그리고 Tailwindcss와 UI 라이브러리인 flowbite까지 사용을 해보며 디자인을 이렇게 쉽게 해도 되는건가? 라는 생각이 들 정도로 빠르게
UI를 구현할 수 있었습니다.
이전 프로젝트를 할 때 백엔드에 대한 이해도가 낮아서 소통에 어려움을 겪었던 기억이 있습니다.
그래서 이번 프로젝트는 원활한 소통을 위해 조금이지만 백엔드 작업을 맡아서 했습니다.
덕분에 SpringBoot에 대한 두려움을 조금이나마 극복할 수 있었고, 전체적으로 이해가 잘 안갔던 부분들이 어느 정도 정리가 됨으로써
소통을 빠르게 할 수 있었기에 작업 효율이 올랐습니다.
공부한 부분과 문제해결 과정을 블로그나 메모장에 기록하여 비슷한 문제가 발생했을 때 금방 해결할 수 있었고,
기억에도 잘 남아서 작업을 효율적으로 할 수 있었습니다.
매주 작업 파트를 작성하고 매일 어떤 파트를 진행할지 주고받음으로써 프로젝트의 진행도를 쉽게 파악할 수 있었습니다.
AWS lightsail을 사용해 프론트단의 배포를 해봄으로써 기획부터 배포까지 모든 사이클을 경험해 볼 수 있었습니다.
SEO의 과정중 도메인 최적화 작업을 경험하지 못해 검색엔진에 노출되는 정도를 확인하지 못해서 아쉬웠고,
백엔드 파트를 좀 더 많이 참여하지 못한게 아쉽습니다.
| 이름 | 역할 | Github |
|---|---|---|
| 이태일 | 프론트엔드 | https://github.com/k1k2brz |
| 변현석 | 백엔드 | https://github.com/B-HS |
| 김형준 | 백엔드 | https://github.com/PorkbellyBigfan |
npm install
npm run dev