본문 바로가기

전체 글110

[javascript/java] Optional Channing 옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자, 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 또 다른 사례론 브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제가 있다. 자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 .. 2023. 9. 4.
ZOOM만들기 10. 채팅룸 완성하기 1. 닉네임 추가하기 1-1) 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 Zoom //MVP.css는 우리가 태그에 class나 id같은 특성을 추가하지 않아도 자동으로 스타일을 적용해주는 라이브러리다. link(rel="stylesheet", href="https://unpkg.com/mvp.css") body //h1 It works! header h1 Z.. 2023. 9. 1.
ZOOM 만들기 9. socket.io 이용하여 채팅룸 구현 (2) 1. home.pug 수정하기 채팅룸을 구별할 수 있게 되었으니 같은 채팅룸에 접속한 사용자들끼리만 메시지를 주고받을 수 있게 만들어보자. 다음의 코드를 home.pug에 추가하자 div#room ul form input(placeholder="message", required, type="text") button Send 2. app.js 수정하기 메시지를 입력하는 폼을 추가했지만 처음에는 이 폼을 숨겨야 한다. 왜냐하면 채팅룸에 아직 접속하지 않은 상태이기 때문. 룸 이름을 입력해 채팅룸에 접속하고 나면 반대로 룸 이름 폼이 사라지고 메시지 폼이 보이도록 app.js를 수정하자. const socket = io(); const welcome = document.getElementById("welcom.. 2023. 9. 1.
ZOOM 만들기 8. socket.io 이용하여 채팅룸 구현(1) socket.io란? 실시간, 양방향, 이벤트에 기반한 통신 등을 모두 지원하는 라이브러리다. 웹소켓과 유사하지만 엄연히 다른, '웹소켓을 활용하는 라이브러리' 라고 이해하면 좋다. 1. socket.io 적용 준비하기 1-1) server.js 코드 수정 - ws와 관련된 코드 모두 삭제 import http from 'http'; import express from 'express'; const app = express(); app.set("view engine", "pug"); //dirname은 Node.js기본 전역변수로, 현재 실행되는 폴더의 경로를 의미 app.set("views", __dirname + "/views"); app.use("/public", express.static(__di.. 2023. 8. 31.
ZOOM 만들기 7. 실시간 채팅구현 +@ 이전에 실시간 채팅을 구현하였고 이번 포스팅에서는 닉네임과 메시지 구분처리 / 익명처리 / 데이터 모양 다듬기 위주로 부가적인 내용을 다룰 예정이다. 1. 닉네임과 메시지 처리하기 닉네임은 닉네임대로 / 메시지는 메시지대로 처리할 예정. if문 대신에 switch문을 사용하여 가독성을 높힘 server.js코드를 다음과 같이 수정함. wss.on("connection", (socket) => { sockets.push(socket); // 브라우저가 연결됐을 때. console.log("Connected to Browser"); //브라우저가 종료되었을 때를 의미하는 close socket.on("close", () => console.log("Disconnected from Browser")); //브.. 2023. 8. 31.
Zoom만들기_ 6. 실시간 채팅 구현 1. 웹 요소 추가하기 브라우저 화면에 입력 필드와 목록을 만들고, 메시지를 주고받은 결과를 바로바로 표시할 수 있게 해보자. ※ 당연히 서버는 실행되어져 있어야함. 1-1) home.pug (뷰 엔진) 수정 코드의 ul부분은 메시지를 받을 때마다 자바스크립트를 이용해서 채울 예정 ( like 카카오톡 ) 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 Zoom //MVP.css는 우리가 태그에 class나 id같은 특성을.. 2023. 8. 30.
반응형

티스토리툴바