Project (24) 썸네일형 리스트형 [Sendbird를 활용한 웹 채팅] 8. 채팅 리스트 불러오기 1. 오픈 채팅 리스트 불러오기 Pages/OpenChat.js const OpenChat = ({ history }) => { const sb = useMemo(() => new SendBirdAction(), []); const [openChatList, setOpenChatList] = useState([]); const getOpenChannels = useCallback( (isInit = false) => { sb.getOpenChannelList(isInit).then((list) => { setOpenChatList(list); }); }, [sb] ); //하나의 채팅 클릭 시 새로운 창으로 채팅 방이 열린다. const onClickBtn = (chat) => { window.open(.. [Sendbird를 활용한 웹 채팅] 7. sendbird connect (레이아웃) 1. Sendbird connect 센드버드 api를 사용하기 위해서는 우선적으로 현재 사용자가 센드버드와 연결되어 있어야 한다. 로그인 여부를 판단한다고 생각하면 될 듯하다. 이를 위해 존재하는 것이 connect 메소드이고 이를 레이아웃 컴포넌트에 설정해야 한다. Components/Layout.js 현재 접속한 사용자가 로그인 되어 있는 경우 connect한다. 로그인되어 있지 않은 경우 로그인 페이지로 리다이렉트한다. import React, { useCallback, useEffect, useMemo } from "react"; import { Redirect } from "react-router-dom"; import styled from "styled-components"; import Pr.. [Sendbird를 활용한 웹 채팅] 6. 로그인 시행착오 (CORS, Failed to load resource: the server responed with a status of 404 (Not Found)) localhost가 아닌 실제 도메인 주소로 배포했을 때 발생했던 문제들 1. CORS 문제 편의상 로그인 API 주소를 https://www.chat.co.kr/login라 한다. 로컬에서 테스트 🔒 로그인 API 요청 시 CORS 문제 발생 axios .post(`https://www.chat.co.kr/login`, { id: userId, pw: userPw, }) .then((res) => console.log(res)); 🔑 package.json 설정 후 url 수정 package.json에 proxy 설정하기 { "proxy": "https://www.chat.co.kr", } 요청 url 변경하기 axios .post(`/login`, { id: userId, pw: userPw, }) .. [Sendbird를 활용한 웹 채팅] 5. 소셜 로그인 - 네이버, 카카오 1. 로그인 과정 기능 개발에 중점을 두고 제공받은 자체 로그인 API이기 때문에 현재는 보안에 취약한 상태이다. 그래서 토큰이 아닌 유저 id를 받아 로컬 스토리지에 저장한 방식으로 진행된다. 소셜 로그인 소셜 로그인 -> 로그인 성공 시 받은 토큰을 자체 API로 넘기기 -> 인증 성공 시 유저 id 로컬 스토리지 저장 & 메인 페이지로 이동 자체 로그인 이메일 & 비밀번호 입력 -> 자체 API -> 로그인 성공 시 유저 id 로컬 스토리지 저장 & 메인 페이지로 이동 2. 네이버 로그인 1. API 신청 https://developers.naver.com/products/login/userguide/userguide.md 접속 후 오픈 api 신청하기 로그인 오픈 API 서비스 환경 -> PC 웹.. [Sendbird를 활용한 웹 채팅] 4. 라우팅 & 전체 스타일 1. 라우팅 Components/Router.js import React from "react"; import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom"; import GroupChat from "../Pages/GroupChat"; import OpenChat from "../Pages/OpenChat"; import Chatting from "../Pages/Chatting"; import Login from "../Pages/Login"; import MailLogin from "../Pages/MailLogin"; const Router = () => ( ); export default Router; 2. 글로벌 스타일 .. [Sendbird를 활용한 웹 채팅] 3. 프로젝트 구조 & 패키지 설치 1. 프로젝트 생성 1. CRA npx create-react-app sendbird-chat 2. src 하위에 폴더 생성 assets: 이미지 파일 저장 Components: 페이지를 이루는 단위 컴포넌트 Pages: 주소 변화에 따른 개별 페이지 컴포넌트 utils: API 통신 및 기타 util 모듈 3. 파일 생성 src/ assets/ Logo.png Components/ GlobalStyles.js Layout.js Router.js SendbirdAction.js Pages/ Login.js MailLogin.js OpenChat.js GroupChat.js Chatting.js 2. 패키지 설치 axios 0.21.1 styled-components 5.3.0 styled-reset 4... [Sendbird를 활용한 웹 채팅] 2. 주요 기능 & 대시보드 가입 1. 주요 기능 대표적인 기능으로는 다음 3가지가 있다. 로그인 소셜 로그인과 자체 API를 통한 로그인으로 구현한다. 자체 API는 제공받은 것으로 본인이 직접 다루지 않는다. 채팅 리스트 오픈 채팅과 그룹채팅으로 분류되며, sendbird에서 제공하는 API를 활용해 리스트를 불러온다. 채팅 방 텍스트 메세지와 파일 메세지 입출력을 구현한다. 채팅 방 정보 및 나가기 등의 기능을 구현한다. 2. Open Channel vs. Group Channel (sendbird 용어) Open Channel은 어플리케이션에 존재하는 모든 오픈 채팅 리스트를 의미한다. 유저가 Open Channel에 입장에 채팅을 하면 그 순간에만 접속 기록을 볼 수 있으며, 과거 입장 기록을 저장하지 않는다. 따라서 현재 유저.. [Sendbird를 활용한 웹 채팅] 1. 개요 2021.07.01 ~ 2021.08.31 이 기간 동안 한 기업에서 인턴십을 진행하면서 맡은 프로젝트이다. 해당 프로젝트의 진행 과정 동안 작성해둔 개발일지를 다시 한번 복기해 보며 정리하려고 한다. 프로젝트 소스 코드 및 개발 과정의 공개는 개발팀 대표님께 이미 허락을 맡았음을 밝힌다. 1. 프로젝트 개요 Sendbird라는 솔루션을 통해 자체 채팅 서비스를 만들 것이다. Sendbird에서 API가 제공되므로 프론트에만 집중하면 된다. React 기반의 웹을 중심으로 시작한다. 2. Sendbird란? 채팅과 영상통화 솔루션을 제공하는 회사이다. 개발자 문서가 잘 되어있어 쉽게 채팅 서비스를 구현할 수 있다. 아직 개발 경험 관련 자료가 많지 않다. 일단 직접 해봐야 된다. 홈페이지 -> https.. 이전 1 2 3 다음
