Community

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

← Go back
직접 만들어본 My-First-Blog!
#side_projects
1 year ago
7,324
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