66,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- Vue로 Nodebird SNS 만들기
페이지 새로고침 시 게시글이 불러와지지 않습니다
삭제된 글입니다
- 미해결Vue로 Nodebird SNS 만들기
게시글 불러오기
게시글 불러오기 공부중인데 강의 몇번이고 돌려봐도 코드가 똑같은데 에러가 뜨네요 ㅠㅠ 질문목록에 async 부분도 적용해봤는데 안되구요 GET http://localhost:3085/posts?offset=0&limit=10 404 (Not Found) 에러내용입니다. 해결방법을 알려주시면 감사하겠습니다.
- 미해결Vue로 Nodebird SNS 만들기
회원가입, 로그인 관련 질문 드려요
개발자 도구를 킨 상태에서 회원가입, 로그인 기능 진행시 매번 2번씩 200과 204(no content)가 뜹니다. 기능들은 다 정상적으로 돌아가는 거 같은데 매번 나오는 저 204코드가 뭔지, 해결방법이 뭔지 궁금합니다 ㅠㅠ
- 미해결Vue로 Nodebird SNS 만들기
localStorage에 대해서 문의 드립니다.
언어 변경 기능을 추가하려고 localStorage 를 사용하려고 하는데요. localStorage.setItem('lang') 이거는 되는데 localStorage.getItem('lang')을 하려고 하는데 localStorage is not defind 라는 오류가 계속 뜹니다. 구글에서 찾아보니깐 서버사이드 렌더링에서는 localStorage 를 다르게 사용해야 한다는것 같은데 nuxt 에서는 localStorage 사용법이 다른가요 혹시?
- 미해결Vue로 Nodebird SNS 만들기
sequelize 관련 질문
강의에서 알려주신 대로 다 따라했는데 npx sequelize init 시에 Unable to resolve sequelize package in C: ~~~~~ 에러가 발생하네요 ㅠㅠ 해결방법좀 알려주세요!
- 미해결Vue로 Nodebird SNS 만들기
다른 탭으로 이동 후 다시 돌아왔을 때 데이터가 뜨는 문제
이전에 들었던 강의 참고하면서 프로젝트를 진행중인데요, index.vue에서 기본 데이터리스트를 뿌려주기위해 fetch로 loadposts를 불러왔는데요 데이터가 바로 반영되지 않고 다른 탭에 갔다가 돌아왔을 때 데이터가 반영이 됩니다.. 해당 문제 언급해주셨던 것 같은데 어디였는지 도저히 못찾겠어서요 ㅠㅠ 이 문제 원인과 해결방법이 무엇이었는지 설명 부탁드려요 !!!
- 미해결Vue로 Nodebird SNS 만들기
브라우저 3개 이상 localhost:3000 으로 접속시
로그인 하는데까지 완성되었는데요 크롬에서 3개 tab으로 localhost:3000 하여 들어가고 4개째 부터 4번쨰 크롬창은 행이 걸리는거 같습니다.. 서버로부터 응답을 못받아 오는거 같은데요 혹시 다른 처리나 옵션을 해줘야 하는게 있을까요? 강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다.
- 미해결Vue로 Nodebird SNS 만들기
현재 4-17 항목까지 수강중인데요
너무 궁금한 부분이 있어 질문 드립니다. 로그인/로그아웃 관련해서 현재 로그인 된 사용자의 세션이 유지 되어 새로 고침 시에도 로그인이 유지되는 부분을 설명한 강의는 몇 번째 항목인가요 이 부분 먼저 해결하고 보고 싶은데 어느 챕터에서 해당항목 솔루션이 나오는지 여쭙습니다
- 미해결Vue로 Nodebird SNS 만들기
'Missing credentials' 이 뜹니다.. passport 문제
일단, 1. 프론트로 부터 받아온 req.body 를 찍으니 아래와 같이 잘 넘어 왔구요. 그 다음 아래 app.js info로 넘어온 데이터가 저렇게 missing credentials로 나옵니다. 이전에 다른 수강생분께서 질문주신대로 잘 맞춰서 했다고 생각하는데 어디가 이상이 있는건지 문의 드립니다.. 2. 백엔드 app.js 에서 로그인 받는 부분 입니다. app.post('/user/login', async(req, res, next) => { console.log('/user/login-----> ', req.body); try { // -> passport LocalStrategy 으로 전송. passport.authenticate('local', (err, user, info) =>{ if (err) { console.log('[post]/user/login (Error) ', err); return next(err); } if (info) { console.log('[post]/user/login (Fail) ', info); return res.status(401).send(info); } console.log('[post]/user/login ', user); // 세션에다 사용자 정보 저장( 어떻게 저장할 것인가? ) return req.login(user, async(err) => { if (err) { return next(err); } return res.json(user); }); })(res, req, next); } catch(err) { } }); 3. passport/local.js 코드 입니다. 여기에서도 usernameField랑 passwordField에 저기 1번에서 넘어온 parameter그대로 사용해서 해줬는데요. 왜 자꾸 missing credentails가 뜨는지... 도통 해결을 못하겠네요 ㅜㅜ const passport = require('passport'); const { Strategy: LocalStrategy } = require('passport-local'); const db = require('../models'); const bcrypt = require('bcrypt'); module.exports = () => { passport.use( new LocalStrategy( { usernameField: 'myid', // req.body.myid passwordField: 'password', //req.body.password }, async (myid, password, done) => { try { console.log('******* passport / local ', myid, password); // 사용자 여부 체크 const existUser = await db.User.findOne({ where: { myid } }); if (!exexistUser) { // done(에러, 성공, 실패) return done(null, false, { reason: '존재 하지 않는 사용자 입니다. ' }); } // 비밀번호 체크 const result = await bcrypt.compare(password, existUser.password); // 만약 패스워드가 일치 하지 않으면, false if (result) { return done(null, existUser); } else { return done(null, false, { reason: '비밀번호가 틀립니다.' }); } } catch (err) { console.log(err); return done(err); } } )); }
- 미해결Vue로 Nodebird SNS 만들기
현재 4.4 순서까지 수강중인데요.. db 서버 질문입니다.
제가 일단 이쪽에 문외한점 이해바라며.. 시퀄라이저에서 config.js 에서 아래와 같이 하고 지정을 했으면 아래와 같이 디비가 만들어진건가요? or 이미 만들어진 디비 서버를 저 username, 비밀번호를 쳐서 들어가게끔 해주는 역할을 하는 것인가요? "development": { "username": "root", "password": "1234", "database": "space", "host": "127.0.0.1", "dialect": "mysql" }, 디비를 생성하는곳은 지금 순서대로는 나오지 않아서요 4.4까지 몇번을 제가 놓친게 있나 싶어서 돌려보는데 코드 상 백엔드 단에서 db.sequelize.sync(); 해당 코드를 실행하는것은 만들어진 db에다가 한다는거 같은데 db가 만들어진게 없으니 자꾸 비번이 틀렸다고 나오는거 같아서요.. UnhandledPromiseRejectionWarning: SequelizeAccessDeniedError: Access denied for user 'root'@'localhost' (using password: YES)
- 미해결Vue로 Nodebird SNS 만들기
백엔드 서버에서 index.js 에러
안녕하세요. db.User = require('./user')(sequelize, Sequelize); ^ 해당 코드를 적용하니 에러가 납니다. 풀 코드는 아래 코드입니다. db.User = require('./user')(sequelize, Sequelize); ^ TypeError: require(...) is not a function 에러명은 위와 같네요 ㅜ 'use strict'; const fs = require('fs'); const path = require('path'); const Sequelize = require('sequelize'); const basename = path.basename(__filename); const env = process.env.NODE_ENV || 'development'; const config = require(__dirname + '/../config/config.json')[env]; const db = {}; let sequelize; if (config.use_env_variable) { sequelize = new Sequelize(process.env[config.use_env_variable], config); } else { sequelize = new Sequelize(config.database, config.username, config.password, config); } db.User = require('./user')(sequelize, Sequelize); fs .readdirSync(__dirname) .filter(file => { return (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js'); }) .forEach(file => { const model = require(path.join(__dirname, file))(sequelize, Sequelize.DataTypes); db[model.name] = model; }); Object.keys(db).forEach(modelName => { if (db[modelName].associate) { db[modelName].associate(db); } }); db.sequelize = sequelize; db.Sequelize = Sequelize; module.exports = db;
- 미해결Vue로 Nodebird SNS 만들기
axios 포스트 질문입니다.
프론트 signup 에서 this.$axios.post(/user)하셧는데 현재 백앤드 서버는 3085로 서버가 열려있는데 왜 아무것도 안하고 user만 날리신건지 궁금합니다.
- 미해결Vue로 Nodebird SNS 만들기
nuxtServerInit이 작동하지 않습니다.
안녕하세요, 제로초님! store/index.js에 nuxtServerInit 부분을 포함했는데 users/loadUsers로 dispatch가 되지 않고 nuxtServerInit 함수가 활성화가 되어있지 않은데요. 어떤 부분에서 문제가 있는것인지 궁금합니다.
- 해결됨Vue로 Nodebird SNS 만들기
배포후 빌드하는 방법
안녕하세요 강의를 보았을 때 로컬에서 npm run build 하시고 aws에서 npm run start 로 바로 하시던데 저는 build된 파일이 없다고 에러가 나더라구요 그래서 aws에서 빌드를 하니까 작동이 되었는데~ 어떤게 맞는건가요? 그리고 aws에서 빌드할때 137 에러가 계속 떠서 찾아보니 원인이.. swap space 에 공간이 0 MB 이었더라구요.. 그래서 1 GB 를 추가로 파티셔을 만들어서 넣은 이후에 정상적으로 build가 되었습니다. 이렇게 하는게 맞는건지 아니면 다른 방법이 있는지 궁금합니다. 감사합니다.
- 미해결Vue로 Nodebird SNS 만들기
본 강의에서는 웹팩 설정은 안하시나요??
강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다. 안녕하세요 강의 잘 보고 있습니다. 보다가 까먹은 내용도 있고 해서 zerocho님 유튜브 채널에서 vue 강의도 병행해서 보고 있는데요, 본 강좌에서는 웹팩은 사용하시지않는 건가요? 검색해보니 웹팩은 Nuxt에 이미 구현되어 있다고 하는데, 따라서 굳이 별다른 설정을 안해도 되는건가요?? 감사합니다!
- 미해결Vue로 Nodebird SNS 만들기
Nuxt 에 babel polyfill 적용하는 방법이 궁금합니다.
덕분에 Nuxt 로 어찌어찌 프로젝트 막바지까지 왔습니다. 그런데, IE11 에서 테스트 해보니 몇몇 컴포넌트들이 아예 화면에 표시되지 않네요. 안나오는 컴포넌트들의 공통점이 주로 transform 을 이용하는 종류가 많은것 같습니다. vue js 용 fullpage js, swiper js, 직접 구현한 내비게이션, 카카오지도 및 카카오 주소 등 이네요. IE11 콘솔에 "polyfill-eventsource added missing EventSource to window" 이라는 메시지가 뜨고 그 아래 줄에는 SCRIPT1002: 구문 오류 라고 표시됩니다. 그래서 여기저기 검색해보니 babel polyfill 을 적용하면 된다는것 같아서 이것저것 찾아봤는데 Nuxt 에서 명확하게 적용하는 방법을 못찾겠습니다. 그냥 vue-cli 에 적용하는건 몇 개 보이는데 이걸 어떻게 Nuxt에 적용할지 이리저리 해봤는데 안되네요.;;; 특히나 뭘 설치해야 하고, nuxt.config.js 에는 어떻게 적용해야 하는지... 오늘 하루종일 이 문제로 헤메다가 다시 제로초님께 도움을 청하게 됐습니다^^;;; 감사합니다.
- 해결됨Vue로 Nodebird SNS 만들기
Nuxt 실서버 배포후에 업데이트
Nuxt를 사용한 프로젝트를 실서버에 배포후에 파일을 수정하면 다시 빌드하고, 프론트 서버도 재시작 해야 하나요? 예를 들어 Vue 파일 안에서 Html 내용이나 스크립트, CSS 등이 변경되었을 경우에 프로젝트를 다시 빌드하고 프론트 서버도 다시 시작해야 하는지 아니면 다른 방법이 있는지 궁금합니다.
- 미해결Vue로 Nodebird SNS 만들기
vuetify 설치가 안되어서요
현재 버전은 위의 사진 같은 상황이구요 npm i @nuxtjs/vuetify 명령어를 치면 위와 같은 에러가 납니다 비슷한 질문이 있었는데 해결 방법을 찾을 수 없어서요~ 어떤 문제인지 혹시 아실까요??
- 해결됨Vue로 Nodebird SNS 만들기
페이지가 변경될때 마다 같은 함수를 mounted() 안에서 실행하는 방법이 있을까요?
페이지가 변경됐을때마다 해당페이지에서 한번만 mounted() 안에서 함수를 실행하고 싶습니다. 플러그인에 mixin 으로 아래처럼 했더니 import Vue from 'vue'; if (!Vue.__my_mixin__) { Vue.__my_mixin__ = true; Vue.mixin({ mounted() { console.log('hello from mixin!'); }, }); } 한번만 실행돼야 하는데 모든 컴포넌트에 적용되는지 수십번씩 실행되네요.;;;; 위 방법이 아니더라도 페이지 전환될 때 마다 마운트 후에 함수를 한번 실행하는 방법이 있을까요?
- 미해결Vue로 Nodebird SNS 만들기
로그인 관련
요즘 자주 질문드리네요~ :) 해당 강좌를 질문을 통해서 무사히~ 로컬 회원가입, 로그인, 로그아웃이 되어서 SNS 로그인으로 넘어가고 있습니다. express passport를 이용한 google 인을 하고 싶어서 만들어봤는데 뭔가 하나가 부족해서 질문 남깁니다. 인터넷 stackoverflow에서 자료가 너무 없어서 passport.org에서도 자료를 최대한 찾아봤는데 해결이 안되네요.. 제 생각에는 1. HTML 에서 <a href=''> Google login </a> 로 트리거 하고 2. backend에서 get('/google') 로 들어오면 해당 scope를 가지고 패스포트로 strategy로 보낸 후 3. 인증 처리 이후 관련 user 정보를 google에서 받고 4. user 정보를 내 database에 저장한 후 5. 콜백 처리후 redirect로 프론트로 보내서 6. nuxtServerInit 함수로 db에 저장된 것을 불러와 store에 다시 저장후 로그인 인증을 유지한다. 여기까지 인데~ 문제점이 많습니다. 4번에 database 저장하는 것이 패스워드가 없어서 기존에 있던 User Model이 (nickname, email, password)인데 password를 넣을수가 없어서 에러가 납니다. 그래서 임의로 1111을 넣었는데 작동은 잘되는데 이건 아닌 것 같아서~ 어떻게 해야 하는지 모르겠네요. 관련 자료에 대해서 zerocho.com의 facebook을 봤는데 조금 달라서 잘 되지 않고 있습니다. Facebook 도 해보고 싶은데 제가 하는 방식과는 조금 달라서 난감한 상황이라 문의 드립니다. 1. backend/routes/auth.js const express = require('express'); const bcrypt = require('bcrypt'); const passport = require('passport'); const db = require('../models'); const { isLoggedIn, isNotLoggedIn } = require('./middlewares'); const router = express.Router(); router.get('/', (req, res)=>{res.send('logout')}) router.get('/failed', (req, res)=>{res.send('failed to log in')}) router.get('/good', isLoggedIn, (req, res)=>{ res.redirect('http://localhost:3000/setup') res.send(`welcome to ${req.user.displayName}`) }) //1. a tag 를 통해서 '/google' 로 오면 passport-setup.js 로 profile 정보를 가지고 감(id, password, email) router.get('/google', passport.authenticate('google', { scope: ['profile', 'email'] })); //6 req.user 정보가 안생기면 '/auth/failed', 정보가 생기면 '/auth/good' 으로 redirect 됨 router.get('/google/callback', passport.authenticate('google', { failureRedirect: '/auth/failed' }), function(req, res) { console.log(req.user) res.redirect('/auth/good') }); router.get('/google/logout', (req, res)=>{ req.session = null req.logout() res.redirect('/') }) 2. backend/passport/passport-setup.js const passport = require('passport'); const User = require('../models/User'); const GoogleStrategy = require('passport-google-oauth20').Strategy; const db = require('../models/') const bcrypt = require('bcrypt') //4 구글 아이디를 들고 쿠키를 싦음 passport.serializeUser(function(user, done){ done(null, user) }) // 5 user 정보를 보내줌 req.user passport.deserializeUser(async (user, done)=>{ try{ const newUser = await db.User.findOrCreate({ where:{ email: user.emails[0].value, username: user.displayName, password: '1111' } }) return done(null, user) }catch(error){ console.log(error) return done(error) } }) // passport.deserializeUser(function(user, done){ // console.log('google-user', user) // done(null, user) // req.user // }) //2 '/google'에서 넘어옴 아이디 패스워드 체크 후 인증이 되면 callback URL로 보내줌 passport.use(new GoogleStrategy({ clientID: "28194224462-job5pv0aswefef3s2hjqlf57tsdfsdflv956ko2r5hr.apps.googleusercontent.com", clientSecret: "lfj_aYTi6zgXe4nwefBHF1dpwefewfewfYyq", callbackURL: "http://localhost:3085/auth/google/callback" }, //3 구글 인증이 되면 해당 프로필로 구글 아이디를 User Db에서 받아옴 그리고 done으로 user 값을 받거나 err 나면 error를 보내줌 function(accessToken, refreshToken, profile, done) { return done(null, profile); } )); backend/app.js //------------------------------------------------// // BACKEND/FRONT PORT //------------------------------------------------// const backPort = '3085' const frontPort = '3000' const express = require('express') const db = require('./models') const cors = require('cors') const morgan = require('morgan') //------------------------------------------------// // ROUTER REQUIRE //------------------------------------------------// const userRouter = require('./routes/user') const authRouter = require('./routes/auth') // const widgetRouter= require('./routes/widget') // const imageRouter = require('./routes/image') // const databaseRouter = require('./routes/database') // const postRouter = require('./routes/post') // const loadPostRouter = require('./routes/loadPost') //------------------------------------------------// // PASSPORT MODULE //------------------------------------------------// const passport = require('passport') const passportConfig = require('./passport') const session = require('express-session') const cookie = require('cookie-parser') require('./passport/passport-setup') require('./passport/passport-facebook') const app = express() app.use(morgan('dev')) db.sequelize.sync({force:true} ) // db 실행 {force:true} app.use(express.json()) // express 가 json을 받기 위함 app.use(express.urlencoded( {extended: false})) // passport app.use(session({ resave: false, saveUninitialized: false, secret: 'ns747800', cookie: { httpOnly: true, secure: false, } })) app.use(cookie('ns747800')) app.use(passport.initialize()) app.use(passport.session()) passportConfig() //------------------------------------------------// // CORS FRONTEND PORT //------------------------------------------------// app.use(cors({ origin: `http://localhost:${frontPort}`, credentials: true })) //------------------------------------------------// // IMAGE STATIC FILES //------------------------------------------------// app.use('/', express.static('uploads')); //------------------------------------------------// // ROUTER API //------------------------------------------------// app.get('/', (req,res)=>{ res.send('hello wizeto') }) app.use('/user', userRouter) app.use('/auth', authRouter) // app.use('/image', imageRouter) // app.use('/widget', widgetRouter) // app.use('/database', databaseRouter) // app.use('/post', postRouter) // app.use('/loadpost', loadPostRouter) //------------------------------------------------// // LISTEN //------------------------------------------------// app.listen(backPort,()=>{ console.log(`YES backend server is ${backPort}`) }) 조금 자세히 설명해주시면 감사하겠습니다.~~~ vue - express - passport - google 관련 너무 자료가 없어요...