노마드코더

[Web] WebRTC

줌 클론코딩 – 노마드 코더 Nomad Coders WebSockets, SocketIO, WebRTC nomadcoders.co 노마드코더의 줌 클론코딩 강의를 보고 정리한 내용입니다. 비디오 가져오기 스트림 : 비디오와 오디오가 결합된 것 사용자의 스트림 가져오기 스트림은 track을 제공해준다. track은 비디오가 될 수 있고, 오디오, 자막등이 될 수 있다. 해당 track에 접근할 수 있다. const socket = io(); const myFace = document.getElementById("myFace"); //영상 화면 const muteBtn = document.getElementById("mute"); //음소거 설정 const cameraBtn = document.getElem..

[Web]SocketIO

https://nomadcoders.co/noom 줌 클론코딩 – 노마드 코더 Nomad Coders WebSockets, SocketIO, WebRTC nomadcoders.co 노마드코더의 줌 클론코딩 강의를 보고 정리한 내용입니다. SocketIO 실시간, 양방향, event 기반의 통신을 가능하게 하는 프레임워크 socketIO는 websocket을 이용한다. 만약 websocket을 지원하지 않으면 다른 것(http long-polling)을 사용한다. 서버 코드 import http from "http"; import { Server } from "socket.io"; import express from "express"; const app = express(); app.set("view en..

[Web] WebSocket 정리

https://nomadcoders.co/noom/lobby 줌 클론코딩 – 노마드 코더 Nomad Coders WebSockets, SocketIO, WebRTC nomadcoders.co 노마드코더의 줌 클론코딩 강의를 보고 정리한 내용입니다. HTTP http는 모든 서버들이 작동하는 방식 유저가 req를 보내면 서버가 res로 반응한다. http에서 기억해야할 중요한 것은 stateless, 즉 백엔드가 유저를 기억하지 못한다. 유저와 백엔드 사이에 연결이 없다. 서버는 오직 req을 받을 때만 답장을 해준다. Websocket webSocket을 사용해서 연결하고 싶고, 서버가 지원한다면 wss(secure web socket)으로 접속하면 된다. ex) https://nomadcoders.co..

[노마드코더] NextJS 시작하기 #5

[노마드코더] NextJS 시작하기 #1 [노마드코더] NextJS 시작하기 #2 [노마드코더] NextJS 시작하기 #3 [노마드코더] NextJS 시작하기 #4 [노마드코더] NextJS 시작하기 #5 NextJS 시작하기 – 노마드 코더 Nomad Coders The React Framework for Production nomadcoders.co 지난 강의 요약 Next에서는 pre-rendering된 html 페이지에 데이터가 포함되지 않는다. 컴포넌트의 초기 state를 미리 export하기 때문에 React.js가 처리를 마치기 전까지는 실제 html 소스코드에는 Loading(개발자가 데이터가 없을때 지정한 모습)페이지의 모습을 볼 수 있다. React.js의 처리가 완료되면, ReactJ..

[노마드코더] NextJS 시작하기 #4

[노마드코더] NextJS 시작하기 #1 [노마드코더] NextJS 시작하기 #2 [노마드코더] NextJS 시작하기 #3 [노마드코더] NextJS 시작하기 #4 [노마드코더] NextJS 시작하기 #5 NextJS 시작하기 – 노마드 코더 Nomad Coders The React Framework for Production nomadcoders.co 전에 했던 강의에 이어서 이제 로딩페이지를 작업해보려고 한다. 영화 데이터가 담긴 movies변수는 영화데이터를 불러오기 전까지는 빈 배열 상태로 있을 것이다. 왜냐면 우리가 useState를 사용할때 초기값을 []으로 했기 때문에. 그러나 만약 useState();로 하면 오류가 발생한다. 왜냐면 map을 사용하려고 할때 movies가 undefined..

[노마드코더] NextJS 시작하기 #3

[노마드코더] NextJS 시작하기 #1 [노마드코더] NextJS 시작하기 #2 [노마드코더] NextJS 시작하기 #3 [노마드코더] NextJS 시작하기 #4 [노마드코더] NextJS 시작하기 #5 NextJS 시작하기 – 노마드 코더 Nomad Coders The React Framework for Production nomadcoders.co 이제 기본 기능들을 알았으니 간단한 영화 앱을 만들어보자. 우선 그 전시간 까지 _app.js를 만들었는데 추가로 Layout컴포넌트를 만들어보도록 하자. Layout컴포넌트는 Next를 사용할 때 사람들이 주로 사용하는 패턴으로, _app.js가 너무 무거워지는 것을 방지하기 위해서 사용한다. components폴더 안에 Layout.js 파일을 생성한..

[노마드코더] NextJS 시작하기 #1

[노마드코더] NextJS 시작하기 #1 [노마드코더] NextJS 시작하기 #2 [노마드코더] NextJS 시작하기 #3 [노마드코더] NextJS 시작하기 #4 [노마드코더] NextJS 시작하기 #5 NextJS의 가장 기초를 배우기 위해서 강의를 들으려고 한다. NextJS 시작하기 – 노마드 코더 Nomad Coders The React Framework for Production nomadcoders.co 우선 명령어를 사용해서 원하는 위치에 next프로젝트를 생성해준다. cmd나 vscode의 터미널에 입력해주면 된다. npx create-next-app@latest 그런 다음 이제 pages안에 있는 파일을 모두 지워준다. 우선 라이브러리와 프레임워크의 차이점을 알아보자. react는 언제..