1/11 (서버측엔 websockets 모듈, 브라우저측엔 표준 웹 소켓 API, 수) TIL

(웹소켓 공부 중)

참고중:

Mozilla MDN - WebSocket을 이용하여 클라이언트 애플리케이션 작성하기 ✔️

웹소켓 공식 문서(?) https://websockets.spec.whatwg.org/#the-websocket-interface ✔️

클라이언트 측 웹소켓 API docs - 속성과 메소드, 이벤트 목록 ✔️

모던 자바스크립트 웹소켓 https://ko.javascript.info/websocket ✔️

WebSockets와 Socket.IO - 비교글 좋음 다시 읽어봐도 좋을 것 https://velog.io/@leeyw2709/WebSocket과-socket.io ✔️

웹소켓과 Socket.IO 코드 예시 - https://velog.io/@delay100/Socket

ws 사용하기 - 이것도 좋음. https://curryyou.tistory.com/348

SQL 문제 풀이

시도1.

WHERE 절에는 aggregation 함수들이 들어갈 수 없다는 것은 알고 있었다.

SELECT *
FROM places
WHERE COUNT(host_id) >= 2
ORDER BY id;

=> 실행 결과: SQL 실행 중 오류가 발생하였습니다. Invalid use of group function

시도 2.

GROUP BY와 HAVING으로 해보려 했으나 뭉쳐진 그룹들을 어떻게 다시 해체해서 보여줘야 될지…

SELECT *
FROM places
GROUP BY host_id
HAVING COUNT(host_id) >= 2
ORDER BY id;

⇒ 실행 결과:

ID	NAME	HOST_ID
4431977	BOUTIQUE STAYS - Somerset Terrace, Pet Friendly	760849
16045624	Urban Jungle in the Heart of Melbourne	30900122

정답 :

튜터와 진행한 풀이 과정에서 서브 쿼리 문법을 배웠다.

SELECT *
FROM places
WHERE host_id IN 
(SELECT host_id FROM places 
 GROUP BY host_id 
 HAVING COUNT(host_id) >= 2)
ORDER BY id;

⇒ 실행 결과(요구 결과와 같음) :

ID	NAME	HOST_ID
4431977	BOUTIQUE STAYS - Somerset Terrace, Pet Friendly	760849
5194998	BOUTIQUE STAYS - Elwood Beaches 3, Pet Friendly	760849
16045624	Urban Jungle in the Heart of Melbourne	30900122
17810814	Stylish Bayside Retreat with a Luscious Garden	760849
22740286	FREE PARKING - The Velvet Lux in Melbourne CBD	30900122

새로 알게 된 점

: 서브 쿼리 작성법(의 예시 하나)을 알게 되었다.

특히 저 IN 뒤의 서브 쿼리에서 SELECT한 컬럼 ‘하나’가 IN 앞의 컬럼 ‘하나’에 대응(주입)되는 원리라는 것이 흥미로웠다.

문제 풀이 - [핸드폰 번호 가리기]

내 정답:

function solution(phone_number) {
    var answer = '';
    const len = phone_number.length;
    for (let i = 0; i < len - 4; i++) {
        answer += '*';
    }
    answer += phone_number.slice(-4)
    return answer;
}

새로 알게 된 것

자바스크립트에서 문자열 슬라이싱용 String.slice()라는 아주 편한 메소드가 있다는 것을 알게 되었다.

String.slice(시작 인덱스, 끝 인덱스)

끝 인덱스는 옵셔널이며 '미포함'이다.

파이썬에서처럼 음수 인덱싱도 가능하다. 사실상 파이썬의 슬라이싱과 완전히 동일한 문법 같다.

// 예시: 
const str = 'The lazy dog.';

console.log(str.slice(4));
// expected output: "lazy dog."

console.log(str.slice(4, 8));
// expected output: "lazy"

console.log(str.slice(-4));
// expected output: "dog."

console.log(str.slice(-9, -5));
// expected output: "lazy"

오늘 웹소켓, 특히 자바스크립트의 websockets 모듈에 대해 공부했다. 기존의 강의 노트에 엄청 보강을 해놔서 여기에는 따로 올릴 게 없다.

가장 궁금했던 점인, 어디서 ws.on("message", function() {…}) 같은 문법이 튀어나와서 사용되는 것인가에 대한 해답도 튜터님에게 찾아가서 얻었다. websockets 모듈의 경우, API 도큐먼트에 “해당 클래스는 EventEmitter를 상속하고 있음” 이란 문장이 적혀 있었는데, 이 한 문장이 엄청난 의미를 담고 있는 해답이었던 것이다. EventEmitter는 Node.js의 내장 모듈이고(…) 여기에 .on("이벤트명", …)같은 메소드가 여럿 오버로딩 되어 있는 것이다. 그래서 이를 상속하는 websockets 모듈의 WebSocket 클래스나 WebSocketServer 클래스도 모두 WebSocket.on("message", function() { … })같은 식으로 운용될 수 있었던 것이다.

Uploaded by N2T

SQL 문제 풀이

새로 알게 된 점

문제 풀이 - [핸드폰 번호 가리기]

새로 알게 된 것

String.slice(시작 인덱스, 끝 인덱스)

티스토리툴바