묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결웹소켓/STOMP 채팅서비스(spring, vue, redis)
질문
새로 개강한 강좌에 수강전문의게시판이없어서 여기에 질문을 남기게되었습니다. eks를 활용한 spring 운영서버 배포(feat. devops의 모든것) 이강좌가 새로 오픈했던데 빠르게 배우는 Spring Cloud 기초(MSA) 이강좌가 선수과정인가요??? 아니면 이걸안해도 새로 개강한강좌만 신청해도 되는관계인지 궁금합니다.
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
짐코딩님..! unplugin-vue-router/vite 적용 최근방식 부탁드령요 ㅜㅜ
unplugin-vue-router/vite를 다운받고 공식문서 참고해서 설정했는데 pages의 index.vue가 오토라우팅이 되지않습니다. router.index.jsimport { defineRouter } from '#q-app/wrappers' import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router/auto' import routes from './routes' /* * If not building with SSR mode, you can * directly export the Router instantiation; * * The function below can be async too; either use * async/await or return a Promise which resolves * with the Router instance. */ export default defineRouter(function (/* { store, ssrContext } */) { const createHistory = process.env.SERVER ? createMemoryHistory : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory) const Router = createRouter({ scrollBehavior: () => ({ left: 0, top: 0 }), routes, // Leave this as is and make changes in quasar.conf.js instead! // quasar.conf.js -> build -> vueRouterMode // quasar.conf.js -> build -> publicPath history: createHistory(process.env.VUE_ROUTER_BASE) }) return Router }) quasar.config.js// Configuration for your app // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file import VueRouter from 'unplugin-vue-router/vite' import { defineConfig } from '#q-app/wrappers' export default defineConfig((/* ctx */) => { return { // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature // preFetch: true, // app boot file (/src/boot) // --> boot files are part of "main.js" // https://v2.quasar.dev/quasar-cli-vite/boot-files boot: [ ], // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css css: [ 'app.scss' ], // https://github.com/quasarframework/quasar/tree/dev/extras extras: [ // 'ionicons-v4', // 'mdi-v7', // 'fontawesome-v6', // 'eva-icons', // 'themify', // 'line-awesome', // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both! 'roboto-font', // optional, you are not bound to it 'material-icons', // optional, you are not bound to it ], // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#build build: { target: { browser: [ 'es2022', 'firefox115', 'chrome115', 'safari14' ], node: 'node20' }, vueRouterMode: 'hash', // available values: 'hash', 'history' // vueRouterBase, // vueDevtools, // vueOptionsAPI: false, // rebuildCache: true, // rebuilds Vite/linter/etc cache on startup // publicPath: '/', // analyze: true, // env: {}, // rawDefine: {} // ignorePublicFolder: true, // minify: false, // polyfillModulePreload: true, // distDir // extendViteConf (viteConf) {}, // viteVuePluginOptions: {}, vitePlugins: [ ['vite-plugin-checker', { eslint: { lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{js,mjs,cjs,vue}"', useFlatConfig: true } }, { server: false }, ], // 자동 라우터 플러그인 사용하기 VueRouter({ }), ] }, // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#devserver devServer: { // https: true, open: true // opens browser window automatically }, // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#framework framework: { config: {}, // iconSet: 'material-icons', // Quasar icon set // lang: 'en-US', // Quasar language pack // For special cases outside of where the auto-import strategy can have an impact // (like functional components as one of the examples), // you can manually specify Quasar components/directives to be available everywhere: // // components: [], // directives: [], // Quasar plugins plugins: [] }, // animations: 'all', // --- includes all animations // https://v2.quasar.dev/options/animations animations: [], // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#sourcefiles // sourceFiles: { // rootComponent: 'src/App.vue', // router: 'src/router/index', // store: 'src/store/index', // pwaRegisterServiceWorker: 'src-pwa/register-service-worker', // pwaServiceWorker: 'src-pwa/custom-service-worker', // pwaManifestFile: 'src-pwa/manifest.json', // electronMain: 'src-electron/electron-main', // electronPreload: 'src-electron/electron-preload' // bexManifestFile: 'src-bex/manifest.json // }, // https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr ssr: { prodPort: 3000, // The default port that the production server should use // (gets superseded if process.env.PORT is specified at runtime) middlewares: [ 'render' // keep this as last one ], // extendPackageJson (json) {}, // extendSSRWebserverConf (esbuildConf) {}, // manualStoreSerialization: true, // manualStoreSsrContextInjection: true, // manualStoreHydration: true, // manualPostHydrationTrigger: true, pwa: false // pwaOfflineHtmlFilename: 'offline.html', // do NOT use index.html as name! // pwaExtendGenerateSWOptions (cfg) {}, // pwaExtendInjectManifestOptions (cfg) {} }, // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa pwa: { workboxMode: 'GenerateSW' // 'GenerateSW' or 'InjectManifest' // swFilename: 'sw.js', // manifestFilename: 'manifest.json', // extendManifestJson (json) {}, // useCredentialsForManifestTag: true, // injectPwaMetaTags: false, // extendPWACustomSWConf (esbuildConf) {}, // extendGenerateSWOptions (cfg) {}, // extendInjectManifestOptions (cfg) {} }, // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova cordova: { // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing }, // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor capacitor: { hideSplashscreen: true }, // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron electron: { // extendElectronMainConf (esbuildConf) {}, // extendElectronPreloadConf (esbuildConf) {}, // extendPackageJson (json) {}, // Electron preload scripts (if any) from /src-electron, WITHOUT file extension preloadScripts: [ 'electron-preload' ], // specify the debugging port to use for the Electron app when running in development mode inspectPort: 5858, bundler: 'packager', // 'packager' or 'builder' packager: { // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options // OS X / Mac App Store // appBundleId: '', // appCategoryType: '', // osxSign: '', // protocol: 'myapp://path', // Windows only // win32metadata: { ... } }, builder: { // https://www.electron.build/configuration/configuration appId: 'vue3-quasar-firebase-app' } }, // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex bex: { // extendBexScriptsConf (esbuildConf) {}, // extendBexManifestJson (json) {}, /** * The list of extra scripts (js/ts) not in your bex manifest that you want to * compile and use in your browser extension. Maybe dynamic use them? * * Each entry in the list should be a relative filename to /src-bex/ * * @example [ 'my-script.ts', 'sub-folder/my-other-script.js' ] */ extraScripts: [] } } }) 기존의 라우터를 냅두면 MainLayout 으로 가고 주석처리해버리면 빈화면입니다. const routes = [ { path: '/', component: () => import('layouts/MainLayout.vue'), children: [ { path: '', component: () => import('pages/IndexPage.vue') } ] }, // Always leave this as last one, // but you can also remove it { path: '/:catchAll(.*)*', component: () => import('pages/ErrorNotFound.vue') } ] export default routes
-
미해결웹소켓/STOMP 채팅서비스(spring, vue, redis)
6, 도메인구성 강의에서 ddl-auto: update 부분 질문있습니다.
안녕하세요:) 도메인구성 강의 중 ddl-auto : update로 처음 설정 한 뒤 서버를 돌렸을 때 member 테이블 생성이 안되어서 ddl-auto: create로 바꾸신걸까요?? 제가 헷갈리는 부분이 처음 member테이블을 생성할 때는 ddl-auto: update로 설정했을 때에도 테이블생성이 되는 걸로 알고 있어서요. 혼자서 스프링부트 jpa프로젝트 만들엇을때도 ddl-auto:udpate로 엔티티테이블 잘 생성되었던 것 같은데 update를 꼭 create로 처음에 (지금처럼 member 테이블을 처음생성할 때) 바꿔줘야하는 건가요??
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
Quasar를 강의 버전 그대로 맞추면 실행할 때 에러가 발생해서, 다른 버전만 맞추니 잘 작동합니다.
현재 Quasar는 강의에서 안내한 버전 그대로 맞추면 실행 시 에러가 발생해서, 핵심 버전만 맞추니 정상적으로 실행됩니다.혹시 에러 생기시는 분 참고하세요~
-
미해결최신 Vue 3 완벽 가이드: 프로젝트 설정 & 스펙 총정리
npm install -D tailwindcss postcss autoprefixer 의 버전을 알고싶습니다.
tailwindcss의 버전이 4.x로 변경됨에 따라 강의 내용의 일부인npx tailwindcss init -p 시 오류가 발생하는 것이 확인되었습니다.최대한 강의를 따라가기 위하여, 일단 제 임의로 3.4.3 버전으로 다시 설치를 한 상황인데요.강사님께서 npm install -D tailwindcss postcss autiprefixer 를 하셨을 때 설치되는 버전을 알고싶습니다.
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
npm create nuxt <project-name> 현재는 nuxi 로 프로젝트 생성하는 것이 권장으로 적혀있지 않는 것 같은데
npm create nuxt <project-name> 현재는 nuxi 로 프로젝트 생성하는 것이 권장으로 적혀있지 않는 것 같은데 package.json 은 제공해주신것으로 해서 npm i , 실행을 진행했습니다. 공식문서 확인하면서 하라고 하셔서 혹시나해서요! nuxi로 프로젝트 생성은 하지 않아도 되는거죠? { "name": "nuxt-app", "private": true, "type": "module", "scripts": { "build": "nuxi build", "dev": "nuxi dev", "generate": "nuxi generate", "preview": "nuxi preview", "postinstall": "nuxi prepare" }, "devDependencies": { "nuxt": "^3.9.0", "typescript": "^5.3.3", "vue": "^3.4.3", "vue-router": "^4.2.5", "vue-tsc": "^1.8.27" } }
-
해결됨웹소켓/STOMP 채팅서비스(spring, vue, redis)
토큰 만료시 처리
안녕하세요 선생님 !저희가 만든 코드에서는 토큰 만료시에 따로 처리가 안되고 에러가 뜨고 있는데, 토큰 만료시 처리는 프론트엔드에서 처리하는 것이 더 좋을까요 ?질문이 너무 많아서 죄송스럽습니다. 좋은 강의 정말 감사드립니다 선생님
-
해결됨웹소켓/STOMP 채팅서비스(spring, vue, redis)
안녕하세요 선생님 채팅방 history를 불러올때 scrollToBottom에 대해 질문 있습니다.
안녕하세요 !프론트 코드에서 views 패키지의 StompChatpage.vue 파일에서 질문 있습니다.create 함수에서 채팅 history를 불러온 다음 scroll을 bottom으로 내리려면 선생님 코드가장 마지막에 this.scrollToBottom();이 scrollToBottom()를 실행하면 될까요 ?선생님의 코드async created(){ this.senderEmail = localStorage.getItem("email"); this.roomId = this.$route.params.roomId; const response = await axios.get(`${process.env.VUE_APP_API_BASE_URL}/chat/history/${this.roomId}`); this.messages = response.data; this.connectWebsocket(); }
-
해결됨웹소켓/STOMP 채팅서비스(spring, vue, redis)
개발환경세팅에서 npm run serve 명령어 입력 시 오류
안녕하세요 !개발환경세팅에서 선생님이 하시는 과정을 그대로 따라 갔는데npm run serve 명령어 입력 시 밑에 오류가뜹니다. 검색해보니 pnpm을 설치하라고 하는데 선생님과 똑같이 진행 했는데 오류가 뜨는 이유가 뭔지 궁금해서 질문글 남깁니다.오류 내용:ERROR Error: The project seems to require pnpm but it's not installed.Error: The project seems to require pnpm but it's not installed.
-
해결됨웹소켓/STOMP 채팅서비스(spring, vue, redis)
섹션 6. '이전메시지조회' 강의에서 질문 있습니다.
안녕하세요 선생님 !섹션 6. 이전 메시지 조회 강의에서 질문 있습니다.1. 선생님 코드의 getChatHistory() 메서드에서chatParticipants를 chatRoom으로 조회해서for문을 돌면서 현재 로그인한 멤버가 chatParticipants에 있는지 확인하고 있는데,findByChatRoomAndMember 메서드를 통해참여자인지 확인해도 로직에 상관이 없을까요 ?2. 현재 로직은 getHistory 메서드가 실행되면해당 참여자가 채팅방에 참여하기 전의 메시지들까지 전부 표시될것 같은데, 참여자가 채팅방에 참여한 후 부터의 메시지만 보여주고 싶으면 참여시간을 따로 저장한 다음 findByChatRoomAndCreatedTimeGreaterThanEqualOrderByCreatedTimeAsc(ChatRoom chatRoom, LocalDateTime participatedTime);이런식으로 코드를 짜면 될까요 ? 좋은 방법인지 모르겠습니다. 선생님 코드public List<ChatMessageDto> getChatHistory(Long roomId){// 내가 해당 채팅방의 참여자가 아닐경우 에러ChatRoom chatRoom = chatRoomRepository.findById(roomId).orElseThrow(()-> new EntityNotFoundException("room cannot be found"));Member member = memberRepository.findByEmail(SecurityContextHolder.getContext().getAuthentication().getName()).orElseThrow(()->new EntityNotFoundException("member cannot be found"));List<ChatParticipant> chatParticipants = chatParticipantRepository.findByChatRoom(chatRoom);boolean check = false;for(ChatParticipant c : chatParticipants){if(c.getMember().equals(member)){check = true;}}if(!check)throw new IllegalArgumentException("본인이 속하지 않은 채팅방입니다.");// 특정 room에 대한 message조회List<ChatMessage> chatMessages = chatMessageRepository.findByChatRoomOrderByCreatedTimeAsc(chatRoom);List<ChatMessageDto> chatMessageDtos = new ArrayList<>();for(ChatMessage c : chatMessages){ChatMessageDto chatMessageDto = ChatMessageDto.builder().message(c.getContent()).senderEmail(c.getMember().getEmail()).build();chatMessageDtos.add(chatMessageDto);}return chatMessageDtos;}
-
해결됨웹소켓/STOMP 채팅서비스(spring, vue, redis)
섹션6. '채팅메시지 저장' 강의에서 질문 있습니다
안녕하세요. 선생님섹션6. '채팅메시지 저장' 강의에서 질문 있습니다.7:50 부터 사용자별로 읽음 여부 저장을 구현하실때chatParticipantRepository에서 chatRoom을 통해 participants list를 가져오도록 구현하셨는데 조금 다르게 하고 싶어서 질문 드립니다.저희 엔티티 구성할때 ChatRoom entity에 <List>chatParticipants 필드를 만들었으니까 여기서 해당 채팅 룸의 participants를 가져와도 상관이 없을까요 ?
-
해결됨웹소켓/STOMP 채팅서비스(spring, vue, redis)
섹션3. JWT토큰생성 부분에서 질문 있습니다.
안녕하십니까 선생님 !섹션3. JWT토큰생성 강의에서 작성하신 createToken 메서드를 보면 헤더를 따로 설정하지 않는데 JJWT 라이브러리가 SECRET_KEY를 참고하여 헤더를 설정해주는건지, 아니면 기본 설정 값이 들어가는 것인지 궁금합니다.createToken 메서드 :public String createToken(String email, String role){ Claims claims = Jwts.claims().setSubject(email); claims.put("role", role); Date now = new Date(); String token = Jwts.builder() .setClaims(claims) .setIssuedAt(now) .setExpiration(new Date(now.getTime()+expiration*60*1000L)) .signWith(SECRET_KEY) .compact(); return token; }
-
해결됨웹소켓/STOMP 채팅서비스(spring, vue, redis)
섹션6. 메시지 읽음처리, 채팅방 나가기, 11분 25초
안녕하세요 선생님,섹션6. 메시지 읽음처리, 채팅방 나가기, 11분 25초 쯤에 findByChatRoomAndMember(chatRoom, member); 코드로 모든 readStatus를 가져와서 읽음 처리를 하는 것으로 보입니다.읽지 않음 상태의 readStatus만 가져와서 읽음 상태로 바꿔주어도 상관이 없을까요 ?좋은 강의 정말 감사합니다.
-
해결됨웹소켓/STOMP 채팅서비스(spring, vue, redis)
프런트쪽을 vue를 사용하지 않고도 구현 가능할까요??
안녕하세요 ㅎㅎ 채팅 시스템이 있는 프로젝트를 구현하고 싶어서 강의 수강중에 있습니다 :)현재 진행중인 프로젝트 구조는 msa 구조로 프런트-게이트웨이-유레카-백엔드 이런식으로 있고 프런트쪽은 html+js+spring feignClient로 이루어져 있습니다. 다른 프레임워크를 사용하지 않고 html과 js로만 구현이 가능케 해야하는데 vue를 사용하지 않고도 강의에서 다루고 있는 채팅 시스템을 문제없이 구현이 가능한지 궁금해서 여쭤봅니다!!
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
타입체크 관련질문입니다.
이와같이 npm install -D vue-tsc typescript를 했음에도 타입체크가 안되고있는모습입니다이유를 알수있을까요?또한 강의교안대로 했을때이렇게되고 npm run lint를하면kimchanghun@gimchancBookAir learn-nuxt-3 % npm run lint> lint> eslint "**/*.{ts,tsx,vue,js}" --fixOops! Something went wrong! :(ESLint: 8.57.1Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './config' is not defined by "exports" in /Users/kimchanghun/learn-nuxt-3/node_modules/eslint/package.json imported from /Users/kimchanghun/learn-nuxt-3/eslint.config.js at exportsNotFound (node:internal/modules/esm/resolve:314:10) at packageExportsResolve (node:internal/modules/esm/resolve:661:9) at packageResolve (node:internal/modules/esm/resolve:774:12) at moduleResolve (node:internal/modules/esm/resolve:854:18) at defaultResolve (node:internal/modules/esm/resolve:984:11) at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:685:12) at #cachedDefaultResolve (node:internal/modules/esm/loader:634:25) at ModuleLoader.resolve (node:internal/modules/esm/loader:617:38) at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:273:38) at ModuleJob._link (node:internal/modules/esm/module_job:135:49)이런오류가뜹니다!
-
해결됨웹소켓/STOMP 채팅서비스(spring, vue, redis)
강의 듣기 전 질문
프로젝트에서 IOT와 결합한 게임을 만들 예정인데, 실시간 통신인 Websocket이 필요하다고 해서 강의를 급하게 결제하였습니다. 여기에서는 실시간 채팅을 구현하는 걸로 보이는데 혹시 여기 내용을 공부하면 프로젝트에 실시간 통신 방식에서도 활용할 수 있을까요? 실시간 방 생성이나 IOT 현물과의 통신에서 WebSocket을 이용할거 같습니다.
-
미해결웹소켓/STOMP 채팅서비스(spring, vue, redis)
jwt 인증, 검증 질문입니다.
안녕하세요. jwt 11 버전 설명해주시면서 생성과 검증에 대한 궁금증이 생기는데요.생성을 위해서는 base64로 인코딩 된 값을 디코더 하신 뒤 SecretKeySpec을 이용한 뒤 HS512로 암호화 하셨는데요. 검증 부분에서는 base64로 인코딩 된 값(디코더와 SecretKeySpec가 이루어지지 않은 채로)으로 토큰 검증 및 claims를 추출하는데 이 부분에서 문제가 없는 걸까요?
-
미해결웹소켓/STOMP 채팅서비스(spring, vue, redis)
소켓 메모리낭비
안녕하세요. 강의를 보고 소켓이 연결될 때 로그를 남겨봤는데, 살펴보니 이유 없이 소켓 연결이 많이 생성되어 있는 것을 확인했습니다.이런 경우 선생님께서는 어떻게 해결하셨나요?소켓 메모리 낭비를 해결하셨다고 들었던 것 같아서 여쭤봅니다.
-
해결됨웹소켓/STOMP 채팅서비스(spring, vue, redis)
subscribe와 publish시 인증
현재 코드에 if (StompCommand.CONNECT==accessor.getCommand()){ System.out.println("connect 요청 시 토큰 유효성 검증"); String bearerToken = accessor.getFirstNativeHeader("Authorization"); String token= bearerToken.substring(7); Connect 시에만 인증을 요구하는데Stomp 연결 이후 publish와 subscribe 시에는 STOMP에서 인증이 자동으로 되는건가요? 아니면 현재 코드에서 작성하지 않은 것인가요?
-
미해결웹소켓/STOMP 채팅서비스(spring, vue, redis)
안녕하세요 리프레시 토큰을 사용하면 대략적으로 어떤 점이 바뀌게 되는건가요??
안녕하세요 강사님. 혹시 Refresh Token 을 사용하면 프론트엔드 코드에서 대략적으로 어떤 점이 바뀌게 되는건가요?