55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Nuxt.js 시작하기
Nuxt3도 아직은 시기상조일까요?
Nuxt3를 다운받아보니 강의해주신 내용과 구조가 꽤 많이 다른 것 같더라구요..Nuxt3부턴 완전 달라진거같은데 강의 내용과 개념은 비슷할까요 ??
- 미해결Nuxt.js 시작하기
create app 을 하려고하니까 결재정보를 입력하는데
create app 을 하려고하니까 결재정보를 입력하는데 그냥 입력하고 수업따라가도 괜찮을까요? (돈이 나갈까봐 걱정되서요..)
- 미해결Nuxt.js 시작하기
/carts의 내용을 초기화 할 수 있는 방법이 있을까요?
/carts의 내용을 초기화 할 수 있는 방법이 있을까요? 장바구니 초기화 같은 느낌으로
- 미해결Nuxt.js 시작하기
에러사항
학습을 하면서 웹(크롬)에서 다음와 같은 에러가 계속 나오는데 어떤의미이고, 해결방법은 궁금합니다
- 미해결Nuxt.js 시작하기
페이지의 장바구니 담기 기능 관련 오류
<template> <div> <div class="container"> <div class="main-panel"> <img class="product-image" :src="product.imageUrl" :alt="product.name" /> </div> <div class="side-panel"> <p class="name">{{ product.name }}</p> <p class="price">{{ product.price }}</p> <button type="button" @click="addToCart">Add to Cart</button> </div> </div> </div> </template> <script> import {fetchProductById} from '@/api/index' export default { async asyncData({ params }) { const response = await fetchProductById(params.id); const product = response.data return{ product } }, methods: { addToCart() { this.$store.commit('addCartItem',this.product); this.$router.push('/cart') console.log("hi success") } } } </script> <style scoped> .container { display: flex; justify-content: center; margin: 2rem 0; } .product-image { width: 500px; height: 375px; } .side-panel { display: flex; flex-direction: column; justify-content: center; width: 220px; text-align: center; padding: 0 1rem; } </style>export const state= () => ({ cartItems: [''], }) export const mutations = { addCartItem(state, cartItem) { state.cartItems.push(cartItem) }, }코드를 다음과 같이 작성했는데 강의처럼 addCartItem이 안나옵니다.
- 미해결Nuxt.js 시작하기
해당 에러 화면이 계속 발생합니다.
main.vue내용을 복사해서 index.vue에 붙히고 강의내용처럼 그대로 실행하는데 또 이화면이 나옵니다. 강의진행과 정확하게 일치하는 코드로 작업했습니다. 해결방법이 시급합니다🥲 도와주세요
- 해결됨Nuxt.js 시작하기
새로고침시 에러발생
처음에는 첫번째 화면처럼 데이터가 잘 나오는데 새로고침을 하면 하단의 화면이 계속나옵니다. 해결방법이 없을까요?
- 해결됨Nuxt.js 시작하기
nuxt 버전관련 질문(자세하게 알려주시면 감사하겠습니다.)
넉스트를 그냥 깔면 2.15.8 버전으로 실행되더라구요. 패키지 및 디렉터리 구조를 강의와 같은 2.15.3 버전으로 nuxt 프로젝트를 시작하고싶은데, npm init nuxt-app@3.6.0 명령어를 사용해도 이러한 에러가 발생합니다. npm install nuxt@2.15.3도 설치했었습니다.처음부터 2.15.3버전의 넉스트로 프로젝트를 만들 수 있는 방법을 알려주시면 정말 감사하겠습니다.
- 해결됨Nuxt.js 시작하기
route 빨간줄
정상적으로 동작은 하는데 다음과 같이 빨간 줄이 생깁니다.추가로 넉스트 버전이 2.15.8인데 레이아웃폴더를 만들고 작성해서 쓰면 큰문제없는것맞을까요?
- 미해결Nuxt.js 시작하기
에러..
강의 내용과 같이 바꾸면 아래와 같은 에러가 나오는데, 구글링해서 겨우 찾은 몇가지 방법으로 수정해봐도 해결이 안되요.. ㅠ 여기서 진도 막혀서 나갈수가 없네요 ㅠㅠ#221227 내용 추가다시 해보니까 처음 npm run dev로 서버 구동하고 index 화면에서 '메인' 링크를 타고 들어가면 화면이 잘 나오는데/main 화면에서 '새로고침'을 하거나 다른 화면에서 '/main' 경로를 치고 들어오면 위와 같은 에러가 나오는데 이유가 궁금합니다! (강의에서는 새로고침 하셔도 잘 되던데..ㅠ)
- 미해결Nuxt.js 시작하기
헤로쿠 결제해야 가능한가요?
신용카드 등록하라고 뜨는데 하지않고 하는 방법은 없나요?
- 미해결Nuxt.js 시작하기
,
.
- 미해결Nuxt.js 시작하기
asyncData를 methods에서 사용하려면
안녕하세요.asyncData에서 불려온 데이터를 methods 내에서 사용하고 싶은데요. 어떻게 해야 하나요?html에 쪽에선 리턴한 값에 컬럼명을 넣으면 출력이 되는데methods에서 사용을 하려고 하면 어떻게 해야 하는지 모르겠습니다.그동안 methods에서는 this로 data에 있는 변수를 가져오는 식으로만 했었지 asyncData에 있는 데이터를 가져오는 방법은 몰라서요.;;답변 부탁드립니다.
- 미해결Nuxt.js 시작하기
pages경로 밑으로 한글로된 폴더나 파일이름
정상적으로 동작하지 않는 것 같은데 혹시 해결방법이 있을까요?url을 한글로 구성해보고 싶었는데 일단 한글로 폴더를 만들어서 하니까 동작하지 않고, 폴더명으로 urlencode된 문자열을 넣으니 되긴 되는데 무언가 오류메시지를 자꾸 뿜어내네요
- 미해결Nuxt.js 시작하기
'TypeError: this.oprions.parse is not a function'오류
vue 파일에서 eslint 오류가 나는데 구글링 하여 따라해봐도 오류가 사라지지 않습니다ㅜ
- 미해결Nuxt.js 시작하기
캘린더 검색 질문드립니다.
안녕하세요. 캡틴판교님Nuxt.js 강의 열심히 듣고 있는 사람입니다.예전에도 질문 드리긴 했으나(질문 드린 거 는 어찌어찌해서 처리 했습니다.)_like를 여러 번 쓰면 되는 거 였더라구요.;;;;;그 문제는 해결하였는데검색하면서 또 다른 궁금증이 생겨 가지구요.도움을 요청할 사람이 주변에 없어서 캡틴판교님에게 요청해봅니다.다름이 아니라..보통 검색에 시작일과 종료일을 설정하고 검색하는 게시판들이 있잖아요.!?이런 거 처럼요시작일과 종료일을 지정하고 "_like"를 사용해서 어떻게 중간날짜를 검색 할 수 있는지 궁급합니다.시작일이 저번주 월요일이였고 종료일이 오늘이라면그 중간 날짜 (화,수,목,금.토.일)은 어떻게 검색을 하는 건가요?현재는 그림과 같이 시작일만 적용해 놓았습니다.;;date_like는 시작일과 종료일 사이에 모든 데이터를 가져와야 하는거구요.개발이 이번이 처음이라 깊게 들어가면 갈수록 점점 어려워지는 거 같네요.도움 부탁드립니다.* 사용하는 캘린더는 BootstrapVue 캘린더를 사용하고 있습니다.
- 미해결Nuxt.js 시작하기
Nuxt에서 jquery를 사용할수 있나요
Nuxt를 이용해서 기 만들어진 홈페이지를 변경할려고 합니다그중에서 가장 어려운부분은 여러가지 컨텐츠를 불러와서 표현하는 부분인데컨텐츠내용이 너무 다양하고 해당컨텐츠 안에 a tag를 이용하여 popup, image를 불러와서 표시 및 file download 기능이 포함되어 있습니다componets화 시킬려면 컨텐츠내용이 어느정도 양식화가 되어 있어야 하는데 그러하지를 못해 v-html 명령어로 기존의 컨텐츠를 불러와서 표시를 하니 정상입니다하지만 표시된 화면에서 a tag event control 즉 특정 단어 또는 버튼을 클릭하면 popup표시를 jquery로 만들었는데 이게 동작이 불안정 합니다Nuxt에서 jquery를 사용하기 위해 npm install jqury 를 하여 사용해보았으나 일부는 동작을 하고 일부는 동작을 하지 않코 어떤날은 전부가 동작하고 어떤날은 아에 동작을 하지 않고 있습니다방법이 있나요 ?
- 미해결Nuxt.js 시작하기
SSG 시 SPA fallback 및 asyncData & fetch 문의(부분 SPA or CSR)
사내 협업을 위한 인하우스 앱도 nuxt로 새로 개발하려 합니다.문제는 파편화된 기존 백엔드와(대부분 REST API, 최근 몇개는 웹소켓) 지금까지 사용하던 Django (HTML 템플릿 + jQuery) 서비스에 최신 프론트엔드를 붙여야 하는 상황입니다.그러다 보니 SSG 아니면 CSR 밖에 선택지가 없는데, https://nuxtjs.org/docs/concepts/static-site-generation/ 에서 generate.exclude 옵션을 사용한 뒤 nuxt generate로 정적 사이트를 생성하면 해당 경로는 CSR로 된다는 것을 읽었습니다. 이 기능을 사용하고 싶어 검색 후 다음과 같은 게시물을 확인하였습니다.https://stackoverflow.com/questions/68837954/how-do-dynamic-api-calls-work-in-nuxt-js-static-vs-ssr-modehttps://www.reddit.com/r/Nuxt/comments/ndn2vz/comment/gybtj55/ 위 두 글에서 링크한 nuxt 블로그 게시물(https://nuxtjs.org/announcements/going-full-static/#crazy-fast-static-applications )을 확인하니, nuxt 2.14 버전 이후로는 target: 'static'인 상태에서 nuxt generate를 실행 시 클라이언트 사이드 내비게이션에서의 asyncData와 fetch를 모사하기 위해서 HTML을 사전 렌더링할 때 페이로드 파일을 저장한다고 하고 있습니다.this means no more HTTP calls to your API on client-side navigation.즉 SSG 모드를 켜면 더 이상 API에서 값을 가져오는 것이 아닌 generate 할 때의 API 값을 저장해 하나의 html로 만들어버린다는 것인데, 혹시 이 옵션을 끄고 SSG와 SSR, CSR 모두 동일하게 페이지 진입 시 API에서 새 값을 받아올 수 있게 하는 법이 있을까요? API에서 값을 받아오고 싶으면 무조건 exlcude에 경로를 추가해 CSR로 돌려야 하나요?
- 미해결Nuxt.js 시작하기
리눅스 도커 환경 배포 시 스택 문의
안녕하세요. 게시판 형태의 nuxt 앱 배포환경을 고민하고 있습니다.백엔드 API 서버들은 온프레미스 서버(사무실 서버)와 클라우드에 분산되어 있고, SSR에 따른 SEO와 로딩 속도와 같은 장점을 기대하고 Nuxt로 개발 중입니다.선택지는 다음과 같지만, 2번이 우세한 상황입니다.vercel과 같은 SSR을 지원하는 PaaS를 사용하여 배포리눅스 서버 위 도커 컨테이너로 배포2번을 고려하고 있는 이유는 비용상의 문제보다는 성능과 기능 구현 때문에 고려하고 있습니다(Nginx에서 특정 ip 차단, pm2 프로세스 관리, 동일 서버에 올라간 백엔드 API 컨테이너와 유닉스 소켓으로 연결 등). 또한, 아마 다른 서비스에서 조만간 쿠버네티스를 도입할 것 같아 미래를 고려하는 점도 있습니다. 리눅스 도커 환경에 직접 배포할 때, 도커를 사용하는 부분은 문제가 없으나 스택을 어떻게 구성해야 할지 문의드립니다.간단하게 찾아본 결과 Nginx + pm2 + node(nuxt) 구조에서 각 서비스가 빠지거나 포함되는 것 같은데, 서로 충돌하는 의견이 많은 것 같아 혹시 추천해주실 수 있는 스택이 있는지 문의드립니다. Nginx : 정적 컨텐츠와 빠르고 편리한 https(TLS), 리버스 프록시를 통한 보안과 속도 때문에 필요함. node로도 해당 기능들이 모두 가능하니 필요 없다는 주장도 있으나, 웹서버 점유율에서 node.js가 1~2%라는 자료들에 의하면 의구심이 듦.pm2 : 로그와 프로세스를 편리하게 관리하기 위해서 필요하다는 의견이 많으나, 도커 기반 환경에서는 오히려 도커나 k8s가 프로세스나 로그를 관리하는 것을 방해한다는 의견(https://www.docker.com/blog/keep-nodejs-rockin-in-docker/ )도 있음. 일단 현재는 docker-compose로 Nginx-pm2-node(nuxt) 형태로 개발하고 있습니다. 아마 네카라쿠배에서는 이런 부분이 인프라나 DevOps 쪽으로 분업되어 있어 강사님께서 이런 고민은 생소하실 수도 있겠다는 생각이 들지만, 저 말고도 타의로 프론트엔드를 시작한 분들이 있을 수 있겠다는 생각이 들어 올려봅니다 : )
- 미해결Nuxt.js 시작하기
axios
npm i axiosnpm install axios다 설치 해봤는데 아래 와 같은 에러가 나옵니다.검색해보니 이렇게 나와도 axios가 설치가 된거라네요node_modules 파일 보니 axios 가 추가 되어 있고,package.json 에도 추가되어 있습니다. 그런데 axios 사용 하려고 하니 아래와 같은 에러가 발생합니다. .nuxt도 지워보고nodemodules도 지워보고 별거 다해봤는데계속 저런 에러가 나오면서 메인 화면이 안나옵니다. axios 선언과 사용 부분을 지워봐도계속 저런 에러페이지가 나옵니다. 뭐가 문제인걸까요?