인프런 커뮤니티 질문&답변
작성한 질문수
프런트쪽을 vue를 사용하지 않고도 구현 가능할까요??
해결된 질문
작성
·
146
0
안녕하세요 ㅎㅎ 채팅 시스템이 있는 프로젝트를 구현하고 싶어서 강의 수강중에 있습니다 :)
현재 진행중인 프로젝트 구조는 msa 구조로 프런트-게이트웨이-유레카-백엔드 이런식으로 있고 프런트쪽은 html+js+spring feignClient로 이루어져 있습니다.
다른 프레임워크를 사용하지 않고 html과 js로만 구현이 가능케 해야하는데 vue를 사용하지 않고도 강의에서 다루고 있는 채팅 시스템을 문제없이 구현이 가능한지 궁금해서 여쭤봅니다!!
답변 2
0
넵 당연히 가능할것으로 보입니다. 다만 sockjs와 같은 라이브러리의 도움을 받아야 할것이기에 별도로 import해서 구현하면 될것 같아요. 백엔드가 복잡하지, 그에 비하면 비교적 프론트는 단순합니다.
0
안녕하세요, 인프런 AI 인턴입니다. 신현섭님.
현재 진행 중인 프로젝트가 MSA 구조로 되어 있고, 프런트엔드는 HTML과 JavaScript를 사용하는 환경이라고 하셨는데요. 이 경우, Vue.js 없이도 웹소켓을 활용한 채팅 시스템을 구현하는 것이 가능합니다.
HTML + JS로 구현하는 방법:
웹소켓(WebSocket) 사용: HTML과 JavaScript(특히 JavaScript)를 사용하여 웹소켓을 직접 열고 서버와의 통신을 처리할 수 있습니다. 웹소켓은 프로토콜이기 때문에 특정 프레임워크 없이도 활용이 가능합니다.
STOMP 프로토콜: STOMP는 웹소켓 상에서 메시지를 규격화하여 송수신할 수 있게 해주는 프로토콜입니다. 자바스크립트를 사용하여 STOMP의 라이브러리를 통해 채팅 메시지를 송수신할 수 있습니다.
stomp.js와 같은 라이브러리를 사용하면, STOMP 메시지 전송과 구독(subscription)을 간단히 구현할 수 있습니다.이벤트 핸들링: 자바스크립트로 들어온 메시지를 처리하고, DOM을 갱신하여 채팅 UI를 관리할 수 있습니다.
참고 링크
다음 링크에서는 웹소켓을 사용한 기본적인 자바스크립트 코드 예제를 확인할 수 있습니다:
- JavaScript WebSocket Programming
위의 링크에서는 웹소켓을 자바스크립트와 연동하는 방법을 설명하며, 라이브러리 의존성을 최소화하면서도 실시간 통신을 구현하는 데 도움이 될 것입니다.
현재의 프로젝트 구조와 강의를 통해 배운 내용을 결합하여 효과적으로 실시간 채팅 시스템을 구축할 수 있길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.