목록전체 글 (90)

Act99 기술블로그

[항해99 실전프로젝트 3주차 / websocket ]

웹소켓이란? 기본적으로 클라이언트와 서버의 관계는 stateless하게 이루어져 있습니다. 즉, 클라이언트에서 Request를 날리면, 서버에서 Response를 하는 과정으로 이루어져 있습니다. 제가 만든 그림....ㅋ.ㅋ 하지만 웹 소켓은 Statefull protocol 입니다. 즉, 요청을 매번 보내는게 아니라 connection을 유지해서 양방향 통신 또는 데이터 전송이 가능하도록 하는 기술입니다. 웹소켓은 handShake 과정을 통해 Client 와 Server 접속을 유지합니다. 웹소켓이 기존의 일반 TCP소켓과 다른점은 최초접속이 일반 http request를 통해 handshaking 과정을 통해 이루어진다는 점입니다. Client 에서 랜덤하게 생성된 키값을 전송하고, Server는 ..
개발팁저장소/react 2022. 3. 15. 10:20
[항해99 실전프로젝트 2주차 / docker error] docker daemon error & system has not been bootted ~~ PID1 error

WebRTC 를 사용하다가, 테스트 미디어 서버 구축을 위해 잠시 Docker 설정을 하게되었다. 현재 나의 os 환경은 linux, ubuntu 20.0.4 버전이며, zsh 를 이용해 터미널을 사용하고 있다. 미디어 서버 도커 이미지를 사용하기 위해 도커를 실행한 결과 다음과 같은 에러가 발생했다. docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-server-kms:2.20.0 docker: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?. See 'docker run --help'. 따라..
개발팁저장소 2022. 3. 7. 13:56
[항해99 실전프로젝트 1주차] SockJS를 이용한 WebRTC 구현 中

이 과정에서 등장하는 용어들을 정리하는 시간을 갖도록 하시죠. 일단 결론부터 말씀드리면, WebRTC가 실시간으로 웹에서 데이터를 교환할 수 있는 이유는 시그널링이라고 일컫어지는 NAT 우회 과정을 거치기 때문입니다. WebRTC란? MDN에 따르면, WebRTC는 웹 어플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고, 스트리밍하며 데이터도 교환할 수 있도록 하는 기술입니다. 즉, 드라이버나 플러그인 설치 없이 웹 브라우저 간 P2P 연결을 통해 데이터 교환을 가능하게 하는 기술을 말합니다. WebRTC를 기반으로 한 기술로는 실시간 스트리밍, 화상통화, 파일공유, 스크린 공유 등이 있죠. WebRTC는 구글이 주도한 오픈소스 프로젝트를 기반으로 하는 웹 표준이기 때문에 ..
카테고리 없음 2022. 3. 6. 00:52
[항해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. 21:11
[항해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. 18:25
[클로저 & 프로토타입] - 클로저와 프로토타입에 대한 이해

클로저란 무엇인가? MDN (Mozilla Developer Netwrok)에 따르면, “클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다.” 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지를 이해해야 합니다. 정말 이해가 안되는 설명입니다. 이걸 쉽게 풀이하자면, 클로저란 독립적이고 자유로운 변수를 가리키는 함수입니다. 또한, 클로저 안에서 정의된 함수는 만들어진 환경을 기억합니다. 이것도 역시 이해가 안됩니다. 그럼 바로 코드로 보시겠습니다. function getClosure() { let text = 'variable 1'; return function() { return text; }; } let closure = getClosure(); console.log(clos..
개발팁저장소 2022. 2. 9. 14:29
[TDZ(Temporal Dead Zone) 일시적 사각지대란?]

다음 함수부터 먼저 보시죠. 만약 이 함수를 봤을 때, 뭔가 이상한 점을 감지하셨다면 TDZ에 대해 어느정도 이해하신 겁니다. 이렇게 코드를 작성하면 다음과 같은 에러를 발생시키죠. 이 에러는 변수는 선언되었는데, 변수의 값이 할당되지 않는 것을 의미합니다. 변수 선언의 3단계는 다음과 같습니다. 선언단계 : 변수를 실행 컨텍스트의 변수 객체에 등록 (스코프 참조 대상) 초기화 단계: 실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리 생성 (undefined 로 초기화 시킨다.) 할당 단계: 사용자가 undefined로 초기화된 메모리에 다른 값을 할당한다. 즉, 전에 본 코드는 초기화 단계까지는 갔지만 할당 단계까지 가지 못한 것입니다. 이는 let, const 의 변수 선언이 호이..
개발팁저장소 2022. 2. 9. 10:15
[항해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..
개발팁저장소/react 2022. 2. 9. 00:50
이전 Prev 1 2 3 4 5 ··· 12 Next 다음