묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
spacing 직접 지정
안녕하세요강의 잘 보고 있습니다.다름이 아니라 padding 혹은 margin을 직접 크기를 주고 싶을 땐 어떻게 해야 할까요?다른 프레임워크에서는 보통 뒤에 -숫자를 넣으면 해당 숫자만큼 margin 혹은 padding이 되던데 Quasar에서는 어떻게 되는지 궁금합니다.
-
미해결호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
QueryDsl 추가 과정에서 질문이 있습니다..
안녕하세요 선생님. Querydsl 설정하는 부분에서 질문이 있습니다.호돌맨님 강의영상처럼 똑같이 보고 따라했는데 제꺼에선 Q클래스를 인식하지를 못 하더라구요.제가 기존에 영한님 강의에 익숙해져서 빌드 도구를 gradle이 아니라 인텔리제이로 해놨었거든요.그래서 혹시 몰라 gradle로 바꾸니 이제 QClass가 잘 생성이 되네요.혹시 이 부분은 어느 키워드로 검색을 해야할까요..?
-
미해결호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
PostCreate 기본 생성자 문제 질문드립니다.
우선 수업 잘 듣고 있습니다 호돌맨님! 많이 배우고 있어요 ㅎㅎ제목에서와 같이 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 끝장내기 - 실무에 필요한 모든 것
/signup 아이디 새로 만들어도 409 error 뜨시는 분들
Clusters의 Database Access를 클릭해서 Database Access 의 user 중 edit 버튼을 클릭한 후Database User Privileges의 Built-in Role 을 Atlas admin으로 하면 에러가 해결됩니다.그 후에도 에러가 난다면본인이 화이트리스트에 설정을 제대로 했는지 확인하시면 해결 될거에요!
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Vue3 쓰시는분들 트랜지션 설정 팁
실무에서 쓸일이 있어서 복습하다보니 Vue 버전이 바뀌어서 강의 내용보면서 Vue3 에 맞게 적용중인데요. 우선 아래 레퍼런스 참고하시면 될 듯 합니다. 강의내용과는 크게 다른건 없긴합니다.https://vuejs.org/guide/built-ins/transition.html#the-transition-componenthttps://vuejs.org/examples/#list-transitionTodoList.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 완벽 마스터: 기초부터 실전까지 - "기본편"
eslint 오류표시 질문
Option API / Composition API 수강 내용 후반에lecture폴더로 두개의 .vue 파일을 옮기고App.vue 파일을 새로 생성 후 vbase-3을 하여 초기코드 생성시 Delete ␍eslint 표시가 나오는데 왜 이러는거고 어떻게 없앨수 있나요?
-
미해결호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
QClass가 생성되지만 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' }안녕하세요 호돌맨 선생님 질문이 있습니다.위와 같은 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)
테스트 전체 실행시 id 값이 4부터 시작하는 현상
@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 완벽 마스터: 기초부터 실전까지 - "기본편"
reactive( array ) 선언 후 array에 filter를 사용하면 반응이 안되요
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 연동 웹 프로그래밍
bootstrap 팝업창 만들기 단원에서 질문있습니다.
게시판에서 삭제 버튼이 눌리지 않아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권한부여 부탁드립니다.
github권한부여 부탁드립니다.인프런 아이디 : woojoo216인프런 이메일 : woojoo216@naver.com깃헙 아이디 : woojoo216@naver.com깃헙 Username : woojoo216
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
Axios에 posts/${id}에 숫자를 보내서 에러가 발생하는군요
// PostListView.vue <PostDetailView :id="2"></PostDetailView>위 코드에서 id를 숫자값으로 전달하고 있어서 에러 메시지가 노출되고 있는 것으로 보입니다. 수업에서 이를 안내해주시면 좋을 것 같습니다. 인프런 서비스 버그: 글 작성 Editor에 이미지 업로드가 안되는 군요. png 파일 업로드인데, 조치 부탁드립니다.
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
git 권한요청
인프런 아이디 : rhdxoals@gmail.com인프런 이메일 : rhdxoals@gmail.com깃헙 아이디 : livemehere깃헙 Username : livemehere