프로젝트 소개

현재 고파스(https://koreapas.com)는 게시판 형태의 고려대학교 커뮤니티 사이트입니다. 전체 가입자수는 10만명, DAU는 3만5천명, 매일 시간당 최대 접속자 수 5000명정도의 커뮤니티입니다.

경쟁 업체인 에브리타임은 지금 게시판을 누구나 생성할 수 있는 소모임같은 기능이 있지만, 고파스에서는 게시판을 따로 생성할 수 없기습니다.

현재 게시판성격과는 다른 어떤것이 필요한 니즈가 있었고, 이를 고파스 오픈채팅방을 오픈하는것을 목표로 삼았습니다.

프로젝트 목표

개발 부분

1. 2007년도 버전에 PHP에 React Migration 하기
   1. PHP 개발자와 별개로 프로젝트를 진행
   2. 현재 고파스는 1명의 개발자와 1대의 서버로 이뤄져있으므로, 현재 잘 돌아가고 있는 사이트와 독립적으로 진행
2. 기존의 카**톡이 사용자들에게 준 UX를 최대한 구현하여 사용자 경험을 보장

사업 부분

1. 게시판의 성향과 채팅의 성향이 다르기에, 이를 고려하며 개발

프로젝트 기술 스택

Frontend

• React, Context API, GraphQL, Apollo client, styled-component

Backend

• Koa, GraphQL, Apollo server, MongoDB, Mongoose, Redis

DevOps

• Jenkins, Nginx, PM2

프로젝트 특징

PHP에 React Migration 편하게 하기

• 기존에 개발되고 있던 고파스는 PHP로 개발된 사이트입니다.
• PHP에서 채팅을 개발하기 위해서 고려했던 방법
  1. php를 공부하는것
     • php를 공부하여 구현하는 것은 저는 기존에 SPA인 리액트와 서버로는 nodejs밖에 사용해보지 않아 빠른 시일 내에 기능 mvp를 구현하는 것이 어려웠습니다.
     • 또한, 기존에 잘 유지보수 되던 php 사이트를 버전업을 하게 되면 Dev server가 없는 상태이기 때문에 어떤 이슈가 발생할지 몰랐습니다.
  2. php에 div를 생성하고, 번들링한 react 파일을 불러오는것
     • 고파스 채팅 웹, 앱, 모바일 웹 모두 대응해야 한다는 점
     • php 개발자와 독립적으로 개발해야된다는 점
• 2번의 방법을 선택하였고, php 개발자와 독립적으로 개발하고, php 개발자의 편의성을 위해 간단한 스크립트를 삽입하는 방법을 선택하였습니다.

  • (👈 클릭시 열립니다) 채팅이 필요한 페이지에 삽입된 코드

  • 위 코드를 삽입하면 간단하게 제가 번들링한 Script파일은 제 cdn 서버에서 불러오는 방법을 선택하였습니다.

  • 문제점 및 해결 방법

    항상 같은 이름의 js 파일을 불러오기 때문에, 배포시에 브라우저가 js 파일을 캐싱하는 문제점이 생겼습니다.

    • 고려했던 해결 방법
      1. 고파스에서는 항상 같은 이름의 js 파일을 부르고, script 2개를 동적으로 생성하여 cache되는 문제 해결
      2. http header 중 cache control header를 no-cache로 설정하여, 캐싱 끄기
    • 1번의 해결방법은 파일을 2개 불러와야 된다는 점에서 최적화 되어있지 않다고 판단했고, 2번의 방법을 선택하였습니다.

Apollo Client WebSocket 동적으로 연결하기

• Context API와 커스텀 훅을 통하여 동적으로 WebSocket 연결을 해줬습니다.
• 문제점 및 해결 방법
  • 문제점
    • 배경
    • 사이트 접속 시 로그인이 되어있지 않다면, Apollo Client Provider에서 WebSocket 연결 시 권한 인증을 통과하지 못한 문제로 인하여 연결이 되지 않았습니다. WebSocket의 옵션 중 reconnect 옵션을 사용했지만, 해결되지 않았습니다.
  • 해결 방법
    • 사용자의 로그인 여부에 따라 Apollo Client Provider에 주입할 config를 동적으로 생성을 통해 해결했습니다.
      • config를 동적으로 생성 하는 코드 (GenerateApolloClient)
    • Context API를 이용하여 사용자의 로그인 여부 상태를 전역적으로 관리했고, 로그인 여부에 따라 Apollo config를 동적으로 생성하는 컴포넌트를 개발했습니다.
      • 로그인여부에 따른 ApolloProvider 코드
    • WebSocket 연결을 하는 config를 생성하여 해당 문제를 해결할 수 있었습니다.
  • 위와 같은 문제를 해결을 통해, 불필요한 웹소켓 연결 또한 방지할 수 있었습니다.