Portfolio

고려사항 기능 구현 목록 좋아요, 댓글, 팔로우, 메세지 알림페이지 User객체 등장인물 좋아요 test1이 게시글을 작성 test2가 게시글에 좋아요를 날린다.좋아요 객체의 postId를 통해서 게시글 작성자 id를 알아냅니다.게시글 작성자 id로 알림을 보냅니다.test1 사용자의 알림 목록 확인 test1이 알림을 확인합니다 댓글 test2가 댓글을 답니다.댓글 Response의 postId를 통해서 게시글 작성자의 id를 알아냅니다 게시글 작성자에게 알림을 보냅니다.팔로우 test2가 test1을 팔로우합니다.test1에게 팔로우가 생겼다는 알림을 보냅니다.메세지 test2가 test1에게 메세지를 보냅니다.test1에게 메세지가 왔다는 알림을 보냅니다.

고려사항

seenAPI를 보내면 알림이 한 번에 일괄적으로 처리되네요.

개별로 알림을 확인할 수 있는 방법?
그게 불가능하면 알림 확인 처리를 어떻게 보여줄지

좋아요, 댓글의 경우, postId를 통해서 한 번 더 알림을 보낼 사용자를 검색해야 합니다.

팔로우, 메세지는 받는 사람, 보내는 사람이 이미 나눠져 있어서 중간 과정이 없어도 됩니다.

기능 구현 목록

일단 내가 생각한 기능은 이런데

진짜 미현언니 짱멋지다.

ㄹㅇ… 정리 오진다. ㄴㄴ 몰랐음. 철두철미 하구나.

그리고 알림 삭제가 없더라구… 혹시 알고 있늬 API 알림 삭제…ㅠ? seen이 false가 default고 check api 보내면 true로 바뀌고

ㅋㅋㅋㅋ그랬네…몰랐어… 그럼 확인된 건 안 보이게 .. 맞네

SWR 좋은 거 같아! 승준짱~~ 쿠헭! ?_? 일하라능!😘그

그리고, 좋아요, 댓글은 바로 알림을 보낼 수 없는 거 같텨

게시글 아이디에서 작성자 정보 받아오고 그 다음에 보내는 구조인 거 같거든?

혹시 좋아요 작업하면서 한 번 더 확인해보고

오 맞아 그렇지 않아도 좋아요 눌렀는지 확인하려면 사용자 id 받아와야 했어! 그래서 /auth-user api 호출해서 user 정보 받아왔었는데 그대로 활용하면 될 것 같당 올 굳굳굳:)b 오예~

건강챙기면서 해요 유리씡:)

덕분에 이제 완전 쌩쌩해ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 쌩쌩해? ㅋㅋㅋㅋㅋㅋ

우리 아점형 지켜 조아조아:) 🥰

배포는 물 건너 간건가… ㅋㅋㅋㅋㅋㅋ

ㅋㅋㅋㅋㅋㅋ너무해 물 건너 갔다니..ㅋㅋㅋㅋㅋㅋㅋㅋ

충일짱이 든든하게..아니 아직 일주일이나 남았으니까~~ ㅋㅋㅋㅋ믿어줘…

충일짱을 믿어볼까 …ㅋㅋ 에휴.. 맞아 괜차나.ㅋㅋㅋㅋ

그럼 일단 좋아요랑 댓글 알림 보내는 거부터 해볼게유!

좋아유~ 저는 알림 목록 보여주는 거부터 시작해볼껭:) 👍👍

좋아요, 댓글, 팔로우, 메세지

좋아요에서 알림 보내기 ← 여기서부터 유리가 시작하는 건 어때? 지금 좋아요 하고 있지 맞나? → 넹 오늘 끝냈어! 바로 연결해서 해볼게융 올 쓰담쓰담:)b 굳

댓글에서 알림 보내기

팔로우에서 알림 보내기 → 팔로우 기능 머지되면 진행

메세지에서 알림 보내기 → 메시지 User 정보 연동되면 진행

알림페이지

홈페이지에 알림버튼 ← 그럼 난 여기서부터 시작할껭

인증된 사용자에게만 보이기

뱃지로 보여주기 or 안에 숫자로 보여주기

누르면 알림페이지로 가기

알림 목록 보여주기

사용자, 게시글 분류하기
탭 버튼에 따라서 바뀌게 보여주기

탭을 컴포넌트로 리팩토링

SWR로 알림 주기적 fetch

알림 확인

알림 페이지에 들어오는 순간 일괄적으로 알림 확인

확인된 알림 다르게 보여줘야 하는데 일괄적이라 필요 없을 듯
뱃지 제거

알림 삭제

삭제 API가 없다..
렌더링 시 제외

seen이 true이고, createdAt, updatedAt에 대해서 이틀이 지나면?
localstorage에 저장하고, 삭제한 거는 boolean으로 기억?

User객체

followers: 나를 팔로우하는 사람 아이디 배열

following: 내가 팔로우하는 사람 아이디 배열

같은 팔로우객체가 팔로워 배열에 들어가는지, 팔로잉 배열에 들어가는 지의 차이로 보임.

comments: 내가 달은 댓글 아이디 배열

likes: 내가 누른 좋아요 아이디 배열

notifications: 나에게 온 노티 배열

posts: 내가 작성한 게시글 배열

등장인물


test1

token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjYzYmMxMzE4MGM3NmMwNTcwMTZhOTc5MiIsImVtYWlsIjoidGVzdDFAcHJvZ3JhbW1lcnMuY28ua3IifSwiaWF0IjoxNjczNTk3NDI5fQ.PT_4AvF1WaG2yxWMXS6O2P-CMpCu4bQPR_Zl4Qv5VWU"
_id: "63bc13180c76c057016a9792"


test2

token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjYzYmQyNDIxMGUzNmNmNzZkYWUwNmY3OSIsImVtYWlsIjoidGVzdDJAcHJvZ3JhbW1lcnMuY28ua3IifSwiaWF0IjoxNjczNTk1NTU3fQ.Iksw3eJ4igj8djqmp475zMePsHaINn04ajI0uLrqe_E"
id: "63bd24210e36cf76dae06f79"

test1이 게시글을 작성

Response: Post

author: 게시글 작성자 정보
channel: 게시판 정보
_id: 게시글 아이디


const createPostbutton = document.querySelector(".create-post");
createPostbutton.addEventListener("click", () => {
    axios({
        method: "post",
        url: "http://kdt.frontend.3rd.programmers.co.kr:5005/posts/create",
        headers: {
            Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjYzYmMxMzE4MGM3NmMwNTcwMTZhOTc5MiIsImVtYWlsIjoidGVzdDFAcHJvZ3JhbW1lcnMuY28ua3IifSwiaWF0IjoxNjczNTk3NDI5fQ.PT_4AvF1WaG2yxWMXS6O2P-CMpCu4bQPR_Zl4Qv5VWU"
        },
        data: {
            title: "hello World3",
            channelId: "63b989054a1b585b777da2fc"
        }
    }).then(response => console.log(response));
})

test2가 게시글에 좋아요를 날린다.

Response: Like

post: 좋아요 누른 현재 게시글
user: 좋아요 누른 사용자 아이디
_id: Like 아이디


const createLikebutton = document.querySelector(".create-like");
createLikebutton.addEventListener("click", () => {
    axios({
        method: "post",
        url: "http://kdt.frontend.3rd.programmers.co.kr:5005/likes/create",
        headers: {
            Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjYzYmQyNDIxMGUzNmNmNzZkYWUwNmY3OSIsImVtYWlsIjoidGVzdDJAcHJvZ3JhbW1lcnMuY28ua3IifSwiaWF0IjoxNjczNTk1NTU3fQ.Iksw3eJ4igj8djqmp475zMePsHaINn04ajI0uLrqe_E"
        },
        data: {
            postId: "63c135d43de98a0bb58e7cd2"
        }
    }).then(response => console.log(response));
})

좋아요 객체의 postId를 통해서 게시글 작성자 id를 알아냅니다.

Response: Post

author: 게시글 작성자 정보
channel
likes
…


const getPost = document.querySelector(".get-post");
getPost.addEventListener("click", () => {
    axios({
        method: "get",
        url: "http://kdt.frontend.3rd.programmers.co.kr:5005/posts/63c135d43de98a0bb58e7cd2",
    }).then(response => console.log(response));
})

게시글 작성자 id로 알림을 보냅니다.

Response: Notification

author: 알림을 보내는 사람 정보
like / comment / follow / message : 좋아요 알림이면 좋아요 정보
post
seen
user : 알림 받는 사람 아이디


createNotibutton.addEventListener("click", () => {
    axios({
        method: "post",
        url: "http://kdt.frontend.3rd.programmers.co.kr:5005/notifications/create",
        headers: {
            Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjYzYmQyNDIxMGUzNmNmNzZkYWUwNmY3OSIsImVtYWlsIjoidGVzdDJAcHJvZ3JhbW1lcnMuY28ua3IifSwiaWF0IjoxNjczNTk1NTU3fQ.Iksw3eJ4igj8djqmp475zMePsHaINn04ajI0uLrqe_E"
        },
        data: {
            notificationType: "LIKE", //알림 타입
            notificationTypeId: "63c136003de98a0bb58e7d1b", //좋아요, 팔로우, 댓글 객체 아이디
            userId: "63bc13180c76c057016a9792", //알림을 보내는 상대방의 아이디
            postId: "63c135d43de98a0bb58e7cd2",
        }
    }).then(response => console.log(response));
})

test1 사용자의 알림 목록 확인

Response: Notification[]

최신 알림이 0번에 위치합니다

User에 있는 notifications에서는 최신일 수록 배열에 뒤에 위치합니다.


getNotibutton.addEventListener("click", () => {
    axios({
        method: "get",
        url: "http://kdt.frontend.3rd.programmers.co.kr:5005/notifications",
        headers: {
            Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjYzYmMxMzE4MGM3NmMwNTcwMTZhOTc5MiIsImVtYWlsIjoidGVzdDFAcHJvZ3JhbW1lcnMuY28ua3IifSwiaWF0IjoxNjczNTk3NDI5fQ.PT_4AvF1WaG2yxWMXS6O2P-CMpCu4bQPR_Zl4Qv5VWU"
        },
    }).then(response => console.log(response));
})

test1이 알림을 확인합니다

Response:

n: 체크한 알림 갯수
nModified : n과 동일하게 값이 날라옴
ok : 1(성공하면 1이 날라옴)


checkNotibutton.addEventListener("click", () => {
    axios({
        method: "put",
        url: "http://kdt.frontend.3rd.programmers.co.kr:5005/notifications/seen",
        headers: {
            Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjYzYmMxMzE4MGM3NmMwNTcwMTZhOTc5MiIsImVtYWlsIjoidGVzdDFAcHJvZ3JhbW1lcnMuY28ua3IifSwiaWF0IjoxNjczNTk3NDI5fQ.PT_4AvF1WaG2yxWMXS6O2P-CMpCu4bQPR_Zl4Qv5VWU"
        }
    }).then(response => console.log(response));
})

test2가 댓글을 답니다.

Response: comment

author: 코멘트 단 사람 정보
comment: 댓글 내용
post: 댓글 달은 게시글 아이디
_id: 댓글 아이디


createCommentbutton.addEventListener("click", () => {
    axios({
        method: "post",
        url: "http://kdt.frontend.3rd.programmers.co.kr:5005/comments/create",
        headers: {
            Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjYzYmQyNDIxMGUzNmNmNzZkYWUwNmY3OSIsImVtYWlsIjoidGVzdDJAcHJvZ3JhbW1lcnMuY28ua3IifSwiaWF0IjoxNjczNTk1NTU3fQ.Iksw3eJ4igj8djqmp475zMePsHaINn04ajI0uLrqe_E"
        },
        data: {
            comment: "Wonderful!",
            postId: "63c135d43de98a0bb58e7cd2"
        }
    }).then(response => console.log(response));
})

댓글 Response의 postId를 통해서 게시글 작성자의 id를 알아냅니다

위와 동일

게시글 작성자에게 알림을 보냅니다.

Response: Notification

author: 알림을 보내는 사람 정보
like / comment / follow / message
post
seen
user : 알림 받는 사람 아이디


createNotibutton.addEventListener("click", () => {
    axios({
        method: "post",
        url: "http://kdt.frontend.3rd.programmers.co.kr:5005/notifications/create",
        headers: {
            Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjYzYmQyNDIxMGUzNmNmNzZkYWUwNmY3OSIsImVtYWlsIjoidGVzdDJAcHJvZ3JhbW1lcnMuY28ua3IifSwiaWF0IjoxNjczNTk1NTU3fQ.Iksw3eJ4igj8djqmp475zMePsHaINn04ajI0uLrqe_E"
        },
        data: {
            notificationType: "COMMENT", //알림 타입
            notificationTypeId: "63c13a403de98a0bb58e7e60", //댓글 객체 아이디
            userId: "63bc13180c76c057016a9792", //알림을 보내는 상대방의 아이디
            postId: "63c135d43de98a0bb58e7cd2",
        }
    }).then(response => console.log(response));
})

팔로우

test2가 test1을 팔로우합니다.

Response: Follow

follower: 팔로우하는 사람 아이디

“내”가 팔로우 버튼 클릭하는 거니까 “내” userId가 되겠네요

user: 팔로우받는? 사람 아이디
_id : 팔로우 객체 아이디


createLikebutton.addEventListener("click", () => {
  axios({
      method: "post",
      url: "http://kdt.frontend.3rd.programmers.co.kr:5005/follow/create",
      headers: {
          Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjYzYmQyNDIxMGUzNmNmNzZkYWUwNmY3OSIsImVtYWlsIjoidGVzdDJAcHJvZ3JhbW1lcnMuY28ua3IifSwiaWF0IjoxNjczNTk1NTU3fQ.Iksw3eJ4igj8djqmp475zMePsHaINn04ajI0uLrqe_E"
      },
      data: {
          userId: "63bc13180c76c057016a9792" //팔로우할 사람 아이디
      }
  }).then(response => console.log(response));
})

test1에게 팔로우가 생겼다는 알림을 보냅니다.

Response: Notification

author: 알림을 보내는 사람 정보
like / comment / follow / message : 좋아요 알림이면 좋아요 정보
seen
user : 알림 받는 사람 아이디


createNotibutton.addEventListener("click", () => {
    axios({
        method: "post",
        url: "http://kdt.frontend.3rd.programmers.co.kr:5005/notifications/create",
        headers: {
            Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjYzYmQyNDIxMGUzNmNmNzZkYWUwNmY3OSIsImVtYWlsIjoidGVzdDJAcHJvZ3JhbW1lcnMuY28ua3IifSwiaWF0IjoxNjczNTk1NTU3fQ.Iksw3eJ4igj8djqmp475zMePsHaINn04ajI0uLrqe_E"
        },
        data: {
            notificationType: "FOLLOW",
            notificationTypeId: "63c13d983de98a0bb58e7e8a",
            userId: "63bc13180c76c057016a9792", //알림을 보내는 상대방의 아이디
            postId: null,
        }
    }).then(response => console.log(response));
})

메세지

test2가 test1에게 메세지를 보냅니다.

Response: Message

message: 보낸 메세지 내용
receiver: 메세지 받은 사람 정보
seen: 메세지 확인 여부
sender: 메세지 보낸 사람 정보
_id: 메세지 객체 아이디


createLikebutton.addEventListener("click", () => {
    axios({
        method: "post",
        url: "http://kdt.frontend.3rd.programmers.co.kr:5005/messages/create",
        headers: {
            Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjYzYmQyNDIxMGUzNmNmNzZkYWUwNmY3OSIsImVtYWlsIjoidGVzdDJAcHJvZ3JhbW1lcnMuY28ua3IifSwiaWF0IjoxNjczNTk1NTU3fQ.Iksw3eJ4igj8djqmp475zMePsHaINn04ajI0uLrqe_E"
        },
        data: {
            message: "first message!",
            receiver: "63bc13180c76c057016a9792" //test1의 아이디
        }
    }).then(response => console.log(response));
})

test1에게 메세지가 왔다는 알림을 보냅니다.

Response: Notification

author: 알림을 보내는 사람 정보
like / comment / follow / message : 메세지 아이디
seen
user : 알림 받는 사람 아이디


data: {
    notificationType: "MESSAGE",
    notificationTypeId: "63c143be3de98a0bb58e7ee6", //메세지 객체 아이디
    userId: "63bc13180c76c057016a9792", //receiver
    postId: null,
}

Notification API