Develop/Zoom만들기17 Zoom 만들기 _ 5. 메시지 주고받기 1. server.js 수정하기 (수정 전) function handleConnection(socket){ console.log(socket) } wss.on("connection", handleConnection) 다음의 코드를 좀 더 직관적으로 수정하고 넘어가자 (수정 후) wss.on("connection", (socket) => { console.log(socket); }) why?) handleConnection 함수를 먼저 선언한 다음 on 메서드에 인자로 전달하는 대신, 같은 역할을 하는 익명 함수를 만들어 on 메서드에 포함되는 형태로 변경했음. → connection 이벤트가 발생했을 때 소켓을 받는다는 걸 좀 더 직관적으로 표현할 수 있음. 2. socket이용하여 사용자에게 메시지 보.. 2023. 8. 30. ZOOM 만들기_ 4. 웹소켓 적용 HTTP는 요청이 있어야 응답을 할 수 있는 'stateless'의 특징을 가지고 있다. → 요청과 응답이 끝나면 서버가 사용자를 잊어버린다는 뜻 웹소켓은 한번 켜지면 꺼질 때 까지 요청응답 없이 실시간 요청응답이 지속된다. 1. ws(web soket)패키지 설치하기 'npm i ws' 명령어 실행 2. 웹소켓 프로토콜 추가하기 우리는 현재 server.js에서 express를 기반하여 서버를 만들고 있음 express는 http를 기반으로 동작하기 때문에 ws와 프로토콜이 다름 따라서 express서버에 ws패키지의 기능을 합치는 방식으로 서버를 완성할 예정. 2-1) server.js 코드 수정 먼저 http 와 ws를 import하고 app import http from 'http'; import.. 2023. 8. 30. ZOOM 클론코딩 _ 3.프론트엔드 작업 1. 폴더 생성 src폴더 안에 public 폴더 만들고 그 안에 js폴더 만든 후, app.js 파일을 생성 2. pug 설치하기 2-1) 우리가 사용할 view엔진을 위해 pug를 설치. → npm i pug 명령어 실행 2-2) src에 view폴더 만들고 home.pug 폴더 생성하기. 2-3) home.pug안에 다음의 코드 작성하기 doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") title Noom body h1 It wo.. 2023. 8. 29. zoom 클론코딩 _2. 서버작업 1. nodemon 설치하기 nodemon은 우리가 소스코드를 수정할 때마다 코드의 변화를 감지하여 자동으로 서버 프로그램을 재시작해 주는 도구이다. Node.js기반으로 실행해 주는 것은 물론이고 모니터링 까지 해주므로 꼭 사용하자! 터미널에 'npm i nodemon -D'를 실행해주자 why? ) 패키지를 설치할 때, -D옵션을 추가한 것은 개발 및 테스트를 위해 설치하는 패키지 라는 뜻. 설치를 마치고 나면 자동으로 package.json에 devDependencies라는 항목이 추가됨 설치된 패키지가 자동으로 표시된다. 2. babel 관련 패키지 설치하기 세련된 자바스크립트 코드 작성을 위해 babel 관련 패키지를 설치할 예정이다. Why?) babel은 작성 완료된 자바스크립트 코드를 다른.. 2023. 8. 29. ZOOM 클론코딩 _ 1. 프로젝트 생성 & 세팅 실시간 채팅 기능 구현 채팅룸 기능 구현 화상 채팅기능 구현 +@ 프론트 : view 백엔드 : node.js 사용 idel툴 : vscode ci/cd : aws ( 비용문제로 미정 ) 1. 프로젝트 세팅 1-1) Node.js다운 명령 프롬프트에서 node -v명령어 실행 시 아래 버전이 나오면 잘 다운된것임. 1-2) vs code (ide툴) 다운하기 1-3) 원하는 위치에 폴더 생성 1-4) vscode로 폴더 열기 file → new folder →내가 생성한 파일 선택하기 1-5) New Terminal 생성 터미널 생성하여 현재 경로가 내가 설정한 경로가 맞는지 확인 이후 'npm init -y'명령어를 실행하여 package.json생성해주기 우리는 여기서 초기설정을 할 예정! ※ pac.. 2023. 8. 29. 이전 1 2 3 다음 반응형
