Web Service/NodeJS4 [ZOOM 클론 코딩] #4. SocketIO ~2.3까지의 강의 SocketIO - 쉽게 실시간 기능을 만들어주는 프레임워크 - 실시간, 양방향, event 기반의 통신 가능 - 탄력성, 신뢰성, 빠른 속도 - 연결이 끊어지면 재연결을 시도할 것 WebSockets과 굉장히 비슷하지만, WebSockets을 사용해서 통신 기능을 사용하는 것이다. 즉, WebSockets에 문제가 생겨도 계속 진행할 수 있으며 부가기능이 아니다. SocketIO를 사용해서 서버를 만들어볼 것이다. 제대로 비교해보기 위해서, server.js에 있는 것들을 주석처리를 해준다. SocketIO를 설치방법 1. npm i socket.io 2. import SocketIO from "socket.io"; (server.js) WebSocket을 생각해보면, 서버를 만들기.. 2022. 8. 31. [ZOOM 클론 코딩] #3. Chat & Nicknames ~1.9까지의 강의 home.pug ul form input(type="text", placeholder="write a msg", required) button Send form을 만들어 우리가 보게될 메시지 리스트를 만들 것이다. 그리고 추가한 것을 찾게 하기 위해서 app.js에서 편집을 해준다. app.js const messageList = document.querySelector("ul"); const messageForm = document.querySelector("form"); home.pug와 연결시키는 부분들이다. 그리고, 메시지를 send하는 부분을 지우고 아래와 같이 변경한다. function handleSubmit(event) { event.preventDefault(); con.. 2022. 8. 24. [ZOOM 클론 코딩] #2. WebSockets ~1.5까지의 강의 먼저, HTTP와 WebSocket의 차이점을 알아보자. 둘다 protocol이기는 하다. 즉, 모든 server들이 작동하는 방식이다. HTTP user가 request를 보내면 서버는 response를 준다. 즉, server가 반응하는 것이다. (앞에서 user가 뭘 보내면 반응하도록 server.js에서 해보았다.) 인터넷 전체가 http를 기반으로 만들어져있다. 기억해야할 것인 statelss이다. 즉,백엔드가 user를 기억하지 못한다는 것이다. request&response 과정 뒤에 백엔드는 user를 잃어버린다. 즉, response만 주면 끝나는 것이다. server로 메세지를 보내고 싶으면 내가 누구인지 알려주는 쿠키를 server에 보내야한다. 그럼 server가.. 2022. 8. 4. [ZOOM 클론 코딩] #1. Set up ~0.4까지의 강의 니꼬쌤과 이번에는 ZOOM 클론 코딩을 해보고자 한다! 이 강의를 듣기전에, ExpressJS, app.get(), Pug, (req, res)=> 를 알고 오라고 하셨지만... (이 부분은 백엔드로 사용한다고 하심! 프론트는 그냥 바닐라JS로 사용하신다고 합니다.) 우선은 그냥 들어보겠슴다. cmd창에서 원하는 위치로 가서 npm init -y를 해준다. 그리고 code .로 열어준다. 그 후 package.json으로 가서 main과 sciprts를 삭제한다. 그 후 이것저것 깃허브 관련 설정을 하고, nodemon을 설치하기 위해 npm i nodemon -D를 해준다. 바벨도 설치해줘야 해서, babel.config.json라는 파일도 만들어준다. 그리고 nodemon.json.. 2022. 7. 30. 이전 1 다음
