인스타그램 클론코딩을 하면서 익힌 React + GraphQL 풀스택 기술을 연습하고, 협업능력을 기르기 위해 시작한 프로젝트입니다.
또한 React를 Javascript로 개발해오면서 디버깅이 불편하고 유지보수도 어렵다는 단점을 개선하고자 TypeScript를 도입하게 되었습니다. (+ 효율적인 협업을 위해)
Velog 블로그 서비스 클론코딩 프로젝트
- 개발자들을 위한 블로그 서비스.
- 마크다운 (Markdown) 문법을 사용하여 개발자들이 쉽고 빠르게 예쁘게 꾸며진 포스트를 작성 할 수 있습니다.
- 메인 페이지에서 개발 트렌드 및 인기 태그 제공을 통해 융용한 정보를 쉽고 빠르게 찾을 수 있습니다.
- 개발자들을 위한 블로그 서비스인 velog를 프론트엔드, 벡엔드 모두 클론코딩하여 Markdown 기반 게시물 작성, 해시태그 설정, 게시물 검색, 해시태그 검색, 반응형디자인 등 대부분의 기능을 구현하였습니다.
- Card 디자인 & Skeleton 로딩 구현
- 트렌딩 / 최신 게시물 노출
- hover 애니메이션
- 인기태그 표시
[피드] |
[검색] |
|---|
- 미디어 쿼리를 이용하여 반응형 웹사이트를 구현
[로그인] |
[회원가입] |
|---|
- 모달을 통해 로그인과 회원가입을 구현했습니다.
- Portal 사용
- 이메일 인증으로 로그인 구현
- nodemailer 사용
- Skeleton loading 구현
- Input 값의 변화를 실시간으로 감지하여 입력 즉시 검색 데이터를 받아옴
- GraphQL: 웹 클라이언트가 데이터를 서버로 부터 효율적으로 가져오는 것을 목적으로 만들어진 쿼리 언어로서 하나의 엔드 포인트를 통해 원하는 데이터를 한번에 가져올 수 있는 장점이 있습니다.
- heroku: GraphQL API 서버와 Prisma-MySQL Database 배포하기 위해 사용.
- Amazon S3: 온라인 스토리지 웹 서비스. 게시물의 이미지를 저장하기 위해 사용.
- multer: Node.js 미들웨어로 파일 업로드 핸들링을 도와주는 모듈. 게시물의 이미지를 업로드 하기 위해 사용.
- babel: 자바스크립트 컴파일러로 ES8으로 작성한 코드를 호환성을 위해 하위 버전 코드로 변환해주는 모듈.
- nodemailer: Node.js 에서 e-mail 을 쉽게 보낼 수 있게 도와주는 모듈. 회원가입 시 이메일 인증을 위해 사용.
- passport: 토큰인증방식을 위해 사용.
- morgan: 서버 요청에 대한 기록을 콘솔에 저장하기 위해 사용.
📦src
┣ 📂api
┃ ┣ 📂Comment
┃ ┃ ┣ 📂addComment
┃ ┃ ┃ ┣ 📜addComment.graphql
┃ ┃ ┃ ┗ 📜addComment.js
┃ ┃ ┗ 📂editComment
┃ ┣ 📂Hashtag
┃ ┃ ┣ 📂getPopularHashtag
┃ ┃ ┃ ┣ 📜getPopularHashtag.graphql
┃ ┃ ┃ ┗ 📜getPopularHashtag.js
┃ ┃ ┣ 📂searchHashtag
┃ ┃ ┃ ┣ 📜searchHashtag.graphql
┃ ┃ ┃ ┗ 📜searchHashtag.js
┃ ┃ ┗ 📜Hashtag.js
┃ ┣ 📂Like
┃ ┃ ┣ 📂toggleLike
┃ ┃ ┃ ┣ 📜toggleLike.graphql
┃ ┃ ┃ ┗ 📜toggleLike.js
┃ ┣ 📂Post
┃ ┃ ┣ 📂editPost
┃ ┃ ┃ ┣ 📜editPost.graphql
┃ ┃ ┃ ┗ 📜editPost.js
┃ ┃ ┣ 📂getPostDetail
┃ ┃ ┃ ┣ 📜getPostDetail.graphql
┃ ┃ ┃ ┗ 📜getPostDetail.js
┃ ┃ ┣ 📂posting
┃ ┃ ┃ ┣ 📜posting.graphql
┃ ┃ ┃ ┗ 📜posting.js
┃ ┃ ┣ 📂searchPost
┃ ┃ ┃ ┣ 📜searchPost.graphql
┃ ┃ ┃ ┗ 📜searchPost.js
┃ ┃ ┣ 📂seeLatestPost
┃ ┃ ┃ ┣ 📜seeLatestPost.graphql
┃ ┃ ┃ ┗ 📜seeLatestPost.js
┃ ┃ ┣ 📂seeTrendyPost
┃ ┃ ┃ ┣ 📜seeTrendyPost.graphql
┃ ┃ ┃ ┗ 📜seeTrendyPost.js
┃ ┃ ┗ 📜Post.js
┃ ┣ 📂Series
┃ ┃ ┣ 📂addSeries
┃ ┃ ┃ ┣ 📜addSeries.graphql
┃ ┃ ┃ ┗ 📜addSeries.js
┃ ┃ ┣ 📂editSeries
┃ ┃ ┃ ┣ 📜editSeries.graphql
┃ ┃ ┃ ┗ 📜editSeries.js
┃ ┃ ┗ 📂getSeries
┃ ┃ ┃ ┣ 📜getSeries.graphql
┃ ┃ ┃ ┗ 📜getSeries.js
┃ ┣ 📂User
┃ ┃ ┣ 📂_searchUser
┃ ┃ ┃ ┣ 📜searchUser.graphql
┃ ┃ ┃ ┗ 📜searchUser.js
┃ ┃ ┣ 📂checkToken
┃ ┃ ┃ ┣ 📜checkToken.graphql
┃ ┃ ┃ ┗ 📜checkToken.js
┃ ┃ ┣ 📂confirmSecret
┃ ┃ ┃ ┣ 📜confirmSecret.graphql
┃ ┃ ┃ ┗ 📜confirmSecret.js
┃ ┃ ┣ 📂createAccount
┃ ┃ ┃ ┣ 📜createAccount.graphql
┃ ┃ ┃ ┗ 📜createAccount.js
┃ ┃ ┣ 📂edituser
┃ ┃ ┃ ┣ 📜edituser.graphql
┃ ┃ ┃ ┗ 📜edituser.js
┃ ┃ ┣ 📂me
┃ ┃ ┃ ┣ 📜me.graphql
┃ ┃ ┃ ┗ 📜me.js
┃ ┃ ┣ 📂requestSecret
┃ ┃ ┃ ┣ 📜requestSecret.graphql
┃ ┃ ┃ ┗ 📜requestSecret.js
┃ ┃ ┣ 📂seeUserPosts
┃ ┃ ┃ ┣ 📜seeUserPosts.graphql
┃ ┃ ┃ ┗ 📜seeUserPosts.js
┃ ┃ ┗ 📜User.js
┃ ┗ 📜models.graphql
┣ 📜env.js
┣ 📜fragments.js
┣ 📜middleware.js
┣ 📜passport.js
┣ 📜schema.js
┣ 📜server.js
┣ 📜upload.js
┗ 📜utils.js