- Today
- Total
목록react (42)
Act99 기술블로그
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/qsfAN/btry2S3uiJv/zYd5kCY9G6rgwXAssbbO10/img.png)
🎈항해99, 6주간의 실전프로젝트가 막을 내렸습니다. 빠르고 정신없이 지나간 6주였지만 가장 성장할 수 있는 기간이었습니다. 팀원들과 함께 프로젝트를 완성시켰다는 성취감과 아직까지도 여운이 남습니다. 이 여운을 바탕으로 회고록을 작성하려 합니다. 💪프로젝트를 통해 배운 점 1. WebRTC 화상 기능 (SFU 방식 채택) 저희는 WebRTC 서비스를 구현하는데, SFU 방식을 채택했습니다. 그 이유는 처음에는 P2P 방식으로 구현했으나 다대다 통신에서 클라이언트에 부하가 급격하게 오기 때문이었습니다. 또한, P2P Mesh 방식을 사용할 경우, peer 간의 커넥션 절단 시 서버에서 확인하기 어려우며, 클라이언트 환경에 따른 지연 현상이 발생하기 때문에 SFU 방식을 채택하였으며, 이를 극복했습니다. 2..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/WgW6n/btrxyiWUnTV/xYD3W0gjgqzk7z2wx6RD11/img.png)
안녕하세요. 프론트엔드 개발자를 준비중인 이주석입니다. 이번에 "홈트메이트"라는 사이트를 개발해서 소개 차원으로 글을 적게 되었습니다. 저희 사이트는 WebRTC와 웹소켓을 이용해 유저들이 함께 유튜브 영상을 실시간으로 공유하고, 함께 화상으로 운동을 할 수 있는 사이트를 개발했습니다. 동시에 식단을 공유할 수 있는 Story 기능도 있습니다. 기술스택 - 메인 페이지 - 화상 홈트레이닝 페이지 - LiveNow 페이지 - 스토리 페이지 - 캘린더 페이지 저희 서비스의 특징은 아무래도 WebRTC와 WebSocket 을 이용한 실시간 홈트레이닝 서비스인데요, 친구들과 함께 유튜브 노래를 들으며 공부하거나 같이 유튜브 시청이 가능하니 한번 놀러와주세요! https://hometmate.com 홈트메이트 |..
웹소켓이란? 기본적으로 클라이언트와 서버의 관계는 stateless하게 이루어져 있습니다. 즉, 클라이언트에서 Request를 날리면, 서버에서 Response를 하는 과정으로 이루어져 있습니다. 제가 만든 그림....ㅋ.ㅋ 하지만 웹 소켓은 Statefull protocol 입니다. 즉, 요청을 매번 보내는게 아니라 connection을 유지해서 양방향 통신 또는 데이터 전송이 가능하도록 하는 기술입니다. 웹소켓은 handShake 과정을 통해 Client 와 Server 접속을 유지합니다. 웹소켓이 기존의 일반 TCP소켓과 다른점은 최초접속이 일반 http request를 통해 handshaking 과정을 통해 이루어진다는 점입니다. Client 에서 랜덤하게 생성된 키값을 전송하고, Server는 ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/DphxC/btrujJ2JXnc/st3rAxxNXOn5XyyH4Se0fk/img.png)
항해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..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/dsNt5e/btrtza1LzkM/jREHNJvpUHug6XOG3MM0Qk/img.png)
프로젝트 소개 가끔, 함께 사면 싼 물건도 있습니다. 저희 회원과 함께 저렴하게 물건을 같이 구매 해 보세요. 작업 기간 2022년 2월 11일 ~ 2022년 2월 17일 (일주일) 팀원소개 Frontend - 이주석 => 로그인, 회원가입 기능, 메인화면, 상세 게시판, 게시글 CRUD 및 View 기능 구현 / 상태관리 기능 구현 - 한동윤 => 홈 화면, 인기화면, 신규화면, 댓글 기능 구현 - 한태훈 => 상세페이지, 앱 바 구현 Backend - 황건욱 => JWT 로그인 및 회원가입 기능, spring security, S3 파일 업로드 구현 - 현지훈 => 게시판 및 댓글 CRUD 기능, 공동구매 및 취소 기능 기술 스택 및 개발 환경 Front-end - React - Redux (acti..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/YSX8y/btrsUEH2WKj/ur9ie5YdUIY6wPQPu2vQKk/img.png)
실시간 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..
클래스형 컴포넌트 vs 함수형 컴포넌트 현재 리액트 공식문서에서는 함수형 컴포넌트와 훅을 사용하는 것을 권장하고 있다. 컴포넌트란 템플릿 기능 뿐만 아니라 데이터가 주여졌을 때 이에 맞추어 UI를 만들어주는 기능을 하며, 라이플 사이클 API 를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변화할 때 작업들을 사용할 수 있다. 물론 클래스형 컴포넌트와 함수형 컴포넌트는 하는 일은 동일하지만, 코드 구조에서 약간의 차이가 있으며, 엄밀히 말하면 클래스 컴포넌트는 라이프 사이클 기능과 state 관리 기능이 코드에 구현되며, 함수형 컴포넌트는 hook 을 통해 라이프 사이클 기능과 state 관리 기능 코드를 짤 수 있다. 또한, 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 좀 더 편하고, 메모리 자..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/rj6GK/btrsnnHbc4C/dMHkzASu0gwe3n5rjR9JZ0/img.png)
1. 전역 상태 관리는 언제할 것인가? React에서는 useState 훅을 이용해 지역 상태 관리를 할 수 있다. 컴포넌트 안에서, 혹은 props로 전달할 때 만 자식 컴포넌트에서 사용할 수 있다. 또한 모든 상태 관리를 props drilling 으로 하나씩 내려주어 전역의 모든 상태관리를 진행할 수 있지만 props drilling 지옥에 빠질 수 있다. 이 때 전역 상태 관리 도구 Context API 와 Redux 등과 같은 도구들을 사용할 수 있다. 2. Context API 특징 Context API 는 React 자체에 내장 기능이기 때문에 React 에서만 사용할 수 있다. 이는 Entry 파일에서 구성한 Provider 을 내려주는 형식이며, 사용하고자 하는 컴포넌트에서 작성한 Dis..