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" } }

<template> <div></div> </template> <script> import { reactive, watch } from 'vue'; export default { setup() { const person = reactive({ name: '홍길동', age: 30, obj: { count: 0 }, }); watch( () => person.obj, (newValue, oldValue) => { console.log('newValue = ', newValue); console.log('oldValue = ', oldValue); }, ); return { person }; }, }; </script> <style lang="scss" scoped></style> getter 형태로 watch 첫번째 인자를 넘겼기 때문에 개발자 도구에서 obj 의 count 프로퍼티를 증감했을 때에 감시에 걸리지 않아서 콘솔 출력이 되지 않는다는 것을 확인했습니다.하지만 개발자 도구에서 obj 자체를 변경했을 때 감시에 걸려서 콘솔 출력이 될 것이라고 예상했지만 콘솔 출력이 되지 않았고 오히려 typeError 가 발생했습니다.이유가 무엇인지 궁금합니다. 

질문삭제

강사님 코드로 진행할 경우 console.log( config); 도 안찍혔어요. instance 를 생성해서 공통으로 사용하셨는데 loginUser 에만 커스텀한 instance를 넣으니 콘솔에 컨피그 객체가 찍혀요 function loginUser(userData) { const instance = createInstance(); return instance.post('login', userData); } export { loginUser }; console.log('Request Interceptor:', config); <- 해당 부분이 안찍히다 로그인 함수에만 커스텀 인스턴스를 사용하니 찍히네요영상이 대체로 ㅇ조금 그대로하면 안되는 경우들이 있는 것같습니다. 부분적인 업데이트는 필요한 것 같습니다 import store from '@/store/index'; // Vuex 스토어 가져오기 export function setInterCeptors(instance) { // Add a request interceptor 요청 인터셉터 instance.interceptors.request.use( function(config) { // 요청 전 실행되는 부분 // console.log('Request Interceptor:', config); config.headers.Authorization = store.state.token; // 토큰을 헤더에 추가 console.log('Request Interceptor:', config); return config; }, function(error) { return Promise.reject(error); }, ); // Add a response interceptor instance.interceptors.response.use( function(response) { // 응답 후 처리 return response; }, function(error) { return Promise.reject(error); }, ); return instance; }

선생님께서 정리해놓으신 notion 파일을 제가 볼 수 없을까요?

안녕하세요 선생님.강의 자료 다운로드가 가능할까요? 

백앤드 개발자로써2년차이고프론트엔드 개발은 이전에 프로젝트 한번 해봤었어요성향이 프론트엔드 개발에 흥미가 더 있고 훨씬 더 잘할 수 있을 것 같다는 생각이 들면서주변에 물어보면 둘 다 해야한다고 하고 하나라도포기하지 않았으면 한다고 하는데캡틴님 생각이 궁금해서 한번 여쭈어보려고요 !

spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/oauthdb?useSSL=false username: root password: jinwook219 jpa: database: mysql # InnoDB?? database-platform: org.hibernate.dialect.MySQL8Dialect generate-ddl: true hibernate: ddl-auto: create show_sql: true jwt: # 32글자 이상 인코딩된 문자열 : oauthserversecretaccesstokenoauthserversecretaccesstokenoauthserversecretaccesstoken secret: b2F1dGhzZXJ2ZXJzZWNyZXRhY2Nlc3N0b2tlbm9hdXRoc2VydmVyc2VjcmV0YWNjZXNzdG9rZW5vYXV0aHNlcnZlcnNlY3JldGFjY2Vzc3Rva2Vu expiration: 3000 #분단위 package com.example.oauth.auth; import io.jsonwebtoken.Claims; import io.jsonwebtoken.Jwts; import io.jsonwebtoken.SignatureAlgorithm; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Component; import javax.crypto.spec.SecretKeySpec; import java.security.Key; import java.util.Date; @Component public class JwtTokenProvider { private final String secretKey; private final int expiration; private Key SECRET_KEY; public JwtTokenProvider(@Value("${jwt.secret}") String secretKey, @Value("${jwt.expiration}") int expiration) { this.secretKey = secretKey; this.expiration = expiration; this.SECRET_KEY = new SecretKeySpec(java.util.Base64.getDecoder().decode(secretKey), SignatureAlgorithm.HS512.getJcaName()); } public String createToken(String email, String role){ // claims는 jwt토큰의 payload부분을 의미 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; } }  Error starting ApplicationContext. To display the condition evaluation report re-run your application with 'debug' enabled. 2025-04-29T00:35:55.742+09:00 ERROR 3891 --- [ main] o.s.boot.SpringApplication : Application run failed org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'jwtTokenProvider' defined in file [/Users/macforjinwook/Desktop/oauth/build/classes/java/main/com/example/oauth/auth/JwtTokenProvider.class]: Unexpected exception during bean creation at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:536) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:339) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:347) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:337) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:202) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.DefaultListableBeanFactory.instantiateSingleton(DefaultListableBeanFactory.java:1155) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.DefaultListableBeanFactory.preInstantiateSingleton(DefaultListableBeanFactory.java:1121) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.DefaultListableBeanFactory.preInstantiateSingletons(DefaultListableBeanFactory.java:1056) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.context.support.AbstractApplicationContext.finishBeanFactoryInitialization(AbstractApplicationContext.java:987) ~[spring-context-6.2.5.jar:6.2.5] at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:627) ~[spring-context-6.2.5.jar:6.2.5] at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:146) ~[spring-boot-3.4.4.jar:3.4.4] at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:752) ~[spring-boot-3.4.4.jar:3.4.4] at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:439) ~[spring-boot-3.4.4.jar:3.4.4] at org.springframework.boot.SpringApplication.run(SpringApplication.java:318) ~[spring-boot-3.4.4.jar:3.4.4] at org.springframework.boot.SpringApplication.run(SpringApplication.java:1361) ~[spring-boot-3.4.4.jar:3.4.4] at org.springframework.boot.SpringApplication.run(SpringApplication.java:1350) ~[spring-boot-3.4.4.jar:3.4.4] at com.example.oauth.OauthApplication.main(OauthApplication.java:10) ~[main/:na] Caused by: org.springframework.util.PlaceholderResolutionException: Could not resolve placeholder 'jwt.secret' in value "${jwt.secret}" at org.springframework.util.PlaceholderResolutionException.withValue(PlaceholderResolutionException.java:81) ~[spring-core-6.2.5.jar:6.2.5] at org.springframework.util.PlaceholderParser$ParsedValue.resolve(PlaceholderParser.java:423) ~[spring-core-6.2.5.jar:6.2.5] at org.springframework.util.PlaceholderParser.replacePlaceholders(PlaceholderParser.java:128) ~[spring-core-6.2.5.jar:6.2.5] at org.springframework.util.PropertyPlaceholderHelper.parseStringValue(PropertyPlaceholderHelper.java:118) ~[spring-core-6.2.5.jar:6.2.5] at org.springframework.util.PropertyPlaceholderHelper.replacePlaceholders(PropertyPlaceholderHelper.java:114) ~[spring-core-6.2.5.jar:6.2.5] at org.springframework.core.env.AbstractPropertyResolver.doResolvePlaceholders(AbstractPropertyResolver.java:255) ~[spring-core-6.2.5.jar:6.2.5] at org.springframework.core.env.AbstractPropertyResolver.resolveRequiredPlaceholders(AbstractPropertyResolver.java:226) ~[spring-core-6.2.5.jar:6.2.5] at org.springframework.context.support.PropertySourcesPlaceholderConfigurer.lambda$processProperties$0(PropertySourcesPlaceholderConfigurer.java:201) ~[spring-context-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.AbstractBeanFactory.resolveEmbeddedValue(AbstractBeanFactory.java:971) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.DefaultListableBeanFactory.doResolveDependency(DefaultListableBeanFactory.java:1577) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.DefaultListableBeanFactory.resolveDependency(DefaultListableBeanFactory.java:1555) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.ConstructorResolver.resolveAutowiredArgument(ConstructorResolver.java:913) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.ConstructorResolver.createArgumentArray(ConstructorResolver.java:791) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.ConstructorResolver.autowireConstructor(ConstructorResolver.java:240) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.autowireConstructor(AbstractAutowireCapableBeanFactory.java:1381) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBeanInstance(AbstractAutowireCapableBeanFactory.java:1218) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:563) ~[spring-beans-6.2.5.jar:6.2.5] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:523) ~[spring-beans-6.2.5.jar:6.2.5] ... 16 common frames omitted 종료 코드 1(으)로 완료된 프로세스 Caused by: org.springframework.util.PlaceholderResolutionException: Could not resolve placeholder 'jwt.secret' in value "${jwt.secret}"이 부분을 보면 yml에 있는 jwt.secret을 인식 못하는 것 같은데 원인을 못 찾겠습니다 강사님 깃허브 코드를 붙혀넣어봐도 왜 이런지 잘 모르겠습니다. 혹시 이런 경우에는 어떤 것을 찾아봐야하나요??

 여백이 선생님 만큼 안떨어지는데 왜 그럴까요? <template> <g-page class="q-pa-xl"> <section class="q-mb-xl"> <div class="text-h4">Headings</div> <q-separator class="q-my-md" /> <p class="text-h1">Headline 1</p> <p class="text-h2">Headline 2</p> <p class="text-h3">Headline 3</p> <p class="text-h4">Headline 4</p> <p class="text-h6">Headline 5</p> <p class="text-h6">Headline 6</p> <p class="text-subtitle1">Subtitle 1</p> <p class="text-subtitle2">Subtitle 2</p> <p class="text-body1"> Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam. </p> <p class="text-body2"> Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae. </p> <p class="text-caption">Caption text</p> <p class="text-overline">Overline</p> </section> <section> <div class="text-h4">FontWeight</div> <q-separator class="q-my-md" /> <p class="text-weight-thin"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p class="text-weight-light"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p class="text-weight-bold"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </section> <section> <div class="text-h4">CSS Helper Classes</div> <q-separator class="q-my-md" /> <p class="text-weight-thin text-right"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p class="text-weight-light text-center"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p class="text-weight-bold text-strike"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </section> </g-page> </template> <script></script> <script setup></script> <style lang="scss" scoped></style>

계속 에러만 발생하면 아에 서버가 꺼지더라구요  if (!user) { res.status(401).send('Authentication failed. User not found.'); } 위에 해당코드에 return 해주니 되더라구요 이미 401에러인데 리턴 끝내지않아서 아래도 실행이 되는게 문제였습니다. if (!user) { return res.status(401).send('Authentication failed. User not found.'); }

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요혹시 POPUP이라든지 이런 부분은 노션 교안에 없는건가요?

안녕하세요.강의 넘넘 잘 듣고 있습니다.이번 강의 따라하다가 이상한 부분이 있어서 질문 드립니다.기존에 사용하던 axios 호출 방식은 이상없이 잘 작동했었는데이번에 컴포저블로 변경하면서 동일한 결과가 나오지 않습니다.useAxios에서 응답을 로그로 찍어보면 아래와 같이 Proxy(object)라는게 달라 붙습니다.이녀석을 해당 page에서 전달받아서 로그를 찍어보면 아래와 같이 RefImpl이라는게 달라 붙습니다.저런것들이 달라 붙으면서 안에 data를 사용하려고 하면 undefined로 뜨고 가져오질 못하고 있습니다.참고로 저는 별도의 api 서버를 구축하여 강의를 따라하고 있습니다.무엇이 문제일까요?어떻게 해결 할 수 있을까요?  

이와같이 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)이런오류가뜹니다!

2.x <-- Vue 2로 하시는게 중요합니다. 아직 Vue 3는 상용 서비스에 적용하기에는 무리가 있습니다.프로젝트 진행시에는 그렇게 진행할 것인데,혹 여전히 상용서비스에 적용하기에 무리가 있는지 궁금합니다!

axios를 create할때 timeout값을1초(1000)에서 10초(10000)로변경했습니다.api 서버를 종료하고 테스트 해보니10초가 안먹는거 같네요.다른 값으로 입력해도 거의 항상 2초만에network error가 뜹니다.왜 그런걸까요? import axios from 'axios'; function create(baseURL) { const instance = axios.create({ baseURL, timeout: 10000, headers: { 'X-Custom-Header': 'foobar' }, }); return instance; }

예전에 제가 Vue를 사용할 때 아래와 같이 작업한 경험이 있습니다. <template> <template #title>{{ title }}</template> <template #chart>...</template></template> 위에서 template에 #을 붙이는게 어떤 의미인지 기억이 안나서 그런데 혹시 아시나요? 구글링을 해도 안나와서 부득이하게 여기에 질문 남깁니다.

 동일하게 했는데 왜 local 화면이 이렇게 뜰까요? 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.이 두개를 선택하면 선생님이 하신건npm run lint가 뜨는데 왜 저는 npm run format? 이 뜨는걸까요..?

저는 이상하게 둘다 오류가 발생합니다.Node버전이 22여서 20으로 바꿔서 해봐도 오류가 납니다.> npx > create-vue node:internal/modules/esm/load:209 throw new ERR_UNSUPPORTED_ESM_URL_SCHEME(parsed, schemes); ^ Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:' at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:209:11) at defaultLoad (node:internal/modules/esm/load:107:3) at ModuleLoader.load (node:internal/modules/esm/loader:701:12) at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:514:43) at #createModuleJob (node:internal/modules/esm/loader:538:36) at #getJobFromResolveResult (node:internal/modules/esm/loader:306:34) at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:274:41) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:577:25) { code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME' } Node.js v22.14.0 npm error code 1 npm error path C:\VueTemp npm error command failed npm error command C:\WINDOWS\system32\cmd.exe /d /s /c create-vue npm error A complete log of this run can be found in: C:\Users\xxxx\AppData\Local\npm-cache\_logs\2025-04-02T02_23_01_287Z-debug-0.log어디가 문제일까요?

이 수업 듣고 완전 이해 했습니다.refresh와 로그인도 해주시면 진짜 감사합니당ㅎㅎㅎ kotlin하고 nextjs 로 뚝딱뚝딱 만들었는데 이 정도만 하고 aws 에 올리면 이직 시 포트폴리오로 제출해도 문제 없을 것 같아요.