my_diary_blog

This is an advanced blog service.

Stars
0
View Code on GitHub
Ecosystems: JavaScript

0. 개발배경 및 사용 기술 스택

어느 날 여러 블로그를 탐방하던 중 이미지가 어떻게 처리되고 Markdown 형식의 게시물이 어떻게 저장되는지에 대한 궁금증이 생겼습니다. 이 궁금증은 개발에 대한 열망으로 이어져 더 고급 서비스를 만들기로 다짐했습니다. 기존 블로그 플랫폼이 이미지 데이터를 다루고 Markdown 형식의 콘텐츠를 저장하는 방식에 흥미를 느끼며, 이를 직접 학습하고 경험하고자 했습니다.

기술적인 어려움이 많이 예상되었지만. 잘 정리된 문서로 효율적인 학습이 가능했습니다. 목표는 새로운 서비스를 구축하는 것보다는 지향하고자하는 서비스를 스며들게하고 아니라 기술적인 스킬을 실제 적용을 통해 점진적으로 향상시키는 것이었습니다.

사용 기술 스택

  • BackEnd

    • express
    • mysql
      • sequelize 사용
    • jwt-auth
      • redis 활용
    • bcrypt 를 통한 암호화
    • multer middleware 를 통한 이미지 처리
    • swagger를 통한 api-doc 명세 처리

  • FrontEnd

    • react
    • markdown Editor을 통해서 개발자들을 쓰기 편하게 구성
    • axios

개발 인원

1인 개발 진행

1. ERD 설계

2. url 설계

URL Method Description Token Required in Headers
/user GET Return information for all users Yes
/user POST Create a new user No
/user/profile GET Get the profile of the authenticated user Yes
/user/{userId} GET Get information about a specific user No
/user/{userId}/board GET Get boards created by a specific user No
/user/{userId} PUT Update information of a specific user Yes
/user/{userId} DELETE Delete a specific user Yes
/user/{userId}/following POST Follow a user Yes
/user/{userId}/follower GET Get followers of a specific user No
/user/{userId}/following GET Get users followed by a specific user No
/user/{userId}/following DELETE Unfollow a user Yes
/user/{userId}/profile GET Get profile information of a specific user No
/user/{userId}/profile POST Update profile information of a specific user Yes
/auth/login POST Log in and get access token No
/auth/refresh GET Refresh access token Yes
/auth/logout POST Log out and revoke access token Yes
/board POST Create a new board Yes
/board GET Get information for all boards No
/board/{boardId} GET Get information about a specific board No
/board/{boardId} PUT Update information of a specific board Yes
/board/{boardId} DELETE Delete a specific board Yes
/board/{boardId}/comment POST Create a new comment on a board Yes
/board/{boardId}/comment GET Get comments on a board No
/board/{boardId}/comment/{commentId} GET Get information about a specific comment No
/board/{boardId}/comment/{commentId} PUT Update information of a specific comment Yes
/board/{boardId}/comment/{commentId} DELETE Delete a specific comment Yes
/board/{boardId}/comment/{commentId}/reply POST Create a new reply to a comment Yes
/board/{boardId}/comment/{commentId}/reply GET Get all replies to a comment No
/board/{boardId}/comment/{commentId}/reply/{replyId} PUT Update a specific reply Yes
/board/{boardId}/comment/{commentId}/reply/{replyId} DELETE Delete a specific reply Yes

3. UI/UX 및 설명

login/ join Part

  • preview

  • comment

    • 토큰 기반의 로그인 지원/front 에서 유효성 검사 진행

main/ write post/ write comments/ write replies Part

  • preview

  • comment

    • markdown 형식의 글을 인식하여 블로그 게시판으로 등록 할 수 있음
    • comment 댓글을 게시물 아래에 남길 수 있음
    • 댓글에 reply 기능을 제공하여, 고도화된 블로그 서비스를 제공하고 있음/

follow Part

  • preview

  • comment

    • 사용자들 간의 네트워킹 형성을 도모하기 위해, 여러 블로그나 SNS 매체에서 사용하는 follow 기능 추가함.

profile Part

  • preview

  • comment

    • 가입 시 유저 1명 당 프로필 1개가 1:1 관계로 사상이 되며, 프로필은 기본 사진 제공이 되고 있음.
    • 프로필 사진 변경 및 자기 소개 변경으로, 사용자에 대한 고도화된 서비스 제공하고있음.

추후 계획

  • follow 알고리즘 도입으로 시간 복잡도 최적화(union find)
  • multer 서버 분리
  • elastic search를 통한 검색엔진
  • kafka로 대용량 트래픽 대응