230220 - 프로젝트 발표 및 회고

3주간 진행했던 프로젝트가 마무리 됐다.

---

목차

1. 시연 내용

   1-1. 메인페이지

   1-2. 로그인 페이지

   1-3. 채팅 기능

   1-4. 인기 게시글, 인기 멤버 ( 랭킹 기능 )

   1-5. 알림 기능

   1-6. 게시판 CRUD

   1-7. 댓글 기능

   1-8. 좋아요 기능

   1-9. 리스트 페이지

   1-10. 검색기능

   1-11. 나의 반응 페이지

   1-12. 에러 처리

   1-13. 배포

 

2. 회고

---

1. 시연

1-1. 메인 페이지

메인 페이지 진입 시 게시판 데이터를 랜덤으로 불러와서 카드에 하나씩 보여준다. 각 카드의 사진이나 제목을 통해서 view 페이지로 이동 가능하다. 카드의 하단부 클릭 시 게시글의 정보를 간단하게 볼 수 있다.

 

 

1-2. 로그인 페이지

회원가입 시 ID와 Nickname을 input 이벤트를 통해 기입하는 순간 데이터를 AXIOS 요청을 이용해 중복체크를 하여 중복체크 버튼 없이 바로 체크 가능하게 하였다. kakao login API를 통해 카카오로그인을 구현하였고, 받은 데이터를 활용하여 회원 이미지도 넣어 주었다. 

로컬 회원가입을 할 때는 회원 이미지를 위해서 multer 기능을 추가하여 사진을 넣을 수 있도록 했다.

 

1-3. 채팅 기능

 

 

Socket IO를 이용한 실시간 채팅 기능을 넣었다. layout에 있는 기능이므로 모든 페이지에서 채팅방을 열 수 있지만 데이터베이스를 이용하지 않았기 때문에,  화면 이동시 채팅 데이터가 유지되지 않는다. 유저의 ID정보를 이용하지 않고, 닉네임을 이용한 채팅방이다. 

 

1-4. 인기 게시글, 인기 멤버 ( 랭킹 기능 )

 

글 작성, 댓글을 작성할 때마다 점수를 주고 좌측 상단 아이콘을 누르면 랭킹 사이드바에서 확인할 수 있다.

인기 게시글 같은 경우는 좋아요를 많이 받은 게시물 순서대로 정렬된다. 

 

1-5. 알림 기능 

 

socket IO를 이용한 알림

 

 

socket IO를 이용해서 알림 기능을 만들었다. 로그인한 정보와 게시물의 작성자를 비교하여 같은 사람일 경우 알림을 띄어주는 방식이므로 로그인 정보와 게시물의 작성자가 다르면 알림을 받을 수 없다. (당연하지만..)

 

 

1-6. 게시판 CRUD

 

 

 

게시판 글 작성, 읽기, 수정하기, 삭제하기 기능을 구현했다.

게시판 글을 작성할 때 CKeditor라는 기능을 이용해서 일반적인 글 작성 같은 문제뿐 아니라 사진도 쉽게 올릴 수 있도록 했고,

작성한 글에서 사진은 따로 DB에 저장하여서 다른 곳에서도 데이터를 이용할 수 있게 했다.

 

 

1-7. 댓글 기능

게시글 한 개를 보는 view페이지에서 댓글, 대댓글 기능을 추가했고, 수정 및 삭제기능 또한 로그인 정보와 비교하여 자신의 댓글에만 수정, 삭제 버튼이 보이도록 구현함.

 

 

1-8. 좋아요 기능

좋아요 기능을 통해서 게시물에 나의 반응을 보여줄 수 있고, 중복해서 추천을 누를 수 없도록 했다.(재 클릭 시 -1이 된다. )

 

 

1-9. 리스트 페이지

올린 글 전부를 확인할 수 있다. 그리고 그 게시물에 대한 조회수, 추천수를 한눈에 볼 수 있다.

게시글 작성 시 서브 카테고리를 지정할 수 있고, 게시판에서 서브카테고리 이름을 클릭하면 이에 대한 글만 추려서 볼 수 있다.

 

1-10. 검색기능

헤더 부분의 검색기능과, 게시판 내 검색기능이 있는데,

헤더 부분에선 유저 정보 및 게시판 정보를 보여주고, 게시판 내 검색에선 제목에 대한 검색과, 작성자에 대한 검색 결과를 보여준다.

 

1-11. 나의 반응 페이지

나의 반응 페이지에서는 내가 댓글을 쓴 게시물과 좋아요를 한 게시물을 모아서 보여준다. 좋아요 누른 게시물의 좋아요 수는 그 게시판의 전체 좋아요 수를 보여준다.

 

1-12. 에러 처리

모든 에러에 대해서 에러페이지로 이동시킨다.

에러가 발생하면 에러페이지를 띄어주면서 에러 발생 시 서버가 꺼지는 현상을 막았고, 다시 초기 페이지로 이동을 유도했다.

발생한 에러에 대해서 하단에 어떤 내용의 에러인지 확인할 수 있게 했다.

 

 

1-13. 배포

AWS를 이용한 배포를 진행했다. 

 

 

2. 회고

3주간 진행된 프로젝트였는데, 공부하는 시간을 가지면서 프로젝트를 마무리할 수 있어서 좋았다.

시간이 지나면서 실력도 늘게 되니 처음에 썼던 내용도 바꾸고 싶어지고, 실제로 바꾸게 되었다.

 

저번 프로젝트에서는 화면 만들기나 들어온 데이터를 가지고 nunjucks 작업만 하기 바빴는데, 

이번에는 화면 UI 작업, front 서버 작업도 했고, 몇몇 기능에 대해서 back서버까지 작업하는 경험을 할 수 있어서 개인적으로 실력이 많이 늘 수 있었던 시간이었다. 

 

이번에 프로젝트하면서 중요하게 얻은 내용은 문서화, 파일 분리였다.

 

1. 저번 프로젝트에서도 약간 느꼈지만 일정 관리, trello, 이슈 관리 등등 문서로 남기면서 작업을 진행하는 게 아직은 미흡하다고 느꼈다.

이미 알고 있던 내용이라 조금 더 신경 쓰긴 했지만 작업 전에 trello의 카드 관리를 한다던가, 이슈를 틈틈이 관리하면 좋겠다고 느꼈다.

그래야 나중에 일정관리를 한눈에 볼 수 있을 것 같았다. 문서화하면서 제일 크게 와닿았던 문제는 RESTful API를 위한 문서화였다.

정해진 규칙에 맞게 요청하고 응답하기 위해서 문서화를 했어야 했지만, 확실하게 정리하지 못했고, 계획을 두리뭉실하게 했던 게 코드를 짜면서 느끼게 되었다. 계획부터 철저하게 짜고, 규칙을 잘 정해놨으면 조금 더 빨리 잘 해결했을 것 같았다. 

아마 작업을 하면서 더 실력이 늘게 되니 보이는 문제 같기도 했다.

 

2. 파일을 기능별로 분리해서 작업했으면 가독성 및 추가 개발에도 효과적이라는 것을 느끼게 되었다.

board 같은 경우 한 파일에 일반 CRUD, comment, notification, search 등 기능이 다 추가되니 파일의 내용이 길어지고 그로 인해 가독성 및 유지보수에 불편함을 많이 느꼈다. 

기능 별로 파일을 나누고 필요한 곳에 가져다 쓰는 것이 좋겠다는 생각이 들었고, 다음번 작업에서는 조금 더 세분화해서 분리하고 작업할 수 있도록 해야겠다.

 

크게 부족한 부분은 이렇게 2가지 문제였고, 많이 아쉬웠지만 많이 성장할 수 있었던 프로젝트였다.

첫 프로젝트에서 제대로 이해하지 못했던 데이터의 흐름에 많은 이해를 할 수 있었다!

 

API사용이나, 외부모듈 사용도 많이 해볼 수 있었고, 배포까지 해볼 수 있었다는 건 너무 재밌었던 프로젝트였다.