Act99 기술블로그

안녕하세요. 프론트엔드 개발자를 준비중인 이주석입니다. 이번에 "홈트메이트"라는 사이트를 개발해서 소개 차원으로 글을 적게 되었습니다. 저희 사이트는 WebRTC와 웹소켓을 이용해 유저들이 함께 유튜브 영상을 실시간으로 공유하고, 함께 화상으로 운동을 할 수 있는 사이트를 개발했습니다. 동시에 식단을 공유할 수 있는 Story 기능도 있습니다. 기술스택 - 메인 페이지 - 화상 홈트레이닝 페이지 - LiveNow 페이지 - 스토리 페이지 - 캘린더 페이지 저희 서비스의 특징은 아무래도 WebRTC와 WebSocket 을 이용한 실시간 홈트레이닝 서비스인데요, 친구들과 함께 유튜브 노래를 들으며 공부하거나 같이 유튜브 시청이 가능하니 한번 놀러와주세요! https://hometmate.com 홈트메이트 |..

웹소켓이란? 기본적으로 클라이언트와 서버의 관계는 stateless하게 이루어져 있습니다. 즉, 클라이언트에서 Request를 날리면, 서버에서 Response를 하는 과정으로 이루어져 있습니다. 제가 만든 그림....ㅋ.ㅋ 하지만 웹 소켓은 Statefull protocol 입니다. 즉, 요청을 매번 보내는게 아니라 connection을 유지해서 양방향 통신 또는 데이터 전송이 가능하도록 하는 기술입니다. 웹소켓은 handShake 과정을 통해 Client 와 Server 접속을 유지합니다. 웹소켓이 기존의 일반 TCP소켓과 다른점은 최초접속이 일반 http request를 통해 handshaking 과정을 통해 이루어진다는 점입니다. Client 에서 랜덤하게 생성된 키값을 전송하고, Server는 ..

실시간 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 관리 기능 코드를 짤 수 있다. 또한, 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기 좀 더 편하고, 메모리 자..

1. 전역 상태 관리는 언제할 것인가? React에서는 useState 훅을 이용해 지역 상태 관리를 할 수 있다. 컴포넌트 안에서, 혹은 props로 전달할 때 만 자식 컴포넌트에서 사용할 수 있다. 또한 모든 상태 관리를 props drilling 으로 하나씩 내려주어 전역의 모든 상태관리를 진행할 수 있지만 props drilling 지옥에 빠질 수 있다. 이 때 전역 상태 관리 도구 Context API 와 Redux 등과 같은 도구들을 사용할 수 있다. 2. Context API 특징 Context API 는 React 자체에 내장 기능이기 때문에 React 에서만 사용할 수 있다. 이는 Entry 파일에서 구성한 Provider 을 내려주는 형식이며, 사용하고자 하는 컴포넌트에서 작성한 Dis..

React 에서 Firebase Auth 를 사용하기 위해 다음과 같은 코드를 짰다가 에러가 발생했다. - firebase.js import firebase from "firebase/app"; import "firebase/auth"; const firebaseConfig = { apiKey: process.env.REACT_APP_apiKey, authDomain: process.env.REACT_APP_authDomain, projectId: process.env.REACT_APP_projectId, storageBucket: process.env.REACT_APP_storageBucket, messagingSenderId: process.env.REACT_APP_messagingSenderId, ..

먼저 노드 버전을 14버전 이상인지 확인한다. 다음 16버전 이상이면 이런 에러가 발생할 수 있다. please remove any global installs with one of the following commands 이는 create-react-app 을 4.0.3 을 사용할 때 발생한다. 먼저, npx clear-npx-cache 를 통해 5.0.0 이상을 맞춰주기 위한 작업을 한다. 그럼 잘 된다.

먼저 결과물을 이렇다. 캘린더를 누를 때 상태값을 유지시키고, 고양이 버튼을 클릭하면 글쓰기 모달페이지로 넘어간다. 글을 저장시키면 파이어베이스 파이어스토어에 저장되며, db 구조는 해당 날짜와 다이어리에 적은 일기, 별점 데이터이다. collection의 doc은 다이어리 날짜로 구성되며, 같은 doc이 있을 시, 글쓰기에서 중복방지 기능으로 저장이 안되게끔 만든다. 그리고 해당 날짜의 일주일 전 데이터는 우측 하단에 리스트 형태로 나타나며, 이 리스트를 클릭하면 해당 일기를 볼 수 있다. 마지막 수정해야하는 사항은 일기가 있을 때 글쓰기 버튼을 누르면 update 형태로 바꿔주는 것이다. 하지만 항해99 기본과제 수행을 위해 프로젝트를 마무리짓고 수정사항은 추후 수정할 계획이다. https://git..