🖥 dev-ruby

부스트캠프 웹모바일 멤버십 그룹 프로젝트에서 WebRTC를 다루게 됐다. 본격적인 작업에 들어가기 앞서 WebRTC에 대해 무지한 상태였기에 미리 학습을 해보았다 처음 학습할 때는 진짜 이게 뭐지 싶었다.. 그래서 이해 못한 채 일단 개념이라도 마구 적어놨다 MDN 문서를 하나씩 살펴보고, 블로그 자료를 엄청 찾아 돌아 댕기다보니 어느정도 정리가 됐다 하단에 참고한 문서들 적어놨어요 🤗 WebRTC(Web Real Time Communication)란?? 브라우저와 모바일 애플리케이션에서 별도의 소프트웨어 없이 음성, 영상 미디어, 텍스, 파일과 같은 데이터들을 실시간 통신(RTC)으로 주고 받을 수 있게 해주는 기술이다. Peer To Peer 방식으로 전송하며, 시그널링 서버 하나만 있으면 된다. 시..

ESLint 란? Linter의 기능 동적 언어인 Javascript에서는 코드 에러가 자주 발생한다. 동적 분석(프로그램을 직접 실행해서 코드를 분석)을 하기 때문에 에러를 찾기 위해서는 코드를 직접 실행해서 확인을 해봐야 한다. 이를 도와주는 것이 Linter이다. Linter는 코드를 정적으로 분석하기 때문에, 프로그램을 실행하지 않고도 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해준다. 추가적으로 간단한 코드 포맷팅 기능도 있다. 우선, VScode의 확장부터 깔아주자 ! 다음과 같이 두 개를 깔아주자 ESLint 설치 $ npm install eslint 이제 ESLint 패키지 설치가 완료되면 초기화를 한다. $ eslint --init 그럼 다음과 같은 단계별 질문이 나온다. /..

최근 리액트 라우터가 v5 에서 v6로 업데이트 되면서 바뀐 것들을 정리해볼까 한다. 라우터 시작하기 설치 : 먼저 설치를 해준다. 뒤에 6은 버전을 나타낸다. npm install react-router-dom@6 URL 연결 먼저 앱을 브라우저의 URL에 연결한다. BrowserRouter을 전체 앱에 렌더링한다. index.js import { render } from "react-dom"; import { BrowserRouter } from "react-router-dom"; import App from "./App"; const rootElement = document.getElementById("root"); render( , rootElement ); Routes : 서로 다른 URL에서 ..