173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
안녕하세요 강의 잘 보고 있습니다. 다름이 아니라 padding 혹은 margin을 직접 크기를 주고 싶을 땐 어떻게 해야 할까요? 다른 프레임워크에서는 보통 뒤에 -숫자를 넣으면 해당 숫자만큼 margin 혹은 padding이 되던데 Quasar에서는 어떻게 되는지 궁금합니다.
미해결
호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
안녕하세요 선생님. Querydsl 설정하는 부분에서 질문이 있습니다. 호돌맨님 강의영상처럼 똑같이 보고 따라했는데 제꺼에선 Q클래스를 인식하지를 못 하더라구요. 제가 기존에 영한님 강의에 익숙해져서 빌드 도구를 gradle이 아니라 인텔리제이로 해놨었거든요. 그래서 혹시 몰라 gradle로 바꾸니 이제 QClass가 잘 생성이 되네요. 혹시 이 부분은 어느 키워드로 검색을 해야할까요..?
미해결
호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
우선 수업 잘 듣고 있습니다 호돌맨님! 많이 배우고 있어요 ㅎㅎ 제목에서와 같이 PostCreate 부분에서 기본 생성자에 관해 질문을 드립니다. // @Setter @Getter @NoArgsConstructor // TODO: 왜 이게 꼭 있어야 하는 것일까? public class PostCreateDto { @NotBlank(message = "타이틀을 입력해주세요.") private String title; @NotBlank(message = "내용을 입력해주세요.") private String content; @Builder public PostCreateDto(String title, String content) { this.title = title; this.content = content; } } 우선 이건 제 코드입니다. 보시면 제 코드에는 @NoArgsConstructor 어노테이션이 있는데요. 이 부분이 없으면 제 PostControllerTest에서는 테스트 실패가 뜨더라구요. 에러 메시지는 다음과 같습니다. Caused by: com.fasterxml.jackson.databind.exc.InvalidDefinitionException: Cannot construct instance of com.blog.request.PostCreateDto (no Creators, like default constructor, exist): cannot deserialize from Object value (no delegate- or property-based Creator) 에러메시지를 읽어보니 생성자가 없다는 문제 같아서 @NoArgsConstructor 어노테이션을 붙여보니 정상적으로 작동을 하더군요. 이 부분이 궁금해서 찾아보니 RequestBody로 넘어오는 데이터를 맵핑할 때 Jackson의 ObjectMapper가 사용되는데 이게 RequestBody를 생성할 때, DTO가 Property기반이 아니거나 Delegate를 한 상태가 아니라면 기본 생성자로 생성한다 라고 나와있네요. ( https://velog.io/@conatuseus/RequestBody%EC%97%90-%EC%99%9C-%EA%B8%B0%EB%B3%B8-%EC%83%9D%EC%84%B1%EC%9E%90%EB%8A%94-%ED%95%84%EC%9A%94%ED%95%98%EA%B3%A0-Setter%EB%8A%94-%ED%95%84%EC%9A%94-%EC%97%86%EC%9D%84%EA%B9%8C-3-idnrafiw ) 그리고 바인딩할 때 Setter가 없이도 자바 리플렉션을 통해서 DTO에 값이 들어간다고 하는 것도 이번에 알게 됐네요. 그래서 Setter를 지우고 Getter랑 @NoArgsConstructor 어노테이션만 붙이고 테스트를 돌려보니 통과가 잘 됩니다. 그런데 호돌맨님이 올려주신 코드를 보니 PostCreate 부분에 기본생성자가 없더라구요. 그런데도 테스트통과가 잘 되는 것을 보니까 신기하네요. 어떻게 그게 가능한 것인지 설명해주실 수 있나요?
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
메일 알람 안오게 할려면 어떻게 해야 하나요? repositories에서는 이미 삭제해서 unsubscribe를 할수가 없는 상태입니다 답변 부탁 드리겠습니다
미해결
Vue.js 끝장내기 - 실무에 필요한 모든 것
Clusters의 Database Access를 클릭해서 Database Access 의 user 중 edit 버튼을 클릭한 후 Database User Privileges의 Built-in Role 을 Atlas admin으로 하면 에러가 해결됩니다. 그 후에도 에러가 난다면 본인이 화이트리스트에 설정을 제대로 했는지 확인하시면 해결 될거에요!
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
실무에서 쓸일이 있어서 복습하다보니 Vue 버전이 바뀌어서 강의 내용보면서 Vue3 에 맞게 적용중인데요. 우선 아래 레퍼런스 참고하시면 될 듯 합니다. 강의내용과는 크게 다른건 없긴합니다. https://vuejs.org/guide/built-ins/transition.html#the-transition-component https://vuejs.org/examples/#list-transition TodoList.vue <template> <div> <!-- name 은 하단의 css 클래스 transition class 와 연관--> <TransitionGroup tag="ul" name="list" class="container"> <li v-bind:key="todoItem.item" v-for="(todoItem, index) in propsdata" class="shadow"> <i class="checkBtn fa-solid fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i> <span v-bind:class="{textCompleted : todoItem.completed}" >{{ todoItem.item }} </span> <!--{{ index }}--> <span class="removeBtn" v-on:click="removeTodo(todoItem, index)"> <i class="fa-solid fa-trash"></i> </span> </li> </TransitionGroup> </div> </template> <style> /* 기존 css 는 생략, 아래 레퍼런스 css 참고 https://vuejs.org/examples/#list-transition */ /* 리스트 아이템 트랜지션 효과 */ /* 1. declare transition */ .list-move, .list-enter-active, .list-leave-active { transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); } /* 2. declare enter from and leave to state */ .list-enter-from, .list-leave-to { opacity: 0; transform: translateY(30px); } /* 3. ensure leaving items are taken out of layout flow so that moving animations can be calculated correctly. */ .list-leave-active { position: absolute; transition: all 1s; } </style>
해결됨
호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
강의외적 질문이지만.. 혹시 어떤 키보드를 쓰고계신지 알수있을까요..? 소리가 너무 좋아서 악기같아요
미해결
Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
Option API / Composition API 수강 내용 후반에 lecture폴더로 두개의 .vue 파일을 옮기고 App.vue 파일을 새로 생성 후 vbase-3을 하여 초기코드 생성시 Delete ␍ eslint 표시가 나오는데 왜 이러는거고 어떻게 없앨수 있나요?
미해결
호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
plugins { id 'java' id 'org.springframework.boot' version '2.7.7' id 'io.spring.dependency-management' version '1.0.15.RELEASE' } group = 'com.tony' version = '0.0.1-SNAPSHOT' sourceCompatibility = '11' configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } 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 'com.querydsl:querydsl-core' implementation 'com.querydsl:querydsl-jpa' annotationProcessor "com.querydsl:querydsl-apt:${dependencyManagement.importedProperties['querydsl.version']}:jpa" annotationProcessor 'jakarta.persistence:jakarta.persistence-api' annotationProcessor 'jakarta.annotation:jakarta.annotation-api' compileOnly 'org.projectlombok:lombok' runtimeOnly 'com.h2database:h2' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' } 안녕하세요 호돌맨 선생님 질문이 있습니다. 위와 같은 build.gradle 로 했을시에 build/generated에 QPost.java 가 생성되는것을 확인했지만 실제 PostRepositoryImpl에서 import를 해올수 없었습니다. 구글링을 하며 여러 시도를 했었지만 다 실패해더라구요 하지만 운좋게 아래와 같은 설정( https://velog.io/@soyeon207/QueryDSL-Spring-Boot-%EC%97%90%EC%84%9C-QueryDSL-JPA-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 )을 찾아서 import하는데 성공했습니다. plugins { id 'java' id 'org.springframework.boot' version '2.7.7' id 'io.spring.dependency-management' version '1.0.15.RELEASE' } group = 'com.tony' version = '0.0.1-SNAPSHOT' sourceCompatibility = '11' configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } 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 'com.querydsl:querydsl-core' implementation 'com.querydsl:querydsl-jpa' annotationProcessor "com.querydsl:querydsl-apt:${dependencyManagement.importedProperties['querydsl.version']}:jpa" annotationProcessor 'jakarta.persistence:jakarta.persistence-api' annotationProcessor 'jakarta.annotation:jakarta.annotation-api' compileOnly 'org.projectlombok:lombok' runtimeOnly 'com.h2database:h2' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' } def querydslSrcDir = 'src/main/generated' sourceSets { main { java { srcDirs += [ querydslSrcDir ] } } } compileJava { options.compilerArgs << '-Aquerydsl.generatedAnnotationClass=javax.annotation.Generated' } tasks.withType(JavaCompile) { options.generatedSourceOutputDirectory = file(querydslSrcDir) } clean { delete file(querydslSrcDir) } tasks.named('test') { useJUnitPlatform() } 이 방식으로 하면 build/generated에는 프로젝트 폴더들만 생기고 src/main/generated에 Post.java 가 생겨서 PostRepostioryImpl에도 잘 import가 되는데 이렇게 해도 추후에 문제가 되는부분이 있을까요?
미해결
호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
@SpringBootTest @AutoConfigureMockMvc @PropertySource("classpath:messages.properties") class PostControllerTest { @Autowired private ObjectMapper mapper; @Autowired private Environment environment; @Autowired private MockMvc mockMvc; @Autowired private PostRepository postRepository; @BeforeEach void clean() { postRepository.deleteAll(); } @Test @DisplayName("/posts 요청시 Hello World를 출력한다.") void test() throws Exception { // given PostCreate request = PostCreate.builder() .title("제목입니다.") .content("내용입니다.") .build(); String json = mapper.writeValueAsString(request); // expected mockMvc.perform(MockMvcRequestBuilders.post("/posts") .contentType(MediaType.APPLICATION_JSON) .content(json) // .content("{\"title\": \"hithere\", \"content\": \"blah\"}") ) .andExpect(MockMvcResultMatchers.status().isOk()) .andExpect(MockMvcResultMatchers.content().string("")) .andDo(print()); } @Test @DisplayName("/posts 요청시 title 값은 필수다.") void test2() throws Exception { Class<? extends PostControllerTest> aClass = getClass(); ClassLoader classLoader = getClass().getClassLoader(); URL resource = classLoader.getResource("messages.properties"); // given PostCreate request = PostCreate.builder() .content("내용입니다.") .build(); String json = mapper.writeValueAsString(request); // expected mockMvc.perform(MockMvcRequestBuilders.post("/posts") .contentType(MediaType.APPLICATION_JSON) .content(json) ) .andExpect(MockMvcResultMatchers.status().isBadRequest()) .andExpect(MockMvcResultMatchers.jsonPath("$.code").value("400")) .andExpect(MockMvcResultMatchers.jsonPath("$.message").value("잘못된 요청입니다.")) .andExpect(MockMvcResultMatchers.jsonPath("$.validation.title").value(environment.getProperty("post.NotBlank"))) .andDo(print()); } @Test @DisplayName("/posts 요청시 db에 값이 저장된다.") void test3() throws Exception { // given PostCreate request = PostCreate.builder() .title("제목입니다.") .content("내용입니다.") .build(); String json = mapper.writeValueAsString(request); // expected mockMvc.perform(MockMvcRequestBuilders.post("/posts") .contentType(MediaType.APPLICATION_JSON) .content(json) ) .andExpect(MockMvcResultMatchers.status().isOk()) .andDo(print()); // then assertEquals(1L, postRepository.count()); Post post = postRepository.findAll().get(0); assertEquals("제목입니다.",post.getTitle()); assertEquals("내용입니다.",post.getContent()); } @Test @DisplayName("글 1개 조회") void test4() throws Exception { // given Post post = Post.builder() .title("123456789012345") .content("bar") .build(); postRepository.save(post); // when // expected mockMvc.perform(MockMvcRequestBuilders.get("/posts/{postId}",post.getId()) .contentType(MediaType.APPLICATION_JSON)) .andExpect(MockMvcResultMatchers.status().isOk()) .andExpect(MockMvcResultMatchers.jsonPath("$.id").value(post.getId())) .andExpect(MockMvcResultMatchers.jsonPath("$.title").value("1234567890")) .andExpect(MockMvcResultMatchers.jsonPath("$.content").value("bar")) .andDo(print()); // then } @Test @DisplayName("글 여러개 조회") void test5() throws Exception { // given List<Post> requestPosts = IntStream.range(1,31) .mapToObj(i -> Post.builder() .title("title " + i) .content("content " + i) .build() ).collect(Collectors.toList()); postRepository.saveAll(requestPosts); // expected mockMvc.perform(MockMvcRequestBuilders.get("/posts?page=1&sort=id,desc") .contentType(MediaType.APPLICATION_JSON)) .andExpect(MockMvcResultMatchers.status().isOk()) .andExpect(MockMvcResultMatchers.jsonPath("$.length()",Matchers.is(5))) .andExpect(MockMvcResultMatchers.jsonPath("$[0].id").value(30)) .andExpect(MockMvcResultMatchers.jsonPath("$[0].title").value("title 30")) .andExpect(MockMvcResultMatchers.jsonPath("$[0].content").value("content 30")) .andDo(print()); } } 안녕하세요 호돌맨님 질문이 있습니다. test5를 단독으로 실행하면 문제없는데 전체를 실행했을 때는 postRepository.saveAll 전까지는 requestPosts 안에 Post가 id가 1부터 시작하는데 saveAll을 지나고 나서는 id가 4부터 시작하게됩니다. @BeforeEach에서 postRepository.deleteAll을 수행하고 있습니다. 제생각에는 이게 Entity 의 @GeneratedValue(strategy = GenerationType.IDENTITY) 와 연관이 있는건가요? 해당 설정을 하면 말씀해주신것처럼 persist가 호출되는 시점에 id값을 db로부터 얻어오기 때문에 아무리 row가 지워졌어도 h2 내부적으로 id를1씩 증가시켜왔기에 그 증가된 값이 requestPosts 의 값도 변형시킨것이 맞나요?
미해결
Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
let itemsReactive = reactive([ { id: 1, name: '딸기1', check: true }, { id: 2, name: '딸기2', check: true }, { id: 3, name: '딸기3', check: true }, { id: 4, name: '딸기4', check: true }, ]); const deleteItemReactive = id => { let tempItems = itemsReactive.filter(item => item.id !== id); itemsReactive = tempItems; }; const updateItemReactive = id => { let tempItem = itemsReactive.find(item => item.id === id); tempItem.check = !tempItem.check; }; 위 코드에서 updateItemReactive 함수는 check값이 true, false 바뀌는 것을 확인할 수 있는데 deleteItemReactive 함수를 사용하면 반응이 안되고 있습니다. vuejs devtools로 확인해보니까 바뀌기 전에는 ItemsReactive = Reactive이고 배열 안에 요소들은 Object인데 deleteItemReactive 함수를 실행하면 ItemsReactive = Array 이고 배열 안 요소들이 Reactive로 바뀌는 것을 확인했습니다. 왜 이렇게 나오는지 모르겠습니다.
미해결
Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
안녕하세요 터미널에서 npm run dev하여 코딩 작성하며 강의 따라가고 있는데요. 강의처럼 코드변경 후 저장을 해도 화면에 반영이 안되고 npm run dev입력 후 다시 접속해야 반영된게 보입니다. 구글링해봤는데 정확한 이유를 못찾아 질문드립니다.
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
<template> <div class="inputBox shadow"> <input type="text" v-model="newTodoItem"> <span class="addContainer" @click="addTodo"> <i class="fa-solid fa-plus addBtn"></i> </span> </div> </template> <style scoped> input:focus { outline: none; } .inputBox { background: white; height: 50px; line-height: 50px; border-radius: 5px; } .inputBox input { border-style: none; font-size: 0.9rem; } .addContainer { float: right; background: linear-gradient(to right, #6478FB, #8763F8); display: block; width: 3rem; border-radius: 0 5px 5px 0; } .addBtn { color: white; vertical-align: middle; } </style> 위처럼 아예 input창 크기도 안맞춰지고 span 태그도 사라져있더라구요.. 왜 이상하게 나왔는지를 몰라서 임시로 아래처럼 바꿨는데 요즘은 flex를 현업에 안쓴다고 들었는데 그게 맞을까요 ?? 아직 git 허가를 못받아서 ..😭 input:focus { outline: none; } .inputBox { display: flex; align-items: center; background: white; height: 50px; line-height: 50px; border-radius: 5px; } .inputBox input { height: 100%; width: calc(100% - 3rem); border-style: none; font-size: 0.9rem; } .addContainer { background: linear-gradient(to right, #6478FB, #8763F8); display: block; height: 100%; width: 3rem; border-radius: 0 5px 5px 0; } .addBtn { color: white; vertical-align: middle; }
해결됨
Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
권한요청드립니다. 인프런 아이디 : woojoo216 인프런 이메일 : woojoo216@naver.com 깃헙 아이디 : woojoo216@naver.com 깃헙 Username : woojoo216
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
aaa
미해결
Vue.js - Django 연동 웹 프로그래밍
게시판에서 삭제 버튼이 눌리지 않아 data-toggle , data-target은 data-bs-toggle, data-bs-target 으로 수정하여 버튼 눌러서 모달창 팝업까지는 해결하였습니다. 하지만 모달창에 body-text는 todo내용이 아닌 body-text 문자 그대로 보여주고 delete 버튼을 눌러도 내용이 삭제 되지않습니다. 버젼이 틀려서 스크립트에서 id,name,todo를 받아오지 못하는거 같은대 아무리 찾아봐도 해결법을 모르겠습니다.
미해결
프로젝트로 배우는 Vue.js 3
어제 강의 신청해서 동영상 강좌 듣기시작했는데 오늘 회사에 와서 개발중인 프로젝트 vue버전을 확인해보니 2.6이네요~ ㅜㅜ vue2랑 vue3 이랑 많이 차이가 날까요??
해결됨
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
github권한부여 부탁드립니다. 인프런 아이디 : woojoo216 인프런 이메일 : woojoo216@naver.com 깃헙 아이디 : woojoo216@naver.com 깃헙 Username : woojoo216
미해결
Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
// PostListView.vue <PostDetailView :id="2"></PostDetailView> 위 코드에서 id를 숫자값으로 전달하고 있어서 에러 메시지가 노출되고 있는 것으로 보입니다. 수업에서 이를 안내해주시면 좋을 것 같습니다. 인프런 서비스 버그: 글 작성 Editor에 이미지 업로드가 안되는 군요. png 파일 업로드인데, 조치 부탁드립니다.
미해결
Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
인프런 아이디 : rhdxoals@gmail.com 인프런 이메일 : rhdxoals@gmail.com 깃헙 아이디 : livemehere 깃헙 Username : livemehere
