Web

[React] componentDidMount 에서 async/await 사용하기

클래스 컴포넌트 생명주기 함수 중 하나인 componentDidMount() 안에서 await을 사용하는데 다음과 같은 에러가 났다. Parsing error: Unexpected reserved word 'await'. componentDidMount() { await tmModel.loadModel() // teachable machine 로드 } 해결 방법은 componentDidMount 앞에 async를 붙여주면 된다. (Create-react-app으로 프로젝트를 만든 경우) async componentDidMount() { await tmModel.loadModel() // teachable machine 로드 } CRA로 만든 프로젝트가 아닌 경우 웹팩 설정을 수정해줘야 한다. 우선 bab..

웹팩, webpack

웹팩 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러 모듈 번들러 : 웹 애플리케이션을 구성하는 자원(HTML,CSS,JS, Images 등)을 각각의 모듈로 보고 이를 조합하여 병합된 하나의 결과물을 만드는 도구 웹팩에서의 모듈 웹 애플리케이션을 구성하는 모든 자원을 의미 (HTML, CSS, JS등 ) 모듈 번들링 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축해주는 동작 빌드, 번들링, 변환은 모두 같은 의미. 웹팩이 필요한 이유 파일 단위의 js 모듈 관리의 필요성 웹 개발 작업 자동화 도구 웹 서버 배포시 HTML,CSS,JS 압축, 이미지 압축, CSS 전처리기 변환과 같은 작업을 해야하는데 이런 일을 자동화 해 주는 도구 등장 웹 애플리케이션의 ..

[axios] axios 인터셉터 추가하기

access token이 필요한 요청일 때 마다 해당 요청 메소드에 앞서 계속해서 header에 토큰을 추가 해 주었다. 이런 방식이 두가지 이유로 맘에 들지 않았는데 1. 중복된 코드 반복해서 작성 2. 토큰이 필요한 요청인지 아닌지 판단하는 과정 반복 axios 인터셉터를 통해 이를 해결하는 방법을 찾았다. request 요청이 이루어지기 전에, response가 이루어진 직후 미리 설정, 결과 값을 가공하는 인터셉터를 통해 한번에 관리가 가능하다. 기존 코드 //api/index.js function Instance() { const instance = axios.create({ baseURL: "url", headers: { "Content-type": "application/json", }, }..

OpenVidu API 구성 살펴보기 - 클래스

OpenVidu API를 살펴보며 유용한 클래스들을 알아봅니다. https://docs.openvidu.io/en/stable/tutorials/openvidu-insecure-react/ openvidu-insecure-react - OpenVidu Docs From here you can search these documents. Enter your search terms below. docs.openvidu.io 실행 방법은 위 링크의 설명 대로 도커에서 서버를 돌리고 리액트 앱을 실행시켜서 로컬호스트 3000으로 접속한다. 이렇게 실행시켜놓고 코드와 문서를 살펴본다. 이 튜토리얼은 클라이언트 사이드부분만 다루고 있으므로 openvidu - browser 의 내용만을 다룬다. OpenVidu Cla..

WebRTC를 구현하기 위한 프레임워크 Kurento VS OpenVidu

Kurento, OpenVidu 차이점 Kurento WebRTC 미디어 서버이자 클라이언트, api세트 www와 스마트폰 플랫폼을 위해 비디오 앱 개발을 간편하게 도와줌 쿠렌토 미디어 서버는 그룹간의 통신, 녹음,방송 시처각 흐름 라우팅 기술을 지원 다른 미디어 서버와 차별화된 기능 : 컴퓨터 비전, 음성 분석 등 미디어 처리 기능 Openvidu 웹 모바일 환경에서 영상 통화 기능을 쉽게 추가할 수 있도록 하는 오픈소스 플랫폼 다양한 데모, 기술 스택 제공 WebRTC 미디어 서버 구현시 소모되는 리소스 줄일 수 있는게 장점. 화면 공유, 메세지 브로드캐스팅 등 화상 회의 앱에 필요한 대부분의 기능을 오픈소스로 제공 OpenVidu Brower 클라이언트에서 사용할 라이브러리 화상 통화 생성, 비디오..

클로저

생소했던 개념인 클로저, 드디어 이해해서 매우 기쁘다 😆 클로저 클로저는 js의 고유한 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 클로저는 함수와 함수가 선언되었을 때의 렉시컬 환경과의 조합이다. 렉시컬 스코프 function outerFunc() { var x = 10; var innerFunc = function () { console.log(x); }; innerFunc(); } outerFunc(); // 10 함수 outerFunc내에서 함수 innterFunc가 선언되고 호출되었다. 내부함수인 innterFunc는 자신을 포함하고 있는 외부함수 outerFunc의 변수 x에 접근이 가능하다. 스코프는 함수를 호출할 때가 아니라 함수를 어디에..