66,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue로 Nodebird SNS 만들기
https 도메인의 proxy에 대해 문의 드립니다.
안녕하세요. proxy 도움을 많이주셔서 감사합니다. 서버에 배포 중 https 때문에 proxy가 작동을 안하는것 같아 문의 드립니다. ---------------------------------------------------------------------------------------- 1.배포환경 nginx : https://11.11.11.11 nuxt.js node : 변경한 내용이 없으니 http://0.0.0.0:3000 또는 http://localhost:3000 일 거라 생각됩니다. api : http://192.168.1.11:1004 서버설정을 보니 nginx 설정에서 proxy로 node로 연결된 것 같습니다. 2. 소스 index.vue this.$axios.get(`https://11.11.11.11/api/getData`) nuxt.config.js proxy: { '/api': 'http://192.168.1.11:1004/', },
- 미해결Vue로 Nodebird SNS 만들기
오랜만에 질문 드리는데요. ref
ref가 정확히 사용 용도가 어떻게 되나요??? 공식문서 봐도 잘 이해가 안되는데 쉽게 설명이 될까요 ㅠㅠ ref 이해가 안되요 this.$refs. 그리고 뒤에 나오는 것들은 vue에서 제공하는건가요? this.$refs.form.validate()말고 다른 용도도 설명해주시면 감사하겠습니다
- 해결됨Vue로 Nodebird SNS 만들기
proxy 문의 드립니다.
proxy 설정후 API 접속 시 생소한 오류가 발생하여 문의 드립니다. 구현한 proxy 기능이 로컬에서 잘되어 서버에서 build 및 start하여 실행하였습니다. proxy로 api서버로 접속시 접속이 안됩니다. 그런데 백엔드 서버에서 실행하면 잘됩니다. 혹시 이유를 알 수 있을까요? ------------- 오류--------------- Request URL : http://localhost:8080/api/ Referer Policy: no-referrer-when-downgrade Request Headers Provisional headers are shown ------------- 서버--------------- 백엔드 API IP : 192.168.5.**:1111 nuxt IP : 192.168.5.**:2222 ------------- 소스--------------- index.vue getApi () { this.$axios.get(`/api/acc/key`) .then((res) => { this.datas = res.data; console.log(this.datas); }) .catch((ex) => { console.log('error-', ex); }); nuxt.config.js modules: [ '@nuxtjs/axios', '@nuxtjs/proxy', ], proxy: { '/api': 'http://192.168.5.**:2222/', },
- 미해결Vue로 Nodebird SNS 만들기
프론트엔드 서버에서 URIError: URI malformed에러가 납니다.
저분이 제사이트(https://nodebird.site)에서 이것저것 글작성을 하다가 posts에 위의 데이터들을 작성하였고 그뒤로 프론트엔드 서버에서 URIError: URI malformed에러가 뜨고 접속이 되지 않습니다. 찾아보니 decodeURIComponent대신 unescape를 사용하라는데 nuxt에서 이걸 어떻게 설정해야하는지 모르겠네요ㅠㅠ #% 이렇게 #뒤에 %가 붙어나오는 경우만 문제가 있는것 같습니다. #으로 해시태그 구별해내는 부분이 문제인것 같습니다.
- 미해결Vue로 Nodebird SNS 만들기
vuex mutations 질문입니다.
안녕하세요. 강의 수강 후 직접 프로젝트를 만들어보고 있습니다. vuex의 mutations와 관련된 질문입니다. vuex의 state는 반드시 mutations를 이용해서 값을 변경해줘야 한다고 알고 있습니다. 근데 아래와 같이 배열이 중첩된 구조일때 const itemArr = [ { id: 1, name: '상품A' options: ['옵션A', '옵션B'] }, { id: 2, name: '상품B', options: ['옵션C', '옵션D'] } ] 상품B의 옵션 중 하나를 삭제해야 되는 경우는 어떻게 해야 될까요? 기존에는 아래와 같이 컴포넌트단에서 commit을 할 때 상품B의 id값을 인자로 전달을 하고 store의 mutations에서는 state에서 itemArr을 꺼내와 전달받은 id값과 비교해 상품B를 찾고 다시 options 배열을 꺼내서 삭제할 요소를 찾은 후 삭제를 하였습니다. 코드는 아래처럼.. // 컴포넌트 ... methods: { delItem(itemId, optionName) { this.$store.commit('order/DELETE_ITEM_OPTION', { itemId, optionName }); } } // store ... export const mutations = { DELETE_ITEM_OPTIONS(state, { itemId, optionName }) { const item = state.itemArr.find(item => item.id === itemId); const delIdx = item.options.findIndex(op => op === optionName); item.options.splice(delIdx, 1); } } 근데 컴포넌트단에서는 itemArr을 화면에 그리면서 for문을 돌면서 delItem 메서드를 호출하게 될 텐데 이미 삭제 대상이되는 item 객체(itemArr의 요소)를 알고 있는 상황인데요 위처럼 itemId를 넘기면 mutations에서 다시한번 state에서 itemArr 배열을 꺼내와서 item의 id를 비교해야 될텐데 같은 작업을 store에서 다시 반복해야 되더라구요 그래서 아래와 같이 itemId를 넘기는게 아닌 삭제 대상이 되는 item 객체(itemArr 요소)를 바로 인자로 넘겨버려도 될까요? // 컴포넌트 ... methods: { delItem(item, optionName) { this.$store.commit(‘order/DELETE_ITEM_OPTION’, { item, optionName }); } } // store … export const mutations = { DELETE_ITEM_OPTIONS(_state, { item, optionName }) { // state는 안쓰임 const delIdx = item.options.findIndex(op => op === optionName); Item.options.splice(delIdx, 1); } } 지금까지는 mutations에서는 반드시 state에서 값을 꺼내와서 값을 변경해줬는데 위처럼 state에서 꺼내지 않고 item 객체를 전달받아서 변경을해도 상관이 없을까요? 권장되지 않는 방식인지 궁금합니다. 감사합니다.
- 미해결Vue로 Nodebird SNS 만들기
서버사이드 랜더링 적용시 API 서버 연동에 대한 문의 드립니다.
실무에 nuxt.js를 사용해보기 위해 강의를 듣고 있습니다. 앞부분 듣는 중이라 개념이 잘 안잡혀서 질문 드립니다. 예를 들어 아래 처럼 두개의 서버가 있다고 가정할때 웹서버 : 1번 서버(IP: 11.11.11.111) API서버 : 2번 서버(IP: 22.22.22.222) 2(API)서버에서는 1서버의 IP만 허용하고 다른 접근은 방화벽으로 막혀있습니다. 이전 개발 방식(jsp, asp.net mvc 등)은 서버사이드에서 API를 호출하여 1-->2 서버로 접근 가능 (출발지가 1 IP 이기 때문에) vue.js 경우 1에서 API 호출되는 것이 아니라 클라이언트 브라우저 --> 2로 접근 하는 것으로 생각됩니다. 그러면 방화벽에서 막혀서 접근이 안될꺼라 예상됩니다. (출발지가 무작위 즉, 1 IP가 아니기 때문에) nuxt.js의 경우는 1-->2로 접근이 가능하게 설계가 가능한 구조인가요? 실무에서 많이 접하게 될 환경인데 개념이 부족해서 nuxt.js에서 개발이 가능한지 궁금합니다. 감사합니다.
- 미해결Vue로 Nodebird SNS 만들기
람다로 이미지 리사이징에 NoSuchKey에러문제
{ "errorType": "NoSuchKey", "errorMessage": "The specified key does not exist.", "code": "NoSuchKey", "message": "The specified key does not exist.", "region": null, "time": "2020-06-23T07:45:35.981Z", "requestId": "42D831DBDF2C09BB", "extendedRequestId": "otC5+Y32C0kHOwb8WLPopSZ1pg9HdHEIvXIOJTp8tENw6LRmDSx2KErZXy1TF1f0ghDckZcFgOE=", "statusCode": 404, "retryable": false, "retryDelay": 45.1487628863279, "stack": [ "NoSuchKey: The specified key does not exist.", " at Request.extractError (/var/task/node_modules/aws-sdk/lib/services/s3.js:831:35)", " at Request.callListeners (/var/task/node_modules/aws-sdk/lib/sequential_executor.js:106:20)", " at Request.emit (/var/task/node_modules/aws-sdk/lib/sequential_executor.js:78:10)", " at Request.emit (/var/task/node_modules/aws-sdk/lib/request.js:688:14)", " at Request.transition (/var/task/node_modules/aws-sdk/lib/request.js:22:10)", " at AcceptorStateMachine.runTo (/var/task/node_modules/aws-sdk/lib/state_machine.js:14:12)", " at /var/task/node_modules/aws-sdk/lib/state_machine.js:26:10", " at Request.<anonymous> (/var/task/node_modules/aws-sdk/lib/request.js:38:9)", " at Request.<anonymous> (/var/task/node_modules/aws-sdk/lib/request.js:690:12)", " at Request.callListeners (/var/task/node_modules/aws-sdk/lib/sequential_executor.js:116:18)" ] } 이미지 업로드시 이에러가 뜨면서 thumb디렉토리에 저장되지 않습니다. front에서 이미지 출력도 original폴더에서 가져오구요 어느부분이 문제일까요?
- 미해결Vue로 Nodebird SNS 만들기
serializedUser
passport.serializedUser에서 serializedUser는 미들웨어인 passport가 세션처리하라고 지원해주는 기능인가여?
- 미해결Vue로 Nodebird SNS 만들기
궁금증 통신
1.json형태로 데이터를 보냈다고 하셨습니다. 프론트에서 서버에 데이터를 보낼 때 기본으로 json형태로 전 송되나요? 아니면 설정을 그렇게 한건가요? 2.router.post('/login'~~~~)인데 이때 url 인 /login은 무엇을 기준으로 작성된건가요?? 프론트에서는 절대경로나 상대경로로 url을 적어주던데 서버는 무엇을 기준으로 하나요? 아니면 /login은 url이 아니라 요청 받는 함수의 이름인가여?
- 미해결Vue로 Nodebird SNS 만들기
프론트에서 요청이 2번씩 가는경우는 어디가 문제인가요?
로그인 회원가입 이런부분에서는 둘중하나만 제대로된 요청이어서 문제가 안됐는데 게시글 불러오는 부분에서 똑같은 글10개를 2번불러오게 되어 중간글이 잘리는 현상이 있습니다. 어디가 문제일까요..?
- 미해결Vue로 Nodebird SNS 만들기
fetch는 deprecated 될 라이프사이클?
안녕하세요. 제로초님. fetch에 대해 학습하며 nuxt의 공식문서를 보게되었는데 "fetch(context)는 deprecated 되었습니다. 대신에 익명 미들웨어를 페이지에서 사용해주세요: middleware(context)" 라는 안내문이 게시되어 있어서요.. https://ko.nuxtjs.org/api/pages-fetch/ 현시점에서 공식문서 가이드 대로 적용하려면 아래의 구문을.. fetch({ store }) { return store.dispatch('posts/loadPosts', { reset: true }); }, 다음과 같이 변경하여야할까요? middleware({ store }) { return store.dispatch('posts/loadPosts', { reset: true }); }, 추가로 deprecated 의 이유는 둘다 동일한 state를 인자로 받는 라이프사이클이고, 둘다 렌더 전에 실행된다는 공통점이 있어 fetch를 없앤단 것으로 이해하면 맞을까요?
- 미해결Vue로 Nodebird SNS 만들기
로그인
isAuthenicated()는 제로초님께서 의도적으로 만든 함수명이 아니라 Vue에서 제공하는 내장함수같은 건가요? 의미는 로그인의 유무에 따라 기능을 나눌때 사용하구요??
- 미해결Vue로 Nodebird SNS 만들기
헷갈려서 의미를 여쭤볼게요
d/login이 프론트의 store-user-login에서 보냈다는 의미인가요? isNotLoggedIn은 로그인이 되어있지않으면 실행한단 의미구요??
- 미해결Vue로 Nodebird SNS 만들기
app.js에 로그인 부분에서의 에러
passport.authenticate('local', (err, user, info) = 이부분에서 console.log로 info를 찍어보면 { message: 'Missing credentials' } 이렇게 나와서 무조건 로그인에 실패합니다. 어느부분이 문제일까요.?
- 미해결Vue로 Nodebird SNS 만들기
https 적용하다가 오류가 났어요
이게 프론트엔드 server.js //프론트단 server.js 파일이에요. const { Nuxt, Builder } = require('nuxt'); const https = require('http'); ///이 부분 제로초님 코드 긁어온 건데 혹시 맞는건가요??? const http = require('https'); ///이 부분 제로초님 코드 긁어온 건데 혹시 맞는건가요??? const app = require('express')(); const isProd = (process.env.NODE_ENV === 'production'); const port = process.env.PORT || 3000; // We instantiate Nuxt.js with the options const config = require('./nuxt.config.js'); config.dev = !isProd; const nuxt = new Nuxt(config); // Render every route with Nuxt.js app.use(nuxt.render); // Build only in dev mode with hot-reloading if (config.dev) { new Builder(nuxt).build() .then(listen); } else { listen(); } function listen() { // Listen the server if (isProd) { const lex = require('greenlock-express').create({ version: 'draft-11', configDir: '/etc/letsencrypt', server: 'https://acme-v02.api.letsencrypt.org/directory', email: '제메일', store: require('greenlock-store-fs'), approveDomains: (opts, certs, cb) => { if (certs) { opts.domains = ['api.제 도메인']; } else { opts.email = '제메일'; opts.agreeTos = true; } cb(null, { options: opts, certs }); }, renewWithin: 81 * 24 * 60 * 60 * 1000, renewBy: 80 * 24 * 60 * 60 * 1000, }); https.createServer(lex.httpsOptions, lex.middleware(app)).listen(443); http.createServer(lex.middleware(require('redirect-https')())).listen(80); } else { app.listen(port, () => { console.log(`server is running on ${port}`); }); } } 아래 나온 타입에러 해결하려고 function listen() 앞에 module.exports = 이거 붙이면 참조 에러가 나더라구요,,,
- 미해결Vue로 Nodebird SNS 만들기
back/config/config.json은 깃헙에 올라가도 되는 파일인가요?
강의듣다가 궁금하여 여쭈어봅니다. password가 포함된 정보이니 ignore시키는게 맞지않을까 의문이 들어서요.
- 미해결Vue로 Nodebird SNS 만들기
게시글 등록 및 불러오기가 안됩니다.
이러한 오류가 뜨면서 게시글 등록 및 불러오기가 안됩니다. 이거때문에 진행이안되네요..
- 미해결Vue로 Nodebird SNS 만들기
trough, as
제로초님 강의 잘 보고 있습니다. 문서를 봐도 이해가 잘안되서 그러는데여.. sequlize associate부분에서 through,as가 무슨 역할인지 알려주실수 있을가요?? 강의 돌려봐도 좀 어렵네여 ㅠ
- 미해결Vue로 Nodebird SNS 만들기
error발생
npm run dev 해서 실행시키려고 했는데 [nodemon] app crashed - waiting for file changes before starting... 이러한 에러가 뜨는데 왜그럴가요?
- 미해결Vue로 Nodebird SNS 만들기
Mysql db설치가 안되요
MYSQL 다운받았습니다. 그리고 DB설치를 터미널을 통해서 했는데 workbench에 들어가 보니 db가 없네여.. 뭘 잘못한걸가요?