초보 개발자

상대방이 현재 들어와있는지 확인 어떻게 하면 상대방이 현재 들어와있는지 확인할 수 있을까..?라는 생각이 들었다. 소켓아이디는 쉽게 바뀔 수 있기 때문에 소켓아이디를 사용하면 힘들어질 것 같았다. 따라서 유저를 식별할 수 있는 유니크한 방을 하나 만들고 로그인하면 그 소켓 방으로 입장을 시킨다. 그 이후에 어떤 유저가 채팅방 목록에 들어갔을 때 소켓 방에 현재 사람이 존재하는지 유무를 체크하고 방에 있다면 로그인 했다는 것이므로 표시를 해주고, 존재하지 않다면 아무것도 안해주는 방식을 떠올렸다. 먼저 상대가 로그인을 하면 소켓 방에 입장해주는 코드이다. vuex에서 userId를 가져와서 만약 userId가 1이라면 1-2번방으로 입장을 시킨다. 1-1이 아닌 이유는 나는 1-1에는 다른 목적으로 사용하..

Vue 에서 $(dollar)의 의미 1. vue에서 전역 객체 속성이다. private하게 사용하는게 아닌 public하게 사용하는 속성 ex) this.$emit, this.$router.push({}) ..... 등등

먼저 키페어를 통해서 ssh에 접속하자. 나는 우분투 이기에 ubuntu로 적어주었는데 아마존일 경우 ec2-user인가? 그걸 적어주어야 할 것이다. ssh -i "키페어" ubuntu@ip 접속 후 아래의 명령어를 복붙 sudo apt-get update sudo apt-get install -y build-essential sudo apt-get install curl // 원하는 버전 적으면 됨 16.x curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -- sudo apt-get install -y nodejs 잘 설치 되었는지 확인해보자 node -v // node 버전 확인 npm -v // npm 버전 확인

채팅방에서 나간 경우 방에서 퇴장한 경우 화면도 destroyed가 되기 때문에 이 전에 주었던 이벤트 리스너를 다 없애주어야 한다. 서버와의 연결이 끊긴 후에 다시 연결 된 경우 vuex의 특정 프로퍼티를 하나 올려줌으로써 소켓이 바뀐 걸 감지할 수 있도록 만들어 주었다. 따라서 이걸 watch로 감시해준다. 기존에 있던 소켓에 이벤트를 제거하고 다시 붙여주었다. 사실 enterRoom, chatSet만 설정해도 작동은 잘 되는 것 같은데 통일성을 위해서 나머지도 다 지우고 다시 붙여주었다. ( 어떤 건 안 붙여 줘도 작동이 잘 되고, 또 어떤 건 붙여줘야 하는지 잘 모르겠다... ) 채팅 삭제 카톡을 하다 보면 채팅을 삭제해야하는 경우가 있다. 이 기능을 만들어 보면 좋을 것 같다. 크게 생각해야될 ..

채팅방 내가 작성한 메시지는 오른쪽, 상대방은 왼쪽에 표시가 된다. 나는 채팅방을 만들 때 어떤식으로 구상을 했냐면, 채팅방에 입장한 순간 created로 설정을 여러개 해줄 것이다. 그 때 해당 채팅방의 기존 내역들을 db에서 불러와서 vuex에 배열로 저장해두고, 새로 채팅을 입력을 하면 또 그 내용을 vuex에 배열로 저장을 해줄 것이다. 그럼 2개의 배열이 존재할 것이고 그걸 getter로 불러와서 화면에 뿌려줄 것이다. 기존 채팅 내역 불러오기 처음에 채팅방에 들어오면 DB에서 해당 방에 존재하는 채팅들을 다 읽어온다. 그리고 vuex에 저장을 해둔다. 기존 채팅 내역들과, 새로 적은 채팅내용들을 리셋해주고, 상대방의 프사, 이름을 저장해준다. 그런 뒤에 받아온 채팅들을 하나씩 for문을 돌리면..

소켓의 특성상 화면이 새로고침되거나 다른 페이지로 이동하면 socket연결이 끊긴다. 따라서 나는 효율적으로 만들기 위하여 채팅방에 입장하면 소켓을 만들어 주는 방식을 사용하려고 하였다. 하지만 방에 들어갈 때마다( 특정 url ) 소켓이 계속 생성이 되었고, 방에 나가거나 해도( 다른 url로 이동 ) 소켓이 사라지지 않는 현상이 발생하였다. 이로인해 한번 메시지를 보내면 여러개가 전송이 되는 현상이 발생하였다. 짐작하건데 vue의 SPA특성상 하나의 페이지 안에서 모든 것이 이루어지기 때문에 어디로 실제로 어디로 이동이 된다는 개념이아니고 하나의 페이지 안에서 다른 화면을 보여주는 것이기 때문에 소켓 연결이 끊어지지 않은 것 같다. 따라서 나는 특정 채팅방에 입장할 때 소켓을 생성하는 방법이 아니라,..

client side // "vue-socket.io": "^3.0.10", import io from 'socket.io-client'; created () { this.addTodo('gogo') this.socket = io('http://localhost:3001',{ transports: ["websocket"], withCredentials: true, }); }, sever side // "socket.io": "^3.1.2" var app = require("express")(); var server = require("http").createServer(app); var io = require("socket.io")(server, { cors: { credentials: true, }, ..

플러그인은 여러 컴포넌트에서 사용되는(특히 전역) 기능을 만들 때 사용한다. Vue.use(Vuex); Vue.use(VueRouter); Vue.use(Vuex)를 호출하면, Vuex에 정의되어있는 install()이라는 메서드가 호출된다. 이 사실이 가장 간단하면서도 가장 중요하다. 첫 번째 방법 🛺 간단히 console.log를 찍는 플러그인을 하나 만들어보려고한다. plugins안에 하나의 파일을 만들자. plugins/gogosing.js import Vue from 'vue' export const GoGoSSing = { install (Vue) { Vue.prototype.$mygogo = () => { console.log('고고싱...') } } } Vue.use(GoGoSSing) ​..