Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back

직접 만들어본 My-First-Blog!

#side_projects
2년 전
8,013
12

안녕하세요👋 노마드코더로 코딩 공부를 처음 시작한 OU9999입니다.

https://ou9999.github.io/my-first-blog

제가 생각하는대로 커스터마이징을 해보고 싶어서 만든 ,

저의 첫 사이드 프로젝트이자 , 첫 블로그입니다.

티스토리도 훌륭하게 커스터마이징이 가능하지만,

클론코딩만 해보는게 아닌,

제가 주도적으로 직접 만들어 보자고 마음먹고 만든 제 첫 리액트 프로젝트입니다!!

소개

STACK

React,TypeScript,Firebase 를 이용하여 만들었습니다.

Firestore Database 에는 카테고리,글,댓글,방명록 들을 저장했습니다.

UI 디자인은 Chakra UI를 이용하여 만들었습니다.

Chakra UI를 처음 사용해보는데 너무 편리하고 앞으로 자주 애용할것같습니다!!

디자인은 너무 유명하신 인파님의 티스토리(https://inpa.tistory.com/) 를 많이 참고했습니다!

Home

메인화면은 제가 좋아하는 각종 영화,애니 사진들과 조금 오그라들수도 있는..ㅎㅎ 감성있는 말들을 적어놨습니다!

메인 홈페이지에서 각종 링크들과 최신 블로그 글을 4개만 불러온 뒤(홈페이지 속도를 위해) 사용자가 버튼을 누를때다 더 불러오는 형식으로 만들었습니다.

Notes

카테고리 별 목록 보기 기능, MarkDown 뷰어 기능, 댓글 기능을 구현하였습니다.

Write

MarkDown 에디터 화면은 velog를 많이 참고했습니다.

글을 작성하면 Firestore Database에 저장됩니다.

GuestBook

개인별 프로필 사진과 사진을 업로드 할수있는 방명록 기능을 만들었습니다.

(많이 작성해주세요...! 😆)

업데이트 예정

  • 반응형 디자인

  • 자기소개 화면

  • 디자인

끝마치며

블로그의 seo를 생각한다면 SSR인 Next.js로 만드는게 맞습니다만..

계속 클론만 하는것보다는 저만의 프로젝트를 해보싶다는 생각에

CSR에 CRA일지라도 일단 만들어보자고 다짐했습니다.

SSR이 필요하다고 몸소 느끼게 된다면 추가적인 기능들과 함께

Next.js로 다시 만들 예정입니다! (노마드코더 강의 듣는중입니다! 👍)

방명록에는 제가 고쳐야할점🛠️ , 느낀점❗️ , 궁금한점❓ 들을 적어주시면 감사할것같습니다!!

다들 힘내서 열심히 공부하세요!!

12 comments
milo 2년 전
오오 멋집니다 !
ou9999 2년 전
@milo 감사합니다!!
grewtree 2년 전
혹시 Write 페이지 어떻게 구현하셨는지 좀 여쭤볼 수 있을까요?? 참고한 영상이나 블로그, 레퍼런스 같은 게 있으신지 궁금합니다!
ou9999 2년 전
@grewtree https://ou9999-next-js-blog.vercel.app/ 블로그 리메이크 했습니다! 블로그 안에 자세한 개발일지가 있으니 확인해주세요!
aplilis 2년 전
와 자극 제대로 받고가네요!! 저도 열심히 공부해야겠어요!!!
감성적인 요소들이 (명언, 안아줘요) 블로그를 더 따뜻한 느낌이 들게 합니다!
ou9999 2년 전
@aplilis 느낀점 감사합니다!
wlarkspur 2년 전
잘 만드신것 같아요!
ou9999 2년 전
@wlarkspur 감사합니다!!
borakim 2년 전
앗 노트부분 헤드 이미지가 스파이더맨 ㅎㅎㅎ 좋아하는 작품이라 왠지 반가웠어요. 처음에 접속할 때 블로그 제목 하나하나 라이트달아서 빛 끄고 켜게 해주신 거 너무 예뻐요..!! 애니메이션을 여기저기 잘 넣어주셔서 블로그 보는 내내 재미있게 봤습니다. 멋진 프로젝트 공유 감사드려요!!
ou9999 2년 전
@borakim 좋게 봐주셔서 감사합니다!!
max99 2년 전
블로그에 매력적인 포인트들이 너무 많아서 한참을 돌아다녔네요! 특히 안아줘요 누르면 위로 가는 거 너무 귀여워요... 노마드 코더 강의와 함께 만드는 Next.JS 블로그도 꼭 공유해주세요! :) 👍
ou9999 2년 전
@max99 자세하게 봐주셔서 감사합니다!!