본문 바로가기

분류 전체보기

미들웨어와 소켓 연결하기 이번에는 방에 입장할 때와 퇴장할 때 채팅방의 다른 사람에게 '#12C6B8 님이 입장하셨습니다' 같은 시스템 메시지를 보내려고 합니다. 그런데 사용자의 이름은 세션(req.session.color)에 들어있습니다. Socket.IO도 미들웨어를 사용할 수 있으므로 express-session을 공유하면 됩니다. 추가로 채팅방 접속자가 0명일 때 방을 제거하는 코드도 같이 넣어보겠습니다. app. js와 socket.is 간에 express-session미들웨어를 공유하기위해 변수로 분리했습니다. socket.is 작성 chat.use 메서드에 미들웨어를 장착할 수 있습니다. 이 미들웨어는 chat 네임스페이스에 웹 소켓이 연결될 때마다 실행됩니다. wrap 함수는 미들웨어에 익스프레스처럼 req, re.. 더보기
실시간 GIF 채팅방 만들기 이 장에서는 사람들이 익명으로 참여하여 자유롭게 GIF 파일을 올릴 수 있는 채팅방을 만들어보겠습니다. 몽고디비와 몽고디비 ODM인 몽구스를 사용할 것입니다. 몽구스를 설치한 후, 몽구스 스키마를 생성하겠습니다. 채팅방 스키마와 채팅 내역 스키마만 있으면 됩니다. 사용자는 익명이니 딱히 저장할 필요가 없습니다. 사용자의 이름은 랜덤 색상으로 구별하겠습니다. 먼저 필요한 모듈을 설치합니다. 이미지를 업로드하고 서버에 HTTP 요청을 할 것이므로 multer와 axios를 같이 설치합니다. color-hash 모듈은 조금 전에 언급했던 랜덤 색상을 구현해주는 모듈입니다. 방 제목(title), 최대 수용 인원(max), 방장(owner), 비밀번호(password), 생성 시간(createdAt) 등을 받습.. 더보기
Soket.IO 사용하기 이전 절의 "ws" 패키지는 간단하게 웹소켓을 사용하고자 할 때 좋습니다. 하지만 구현하려는 서비스가 좀 더 복잡해진다면 Socket.IO를 사용하는 것이 편리합니다. Socket.IO가 할 수 있는 일을 "ws" 패키지가 못한다는 뜻은 아닙니다. Socket.IO에 편의 기능이 많이 추가되어 있다는 뜻입니다. 먼저 Socket.IO를 설치합니다. npm i socket.io@2 그리고 ws 패키지 대신 Socket.io를 연결한다. 먼저 socket.io 패키지를 불러와서 익스프레스 서버와 연결합니다. Socket.IO 객체의 두 번째 인수로 옵션 객체를 넣어 서버에 관한 여러 가지 설정을 할 수 있습니다. 여기서는 클라이언트가 접속할 경로인 "path" 옵션만 사용했습니다. 클라이언트에서도 이 경로와.. 더보기
ws 모듈로 웹소켓 사용하기 git-chat라는 폴더 생성 후 기본 패키지 구성 app.js routes/index.js npm install ws 웹 소켓을 익스트프레스 서버와 연결. 웹 소켓 로직이 들어있는 socket.js 파일 작성 ws 모듈을 불러온 후 익스프레스 서버를 웹소켓 서버와 연결했습니다. 익스프레스(HTTP)와 웹소켓(WS)은 같은 포트를 공유할 수 있어 별도의 작업이 필요하지 않습니다. 연결 후에는 웹소켓 서버(wss)에 이벤트 리스너를 붙입니다. 웹소켓은 이벤트 기반으로 작동한다고 생각하면 됩니다. 실시간으로 데이터를 전달받으므로 항상 대기하고 있어야 합니다. "connection" 이벤트는 클라이언트가 서버와 웹소켓 연결을 맺을 때 발생합니다. req.headers['x-forwarded-for']와 req.. 더보기
웹소켓 이해하기 '노드의 교과서'를 토대로 진행 노드 생태계에서는 "웹소켓"이라는 말을 들으면 보통 먼저 "Socket.IO"를 떠올리는 경우가 많습니다. 하지만 Socket.IO는 웹소켓을 활용한 라이브러리일 뿐이며, 웹소켓 그 자체는 아닙니다. 나중에 Socket.IO를 사용하기 위해서는 기반 기술인 웹소켓에 대해 먼저 알아야 합니다. 웹소켓은 HTML5에 새로 추가된 스펙으로, 실시간 양방향 데이터 전송을 위한 기술입니다. 이 기술은 HTTP와 다르게 WS라는 프로토콜을 사용합니다. 따라서 브라우저와 서버가 WS 프로토콜을 지원하면 사용할 수 있습니다. 노드(Node.js) 환경에서는 ws나 Socket.IO 같은 패키지를 통해 웹소켓을 사용할 수 있습니다. 웹소켓이 나오기 이전에는 HTTP 기술을 사용하여 실시간.. 더보기
Constraint +Auto Layout Constraint Constraint : 오브젝트에 제한을 둬서 여러 상황에 유연하게 대처하게 한다. 프레임 위에 오브젝트를 만들면 각 축을 어디에 둘지 설정할 수 있다. 왼쪽(오른쪽)으로 프레임을 늘려도 constrain에서 설정한 축을 기준으로 오브젝트가 위치한다. constrain 사용 예시 비율에 맞게 프레임의 사이즈를 조절함에 따라 오브젝트의 크기도 변경 프로토 타이핑시 유용한 Fixed Position Auto Layout 해당 오브젝트에 어떤 텍스트가 들어가던지 padding 등 간격을 유지하도록 하려한다. 텍스트와 오브젝트를 클릭 후 auto layout 버튼 클릭 각 오브젝트간의 간격또한 auto layout 적용 가능 왼쪽과 달리 오른쪽은 텍스트를 다르게 입력을 해도 오브젝트간의 간격.. 더보기
부하 테스트 이번 절에서는 다른 종류의 테스트를 진행해보겠습니다. 바로 부하 테스트 (loadtest)입니다. 서버가 얼마만큼의 요청을 견딜 수 있는지 (또는 수용할 수 있는지) 테스트하는 방법입니다. 내 코드가 실제로 배포되었을 때 어떤 문법적, 논리적 문제가 있을지는 유닛 테스트와 통합 테스트를 통해 어느 정도 확인할 수 있습니다. 그러나 내 서버가 몇 명의 동시 접속자나 일일 사용자를 수용할 수 있는지 예측하는 일은 매우 어렵습니다. 특히 실제 서비스 중이 아니라 개발 중일 때는 예측하는 것이 더 어려워집니다. 코드에 문법적, 논리적 문제가 없더라도 서버의 하드웨어 제약 때문에 비즈니스가 중단될 수 있습니다. 대표적인 예가 "OOM (Out of Memory)" 문제입니다. 서버는 접속자들의 정보를 저장하기 위.. 더보기
통합 테스트 이번 절에서는 하나의 라우터를 통째로 테스트해볼 것입니다. "routes" 폴더에 "auth.test.js"를 작성합니다. 하나의 라우터에는 여러 개의 미들웨어가 붙어있고, 다양한 라이브러리가 사용됩니다. 이런 것들이 모두 유기적으로 잘 작동하는지 테스트하는 것이 통합 테스트 (integration test)입니다. npm install -D supertest Supertest 패키지를 사용해 auth 라우터들을 테스트할 것입니다. Supertest를 사용하기 위해서는 app 객체를 모듈로 만들어 분리해야 합니다. "app.js" 파일에서 app 객체를 모듈로 만든 후, "server.js"에서 불러와 Listen합니다. "server.js"는 app의 포트 리스닝만 담당합니다. npm start 명령어.. 더보기

티스토리툴바