lenson-lee.log https://velog.io/ Thu, 17 Aug 2023 02:25:41 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed lenson-lee.log https://velog.velcdn.com/images/lenson-lee/profile/c26b00ee-55b1-45e4-8ee8-716112981d82/image.jpg https://velog.io/ Copyright (C) 2019. lenson-lee.log. All rights reserved. <![CDATA[익명 질문 서비스, Chat Any Thing 개발 후기]]> https://velog.io/@lenson-lee/Chat-Any-Thing-%EA%B0%9C%EB%B0%9C-%ED%9B%84%EA%B8%B0 https://velog.io/@lenson-lee/Chat-Any-Thing-%EA%B0%9C%EB%B0%9C-%ED%9B%84%EA%B8%B0 Thu, 17 Aug 2023 02:25:41 GMT 💡 해당 프로젝트는 totuworld님의 인프런 강의(만들면서 배우는 프론트엔드 DO IT 코딩)를 학습목적으로 수강 후, 개인적으로 기능을 추가해 완성시킨 프로젝트입니다.

인원 : 1인 프로젝트 기간 : 2022.12 ~ 2023.02

개발 동기

Next.js와 Typescript, Firestore를 공부하기 위해 강의를 들으며 익명 질문 서비스를 만들어서 내 손으로 하는 인생 첫 배포를 해보는 과정을 거치며 뿌듯함과 성취감을 느꼈다.

강의는 끝났지만 기능이 완성된 상태도 아니었고, 배웠던 기술들이 100% 내 지식으로 소화되지 않았다는 생각이 들어서 복습하는 마음으로 배운것을 토대로 혼자 독서기록 서비스를 개발하였다.

📒 독서기록 웹사이트 개발 후기

역시 백문이불여일견! 직접 코드를 뜯어보며 만들고 보니 이전에는 헷갈리던 부분도 이해가 잘 되었고, 덕분에 익명 프로젝트 또한 잘 개선해 나갈 것 같다는 자신감을 가지고 여러 기능을 추가하고 코드를 수정할 수 있었다 ✌

개발 기술

  • Next.js
  • Typescript
  • Chakra UI
  • React-Query (version 3)
  • Firestore
  • Firebase admin
  • Vercel

주요 기능 설명

강의를 통해 만든 기능

  • Firebase Google 인증 / 회원가입
  • 회원페이지 생성
  • 익명메시지 작성 (익명 / 실명 선택)
  • 답글 작성
  • 메시지 상세페이지로 이동
  • 메시지 비공개 처리

추가한 기능

  • 회원 둘러보기
  • 체험용 계정 인증
  • 메시지 내용 수정 / 메시지 삭제
  • 사용자 이름 변경
  • 사용자 인사말 추가/변경
  • 사용자 이미지 변경

1. 홈 화면

메인화면 기능

  • 로그인 / 회원가입
  • 유저 둘러보기

메인 화면 하단에 사용자 리스트를 노출시켜 서로의 홈에 방문 할 수 있도록 구성하였다.

조금 아기자기한게 귀여운것같기도

2. 사용자 페이지

메시지/답변 기능

  • 메시지 작성 (익명 여부 선택 가능)
  • 답글 작성
  • 메시지 비공개 전환
  • 메시지 삭제
  • 메시지 상세페이지 이동

프로필 수정 기능

  • 사용자 이름 / 인사말 / 프로필이미지 변경
  • 이메일은 본인만 조회 가능(수정불가)

후기

리액트 쿼리(이제는 Tanstack-Query이다.)의 useQuery와 useMutation 의 사용, Next.js의 getStaticProps와 getServerSideProps 의 사용에 대해 알게 된 점이 가장 큰 배운점이라고 생각한다. 다음에 관련된 정보를 정리해보겠다.

새로운 영역에 한 걸음 발을 디딘듯한 이 기분이 나에게 앞으로의 프로젝트 또한 잘 할 수 있을거라는 자신감을 가져다준다.

개발이 즐거운 이유이자, 포기하지 않고 천천히 배워나갈 수 있는 원동력이 바로 내가 오류를 고치고 고쳐 만든 프로젝트를 볼 때의 성취감과 앞으로 배워나가야 할 것들에 대한 기대감일지도 모르겠다.

앞으로 기능수정에 대해 생각해두고 있는 계획으로는 현재는 페이징을 사용하는데 리액트쿼리를 사용한 김에 무한 스크롤로 변경을 해볼 계획이 있고, 익명 질문이 등록되면 유저에게 알림이 가도록 해보고 싶다.

]]> <![CDATA[독서기록 웹사이트 개발 ]]> https://velog.io/@lenson-lee/%EB%8F%85%EC%84%9C%EA%B8%B0%EB%A1%9D-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EA%B0%9C%EB%B0%9C https://velog.io/@lenson-lee/%EB%8F%85%EC%84%9C%EA%B8%B0%EB%A1%9D-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EA%B0%9C%EB%B0%9C Fri, 07 Jul 2023 08:34:06 GMT

인원 : 1인 프로젝트 기간 : 2023.02 ~ 2023.04

회원가입 시 수집하는 개인정보는 구글 이메일, 이름, 프로필 이미지 입니다.

✨개발 동기

Next.js와 Prisma를 공부하던 중 React-Query로 실시간 정보 업데이트가 가능하고 Open API를 활용한 프로젝트를 만들고 싶었다.

평소 즐겨 사용하던 독서 기록 어플 '북적북적'이 떠올랐고, '북적북적'과 같이 독서 기록활동이 주된 목적이지만 부가적인 기능으로 유저들간의 책 추천/한줄평이 이루어 질 수 있는 웹사이트를 만들어 보고 싶었다.

✨사용 기술

  • Next.js
  • Typescript
  • Tailwind CSS
  • React-Query
  • React-Chart
  • Date-Picker
  • Prisma
  • MySQL
  • Docker
  • Firebase-admin

✨기획단계 - Figma

책 API 선정 조건은 JSON을 제공할 것, 책 쪽수를 제공할 것(동기부여 이벤트 사용 예정)이었기에 알라딘 API로 선정했고, 다른 독서 기록 프로그램에 대한 정보들을 수집하였다.

당장 개발해보고 싶은 마음이 커서 기획단계에서 다른 독서 프로그램들이 가지고 있는 기본적인 기록 기능부터 완성 후 살을 붙여 나가기로 했다. 그래도 나름 기획 단계와 큰 차이 없이 완성 된듯 하다.

기획 단계에서 구상한 기능

  • 내 기록함에 책 저장
  • 저장한 책에 독서 정보 입력 / 기록
  • 알라딘 API에서 제공하는 정보로 통계/분석 도표 제작

왓챠피디아, 북적북적을 참고하여 디자인하였다. 피그마를 사용해서 대략적인 레이아웃과 색상, 컴포넌트를 구상했다. _진행이 거의 끝나갈 때 쯤 왓챠피디아의 코멘트 기능이 이 프로젝트와도 어울리는 듯 하여추가했는데 지금보니 색상까지 왓챠피디아 판박이인거같다. _

책 리스트 나열, 기록 CRUD만 가능하다면 재미가 없을 것 같아 어떻게 만들면 좋을지 고민했는데, 동기부여가 되는 활동을 넣자는 결론을 냈다.

알라딘 책 API에서는 책 페이지 수를 제공하는데, 이걸 사용해서 내가 읽은 책 페이지수를 마라톤에 비유해서 동기부여를 주려 했지만, 예상 밖으로 페이지 수가 제공되지 않는 책이 대다수였고, 노선을 틀어 기록 횟수를 통해 사용자 랭킹을 내는 기능과 월별 기록 카운트 기능을 만들었다.

읽은 책 페이지 두께에 따라 동기부여가 되는 북적북적의 경우 이러한 문제를 사용자가 직접 페이지 수를 입력 할 수 있도록 하여 개선하였다.

일주일 단위로 기록 현황을 보여주는 도표를 구상하였지만 일주일마다 횟수를 카운트 하면 동기부여보다는 매일매일 기록해야 할 것 같은 압박감 혹은 부담감이 들 것 같아 월별 카운트로 변경하였다.

✨1. 주요 페이지 설명

1-1. 메인페이지

도서 추천 / 랭킹

  • 알라딘 Open API를 통해 얻은 베스트셀러/신작 추천
  • 사용자들의 저장 많은 순/별점 높은 순 책 랭킹
  • 기록 활동 카운트에 따른 사용자 랭킹
  • 사용자 랭킹에서 클릭 시 해당 사용자의 기록 페이지로 이동

1-2. 책 정보 조회 페이지

책 정보 조회

  • 책 정보 조회 페이지로 이동시 알라딘에서 제공하는 책 정보 (제목, 지은이, 장르, 설명) 조회
  • 자세히 보기 클릭 시 알라딘 페이지로 이동

    독자들의 코멘트

  • 사용자들이 입력한 책 코멘트 조회(코멘트가 없는 경우 샘플 코멘트 출력)
  • 코멘트 작성 / 수정 / 삭제 /좋아요 기능 구현

1-3. 나의 기록 페이지

독서 및 기록 활동 분석/통계

  • 가장 많이 저장된 책의 장르를 통계로 출력
  • 월별로 기록 활동 횟수를 나타내어 사용자의 동기부여 장려

    저장한 책 목록 조회

  • 다 읽은 책 / 읽고 있는 책 / 찜한 책 상태별로 책을 분류하여 조회
  • 다 읽은 책과 읽고 있는 책을 클릭 시 나의 기록 페이지로 이동, 찜한 책은 책 정보 조회 페이지로 이동

    저장한 키워드 / 최근 기록 목록

  • 최근 기록을 클릭하면 나의 기록 페이지 > 해당 책 페이지로 이동

1-4. 둘러보기 페이지, 검색 페이지

둘러보기 페이지

  • 사용자가 즐겨 읽는 장르의 책 사용자의 저장 순, 별점 순으로 추천
  • 알라딘 추천 신간 조회

    검색 페이지

  • 알라딘 API 요청 결과 출력

✨2. 주요 기능

2-1. 책 저장 및 기록

책 정보, 독서 정보 저장

  • 책을 선택하였을 때 정보 조회 페이지(1-2. 책 정보 조회 페이지)로 이동
  • 상태에 따라 (찜하기 / 다 읽은 책 / 읽고 있는 책) 나의 기록 페이지에 저장

    독서 감상 기록

  • 나의 기록에 저장된 페이지에서 사용자의 독서 정보 (읽은 기간과 별점, 기록 내용) 출력
  • 저장된 페이지의 기록하기 버튼을 누르면 키워드와 함께 기록

2-2. 독서정보 기록

독서 정보 수정

  • 다 읽은 책 / 읽고 있는 책 상태와 읽은 날짜, 별점을 변경 가능합니다.
  • 나의 기록 DB에서 책을 삭제 가능

    기록 추가 / 수정 / 삭제

  • 한 권의 책에 여러 기록이 가능하게 구현 똑같은 책을 읽더라도 언제 읽는가에 따라 감상이 다를 수 있기 때문에, 과거에 읽었던 감상과 현재의 감상을 비교할 수 있도록 구성

✨후기

빨리 개발해보고 싶은 마음에 기획 단계를 너무 급하게 끝내버린게 아닌가 아쉬움이 남는다.

계속 개발하면서 사용이 익숙한 나에게는 이용이 편하다고 느껴질 수 있지만 사용자 입장에서는 어렵게 느껴진다는 피드백(독서 기록장이 아닌 전자책 독서 사이트로 인식된다는 피드백도 있었다)을 받았는데 기획 단계부터 이 부분을 조금 더 신경 써서 검토하고 보완했으면 더 좋은 결과가 나지 않았을까 싶다.

]]>