개발냥발

Vue랑 소켓이랑 연결하기 위한 연습겸 서버를 만들어보았다. express를 설치하면 쉬워진다. 그 전에 빈 폴더(디렉토리)를 만든다. vscode에서 해당 폴더를 열고 터미널에 npm init을 한다. 터미널에 npm install --save express 입력 server.js에 코드 입력 const express = require('express'); const app = express(); const port = 8000; app.listen(port, () => { console.log('localhost:'+port); }) 그리고 커맨드에 node server.js 입력하여 실행하면 기본 설정 끝!

소켓을 App.vue에서 사용하다보니 하위 컴포넌트에서 ws.send 해야 할 때마다 emit 쓰기 귀찮았다. 그러다 'store에서 ws 모듈을 사용하면 컴포넌트 상관없이 쓸 수 있지 않을까?' 라는 생각을 하게 되었다. ws 사용 방법 이것을 store에 만드는 것은 아주아주 쉬웠다. composition api 사용할 때와 같다! import { defineStore } from 'pinia'; import { ref } from '@vue/reactivity'; export const IndexSotre = defineStore('IndexSotre', () => { const isLogin = ref(false); // login true or false vlaue const wsData = r..

import { defineStore } from 'pinia'; import { ref } from '@vue/reactivity'; export const IndexStore = defineStore('IndexStore', () => { const isLogin = ref(false); // login true or false return { isLogin, }; }, { persist: true }); 새로고침을 해도 로그인 상태를 유지해야한다. 그래서 알아본게 vuex-persistedstate다. 그런데 이렇게 빨간 글씨로 경고문구가 있으면 사용하지 않는 것이 안전하다고 생각되어 한참 고민하다가 알게되었다. pinia-plugin-persistedstate-2 간단히 설명하자면 store에 있..