익명 칭찬 웹앱 서비스

1. 프로젝트 소개
   1.1 프로젝트 주제
   1.2 페르소나
   1.3 기획 의도

2. 기술 스택

3. 프로젝트 구조

4. 서비스 기능
   4.1 메인 기능 4.2 서브 기능

5. 서비스 전체 시연 영상

6. 팀원 소개 및 역할

📎 서비스 보러가기

💡 위칭(WeChing)은 우리(We) 모두의 칭찬 타임의 줄임말로, 익명의 공간에서 서로에게 칭찬을 나누며, 타인뿐만 아니라 자신의 자존감도 높일 수 있는 웹앱 서비스입니다.

• 칭찬이 필요한 모든 사람들

바쁜 사회에서 살아가기 바쁜 현대인들은 누군가로부터 칭찬을 받거나 값진 노력에 대해 인정받을 수 있는 기회가 많지 않습니다.

끊임없는 경쟁 사회에서 나조차 챙기기 어렵다보니 다른 사람을 돌아볼 여유가 있지 않습니다. 그렇지만 누군가에게 전하는 나의 말 한 마디가 그 사람의 삶의 동력이 될 수 있고, 칭찬을 해줌으로써 나의 칭찬이 나에게도 힘이 될 수 있습니다.

TypeScript

JavaScript과 달리 정적 타입 시스템을 제공하기 때문에, 코드를 작성할 때 컴파일 과정에서 실수를 쉽게 발견할 수 있고, 가독성과 유지보수성 역시 높일 수 있어 사용하게 되었습니다. 또한, 인터페이스를 사용하기에 코드의 구조가 명확해지고, 코드의 재사용성도 높일 수 있었습니다.

Styled-components

코드의 가독성과 재사용성, 유지보수를 위해 Styled-components를 이용해 컴포넌트 단위로 스타일을 작성하였습니다. 또한, 컴포넌트 단위로 스타일을 작성할 수 있어 스타일 충돌을 줄일 수 있었습니다. 게다가 자바스크립트를 이용하는 라이브러리이기에 조건문을 스타일에 적용할 수 있었습니다.

Redux

state를 필요한 곳에서 Store에 바로 접근해 사용할 수 있어서 무분별한 prop drilling을 방지할 수 있었고, 중앙의 단일 Store라는점, 상태 변경은 dispatch으로만 가능하다는 점으로 깔끔한 상태관리를 통해 유지보수적인 측면에서도 좋다고 느껴졌습니다.

AXIOS

Axios는 HTTP 요청과 응답을 Promise 객체로 처리합니다. 저희는 이러한 점을 이용해 서버에 요청과 응답을 처리할 때 async/await 문법을 사용하여 코드의 가독성과 작성 생산성을 높여주었습니다.

Node.js

싱글 쓰레드의 Non-blocking I/O 이벤트 기반 비동기 방식으로 처리되기 때문에 Node.js를 선택하였습니다. 요청을 처리할 때 자동으로 응답을 전송하고 응답을 처리할 수 있어 서버에 많은 요청을 빠르게 처리할 수 있었습니다. 또한, V8 자바스크립트 엔진을 사용하기 때문에, 실행속도가 빠르고 메모리 사용량도 적었습니다.

Express

Express는 간단하고 작관적인 API를 가지고 있어 설정과 시작이 쉽다는 점 때문에 사용하게 되었습니다. 이뿐만 아니라, 웹 애플리케이션을 구축하는 데 필요한 핵심 기능을 제공하지만, 수많은 세부사항들은 개발자에게 맡겨두어 저희 서비스에 알맞게 이용할 수 있었습니다.

PostgreSQL

객체 관계형 DB 관리 시스템인 PostgreSQL을 사용한 이유는 PS가 매우 가볍게 돌아가는 데이터베이스이지만, 표준SQL을 잘 따르고 있기 때문입니다. 또한, 대량을 데이터를 처리할 수 있어 차후 리팩토링 과정에서 서비스를 더 확장시킬 수 있습니다. 게다가 광범위한 데이터 유형과 다양한 프로그래밍 언어를 지원하기에 필요에 맞게 확장할 수 있습니다.

NGINX

NGINX를 사용한 이유는 고성능과 낮은 리소스 사용이라는 장점을 가지고 있기 때문입니다. 제한된 리소스로도 여러 클라이언트 요청을 동시에 처리할 수 있고, 차후 트래픽이 많아질 때를 대비할 수도 있습니다.

PM2

PM2에는 애플리케이션을 원격 서버에 쉽게 배포할 수 있는 기본 배포 도구가 포함되어 있을 뿐만 아니라, 메모리 및 CPU 사용량을 추적하는 기능을 포함하여 실행중인 애플리케이션의 상태를 실시간으로 모니터링 할 수 있어 사용하게 되었습니다.

Figma

서비스를 기획하고 프로젝트 구조를 파악하기 위해 사용했습니다. 다양한 툴로 쉽게 디자인을 할 수 있고, 디자인한 서비스의 CSS를 파악하는데도 용이했습니다. 게다가 간단한 링크를 통해 팀원들에게 막대한 정보를 공유할 수 있었고, 실시간으로 팀원들이 수정할 수 있다는 이점 때문에 사용하였습니다.

Mock Service Worker (MSW)

서비스를 배포하기 이전 프론트단에서 테스트를 해보기 위해 MSW를 사용했습니다. 각 팀원이 각자의 기능이 정상적으로 돌아가는지 테스트 하기 위해 mock 데이터를 임의로 만들었고, 배포 전에 문제를 발견하고 해결할 수 있었습니다.

1. 로그인

   • 유저는 구글 로그인과 닉네임 설정만으로 회원가입을 하여 간편하게 서비스를 이용할 수 있습니다.

   • 자유롭게 칭찬을 주고받기 위한 익명의 공간을 만들기 위해 구글 OAuth 기능을 도입하였습니다.

     

1. 게시글 작성

   • 칭찬을 받고 싶은 소식을 게시글로 작성 할 수 있습니다.

   • 다른 페이지로 이동 후에 다시 게시글 작성 페이지로 돌아오더라도, 작성하던 게시글을 이어서 작성할 수 있습니다.

     화면 기록 2023-01-09 오후 7.02.51.mov

2. 칭찬해주기 작성

   • 다른 사람에게 칭찬을 남길 수 있습니다.

     화면 기록 2023-01-09 오후 7.04.37.mov

1. 게시글 리스트

   • 메인페이지에서 **“칭찬을 확인해보세요”**에 접속하면 유저 본인이 쓴 글을 리스트로 확인할 수 있고, 각각의 글에는 받은 칭찬의 유무와 개수가 **초록색 테두리**와 **칭찬 라벨**로 표시됩니다.

     

2. 별점

   • 유저는 받은 칭찬을 확인하고 별점으로 칭찬을 평가할 수 있으며, 이 별점을 기반으로 칭찬왕 랭킹이 집계됩니다.
   

3. 북마크

   • 마음에 드는 칭찬을 북마크에 따로 모아 볼 수 있습니다.
   

4. 신고

   • 칭찬이 아닌 악성 글을 남긴 유저를 신고할 수 있습니다.

   • 신고 유형을 선택하고 신고 사유를 작성해서 신고할 수 있습니다.

   • 신고한 칭찬 글은 블러처리가 되며, 추가로 별점을 평가하거나 북마크에 추가할 수 없습니다.

     

• 관리자 페이지

  • 관리자 로그인

    

  • 공지사항 작성

    

  • 공지사항 조회

    

  • 신고 조회

    

• 메인 페이지

  • 메인 컨텐츠 캐러셀

    

  • 명언 확인

    

  • 알림 확인

    

• 반응형 UI

  

• 마이페이지

  • 공지사항

    

9팀.mov