[Release] Whotalk.us

WhoTalk.us 는 채팅 기반 SNS 시스템으로서, N:1 채팅을 제공해줍니다. 서비스를 한마디로 설명을 하자면, 익명 혹은 비익명의 유저들이 당신에게 말을 걸 수 있게 해줍니다. 프론트엔드엔 React.js 가 사용되었으며, 백엔드엔 Node.js 가 사용되었습니다. 데이터베이스는 MongoDB 가 사용되었습니다.

이 프로젝트는 규모의 사이드 프로젝트 입니다. 여가 시간에 개발을 하다가 조만간 곧 바빠질 것 같아서 마무리를 짓고 런칭을 하게 되었습니다.

프로젝트를 개발 시작 하게 된 계기는 이전에 롱폴링 네트워킹이 궁금해서 SaySomething 이라는 미니 프로젝트를 만들었는데, 누군가 이거는 혼자밖에 못쓰는건가요? 라는 말을 해서 한번 누구든지 채널을 만들어서 익명의 유저가 말을 걸 수 있게 해주는 서비스를 만들게 되었습니다.

프로젝트에서 필요 한 핵심 기능은 모두 구현이 완료되었으나, 앞으로도 고쳐가야 할 부분들이 좀 존재합니다.

이 프로젝트는 오픈 소스 프로젝트입니다. 소스 코드는 GitHub 에서 열람가능합니다.

React 프로젝트를, 어떻게 해야 좀 편하게 구성 할 수 있을까 에 대한 고찰을 연구해가는 동시에 개발을 한 거라, 프로젝트의 시작과 끝의 코드 스타일이 다릅니다. 혹시나, 그렇게 많이 기대하지는 않지만, 이 서비스를 이용해주는 유저분들이 어느정도 생기면 코드리팩토링을 할 예정입니다. 지금 당장은 바빠서 미루고 있습니다.

버그를 찾으셨거나, 좀 더 개선하고 싶은 점이 있다면, GitHub 에서 issue 를 자유롭게 만들어주세요.

궁금하신게 있으시다면, WhoTalk 을 통해서 연락주세요 😀 https://whotalk.us/velopert

 

주요 기능

  • 소셜 계정 로그인
  • 소켓을 사용한 실시간 익명/비익명 채팅
  • 데이터 캐싱
  • 유저 팔로우 기능
  • 팔로우 한 유저 소식 구독
  • 마이 페이지, 썸네일 클라이언트에서 정사각형으로 스케일 및 크롭 후 후 업로드
  • 다국어 지원 (영어/한국어)

사용 된 기술

이 프로젝트에는 다음 기술들이 사용되었습니다. (일부는 생략 되었습니다)

  • React.js
  • Redux
  • React-router
  • Node.js
  • Express
  • MongoDB
  • Mongoose
  • Sockjs
  • Sass
  • Webpack
  • Babel
  • Passport
  • Semantic-UI
  • React-intl
  • axios
  • lru-cache
  • alertify
  • react-scroll
  • redux-thunk
  • masonry
  • create-react-app

프로젝트를 여러분의 컴퓨터에서 설치하고 빌드하는 과정은 Git 저장소의 README.md 파일을 참조해주세요.

  • 멋진걸 만드셨네요~런칭 축하드립니다~? ?

  • ggoban

    아 개발자가 너무 미남인게 버그라는 채팅이 올라오던 그 …

  • 박지성

    socket.io 적용 문제입니다.
    react 랑 같이 쓰려는데 어떤게 최선일까요?
    1) jquery 부른다
    2) jquery 없이 순수 자바스크립트로 사용
    3) react-socket-io 같은 npm 패키지 사용

    web socket을 대체할 라이브러리 처리를 어떻게 하시는지 궁금합니다.

    • 저는 SockJS 를 사용합니다.
      소켓 라이브러리를 사용함에 있어서 jQuery 는 전혀 필요하지 않다고 생각해요.

    • Socket.io 에서 SockJS 를 사용하게 된 계기는
      주변인들의 추천 및 http://xsnippet.org/359042/ 이 글을 봐서 였는데요, 좀 오래된 글이기도하고,, 요즘은 Socket.io 도 꽤 활발하게 유지보수 되고 있기 때문에 괜찮아보이긴합니다.

      SockJS 를 사용하게 된 결정적인 계기는 webpack-dev-server 에서 sockjs 를 사용하는데, 괜히 사용하는게 아니겠지, 하고 사용하게 됐습니다.

  • happyname

    facebook login을 로컬 개발환경에서도 테스트가 가능한가요? 빌드후에 static file을 백엔드에서 서비스할때는 당연히 같은 서버 같은 포트라서 가능할것 같은데, 개발환경에서는 두개의 다른 포트에서 동작하기때문에 이게 가능한지 잘 모르겠습니다. 조언 부탁드릴께요!