- 당근마켓 클론코딩을 진행
- 중고거래 페이지, 동네생활 페이지 완성
- 게시글 및 댓글 작성, 수정, 삭제가 가능한 커뮤니티 구현
- 이름: 당근마켓 클론코딩
- 기간: 2021.04.02 ~ 2021.04.08
- 팀원
- Front-end(React-Native): 김지하, 신일섭
- Back-end(Node.js): 조상균, 이총명
- Server: AWS EC2(Ubuntu 20.04 LTS)
- Framework: Express(Node.js)
- Database: MongoDB
mongoose, jsonwebtoken, multer, sanitize-html, dotenv
- 아이디, 패스워드를 입력하여 로그인 할 수 있고 로그아웃 버튼을 눌러서 나올수 있습니다. (JWT)
- 아이디, 비밀번호, 닉네임을 입력하고 회원가입을 진행할 수 있습니다.
- 다른사람의 글 목록을 확인하고 클릭해서 상세 내용을 확인할 수 있습니다.
- 로그인한 사용자는 글을 작성하여 게시할 수 있고 자신의 글만 수정 및 삭제가 가능합니다
- 로그인한 사용자는 댓글을 달 수 있고 다른 사람들의 댓글 리스트를 확인 가능합니다.
| 기능 | Method | URL | Request Params / Body, Response |
|---|---|---|---|
| 접속자 정보 | GET | /user | userId, nickname, id, area |
| 회원가입 요청 | POST | / | msg : "empty" |
| 로그인 요청 | POST | /auth | msg : "success" or "fail" |
| 글 목록 | GET | /exchange | posts:[{ exchangeId, nickname, title, price, contents, loveCount, area, beforeTime, soldState}].. |
| 중고거래 글 정보 | GET | /exchange | exchangeId, title, price, beforeTime , nickname, loveCount, area, contents , img:[이미지1,2...], soldState |
| 판매상태 변경 | PATCH | /exchange/:postId/state | |
| 글 등록 요청 | POST | /exchange | |
| 글 삭제 요청 | DELETE | /exchange/:exchangeId | |
| 글 수정 요청 | PATCH | /exchange/:exchangeId | |
| 글 목록 | GET | /town?lastId=<마지막글ID> | status, boards: [{townId, nickname, area, contents, category, date, commentCount, images: [], userId },..... |
| 글 등록 요청 | POST | /town | |
| 동네생활 글 정보 | GET | /town/:townId | status, board: { townId, nickname, beforeTime, area, commentCount, contents, images: []} |
| 글 삭제 요청 | DELETE | /town:townId | |
| 글 수정 요청 | PATCH | /town:townId | |
| 댓글 목록 | GET | /comment/:townId | status, comments: [{ commentId, townId, commentContents, nickname, userId },... |
| 댓글 추가 | POST | /comment/:townId | |
| 댓글 삭제 | DELETE | /comment/:commentId | |
| 프로필 확인 | GET | /profile | {status, profileData :[{nickname, area, userid}] |
| 이미지 업로드 요청 | POST | /image | {status, images:[" |
- 크로스 사이트 스크립팅(XSS)은 웹 애플리케이션에서 많이 나타나는 취약점의 하나로 웹사이트관리자가 아닌 사용자가 웹페이지에 악성 스크립트를 삽입할 수 있는 취약점입니다. 그래서 sanitize-html라이브러리를 사용하여 데이터의 입력과 출력이 필요한 부분에 스크립트 방지 처리를 하여 보안적인 부분을 개선하였습니다.
- 로그인, 회원가입을 JWT 인증으로 구현하면서 확실하게 이해할 수 있는 시간이었습니다. 사용자는 아이디와 패스워드를 입력하고 로그인을 요청합니다. 이때 서버는 DB와 해당 사용자가 존재한다면 토큰을 발급하고 로그인 요청을 승인합니다. 이때, 로그인을 한 사용자만 글을 쓰고, 글을 작성한 사용자만 해당 글에 대해서 수정, 삭제를 할 수 있도록 하기 위해서 미들웨어 형식으로 처리하여 해당 사용자를 res.locals.user로 정보를 찾은 후 해결하였습니다.
- 각 페이지별로 게시글을 한번에 보여주면 사용자가 아래로 스크롤 할 때 불편함을 느낄 수 있었습니다. 그래서 쿼리 스트링으로 마지막으로 불러온 글의 ID를 찾은 후, 무한 스크롤이 첫 페이지일 경우, 무한 스크롤 이전 페이지가 있을 경우 분기처리를 해서 구현 했습니다. 그럼으로써 사용자가 페이지 하단에 다다르면 더 많은 항목을 로딩하면서 서버에서 받은 데이터를 웹에서 렌더링 하는 속도가 빨라졌습니다.