SMU개발자

안녕하세요!!저번에 nuxt로 채팅을 간단하게 만들어봤는데요사실 통신은 되지만 채팅이라고 하기에 너무 빈약한것 같아서..조금씩 생각나는대로 develop을 해보려고 합니다. 오늘은 간략하게 로그인도 넣어보고 화면도 수정되면 좋을것 같아서vuetify로 화면도 적용시킬까 합니다.Pinia 설치pinia를 설치하는 이유는 로그인하고 상태유지를 위해서입니다.npm install @pinia/nuxtauthStore최상위에서 디렉토리와 파일을 stores/authStore.ts를 생성해줍시다.import { defineStore } from 'pinia'import { useFetch } from "@vueuse/core";export const useAuthStore = defineStore('authStor..

VueUse 설치npm i -D @vueuse/nuxt @vueuse/corenuxt.config.ts 설정export default defineNuxtConfig({ modules: ['@vueuse/nuxt'], nitro: { experimental: { websocket: true } }}) 다양한 기능을 제공하는 vueUse를 설치하고 config 설치까지 해줍시다.웹소켓과 관련한 설정은 nuxt.config.ts에서 true로만 바꿔주면 되니 아주 간단하네요!WebSokcet 서버구성server/api/websocket.ts const room = 'ROOM'export default defineWebSocketHandler({ open(peer) { ..

1. Project 생성 및 hello world 찍어보기//vscode 터미널 기준npx nuxi@latest init code //폴더 및 파일 생성 server/api/index.tsexport default defineEventHandler(() => { return { helloWorld: 'API' } }) npm run dev로 서버를 올리고 localhost:3000/api로 접속해서 확인!!2. DB 연결정보이제 본격적으로 DB 연동부터 시작해보자!!먼저 npm install mysql2 설치해주자 server/db/connection.ts 파일 생성import mysql from 'mysql2/promise';interface Options { query: string; ..

1. LTS로 Node 먼저 설치하기https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. 초기화 작업 및 express 설치빈 폴더를 VSCode로 열어서 아래의 명령어를 각각 실행해준다.npm init -ynpm install express 대충 이런 모양이 나오게 될것이다. 3. 서버구성하기서버니까 DB와 연동되어 호출 하는 것 까지 한방에 해봅시다!! 우선 추가적으로 필요한 모듈 설치npm install mysql2npm install cors  index.js는 아래와 같이 구성// db 설정con..

1. Docker 설치아래의 홈페이지로 가서 설치, 혹시 에러가 난다면 BIOS에서 가상머신이 켜져 있는지 확인하자!https://www.docker.com/products/docker-desktop/ Docker Desktop: The #1 Containerization Tool for Developers | DockerDocker Desktop is collaborative containerization software for developers. Get started and download Docker Desktop today on Mac, Windows, or Linux.www.docker.com필자는 AMD의 SVM을 못찾아서 1시간을 삽질을..ㅠ 2. Mysql Docker 이미지 다운로드//..

사용 툴은 DBeaver 커넥션 세팅에서 SSH 탭에 bastion 정보를 넣어준다.test tunnel config를 눌러서 우선 베스천 서버에 잘 접속되는지 확인. 이후 main으로 돌아와 기본적인 DB정보를 넣어주면 베스천을 통해 vpc 내부에 접속하게되고 그 뒤에 private db에 접근이 가능한 구조다. 출처: likegirl.tistory.com/3 window에서 접근하고싶다면 Windows PowerShell에서 ssh -i privateKey ec2-user@공인ip(탄력적ip) -p22 ex) ssh -i privateKey.pem ec2-user@15.201.49.77 -p22 식으로 접근할 수도 있다.

Helm이란? helm은 deployment, service, ingress 등 yaml 파일들을 하나의 package로 관리하기 위한 도구이다. 기본적으로 배포한 애플리케이션을 삭제하기 위해선 deployment.yaml, service.yaml, ingress.yaml를 각각 삭제 해줘야 하지만 helm을 사용하면 설치와 삭제가 모두 한 번에 가능하다. 주요 개념 3가지 Chart: helm package에 해당하는 부분으로, 이 패키지에는 쿠버네티스 클러스터 내에서 애플리케이션, 툴, 서비스 등 구동에 필요한 모든 리소스가 정의되어 있다. 즉 설치 스크립트라고 볼 수 있다. Repository: Chart를 모아두고 공유하는 공간이다. Release: 쿠버네티스 클러스터에서 구동되는 Chart의 인..

개발을 하다보면 내가 원하는 key와 value를 가지고 JSON 형태의 데이터를 만들고 싶을 때가 있다. 구글링하다보면 결국 나오는 정보지만 막상 필요할 땐 바로 서치가 안되서 이를위해 아래의 예제를 남기려한다. const stockArr = ["apple 80", "google 50"]; let eachStockArr = []; for(let i=0; i