본문 바로가기

react42

[항해99] 5기 B반 실전 프로젝트 회고록 🎈항해99, 6주간의 실전프로젝트가 막을 내렸습니다. 빠르고 정신없이 지나간 6주였지만 가장 성장할 수 있는 기간이었습니다. 팀원들과 함께 프로젝트를 완성시켰다는 성취감과 아직까지도 여운이 남습니다. 이 여운을 바탕으로 회고록을 작성하려 합니다. 💪프로젝트를 통해 배운 점 1. WebRTC 화상 기능 (SFU 방식 채택) 저희는 WebRTC 서비스를 구현하는데, SFU 방식을 채택했습니다. 그 이유는 처음에는 P2P 방식으로 구현했으나 다대다 통신에서 클라이언트에 부하가 급격하게 오기 때문이었습니다. 또한, P2P Mesh 방식을 사용할 경우, peer 간의 커넥션 절단 시 서버에서 확인하기 어려우며, 클라이언트 환경에 따른 지연 현상이 발생하기 때문에 SFU 방식을 채택하였으며, 이를 극복했습니다. 2.. 2022. 4. 11.
[항해99] WebRTC를 이용한 홈트레이닝 서비스 "홈트메이트"를 소개합니다. 안녕하세요. 프론트엔드 개발자를 준비중인 이주석입니다. 이번에 "홈트메이트"라는 사이트를 개발해서 소개 차원으로 글을 적게 되었습니다. 저희 사이트는 WebRTC와 웹소켓을 이용해 유저들이 함께 유튜브 영상을 실시간으로 공유하고, 함께 화상으로 운동을 할 수 있는 사이트를 개발했습니다. 동시에 식단을 공유할 수 있는 Story 기능도 있습니다. 기술스택 - 메인 페이지 - 화상 홈트레이닝 페이지 - LiveNow 페이지 - 스토리 페이지 - 캘린더 페이지 저희 서비스의 특징은 아무래도 WebRTC와 WebSocket 을 이용한 실시간 홈트레이닝 서비스인데요, 친구들과 함께 유튜브 노래를 들으며 공부하거나 같이 유튜브 시청이 가능하니 한번 놀러와주세요! https://hometmate.com 홈트메이트 |.. 2022. 3. 28.
[항해99 실전프로젝트 3주차 / websocket ] 웹소켓이란? 기본적으로 클라이언트와 서버의 관계는 stateless하게 이루어져 있습니다. 즉, 클라이언트에서 Request를 날리면, 서버에서 Response를 하는 과정으로 이루어져 있습니다. 제가 만든 그림....ㅋ.ㅋ 하지만 웹 소켓은 Statefull protocol 입니다. 즉, 요청을 매번 보내는게 아니라 connection을 유지해서 양방향 통신 또는 데이터 전송이 가능하도록 하는 기술입니다. 웹소켓은 handShake 과정을 통해 Client 와 Server 접속을 유지합니다. 웹소켓이 기존의 일반 TCP소켓과 다른점은 최초접속이 일반 http request를 통해 handshaking 과정을 통해 이루어진다는 점입니다. Client 에서 랜덤하게 생성된 키값을 전송하고, Server는 .. 2022. 3. 15.
[항해99 1주일 클론코딩] - 슬랙 (Slack) 클론코딩 항해99 1주일 클론코딩 - 슬랙 클론코딩 5기 B반 5조 💬 프로젝트 소개 채널 기능을 제외한 슬랙을 클론코딩하였습니다. 워크스페이스 기능으로 멤버를 초대해서 채팅방을 생성할 수 있습니다. 슬랙 클론 코딩 시연 영상 https://www.youtube.com/watch?v=dEVnc-zeiYg 💬 팀원 소개 FE - 이주영, 이주석 BE - 황건욱, 김예은, 정희재 💬 개발 기간 2022.02.18 - 2022.02.24 💬 개발 기술 - 기술 : SockJS (통신은 성공했으나 DB 저장 실패) 따라서 Polling 구조로 채팅 기능 구현 (하지만 서버의 성능에 부담가기 때문에 다른 방법이 필요) 💬 깃헙주소 FE - https://github.com/act99/clone-slack BE - http.. 2022. 2. 24.
[항해99 미니프로젝트] 1주일간의 프로젝트 (title: 공구리) 프로젝트 소개 가끔, 함께 사면 싼 물건도 있습니다. 저희 회원과 함께 저렴하게 물건을 같이 구매 해 보세요. 작업 기간 2022년 2월 11일 ~ 2022년 2월 17일 (일주일) 팀원소개 Frontend - 이주석 => 로그인, 회원가입 기능, 메인화면, 상세 게시판, 게시글 CRUD 및 View 기능 구현 / 상태관리 기능 구현 - 한동윤 => 홈 화면, 인기화면, 신규화면, 댓글 기능 구현 - 한태훈 => 상세페이지, 앱 바 구현 Backend - 황건욱 => JWT 로그인 및 회원가입 기능, spring security, S3 파일 업로드 구현 - 현지훈 => 게시판 및 댓글 CRUD 기능, 공동구매 및 취소 기능 기술 스택 및 개발 환경 Front-end - React - Redux (acti.. 2022. 2. 17.
[항해99 주특기 3주차 심화과정] 실시간 SNS 만들기 - 과제 종료 실시간 SNS 만들기 제목: Act99그램 기술스택: - React & Firebase - 사용패키지: redux & redux thunk & redux-logger & redux-actions immer, history, connected-react-router moment, lodash, react-router-dom css : styled-components & MUI 구현: 회원 - 로그인기능 (세션 & 쿠키) - 회원가입기능 (이메일, 비밀번호, 패턴구현) - 로그아웃기능 (세션 & 쿠키삭제) SNS/블로그 (CRUD) - 게시글 읽기 - 게시글 추가 - 게시글 수정 - 게시글 삭제 - 디테일 화면 구현 - 좋아요 기능(실시간 변화 o) - 댓글기능 - 알람기능 (realtime database.. 2022. 2. 9.

티스토리툴바