너무너무 멋져 눈이눈이 부셔

학습 목표:리액트를 활용해서 음성 통화 / 화면 공유/ 웹캠 기능을 구현하자!키워드 : 웹RTC, 오픈비두기능 정의:1. 게더 타운 내에서 음성통화를 할 수 있다.- 나의/ 타인의 음성통화는 끄고 켤 수 있다.- (부가) 마이크 입출력 소리를 조정할 수 있다2. 게더 타운 내에서 화면 공유를 할 수 있다.- 화면 클릭 시 전체 화면으로 볼 수 있다.3. 게더 타운 내에서 웹캠 공유를 할 수 있다.- 화면 클릭 시 전체 화면으로 볼 수 있다.4. 설정 버튼 클릭 시 (부가)- 마이크 및 스피커 기기 변경 가능   웹 RTC란?https://webrtc.org/?hl=ko WebRTCAn open framework for the web that enables Real-Time Communications (R..

브라우저 동작 원리 대부분의 프로그래밍 언어는 운영체제(Operating System, OS) 위에서 실행되지만 웹 애플리케이션의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행 서버에 요청을 보내서 HTML, CSS,JS,이미지파일 등을 응답받는다. HTML, CSS 파일을 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지 표시 자바스크립트는 자바스크립트 엔진(렌더링 엔진x)이 처리 : HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하려고 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어를 넘김. script 태그 내의 JS 코드 or script..

타입스크립트에서 Axios Error를 어떻게 처리하나요? 1. any로 변경 : 하지만 타입스크립트에서 any는 사용을 지양하는 것이 좋다(타입을 주려고 타입스크립트를 쓰는 건데, any를 남발하는 것은 사용의미가 없다) 2. 타입 단언 Axios에러의 경우 error.response.data, error.response.status, error.response.headers로 구성되어있다. 아 속성 그대로 인터페이스로 타입을 정의해서 단언해주면 된다. interface CustomError extends Error { // name: string; // message: string; // stack?: string; - Error 인터페이스 프로퍼티들을 직접 쓰거나 아니면 상속해준다. response..

리액트 디자인 패턴이란 디자인 패턴 : 프로그램 개발 과정에서 사용되는 설계 패턴. 리액트는 컴포넌트 단위의 활용이 굉장히 중요하므로, 이제 이 컴포넌트를 어떻게 구성할 것인가를 고민할 필요가 있음. 1. Presentation & Container 컨테이너 : 데이터 로직 수행 API호출, State관리, 이벤트 처리 등 변경된 상태 값을 props를 통해 Presentation 컴포넌트로 전달 프레젠테이션 : 데이터 출력 UI 표시 상태 관리x 컨테이너 컴포넌트가 전달해준 props를 받아 출력 특징 : 1. 컴포넌트 간 의존도가 낮고, Presentation 재사용가능 2. 역할 명확 3. state를 여러 컴포넌트에 props로 전달하여 상태 공유. 단점: 1. hooks 도입 이후로는 이 패턴 ..

1. npm 인스톨 npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom 이전에 프로젝트 만들었을 때 자기가 쓴 것들을 넣어준다. jest의 경우 안 썼으면 빼도 되겠지. 2. tsconfig.json 만들기 npx tsc --init 이렇게 하면생성된다. 설정 파일로, 어떤 규칙을 사용할 것인지 직접 써넣는 것이다. { "compilerOptions": { "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능 "module": "commonjs", //무슨 import 문법 쓸건지..

자바스크립트 + 타입을 지정해준다. 자바스크립트 5 - '3' number - string 이게 된다고? 자바스크립트의 특징이다. 다이나믹 타이핑 : 알아서 숫자로 바꿔줌 그러나! 프로젝트가 커지면서 JS 특징인 자유도가 높아지고 유연성이 높아지면 독이 됨(대체 어디서 에러가 난거임?) 프로젝트를 하면서 undefined를 읽을 수 없다는 콘솔 에러가 참 많이 났다. 이때 항상 타입스크립트를 써보면 어떨까? 하는 생각이 들었다, ---------- 타입스크립트 1. 타입을 엄격히 검사해준다. 2. 에러 메세지 퀄리티가 좋아진다. (숫자를 넣어야하는데 님이 문자를 넣었습니다.. 오타 교정 등등) 문법 차이점 .js -> .ts .jsx -> .tsx 자바스크립트로 변환해야 사용가능하다. tsc -w를 입력..

1.16 1. 메인화면이 너무 칙칙하고 못생겨서 배경 이미지 추가 3. 유저 역할군 탭 삭제 문제 : 지금 id저장이 안되고 있음 로컬스토리지에 저장되는데, 새로고침하면 다 날아감. 홈화면에서 홈화면에서 새로고침은 가능. 그런데 문제는 이제 감독관홈이나 어디로 가면 안됨. : 홈화면에서 새로고침은 문제가 안되므로, 홈화면 이외에서 쓰는 부분에서 문제가 있을 것이라 추측, refreshToken 이 생긴 이후부터 쓰는 useApi가 문제일 것이라 추측함. -> 맞았음 이부분에 들어가 있는 if (!user.accessToken) { localStorage.clear(); navigate("/"); window.location.reload(); return Promise.reject(401); } 이부분이 ..

CSS 에서 클래스 네임을 어떻게 지을 것인가? -> 유지보수와 재사용성! https://velog.io/@hahan/CSS%EB%B0%A9%EB%B2%95%EB%A1%A0OOCSS-BEM-SMACSS CSS방법론 (OOCSS, BEM, SMACSS) CSS방법론 > CSS에서 클래스 네임을 지을 때 작성하는 방식으로 일종의 naming convention이다 쉽게 말해 CSS방법론이란 웹에서 CSS의 영향력이 높아지게 되면서 CSS사용시 클래스 이름을 어떻게 작성할 velog.io OOCSS CSS를 모듈 방식으로 작성하여 중복을 줄임. - 구조와 스타일을 분리한다. - 공통적인,중복되는 디자인 요소를 따로 뺴서 작성하고, 각 고유의 스타일을 지정해사용.. 단점 : 다중 클래스 사용으로 코드 가독성이 ..