나만의 작은 도서관

오늘 배운 내용                                     웹소켓과 http와의 관계웹소켓과 http는 OSI 7계층 중 응용 계층(application layer)에 존재하는 통신 프로토콜들이다. 둘다 통신 프로토콜이라는 점에서 서로 관계없는 프로토콜이라고 알 수 있지만, 구별이 될 뿐 실제로는 전혀 관계가 없지는 않다. 웹소켓은 TCP접속에 전이중 통신 채널을 제공한다는 점에서 http와 구별되지만, http에 업그레이드 헤더를 추가함으로써 http 프로토콜에서 웹소켓 프로토콜로 전환할 수 있을 정도로 http와의 호환이 되어있다. 아래 예시를 통해 http에서 웹소켓으로 연결을 업그레이드 하는 과정을 알아보자. 클라이언트 요청GET /chat HTTP/1.1Host: serve..

이번 주 한 마디: 더 많은 것을 하고 싶었고, 더 많은 것을 배우고 싶었지만 시간이 너무 부족했다. 웹소켓에 대해서는 다시 한 번 공부해야겠다.이번 주 배운 내용                                     Socket.io의 on과 emit핸들러가 여러개 있을 때 mapping table을 사용하는 이유io.on('connection', {})은 emit이 따로 없어도 이벤트가 발생하는이유객체가 들어있는 배열에서 특정 속성이 특정 값을 가지는 지 확인하는 법array.forEach(elem, index, array)핸들러와 헬퍼의 의미도커 컨테이너에 접속하는 법JS에서 reduce를 이용해서 배열의 합을 구하기HTML파일에서 script로 API 사용하기자바스크립트 객체에서 속성의..

오늘 배운 내용                                     HTML파일에서 script로 API 사용하기tower_defense 게임을 웹소켓으로 제작하는 이번 팀 프로젝트에서 랭킹 페이지에 접속하면 해당 top 10 리스트를 html페이지로 출력하고 싶었다. 하지만, 매번 API에 대한 데이터는 Insomia와 같은 프로그램으로 받았었기 때문에 html페이지에 출력하는 방법은 낯설었다. 그러다 팀원의 코드를 참고하여 HTML파일에서 script로 API를 받아오는 방법을 알게되었다. 내가 짠 해당 코드는 다음과 같다. fetch를 통해 API에 있는 데이터를 가져올 수 있었다. fetch는 비동기 함수이기 때문에 await를 사용하였고, 그렇게 가져온 데이터를 다시 한 번 awai..

오늘 배운 내용                                     도커 컨테이너에 접속하는 법도커(docker)에 있는 컨테이너에 접속하려면 윈도우 기준 cmd로 접근해야 한다. 이 때 접근하는 명령어는 다음과 같다. docker exec -it 컨테이너_ID 또는 컨테이너_이름 /bin/bash 이 명령어는 -it 옵션으로 인터랙티브 모드와 가상 터미널을 열어주며, /bin/bash 명령은 컨테이너 내부의 bash 쉘을 실행하도록 한다. 다른 쉘을 사용하고 싶다면 해당 쉘의 경로를 지정하면 된다.JS에서 reduce를 이용해서 배열의 합을 구하기배열의 합은 for문을 돌면서 합을 구할 수도 있지만, 보다 세련되게 배열의 합을 구할 수 있다. 그 세련된 방법은 ES6에서 도입된 reduce..

오늘 배운 내용                                     객체가 들어있는 배열에서 특정 속성이 특정 값을 가지는 지 확인하는 법배열에 객체가 들어있는 경우, 객체가 가지는 속성 중 특정 속성이 가지는 값으로 필터링하고 싶을 때가 있다. 이번 과제에서 몬스터 정보가 객체로 담겨있는 배열에서 몬스터 아이디를 통해 해당 객체를 가져오고 싶었는데 어떻게 해야할 지 몰랐다가 검색을 통해 알 수 있었다. 해결한 방법은 다음과 같다.// find안에 다음과 같이 함수를 넣으면 객체 안의 속성 인 id가 monsterId와 일치하는 객체만 가져오게 된다.const monsterData = MONSTER_CONFIG.find(monster => monster.id == monsterId); arr..

오늘 배운 내용                                     Socket.io의 on과 emiton메소드는 이벤트가 발생했을 때 실행할 로직을 이름과 함께 정의하는 것이고, emit은 해당 이름을 가진 이벤트의 로직을 실행한다. 예시는 다음과 같다. 출처: https://socket.io/docs/v3/emitting-events/// server-side// 서버(io)에 연결 이벤트가 생기면, 연결을 시도한 소켓에게 hello라는 이름의 이벤트와 로직을 추가한다.io.on("connection", (socket) => { socket.on("hello", (arg) => { console.log(arg); // world });});// client-side// 소켓의 이..