SMU개발자

웹 어플리케이션에서 사용자에게 푸시 알림을 보내는 기능을 구현하는 방법을 정리해보겠습니다.개요Firebase Cloud Messaging(FCM)은 웹, IOS, Android 앱에서 푸시 알림을 보낼 수 있을 크로스 플랫폼 메시징 솔루션 입니다.Firebase 프로젝트 설정Firebase Console 에 접속새 프로젝트 생성 또는 기존 프로젝트 선택앱 웹 추가 ( 아이콘 클릭)SDK 설정 정보 및 VAPID KEY 발급저는 간단하게 memos 라는 프로젝트에 push라는 이름으로 라는 플랫폼으로 생성했습니다. 좌측상단에 톱니바퀴 > 프로젝트 설정그러면 가이드대로 npm으로 firebase 설치해주고 firebaseConfig는 저장해줍니다. 그리고 위로 올려서 "클라우드 메시징" 탭에서 VAPID ..

의존성 추가dependencies { implementation("org.springframework.boot:spring-boot-starter-batch") implementation("org.springframework.boot:spring-boot-starter-data-jpa") // JPA 사용 시 runtimeOnly("org.postgresql:postgresql") // 데이터베이스에 따라 변경}application.ymlspring: // DB 정보는 알아서 적당히 바꾸시길 datasource: url: jdbc:postgresql://localhost:5432/mydb username: myuser password: mypassword driv..

간단하고 담백하게 설정 방법을 작성하려고 합니다.의존성추가// Swaggerimplementation("org.springdoc:springdoc-openapi-starter-webmvc-ui:2.8.5")application.ymlspringdoc: swagger-ui: path: /docs // 경로 커스텀 disable-swagger-default-url: true api-docs: path: /api-docsSwagger Configimport io.swagger.v3.oas.models.OpenAPI;import io.swagger.v3.oas.models.info.Info;import org.springframework.context.annotation.Bean;impor..

https://admin.portone.io/위 사이트에서 가입 후결제연동 > 연동정보에서 테스트 채널을 생성해준다. 대충 요렇게 필요한 채널키와 상점 아이디가 생성이 된다.서버구성결제 창 띄우기 위한 경로만 설정더보기import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.GetMapping;@Controllerpublic class ViewController { @GetMapping("/") public String movePayment() { return "payment"; }}  스프링에 내장된 templates 활용했다.(/src/main/resource..

build.gradle.ktsplugins { java id("org.springframework.boot") version "3.4.2" id("io.spring.dependency-management") version "1.1.7"}java { toolchain { languageVersion = JavaLanguageVersion.of(21) }}repositories { mavenCentral()}dependencies { // Querydsl 추가 implementation("com.querydsl:querydsl-jpa:5.0.0:jakarta") annotationProcessor("com.querydsl:querydsl-apt:5.0.0:jakarta") annotationProcesso..

안녕하세요!!저번에 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; ..