Act99 기술블로그

🎈항해99, 6주간의 실전프로젝트가 막을 내렸습니다. 빠르고 정신없이 지나간 6주였지만 가장 성장할 수 있는 기간이었습니다. 팀원들과 함께 프로젝트를 완성시켰다는 성취감과 아직까지도 여운이 남습니다. 이 여운을 바탕으로 회고록을 작성하려 합니다. 💪프로젝트를 통해 배운 점 1. WebRTC 화상 기능 (SFU 방식 채택) 저희는 WebRTC 서비스를 구현하는데, SFU 방식을 채택했습니다. 그 이유는 처음에는 P2P 방식으로 구현했으나 다대다 통신에서 클라이언트에 부하가 급격하게 오기 때문이었습니다. 또한, P2P Mesh 방식을 사용할 경우, peer 간의 커넥션 절단 시 서버에서 확인하기 어려우며, 클라이언트 환경에 따른 지연 현상이 발생하기 때문에 SFU 방식을 채택하였으며, 이를 극복했습니다. 2..

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

항해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월 11일 ~ 2022년 2월 17일 (일주일) 팀원소개 Frontend - 이주석 => 로그인, 회원가입 기능, 메인화면, 상세 게시판, 게시글 CRUD 및 View 기능 구현 / 상태관리 기능 구현 - 한동윤 => 홈 화면, 인기화면, 신규화면, 댓글 기능 구현 - 한태훈 => 상세페이지, 앱 바 구현 Backend - 황건욱 => JWT 로그인 및 회원가입 기능, spring security, S3 파일 업로드 구현 - 현지훈 => 게시판 및 댓글 CRUD 기능, 공동구매 및 취소 기능 기술 스택 및 개발 환경 Front-end - React - Redux (acti..

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

ORM 이란? ORM이란 객체 관계 매핑 (Object Relational Mapping)의 준말이며, 우리가 OOP(Objec Oriented Programming) 에서 쓰이는 객체라는 개념을 구현한 클래스와 RDB(Relational DataBase) 에서 쓰이는 데이터인 테이블을 자동으로 매핑하는 것을 의미한다. 하지만 클래스와 테이블은 서로가 기존부터 호환가능성을 두고 만들어진 것이 아니기 때문에 불일치가 발생하는데, ORM 을 통해 객체 간의 관계를 바탕으로 SQL문을 자동으로 생성하여 불일치를 해결한다. ORM을 사용하기 전에는 개발자가 개발을 위해 DB 에 접근하려면 SQL Query 문을 직접 만들었다. 하지만 SQL 문법을 알고 있어야 하며, 쿼리문 작성시간이 오래걸려 개발이 지체되는 ..

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