반응형 웹개발26 [Node.js] 웹소켓 구현해보기 2편 - 클라이언트와 서버 연결 (Web Socket with Node.js) 지난 1편에서는 웹소켓 서버를 생성해봤는데요.이번에는 생성한 웹소켓 서버(백엔드)와 클라이언트(프론트엔드)를 연결해보려고 합니다.1편은 아래 링크를 참고해주세요!https://musubi-iroiro.tistory.com/461 웹소켓 구현해보기 1편 - 웹소켓의 정의와 웹소켓 서버 생성 (Web Socket with Node.js)웹소켓의 정의웹소켓(WebSocket)은 HTML5에서 소개된 통신 프로토콜로, 클라이언트와 서버(브라우저와 서버)를 연결하고 실시간으로 통신이 가능하도록 하는 프로토콜입니다. http처럼 이것도 프로musubi-iroiro.tistory.com서버와 클라이언트 연결하기웹소켓 서버를 만들었다면, 클라이언트와 연결을 해봅시다.우선, 백엔드 쪽에서는 새로운 클라이언트가 연결되었을.. 2025. 1. 25. [Node.js] 웹소켓 구현해보기 1편 - 웹소켓의 정의와 웹소켓 서버 생성 (Web Socket with Node.js) 웹소켓의 정의웹소켓(WebSocket)은 HTML5에서 소개된 통신 프로토콜로, 클라이언트와 서버(브라우저와 서버)를 연결하고 실시간으로 통신이 가능하도록 하는 프로토콜입니다. http처럼 이것도 프로토콜(일종의 약속)이기 때문에, 특정 프로그래밍 언어에 국한되거나 하는 개념이 아닙니다.. 우리가 http 프로토콜로 만든 웹을 http, https를 통해서 접근할 수 있는 것처럼, 웹소켓 프로토콜로 만든 웹은 ws, wss로 접근 가능하죠. 웹소켓의 탄생과 http의 한계 웹소켓은 위의 사진에 나온 것처럼 http 프로토콜의 한계를 보완하기 위해 탄생했습니다..http는 request를 보내면 response를 보내주는 걸 반복하는 방식이고, realtime으로 작동하지 않습니다. 또한, http는 s.. 2025. 1. 25. [Node.js] Express.static 메서드 사용해보기 1. Express.static이 뭐하는 메서드임?Node.js Express에서 express.static은 정적 파일(Static Files)을 제공하기 위해 사용하는 Express.js의 기본 미들웨어입니다.여기서 정적 파일이란 서버에서 특별한 처리 없이 클라이언트에게 제공되는 파일로, 예를 들어 HTML, CSS, JavaScript, 이미지, 글꼴 등이 포함됩니다.또한, 미들웨어는 Express.js에서 요청(Request)과 응답(Response) 사이에 실행되는 중간 처리 함수입니다. 미들웨어는 요청 객체(req), 응답 객체(res), 그리고 다음 미들웨어로 전달할 수 있는 next() 함수를 사용할 수 있습니다.예시와 함께 살펴봅쉬다.project/├── public/│ ├── sta.. 2025. 1. 21. PUG란?(PUG 예제 코드 포함) 오늘은 PUG(옛날 이름 JADE)에 대해서 간단히 소개해보고자 합니다.1. Pug란 무엇인가?Pug(이전 이름: Jade)는 Node.js 기반의 HTML 템플릿 엔진입니다. 쉽게 말하면, 간결한 문법으로 HTML을 생성할 수 있게 도와주는 도구로, 코드의 가독성을 높이고 유지보수를 용이하게 하는 툴입니다.Node.js 기반이기 때문에 백엔드 작업에서 주로 사용되지만, 정확히는 템플릿 엔진이라는 점에서 HTML 생성이 필요한 모든 작업에서 유용하게 쓰일 수 있습니다. 2. 왜 Pug를 사용해야 할까?(1) 간결한 문법Pug는 중첩 구조를 들여쓰기로 표현합니다. 이를 통해 불필요한 태그나 중복된 닫는 태그 없이 깔끔하게 HTML 코드를 작성할 수 있습니다.doctype htmlhtml head t.. 2025. 1. 20. 포트(Port)는 무엇일까? 1. 포트(Port) 의 개념웹에서 흔히들 쓰는 포트(port)는 뭘까요?인터넷에 검색을 해보면 '포트(port)란, 네트워크 상에서 데이터를 송수신할 때 사용하는 논리적인 통신 채널을 의미한다'고 나옵니다. 근데 뭔가 설명이 직관적이지 않죠.포트를 항구에서 선착장 같은 개념이라고 생각하시면 이해하기가 편한데요(by 유튜버 조코딩님 비유)도메인을 입력하고, DNS를 통해 IP로 들어간 뒤에, 그 IP에서 운영하는 프로그램 중에서 어떤 프로그램에 들어갈지를 정해주는 게 포트라고 생각하시면 편합니다. 선착장에서 도선사가 입출항을 승인해줘야 배를 댈 수 있는 것처럼, 외부 클라이언트가 특정 서비스에 접속하려면, 서버에서 해당 포트를 열어줘야 접근이 가능합니다. 즉, IP 주소가 컴퓨터(서버)를 식별한다면, .. 2025. 1. 18. GET 방식에서 URL에 데이터를 전달하는 두 가지 방법 : params, query 지난 포스팅에서 GET 방식은 URL에 요청할 데이터를 전달하는 방식이라고 정리했었는데요.https://musubi-iroiro.tistory.com/405 GET 방식과 POST 방식 차이(feat. REST)오늘은 GET 방식과 POST 방식의 차이에 대해서 간단히 알아보려고 합니다. 오픈 API를 활용해 데이터를 가져올 때, 다음과 같이 GET/POST로 구분이 되어있는 걸 볼 수 있는데요.두 방식의 차이가 뭘까musubi-iroiro.tistory.com오늘은 GET 방식에서 URL에 데이터를 담아 보내는 두 가지 방식에 대해서 알아보려고 합니다. 1. Query(쿼리 파라미터)query 파라미터는 URL의 끝에 ?로 시작하여 여러 파라미터를 &로 구분하여 전달하는 방식입니다. https://e.. 2025. 1. 18. 이전 1 2 3 4 5 다음 728x90 반응형
