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. 포트 및 PID 확인(80포트를 예로 함) netstat -ano | find "LISTENING" | find "80" 2. PID를 가진 프로세스 확인 tasklist /FI "PID eq 3792" 3. PID를 가진 프로세스 죽이기 taskkill /F /PID 3792

Spring Rest Docs과 Swagger란? Restful API를 사용하기 위해선 문서화가 굉장히 중요하다. 그렇기 때문에 자동화를 도와줄 툴이 필요한데 대표적으로 쓰이는 이 두개를 비교하여 선택하기 위한 게시글 입니다. Spring Rest Docs Swagger 장점 제품코드에 영향이 없다 API를 테스트 해 볼수 있는 화면을 제공한다. 테스트가 성공해야 문서작성된다. 적용하기 쉽다 단점 적용하기 어렵다 제품코드에 어노테이션 추가해야한다. 제품코드와 동기화가 안될 수 있다. API 문서의 목적은 개발하는 스펙을 정의하는 것이라 생각한다. Swagger는 API 동작을 테스트하는 용도에 더 특화되어 있습니다. 반면에 Spring Rest Docs는 깔끔 명료한 문서를 만들 수 있습니다. 그래서 ..

RESTful이란? Representational State Transfer라는 용어의 약자로서 웹의 장점을 최대한 활용할 수 있는 아키텍처 최근 서버 프로그램은 다양한 브라우저와 안드로이드폰, 아이폰과 같은 모바일 디바이스에서도 통신을 할 수 있어야한다. REST가 필요한 이유 -거대한 애플리케이션을 모듈, 기능별로 분리하기 쉬워졌다. RESTful API를 서비스하기만 하면 어떤 다른 모듈 또는 애플리케이션 이라도 RESTful API를 통해 상호간에 통신을 할 수 있기 때문이다. -WEB브라우저 외의 클라이언트를 위해서다. (멀티 플랫폼) REST의 특징 1. Uniform (유니폼 인터페이스) - 유니폼 인터페이스는 URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키..

HTTP 와 HTTPS HTTP는 Hypertext Transfer Protocol의 약자다. 즉 Hypertext인 HTML을 전송하기 위한 통신규약을 의미한다. HTTPS에서 마지막 S는 Over Secure Socket Layer의 약자로 Secure라는 말을 통해 알 수 있듯이 보안이 강화된 HTTP라는 것을 짐작할 수 있다. HTTP는 암호화가 되지 않은 방법으로 데이터를 전송하기 때문에 서버와 클라이언트가 주고 받는 메시지를 감청하는 것이 매우 쉽다. 그렇기 때문에 중요한 기밀 문서를 열람하는 과정에서 악의적인 감청이나 데이터의 변조등이 일어날 것을 대비한 것이 HTTPS다. HTTPS와 SSL https와 SSL를 같은 의미로 이해하고 있는 경우가 많다. 이것은 맞기도 하고 틀리기도 하다 왜..