묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Nuxt.js 시작하기
블로그 기능 질문입니다!
https://joshua1988.github.io/vue-camp/nuxt/data-fetching.html#asyncdata%E1%84%8B%E1%85%B4-%E1%84%91%E1%85%A1%E1%84%85%E1%85%A1%E1%84%86%E1%85%B5%E1%84%90%E1%85%A5쌤이 주신 블로그 보고있다가 갑자기 오른쪽 밑부분이 경고창으로 무슨 내용이 추가되었다고 새로고침을 유도하는 기능이 있는데 좋은 기능인 것 같아 질문드립니다!1. 관리자가 게시글 수정하면 그 사이트 사용자들 한테 메시지를 보내는 기능이 맞는 걸까요?어떤 식으로 구현 되있는지 학습하실 때 예제 혹은 설명해주시면 감사하겠습니다!
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
route props:true
이 부분이 계속 이해가 안되서요:( routes[ ]에서 props: true 를 선언하면 전달되는 route.params(/:id)가 props로 component에 전달 된다고 이해했고, 부모 컴포넌트에서 props 속성을 v-bind해서 보내줘야한다고 이해하고 있는데 다른 학습자 분이 <PostDetailView id="1"> -> <PostDetailView :id="1"> 변경 이유 관련 문의했고, 선생님께서 아래와 같이 답변해주셨는데...Q) <PostDetailView id="1"> -> <PostDetailView :id="1"> 이 작업의 의미A) id 라는 속성값의 타입을 String으로 넘기는 것에서 Number로 넘기는 것으로 변경했음을 의미합니다.단순히 전달받은 id속성의 타입을 변화하기 위해 ':'를 붙여준건가요?? props로 부모에서 자식컴포넌트로 데이터를 전달하려면v-bind를 해줘야해서 붙인거 아닌가요?ㅠㅠ 추가적으로 url parameter로 데이터 전달 시 데이터타입은 모두 String으로 전달되는거죠? (특별한 지정 없을 시) javascript는 데이터선언시 데이터타입을 따로 해주지 않고 매개변수로 받을 데이터타입도 따로 지정을 안해주는데 수업에서 데이터타입을 parsing해주는 이유가 궁금해요!!! 예를 들어 상세페이지로 접근 시 param으로 데이터를 전달하고 해당view페이지에서 axios함수를 이용해서 상세페이지 데이터를 가져오는데, 이때 route.param.id로 매개변수를 전달하자나요? 위에 문의드린대로 데이터타입을 지정하지 않았는데, 어쩔때는 parsing을하고 어떤때는 또 그냥 사용하고..ㅠjs에서는 데이터타입 구분없이 const(var)로 데이터선언되고 java랑 다르게 해당 언어에서 유동적으로 데이터를 받아쓰는걸로 이해하고 있는데 잘못된 이해일까요? (만약 타입까지 일치시키고 싶으면 ===으로 비교, 아니면 == 로 비교함)
-
해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
15_modal_teleport > AppModal.vue -> defineEmits
PostModal.vue 컴포넌트 분리 후에 AppModal.vue부분에 defineEmits(['close' , ... ]) 'close'는 AppModal에서 상위컴포넌트로 전달하는 것이 따로 없는 것같은데 'close'가 남겨져 있더라구요!여기서 'close'는 어떤 역할을 하는걸까요?
-
미해결Nuxt.js 시작하기
node 버전 문제 질문입니다.
https://stackoverflow.com/questions/74726224/opensslerrorstack-error03000086digital-envelope-routinesinitialization-e이런 이슈 때문에처음에 빌드 시 에러가 나서 진행을 못하다가 버전을 20 -> 18 -> 16 하니까 이제되더라고요 혹시 어떤 문제인지 알수있을까 궁금합니다.
-
미해결Nuxt.js 시작하기
폴더구조 다른것 안내 부탁드려요
다른분이 문의하신것 처럼 파일 구조가 다르게 생성되어서 수업 중간부터 default.vue도 없고 앞으로 수업을 따라가기가 걱정되네요. 아무래도 초보인데 폴더구조부터 달라버리면 막히거든요….이런 혼동이 생기지 않도록 강의 초반에 안내를 해주셨으면 좋겠습니다. 그리고 추가 강의도 올려주신다고 댓글 달아주신거 같은데 어디서 확인할수있는지 안내 부탁드려요 ㅜㅜ
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
권한요청 드립니다!
인프런 아이디 : pm@nuriapp.co.kr인프런 이메일 :pm@nuriapp.co.kr깃헙 아이디 : orinogcode@gmail.com깃헙 Username : jiYoung4868
-
미해결프로젝트로 배우는 Vue.js 3
onMount 관련 강의가 몇강에 있었죠?ㅠㅠ
onMount 관련 강의가 몇강에 있었죠?ㅠㅠ
-
미해결호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
배포 준비 과정에서 막혀 질문 드립니다.
호돌맨의 요절복통 개발쇼시즌2 배포 준비(빌드) 강의를 듣고 있는데, 계속 오류가 생겨 질문 올립니다. 우선 ./gradlew clean으로 삭제한 뒤./gradlew build를 실행하면 이런 식으로 한글이 깨졌다는 에러가 나옵니다. 해결하고자 했던 방안세팅 바꾸기파일 인코딩 바꾸기Help - EditCustom Vm Options이런 방법을 써 봤으나 다 되지 않았고 이 코드를 build.gradle에 넣는 방식으로 해결했더니build 후 libs 폴더가 생기지 않습니다. 그래서 이 부분을 true로 바꿔주면 plain snapshot만 생깁니다. 어떻게 해결해야 하나요? 밑 코드는 build.gradle 파일입니다.plugins { id 'java' id 'org.springframework.boot' version '2.5.9' id 'io.spring.dependency-management' version '1.0.11.RELEASE' id "org.asciidoctor.jvm.convert" version "3.3.2" } group = 'com.reheat' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '11' } configurations { compileOnly { extendsFrom annotationProcessor } asciidoctorExt } repositories { mavenCentral() } ext { asciidocVersion = "2.0.6.RELEASE" 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' testImplementation 'org.junit.jupiter:junit-jupiter:5.8.1' testImplementation 'junit:junit:4.13.1' compileOnly 'org.projectlombok:lombok' runtimeOnly 'com.h2database:h2' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' //REST Docs asciidoctorExt "org.springframework.restdocs:spring-restdocs-asciidoctor:${asciidocVersion}" testImplementation "org.springframework.restdocs:spring-restdocs-mockmvc:${asciidocVersion}" } tasks.named('test') { useJUnitPlatform() } test { outputs.dir snippetsDir } asciidoctor { inputs.dir snippetsDir configurations 'asciidoctorExt' dependsOn test } bootJar { enabled = true dependsOn asciidoctor copy { from asciidoctor.outputDir into "src/main/resources/static/docs" } } jar{ enabled = true } tasks.withType(JavaCompile){ options.encoding = "UTF-8" }
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
store 등록 재문의
저는 강의대로 vue2를 사용하고 있습니다.그런데 영상에선 main.js에 내용이new Vue({ el: '#app, render: h => h(App), });이렇게 되어있어서 el 밑에 store을 추가하셨는데,new Vue({ render: h => h(App), }).$mount('#app')저는 이렇게 되어있어서요. .$mount('#app')을 지우고영상과 같이 el: '#app'으로 변경하고 그 밑에 store을 추가하라는 말씀이신가요?
-
해결됨Vue 3 시작하기
Vue Directive: v-for 강의 영상의 재생되지 않습니다.
무한 로딩상태에서 진전이 없어요~확인부탁드립니다.
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
mutations, commit 형식문의
state: { num: 10 }, mutations: { printNumbers(state) { return state.num; }, sumNumbers(state, anotherNum) { return state.num + anotherNum; } } this.$store.commit('sumNumber', 20);여기서첫번째 인자는 무조건 state라고 하셨는데, 그게 문법인가요? 아니면, printNumbers(state)처럼 값을 넣었기 때문인가요? state: { storeNum: 10 }, mutations: { modifyState(state, payload) { console.log(payload.str); return state.storeNum += payload.num; } } this.$store.commit('modifyState', { str: 'passed from payload', num: 20 });여기서도 modifyState를 호출하면서 같이 넘기는 값이, payload에 담기는건 항상 처음은 state이기 때문인가요?
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
store 등록문의
저는 main.js 파일을 보면new Vue({ render: h => h(App), }).$mount('#app')이렇게 되어있습니다.이게 el:'#app' 과 같다는건 아는데,store은 강의 내용과 같이 new Vue({ })안에넣으면 될까요? 아니면,.$mount('#app').$mount('store')이렇게 적어야 하나요?
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
fetch 코드를 강의에 나온 것 처럼 axios 로 변경하고 싶습니다.
현재 구글캘린더를 OAuth2.0 으로 연동하는걸 테스트 해보고 있습니다.authorization code 까지 얻어서 access token 을 가져오려고 포스트맨에서 테스트 해보니 access token 을 잘 가져왔습니다.이제 이걸 강의에 나온 방식으로 vue.js 로 옮기고 싶은데 잘 안되네요.포스트맨에서 성공한 fetch 코드는 아래와 같습니다.var myHeaders = new Headers(); myHeaders.append('Content-Type', 'application/x-www-form-urlencoded'); var urlencoded = new URLSearchParams(); urlencoded.append('code', code.value); urlencoded.append('client_id', clientId); urlencoded.append('redirect_uri', redirectUri); urlencoded.append('client_secret', clientSecret); urlencoded.append('grant_type', 'authorization_code'); var requestOptions = { method: 'POST', headers: myHeaders, body: urlencoded, redirect: 'follow', }; fetch(`https://oauth2.googleapis.com/token`, requestOptions) .then(response => response.text()) .then(result => console.log(JSON.parse(result))) .catch(error => console.log('error', error));이 코드 그대로 vue.js 에 사용해도 잘 되더라구요.그런데 강의 처럼 변경해 보고 싶은데 잘 안되네요. 일단 api/index.js 파일은 아래처럼 했구요.import axios from 'axios'; function create(baseURL, options) { const instance = axios.create(Object.assign({ baseURL }, options, { withCredentials: true })); return instance; } export const token = create('https://oauth2.googleapis.com');api/token.js 파일은 아래 처럼 했봤습니다.import { token } from '.'; export function getToken(params) { const data = JSON.stringify(params); console.log('data:', data); const config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, maxBodyLength: Infinity, data: data, }; return token.post('/token', params, config); } 사용 페이지에서는 아래처럼 적용했습니다.import { getToken } from '@/api/token'; async function getAccToken() { const params = { code: code.value, client_id: clientId, client_secret: clientSecret, redirect_uri: redirectUri, grant_type: 'authorization_code', }; try { const response = await getToken(params); } catch (error) { console.log('error:', error); } }그런데, 이렇게 저렇게 여러가지로 해보고 있는데 통신오류 나면서 안되네요. fetch 코드를 강의의 코드 형식으로 어떻게 변경해야 할까요?변경 안하고 그냥 fetch 코드를 그대로 써도 되긴하는데 뭔가 좀 찝찝하고, 왜 안되는지 궁금하기도 해서 질문드립니다.
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
modal 컨포넌츠 등록 문의
앞서 App.vue에선,import TodoHeader from './components/TodoHeader.vue'하여components: { 'TodoHeader': TodoHeader, },이렇게 컴포넌츠를 등록했습니다. 그런데 왜 모달은 TodoInput.vue 파일에서components: { popModal: popModal, },이렇게 작은따옴표('') or 큰따옴표("")를 사용하지 않고 등록하는건가요? (정상작동은 합니다~!)
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
alert Store - composable 이중으로 들어가는 이유
안녕하세요. 해당 강의에서 alert Store를 만들고 적용할 때 기존 composable파일에서 alertStore파일을 연결하는데 템플릿 파일에서 직접 alertStore로 접근하지 않고(예시의 counter처럼) composable파일을 통해 우회 접근한 이유가 있을까요? 단지 기존 composable파일을 물고있는 파일들의 수정소요때문이라면 각 파일들이 store를 직접 바라봐도 상관없는건지, 아니면 추후 유지보수 등의 이유로 의도적으로 한번 건너서 접근한것인지 궁금합니다
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
컴포넌트에 props내리는법에 대해 질문
컴포넌트에 props내릴때 질문 있습니다.회사 프로젝트중에 팝업창을 띄울일이 있었고, 팝업창을 띄울때 데이터를 props로 넘겨줘야 할 일이 있어서props로 넘겨줬습니다. //팝업에 props로 데이터 넘겨주는 부분 <MNGDA0030Popup ref="mNGDA0030Popup" :cmpny-div="searchPopupParam.CMPNY_DIV" :year="searchPopupParam.YEAR" :asgn-full-nm="ASGN_FULL_NM" :bsns-cd="searchPopupParam.BSNS_CD" :asgn-cd="searchPopupParam.ASGN_CD" :in-out="searchPopupParam.IN_OUT" :seq="searchPopupParam.SEQ" /> //props 받는부분 const props = defineProps({ cmpnyDiv: { type: String, default: "", }, year: { type: String, default: "", }, asgnFullNm: { type: String, default: "", }, bsnsCd: { type: String, default: "", }, asgnCd: { type: String, default: "", }, inOut: { type: String, default: "", }, seq: { type: Number, default: "", }, })let searchParams = reactive({ CMPNY_DIV: useUserStore.company, YEAR: props.year, BSNS_CD: props.bsnsCd, ASGN_CD: props.asgnCd, IN_OUT: props.inOut, SEQ: props.seq, }) console.log("프롭스", props) console.log("서치파람", searchParams)제 질문은console.log("프롭스", props)props를 콘솔 찍었을땐 값이 제대로 들어가는데,searchParams에 따로 값을 할당해서 찍어보면 값이 들어가지 않습니다. 제 생각에는 props로 넘기고, 값을 할당했을때 반응성을 잃어 버린거 같습니다.그래서 toRefs?로 감싸봤지만 해결하지는 못했습니다.props.데이터 등으로 개발은 할수 있겠지만searchParams에 props데이터를 할당 하는 방법이나 짐코딩님 강의중 어떤 부분을 다시 보면 될지 알수있을까요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
toggleComplete(todoItem, index)에러
이 부분에서 index에 에러 메세지가 나옵니다.'index' is defined but never used 내용의 메세지가 나오는데, removeTodo(todoItem, index)에는 안나오는데 toggleComplete에만 나와요. <i class="checkBtn fa-solid fa-square-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i>toggleComplete: function(todoItem, index){ todoItem.completed = !todoItem.completed; }찾아보다가devServer: { overlay: false }이걸 추가하라는 글을 보고 추가했는데, 변화가 없길래 서버를 다시 실행 해봤습니다.그런데 오히려 저거 때문에 다른 오류가 발생하여 서버실행이 안됩니다.지우니까 다시 실행은 되는데.. 어떻게 해결해야 하나요? +) 처음 구현때 안되어서 주석처리하고 그대로 진행하다, 리팩토링때 다시 해봤는데, 리팩토링 코드로는 할일완료 기능이 정상 작동합니다. 무슨 차이가 있을까요?
-
해결됨프로젝트로 배우는 Vue.js 3
json server실행/중지 문의드립니다!
json server 데이터베이스 서버 껐다 키시는데 어떻게 하는건가요??
-
해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
Request URL:주소 이상함!
const fetchPost = async () => { try { const { data, headers } = await getPosts(params.value); items.value = data; totalCount.value = headers['x-total-count']; } catch (error) { console.error(error); }};TheHeader.vue에서 게시판 클릭 시 PostListView.vue 부분에서 오류가 납니다. 위의 에러콘솔부에 걸려요. 개발자도구에서 콘솔에 찍힌 코드는 하기와 같습니다ㅠㅠ AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUES........} requestURL :GET http://localhost:5173/undefinedposts/?_sort=createdAt&_order=desc&_limit=3&_page=1&title_like= 404 (Not Found) 왜 주소가 위와 같이 찍히는지 모르곘어요!! 제이슨 서버 동작 확인했고, development 모드입니당 ㅠㅠ
-
해결됨Vue 3 시작하기
맥 환경에서 Cmder 대체 툴
Cmder은 윈도우 환경을 위한 툴로 알고 있는데 맥 환경에서는 어떤 툴을 사용하는게 좋을까요? 추천하실만한 툴이 있으실까요? 감사합니다.