초보 개발자

먼저 키페어를 통해서 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) ​..

완성본 미리보기 2022.06.06 - [[ Node.js Vue.js Socket.io ] 채팅] - [ Node.js Vue.js Sockect.js ] 카톡 채팅 만들기 완성 내가 구현해보려고 하는 기능은 기본적인 채팅 기능에 더하여 여러가지가 있다. 1. DB를 사용하여 나갔다 들어와도 기존 채팅이 유지가 되어있어야 함 ✅ 2. 읽음표시 기능(실시간) ✅ 3. 카톡처럼 같은 시간에(분 단위)적히면 마지막 채팅만 시각이 적혀야함, ✅ 4. 채팅방 목록에 안읽은 채팅 개수와 마지막 채팅 , 마지막 채팅 시간, 프로필 사진 받기, ✅ 5. 채팅 삭제 기능, 상대방에게도 메시지가 바뀌어 보여야함 (실시간) ✅ 6. 사진 및 동영상 전송 기능, ✅ 7. 현재 상대방이 들어와있는지 표시할 수 있는 기능 ✅ ..

aws 인스턴스에서 단순히 nohup node app.js & 이런식으로 서버를 돌려왔었는데, node를 pm2로 관리하면 훨씬 더 편리하고 효과적이라고 한다. pm2 start app.js pm2 monit pm2 list pm2 log