💙 RamBlog | 모든 개발자들을 위한 블로그

🧡 RamBlog는 모든 개발자들을 위한 간편 블로그 프로젝트입니다.

⭐️ 매일 공부 일지를 블로그에 담아 블로그를 일기장 처럼 사용할 수 있습니다.

✨ 오래 기억하고 싶은 공부 내용을 블로그에 포스팅하고 공유할 수 있습니다.

🎀 블로그에 포토폴리오 기능을 담아, 다른 사용자들이 해당 사용자의 기술, 프로젝트를 구경할 수 있습니다.

👉 서비스 바로가기

🤔기획 배경

• 게으른 완벽주의자인 저는 블로그에는 완벽한 내용을 담은 글을 올려야 한다는 생각에 블로그에 글을 올리는 것을 항상 주저하였습니다.
• 하지만, 어딘가에는 내가 공부한 것을 자랑하고 싶었고, 또 오늘 하루 얼마나 열심히 살았는지 기록하고 싶었습니다.
• 또 많은 분들이 직접 개발한 블로그에는 자신의 포토폴리오를 함께 올리는데, velog나 tistory 같은 블로그에는 해당 탭이 없다는 점이 아쉬웠습니다.
• 그렇게 해서 저만의 블로그를 만들어보자! 해서 시작했다가, 저와 생각이 비슷한 다른 개발자들 또한 사용할 수 있게 만들게 된 프로젝트가 RamBlog 입니다.🤩

🛠️개발 환경

[기술]

• Deployment: : Vercel
• FrontEnd : Next.js 13, Typescript, TailwindCSS, SWR
• BackEnd : Sanity
• Authentication : Next-auth

[아키텍처]

NextJS 13을 이용한 풀스택 프로젝트 입니다.

👑 데모

강조하고 싶은 기능은 ✨을 붙였습니다

꾸준히 기능과 성능이 개선되고 있는 프로젝트 입니다.

• 🔐 인증 / 사용자

  • 로그인- 구글 OAUTH / 로그인 - Credentials
  • 로그아웃 / 회원가입 - Credentials✨
  • 프로필 설정 / 팔로우

• 💙 포스팅

  • 포스팅✨ / 포스트 수정 및 삭제
  • 포스트 상세 보기 - TOC, 링크 복사, 좋아요 기능 ✨
  • 회원 - 댓글, 대댓글 작성 및 삭제 / 게스트 - 댓글, 대댓글 작성 및 삭제✨
  • 태그 기능✨ / 포스트 검색 기능
  • 북마크기능

• 📚 로그

  • 일기 작성 / 상세 일기 보기 및 필터링

• 😎 포토폴리오

  • 포토폴리오 작성✨ / 포토폴리오 구경

• 👑 UI

  • 다크모드 / 반응형

인증 / 사용자

1. 로그인 - 구글 OAUTH / 로그인 - Credentials

• 구글 OAUTH
  • Next-auth의 구글 Provider를 이용하여 구글 OAUTH 간편 로그인 및 회원가입 기능 제공
• 이메일 Credentials
  • 구글 외 이메일 로그인 시 email, password 일치 여부 Sanity DB에서 확인, 불일치시 오류 메세지 전달
  • 일치할 경우 Next-auth의 Credential 기능을 이용해 Session및 JWT 토큰 생성

로그인 - 구글 OAUTH	로그인 - Credentials

2. 로그아웃 / 회원가입✨

• 회원가입 - 이메일 Credentials
  • 구글외 이메일로 회원가입시 name, email, password, username 입력
  • validate검증 후 username, email을 서버로 전달해 중복 확인후 에러 메세지 전달
  • 모든 검증 완료시 password를 bycrpt 라이브러리를 통해 단방향 암호화 후 Sanity DB에 저장

로그아웃	회원가입 - Credentials

3. 프로필 설정 / 팔로우 기능

• 프로필
  • 구글 로그인일 경우 구글 Session에 저장된 기본 정보 사용, 구글외 로그인시 가입시 입력한 데이터를 받아와 프로필 초기 설정
  • 기본 정보는 로그인 후 수정 가능
• 팔로우
  • 타 유저 팔로우시 내 팔로우 리스트에 해당 user의 reference를 추가, 동시에 해당 user의 팔로잉 리스트에 팔로잉한 user의 reference를 추가하여 동시에 데이터가 변경될 수 있도록 구현

프로필 설정	팔로우 기능

포스팅

1. 포스팅✨ / 포스트 수정 및 삭제

• Toast UI Editor를 통한 WYSIWYG 기능 제공
  • 이미지 선택시 이미지 Sanity에 업로드 후 url받아와 표시
  • Content내용중 첫번째 이미지 부분의 url을 parsing하여 대표 이미지로 자동 선정후 저장

포스팅	포스트 수정 및 삭제

2. 포스트 상세 보기✨ - TOC, 링크 복사, 좋아요 기능

• react-markdown 라이브러리를 이용해 컨텐츠를 미리 렌더링하여 SSR 지원
• TOC (목차)
  • Intersection Observer를 이용한 자동 하이라이트, 스크롤 기능 목차 구현
• 좋아요 기능
  • useSWR의 mutate 함수를 이용해 Optimistic update를 하여 UI 성능 최적화

포스트 상세 보기

3. 회원 - 댓글, 대댓글 작성 및 삭제✨ / 게스트 - 댓글, 대댓글 작성 및 삭제✨

• 부모 - 자식 스키마 구성을 통한 대댓글 지원
• 게스트 댓글
  • 세션 유무로 회원 및 게스트 판별
  • 게스트일 경우 username, password 입력후 댓글 추가, password는 bycrpt 라이브러리를 통해 암호화후 저장
  • 삭제시 password 일치 확인 후 오류 메세지 전달 혹은 삭제

회원 - 댓글, 대댓글 및 삭제	게스트 - 댓글, 대댓글 및 삭제

4. 사용자 태그별 포스트✨ / 검색 기능

• 태그 기능

  • 사용자 태그별 포스트 필터링 기능, 태그 클릭시 모든 사용자 포스트 보여주는 기능 제공
  • 포스트 생성시 tag 데이터 생성, tag reference를 포스트에 추가하여 태그와 연결되도록 처리하여 구현

• 검색 기능

  • 전체 포스트 검색, 특정 사용자 포스트에서 검색 가능
  • Debounce 기능을 추가하여 불필요한 요청 최소화

태그 기능	검색 기능

5. 북마크 기능

• 포스트 북마크 후 개인 북마크 모음 페이지에서 확인 가능

북마크 기능

로그

1. 일기 작성 / 상세 일기 보기 및 필터링

• 일기 작성
  • 날짜, 제목, 사진, 짧은 글, 감정 이모지 선택을 통해 하루 일기 작성 가능
• 상세 보기
  • 감정 이모지 선택을 통해 일치하는 일기만 필터링해 보기 가능
  • 상세 보기 모달 선택시 이전, 다음 일기 데이터를 함께 받아와 화살표를 클릭하여 넘어가는 기능 제공

일기 작성	상세 일기 보기 및 필터링

포토폴리오

1. 포토폴리오 작성✨ / 포토폴리오 구경

• 소개, 기술 스택, 학업, 경력, 프로젝트를 포토폴리오에 작성가능
  • 학업, 경력, 프로젝트는 +추가 버튼을 통해 다수의 Form 열어 작성 가능
• 프로젝트는 클릭하여 모달 형식으로 상세 보기 가능

포토폴리오 작성	포토폴리오 구경

UI

1. 다크모드 / 반응형

• 다크모드
  • tailwindCSS와 next-themes 라이브러리를 이용해 다크모드 간편 구현
• 반응형 (개선중)
  • tailwindCSS를 통해 phone, tablet, desktop, laptop 사이즈 구별하여 반응형 구현

다크모드	반응형