배열이나 객체를 사용할 때는 reactive()를 사용하는 것으로 알고있습니다. 해당 코드에서는 reactive([]) 대신 ref([])를 사용했더라구요.const checkboxValues = ref([]) reactive([])를 사용하니 checkbox에 v-model이 제대로 동작하지 않았습니다. 그 이유는 무엇인가요?  

plugins { id 'java' id 'org.springframework.boot' version '3.0.5' id 'io.spring.dependency-management' version '1.0.11.RELEASE' id "org.asciidoctor.jvm.convert" version "3.3.2" } group = 'org.spring' version = '0.0.1-SNAPSHOT' sourceCompatibility = '17' configurations { compileOnly { extendsFrom annotationProcessor } asciidoctorExt } repositories { mavenCentral() } ext { snippetsDir = file('build/generated-snippets') } dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'org.springframework.boot:spring-boot-starter-validation' implementation 'org.springframework.security:spring-security-crypto' implementation 'org.springframework.session:spring-session-jdbc' implementation 'org.springframework.boot:spring-boot-starter-security' implementation 'org.springframework.security:spring-security-test' implementation 'org.bouncycastle:bcprov-jdk15on:1.70' implementation 'com.querydsl:querydsl-core:5.0.0' implementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta' annotationProcessor "com.querydsl:querydsl-apt:5.0.0:jakarta" annotationProcessor 'jakarta.persistence:jakarta.persistence-api' annotationProcessor 'jakarta.annotation:jakarta.annotation-api' implementation 'io.jsonwebtoken:jjwt-api:0.11.5' runtimeOnly 'io.jsonwebtoken:jjwt-impl:0.11.5' runtimeOnly 'io.jsonwebtoken:jjwt-jackson:0.11.5' annotationProcessor "org.springframework.boot:spring-boot-configuration-processor" asciidoctorExt "org.springframework.restdocs:spring-restdocs-asciidoctor:3.0.0" testImplementation "org.springframework.restdocs:spring-restdocs-mockmvc:3.0.0" annotationProcessor "org.springframework.boot:spring-boot-configuration-processor" compileOnly 'org.projectlombok:lombok' annotationProcessor 'org.projectlombok:lombok' testCompileOnly "org.projectlombok:lombok" testAnnotationProcessor "org.projectlombok:lombok" runtimeOnly 'com.h2database:h2' testImplementation 'org.springframework.boot:spring-boot-starter-test' implementation 'org.modelmapper:modelmapper:3.2.0' } tasks.named('test') { useJUnitPlatform() } test { outputs.dir snippetsDir } asciidoctor { inputs.dir snippetsDir configurations 'asciidoctorExt' dependsOn test } asciidoctor.doFirst { delete file("src/main/resources/static/docs") } bootJar { enabled = true dependsOn asciidoctor copy { from asciidoctor.outputDir into "src/main/resources/static/docs" } } jar { enabled = false }  FAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':compileJava'.> Compilation failed; see the compiler error output for details.* Try:> Run with --info option to get more log output.> Run with --scan to get full insights.BUILD FAILED in 6s     안녕하세요querydsl 빌드 후 Q class 임포트 하는 곳에서 에러가 발생합니다 ㅠ구글링해서 이런 저런 방법 찾아서 혼지사 해보려고 했는데 쉽지않네요.. 그 밖에 캐시 지우고 재시작, java SDK 설정, 빌드설정 등 여러가지 방법을 해보았는데 잘 안됩니다 ㅠ두세시간 정도 삽질중인데 도움 좀 주실 수 있을까요.. 

@submit.prevent="edit"이와 같이 submit을하면 form내의 @click이벤트가 선언되지 않은 버튼을 여러개 만들어 각각 클릭해도 동작하는것을 확인했는데 submit 동작이 이러한게 맞는건가요? 다른 질문입니다..Listview 내 소스입니다. <PostDetailView :id="String(initId)"></PostDetailView>const initId = ref(); const fetchPosts = async () => { try { const { data, headers } = await getPosts(params.value); initId.value = data[0].id; posts.value = data; totalCount.value = headers['x-total-count']; } catch (e) { console.error('error', e); } };이런식으로 initId를 생성해서 넣어주려 했지만 id가 undefined로 초기에 전송이되고 detailView에서 당연히 에러를 내뱉었습니다.하지만 initId가 반응형으로서 fetchPosts에서 바뀌면 detailView가 다시 랜더링되어서 나와야할거같은데 안나오네요..개발자도구에서 initId값을 바꿔도 랜더링이 안되는 이유를 모르겠습니다 ....(결국v-if로 해결하긴했지만.. 또한 같은 원리로 AppPagination에서는 pageCount가 초기값이 0인데 fetchPosts를 호출후에 값이 바뀌니 다시 랜더링이 되어서 불러와지는것 같은데 제가 개념을 잘못알고있는걸까요)

<PostDetailView :id="1"></PostDetailView>main.js:8 [Vue warn]: Invalid prop: type check failed for prop "id". Expected String with value "1", got Number with value 1. at <PostDetailView id=1 > at <AppCard> at <PostListView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <TheView> at <App> 위처럼 사용하는 경우 경고창이 표시가 됩니다.. 또한 <PostDetailView :id="abc"></PostDetailView>위처럼 abc를 id값으로 주면 undefined가 뜨는데 왜그럴까요?

// form.value = { ...data }; form.value = data;두개의 차이점이 궁금합니다.

안녕하세요, 호돌님. Windows11 Home Edition 사용 유저입니다. 강의 보면서 Vue 개발 환경 조성 부분에서 막막했는데, 커뮤에 언급하신 WSL로 구글링 하면서 npm dev 서버까지 띄웠습니다. 하루 온종일 구글링 보면서 삽질을 한거라 그냥 날리기는 아깝고 제 방식이 저같은 분들께 도움이 좀 되었으면 해서 정리한 내용 올립니다. https://blog.naver.com/hellom0501/223652563722 다만 WSL의 특성상 윈도우와 마운트 된 파티션에서의 빌드나 npm 작업은 엄청난 속도 저하가 발생합니다.딱히 개선점은 없는 것 같고, WSL2를 WSL1으로 다운 그레이드하면 나아질 것이라고 해서 수정해봤는데 체감되진 않네요.아니면 아예 WSL 내부에서 개발 환경을 구축하고 작업을 하는 수 밖에 없는 것 같습니다. 좋은 강의 감사합니다.

안녕하세요npm install vue@3.1.9 로 설치하라고 하셨는데, > npm install vue@3.1.9 npm ERR! code ETARGET npm ERR! notarget No matching version found for vue@3.1.9. npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist.라고 나오고,npm view vue versions 에도 3.1.9버전이 없는데 그 다음 버전으로 보이는 3.2.0-beta.1 로 설치해도 될까요?

인프런 아이디 : patagonia인프런 이메일 : libra10042@gmail.com깃헙 아이디 : libra10042@gmail.com깃헙 username : libra10042

eslinttrc.cjs 파일이 안떠요 똑같이 진행했는데 왜그런가요...?

인프런 아이디 : cool3797@gmail.com인프런 이메일 : cool3797@gmail.com깃헙 아이디 : cool3797@gmail.com깃헙 username : OtterCue

제 코드에서는 v-model 디렉티브에 인자를 사용할 수 없다는 에러가 발생하는 것 같습니다. 사용자 정의 컴포넌트에서는 modelValue만 사용할 수 있는건가요?  

안녕하세요. 24년 10월 기준으로 문의드립니다.npm 버전은 10.8.2으로 아래와 같이 프로젝트 생성을 했습니다.npm init vue@latest (eslint, prettier 설정)npm install강의에서와 다르게 .eslinttrc.cjs 파일이 생성되지 않고 아래의 이미지와 같이 생성됩니다. 가능한 현재 버전을 기준으로 해보고 싶습니다. 방법에 대해 문의드립니다! 

settings.json 작성중에 뭘 잘못건드렸는지다른건 제대로 다 열리는데Alt+B 했을떄 html 파일열리는거, Live server 다 먹통이네요..

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 9번 브런치 돌리면 오류가 나요.  list.vue 파일에서 하단에 상세보기 하는쪽입니다(id를 String 으로 변경하는과정에서요.)axios 쪽에서 TypeError: relativeURL.replace is not a function 오류가 납니다.. 왜이럴까요~?  

먼저 강의를 수강한지 오래 되어서 제 기억이 틀릴 수 있습니다.제가 강의를 들을 때 SSR은 서버에서 랜터링 해서 내려준다.CSR은 최초 모든 것을 랜터링 해서 내려준다USR은 SSR과 CSR의 장점을 결합한 것이다.즉, 처음에는 SSR 형식으로 서버에서 랜터링 해서 내려주지만한번 내려 준것은 CSR처럼 운영되어 다시 서버에 요청을 하지 않는다. 이것이 USR이다.라고 한 것 같은데...질문제가 자료를 찾아보니 USR이라고 생각한 것이 SSR의 기본 동작이라고 하는데 맞나요?USR과 SSG(Static Server Generation)는 동일한 개념인가요?Nuxt3 프로젝트를 빌드 후 배포할 때 nginx 그리고 node.js 서버가 각각 별도로 존재하는 것이 맞나요? 아니면 하나의 서버에 인스턴스를 분리하여 운영하는 것이 맞나요?   질문이 많아 죄송합니다. 

짐 코딩님 강의 정말 잘 보고 있습니다.강의 내용과 별도로 좋았던게 문서보는법이였는데요. 해당 부분 추후 강의에서 좀 더 다뤄주셨으면 좋을것 같아서요.제가 아직 강의를 다 수강한건 아니지만 FireBase 문서 뿐만 아니라 다른 프레임워크 문서, 라이브러리 문서, 기타 서비스 문서 보는 법과스택오버플로우 문서활용하는 법 (에러 내용은 같지만, 에러 발생한 및 개발하는 상황이 다른경우가 많더라구요)다른 사람들이 GitHub 코드 참고 및 활용하는 방법도 영상으로 꼭 다뤄주셨으면 좋겠습니다..! 추가로 FireBase 강의의 경우 DB 관리및 설계를 FireBase 를 활용해서 하였는데순수하게 백엔드 및 DB 설계하는 강의도 꼭 다뤄주시면 진짜 반드시 수강신청해서 완강하겠습니다..! 좋은 강의 올려주셔서 감사합니다

안녕하셔요. 강좌 잘 보고 있습니다.문의드릴 내용은 Vue3 Pinia state 값을 Composable API를 사용 할때 초기화를 해야 되는지 궁금해서 문의 드림니다. 인터넷을 찾아보니 $reset 함수를 사용해서 공통 Plugin에 등록하고 난 후, 호출하는 페이지에서 reset 함수를 호출하면 된다고 합니다. 제 짧은 생각에는 pinia store 호출하는 함수(actions)에서 state값을 초기화를 하고 사용하면 될 것 같아 보이는데..공통으로 만들어서 제공을 해야 하는지 궁금합니다. 예제 소스)[main.js]...const pinia = createPinia();pinia.use(({ store }) => { const initialState = cloneDeep(store.$state); store.$reset = () => store.$patch(cloneDeep(initialState));});....[호출 페이지]....onBeforeUnmount(() => { store.$reset();});...         

강의 그대로 따라했는데 무슨문제인지 모르겠네요,,,, 검색해도 안나와서 질문드립니다. npm i axios 한 상태입니다

 혹시나 저 같으신 분 있으실까봐 공유해요!firebase hosting 후 Deploy complete! 라고 잘 떴는데도 불구하고 본인이 만든 페이지는 안뜨고 저 화면이 나타날때, 1분정도 기다렸다가 새로고침하니까 제대로 뜨네요 ㅎㅎ이런 이유인지 모르고 이것저것 다시 해보다가(삽질 ㅠㅠ)새로 고침 하니까 바로 뜨네요 😅😅  

안녕하세요! 강의를 듣고, 궁금증이 생겨서 찾아보던 중 명확한 답을 얻지 못해서 질문드립니다!.첫째로 DIP에 관련된 질문입니다.회원가입과 비밀번호 암호화 강의 중 "DTO를 서비스 계층으로 바로 넘기는 게 좋지 않다"고 하셔서 궁금증을 가지고 찾아보던 중에이 질문을 보고 관련 내용들을 찾아봤지만, 궁금증을 완전히 해결하지 못해서 질문드립니다.public class Auth ControllerAuthController { private final Auth ServiceAuthService auth ServiceauthService; private final ?AppConfig ?appConfig; @Post MappingPostMapping("/APIapi/auth/signup") public void signup(@Request BodyRequestBody Signup signup) { auth ServiceauthService. signup(signup).signup(signup); }}위와 같은 코드가 있을때 DIP를 지키면서 코딩한다면 단순히 Controller -> Service로 넘기기 위한 전달용 DTO를 만들어서 사용하시는지 궁금합니다.두 번째로 @transactional에 관한 질문입니다.데이터의 수정 및 변동이 있는 부분에는 @transactional을 붙이는 것이 좋다고 들어왔습니다. 그런데 강의의 코드에서는 붙인 부분과 안 붙인 부분이 나뉘는데 특별한 이유가 있을까요?또 한 readonly 속성은 데이터를 읽기만 하는 부분에서는 성능에 도움이 된다고 들었습니다.위의 내용들로 데이터의 변동이 일어나는 부분엔 @transactional을 붙이고, 읽어오기만 하는 부분에는 readonly 속성을 습관적으로 붙여왔는데 호돌맨님 께서는 @transactional을 사용하는 기준(?) 같은게 있으실까요?긴 질문 읽어주셔서 감사합니다 :)