전체 글 (137) 썸네일형 리스트형 [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에 입장에 채팅을 하면 그 순간에만 접속 기록을 볼 수 있으며, 과거 입장 기록을 저장하지 않는다. 따라서 현재 유저.. [Algorithm] 백준 2108 통계학 c++ https://www.acmicpc.net/problem/2108 2108번: 통계학 첫째 줄에 수의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 단, N은 홀수이다. 그 다음 N개의 줄에는 정수들이 주어진다. 입력되는 정수의 절댓값은 4,000을 넘지 않는다. www.acmicpc.net 풀이 최빈값이 의외로 복병이었다. 다른 것은 간단하니 최빈값 풀이만 보면, 값과 빈도수를 pair로 저장한다. 현재 입력값이 처음 나오는 값이 아니라면 해당 값의 빈도수만 + 1한다. 현재 입력값이 처음 나오는 값이라면 vector에 값과 빈도수(1)을 넣는다. 빈도수를 기준으로 내림차순 정렬한다. 정렬된 vector의 첫 번째 값이 최빈값의 된다. 만약 첫 번째 빈도수와 두 번째 값의 빈도수가 같다면 두 번째.. [Algorithm] 백준 18870 좌표 압축 c++ https://www.acmicpc.net/problem/18870 18870번: 좌표 압축 수직선 위에 N개의 좌표 X1, X2, ..., XN이 있다. 이 좌표에 좌표 압축을 적용하려고 한다. Xi를 좌표 압축한 결과 X'i의 값은 Xi > Xj를 만족하는 서로 다른 좌표의 개수와 같아야 한다. X1, X2, ..., XN에 좌 www.acmicpc.net 풀이 값과 인덱스를 pair로 저장한다. 값을 기준으로 정렬한다. 현재 위치보다 왼쪽에 있는 값들의 개수(현재 값보다 작은 수 카운팅)를 해당 인덱스에 넣는다. ans에 값을 넣기 전, 이전 값과 같은 경우 분기해서 처리한다. 소스코드 #include #include #include using namespace std; vector v; int m.. [Algorithm] 자주 사용되는 입출력 루틴 1. 테스트 케이스의 개수가 입력 첫 번째 줄에 주어지는 경우 int main(){ int t, a, b; cin>>t; while(t--){ cin>>a>>b; coutb, a || b){ coutb; if(cin.eof()) break; cout [Sendbird를 활용한 웹 채팅] 1. 개요 2021.07.01 ~ 2021.08.31 이 기간 동안 한 기업에서 인턴십을 진행하면서 맡은 프로젝트이다. 해당 프로젝트의 진행 과정 동안 작성해둔 개발일지를 다시 한번 복기해 보며 정리하려고 한다. 프로젝트 소스 코드 및 개발 과정의 공개는 개발팀 대표님께 이미 허락을 맡았음을 밝힌다. 1. 프로젝트 개요 Sendbird라는 솔루션을 통해 자체 채팅 서비스를 만들 것이다. Sendbird에서 API가 제공되므로 프론트에만 집중하면 된다. React 기반의 웹을 중심으로 시작한다. 2. Sendbird란? 채팅과 영상통화 솔루션을 제공하는 회사이다. 개발자 문서가 잘 되어있어 쉽게 채팅 서비스를 구현할 수 있다. 아직 개발 경험 관련 자료가 많지 않다. 일단 직접 해봐야 된다. 홈페이지 -> https.. [React] CRA 프로젝트에 serviceWorker 적용하기 개요 create-react-app으로 만든 프로젝트 진행하다가 푸시 알림때문에 serviceWorker를 적용할 일이 생겼다. 찾아보니 cra로 프로젝트 생성하면 기본적으로 serviceWorker.js가 있다고 하는데 현재 프로젝트(2021.08기준)에는 그런 파일이 없다. cra의 버전이 업데이트 되면서 serviceWorker가 사라지고 reportWebVitals가 생겼다고 한다. 그럼 serviceWorker를 적용하려면 어떻게 해야 하나?? 방법 1. 템플릿 사용 프로젝트 시작 전 애초에 serviceWorker를 사용할 생각이 있었다면, create-react-app을 할 때 service worker template으로 프로젝트를 생성하면 된다. npx create-react-app [a.. [Javascript] LocalStorage는 데이터를 string으로 저장한다. 개요 LocalStorage를 이용해서 Object값과 Boolean 값을 저장해야 하는 상황이 있었다. 각각의 값들을 그대로 setItem으로 저장하고 getItem으로 불러와 사용했더니, 타입 에러가 발생했다. 데이터의 타입 로그를 찍어보니 모두 string으로 나왔다. 원하는 결과가 아니다. 데이터 원본 타입 그대로 저장하고 그대로 가져오고 싶다! 1. Object 🔒 문제 window.localStorage.setItem("chat", chatObj); //객체 저장 const chat = window.localStorage.getItem("chat"); Object를 저장했는데 로컬스토리지를 거치고 나니까 String이 되어버림. console.log(typeof chatObj); //Objec.. 이전 1 ··· 14 15 16 17 18 다음
