Thumbnail
BEST 개발 ・ 프로그래밍 웹 개발
Vue로 Nodebird SNS 만들기
(4.7)
20개의 수강평 ∙ 313명의 수강생

66,000원

지식공유자 : 조현영
총 71개 수업˙총 15시간 11분
평생 무제한 수강
수료증 발급 강의
중급이상 대상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
내 목록 추가 237 공유
히나타 프로필

Nuxt 에 babel polyfill 적용하는 방법이 궁금합니다. 히나타 3일 전
덕분에 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 에는 어떻게 적용해야 하는지... 오늘 하루종일 이 문제로 헤메다가 다시 제로초님께 도움을 청하게 됐습니다^^;;; 감사합니다.

5
히나타 프로필

Nuxt 실서버 배포후에 업데이트 히나타 25일 전
Nuxt를 사용한 프로젝트를 실서버에 배포후에 파일을 수정하면 다시 빌드하고, 프론트 서버도 재시작 해야 하나요? 예를 들어 Vue 파일 안에서 Html 내용이나 스크립트, CSS 등이 변경되었을 경우에 프로젝트를 다시 빌드하고 프론트 서버도 다시 시작해야 하는지 아니면 다른 방법이 있는지 궁금합니다.

1
51sarang 프로필

vuetify 설치가 안되어서요 51sarang 1달 전
현재 버전은 위의 사진 같은 상황이구요 npm i @nuxtjs/vuetify 명령어를 치면 위와 같은 에러가 납니다 비슷한 질문이 있었는데 해결 방법을 찾을 수 없어서요~ 어떤 문제인지 혹시 아실까요??

4
히나타 프로필

페이지가 변경될때 마다 같은 함수를 mounted() 안에서 실행하는 방법이 있을까요? 히나타 1달 전
페이지가 변경됐을때마다 해당페이지에서 한번만 mounted() 안에서 함수를 실행하고 싶습니다. 플러그인에 mixin 으로 아래처럼 했더니 import Vue from 'vue'; if (!Vue.__my_mixin__) {     Vue.__my_mixin__ = true;     Vue.mixin({         mounted() {             console.log('hello from mixin!');         },     }); } 한번만 실행돼야 하는데 모든 컴포넌트에 적용되는지 수십번씩 실행되네요.;;;; 위 방법이 아니더라도 페이지 전환될 때 마다 마운트 후에 함수를 한번 실행하는 방법이 있을까요?

4
Harry Jung 프로필

로그인 관련 Harry Jung 1달 전
요즘 자주 질문드리네요~ :) 해당 강좌를 질문을 통해서 무사히~ 로컬 회원가입, 로그인, 로그아웃이 되어서 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  관련 너무 자료가 없어요...

1
twoshlove 프로필

(이슈 공유) Cannot read property 'password' of undefined twoshlove 1달 전
질문은 아니고, 혹시나 이와 같은 질문이 생길 수도 있을까봐 이슈 공유 차원에서 글 남깁니다. 저는 data에 Object를 return할 때 data: () => ({}) 위와 같이 arrow function을 사용했었는데, 1-8 강의를 실습할 때 this가 실행 시점에 바인딩되지 않기 때문에 Cannot read property 'password' of undefined 라는 error가 떠서 애를 먹었습니다. 제로초님 강의처럼 es5의 function식을 쓰면 정상적으로 해결이 됩니다. data: function(){return {}} 또는 data(){return {}} 으로 사용하시면 됩니다.

1
Harry Jung 프로필

아래 에러가 뜨는데 해결이 잘 안되네요~ Harry Jung 1달 전
안녕하세요 nuxt.config.js 에서 ssr: false, 여서 ssr: true를 만들었는데 아래와 같은 에러가 뜬후 잘 안되는데 해결방법이 있을까요?

11
Harry Jung 프로필

bcrypt 관련 에러 Harry Jung 2달 전
안녕하세요 bcrypt 수강중에서 계속 에러가 떠서 stackoverflow를 봐도 해결이 안되어 질문을 남깁니다. SequelizeDatabaseError: Data too long for column 'password' at row 1    at Query.formatError (/Users/harry/Documents/workspace/wizetoPrototype/backend/node_modules/sequelize/lib/dialects/mysql/query.js:239:16)    at Query.run (/Users/harry/Documents/workspace/wizetoPrototype/backend/node_modules/sequelize/lib/dialects/mysql/query.js:54:18)    at processTicksAndRejections (internal/process/task_queues.js:97:5)강의한 것과 같이 아래처럼 코딩을 하였는데 잘 안되어 user모델에서 password type을 text, char, string(200) 이상을 해보아도 동일하게 에러가 납니다해결할 수 있는 방법이 있으면 감사하겠습니다.추가적으로 hash 를 콘솔로 찍어서 얼마나 긴지 보고 싶었었는데 코맨드창에서는 로그가 안찍히네요. 어디서 확인을 할수 있는지도 알려주시면 감사하겠습니다.답변 부탁드릴게요app.js app.post('/user', async (req, res, next)=>{ try{ const hash = await bcrypt.hash(req.body.password, 8) console.log(hash) const newUser = await db.User.create({ username: req.body.username, email: req.body.email, password: hash, }) res.status(201).json(newUser) } catch(error){ console.log('error', error) next(error) } user.js const User = sequelize.define('User', { // user의 모델 email: { // 모델의 table type: DataTypes.STRING(40), allowNull: false, }, username: { type: DataTypes.STRING(30), allowNull: false, }, password: { type: DataTypes.STRING(100), allowNull: false, } },

12
Caesiumy 프로필

프론트에서 요청 보낼 때 암호화하는 방법엔 뭐가 있을까요? Caesiumy 2달 전
응답은 bcrypt로 암호화한다고 해도 요청할 때의 데이터에 평문으로 비밀번호가 담겨서 보이게 되는데요. 이것또한 암호화할 수는 없을까요? bcrypt 암호화를 프론트에서 한 다음 보내는 건 안 될까요?

1
deep Ring 프로필

백엔드 서버는 3085번 포트이네요? deep Ring 2달 전
백엔드 서버는 3085번 포트이네요? 근데 강의에서는 프론트에서 3000번 포트에 그냥 post요청을 보내는 것이 아닌가요?? 헤더에 아래와 같이 뜨면서 가져오질 못합니다.. post요청이 3085번 포트로 가야하는게 아닌가요?? git 주소 https://github.com/windsdeath/vuenodebird Request URL: http://localhost:3000/user Request Method: POST Status Code: 404 Not Found Remote Address: 127.0.0.1:3000 Referrer Policy: strict-origin-when-cross-origin Accept-Ranges: none Connection: keep-alive Content-Length: 664888 Content-Type: text/html; charset=utf-8 Date: Fri, 06 Nov 2020 06:42:11 GMT Accept: application/json, text/plain, */* Accept-Encoding: gzip, deflate, br Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7,ja;q=0.6 Connection: keep-alive Content-Length: 46 Content-Type: application/json;charset=UTF-8 Host: localhost:3000 Origin: http://localhost:3000 Referer: http://localhost:3000/signup Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: same-origin User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36 {email: "78", password: "78", nickname: "78"} email: "78" nickname: "78" password: "78"

2
히나타 프로필

백엔드가 자바일때 로그인 유지관련 질문드립니다. 히나타 2달 전
안녕하세요. 강의 잘 듣고 있습니다. 다름이 아니라 뷰로 처음하는 프로젝트를 자바와 진행해야 하는 상황입니다. 그런데 로그인 관련해서 궁금한게 있습니다. Nuxt를 사용하고 백엔드가 자바일때 로그인을 유지하는 간략한 프로세스가 궁금합니다. 자바스프링도 리퀘스트를 보낼때 header에 토큰 같은걸 담아서 보내는 건가요? 뷰만 사용할때는 axios 인터셉터를 이용해서 토큰정보를 header에 담아서 보내는건 봤는데 Nuxt를 사용할때도 axios 인터셉터를 이용하나요?

4
히나타 프로필

Nuxt 관련 질문입니다. 히나타 2달 전
뷰를 처음 공부하고 있습니다. 어느정도 공부하다보니 SEO 문제를 접하게 되었는데요... SEO문제를 해결하기 위해 nuxt를 사용하면 운영서버가 꼭 node.js 환경이어야 하나요? 클라이언트 요구 사항으로 일반 홈페이지를 vue로 개발하는 상황인데 백엔드는 자바로 개발될겁니다. 기존의 홈페이지도 현재 자바로 개발되서 운영중이구요. 이걸 리뉴얼 하면서 vue로 프론트를 개발해 달라고 해서 현재 열심히 공부중인데 SEO처리를 어떻게 해야하나 궁금해집니다. 사실 vue관련 강의 이것저것 거의다  듣고 이 강의는 nuxt 가 궁금해서 수강하게 되었습니다. 이 강의는 아직 초반만 들은 상태입니다. 다시 질문으로 돌아와서 현재 자바로 운영되고 있는 홈페이지의 프론트를 vue로 개발하려는데 nuxt를 사용하면 배포시 운영서버에 꼭 node.js 환경이 갖춰져야 하나요? 아니면 프론트 개발할때만 node js 환경에서 하면 되는건가요?

1
deep Ring 프로필

vuetify적용이 안되네요 ㅠㅠ deep Ring 2달 전
https://github.com/windsdeath/vuenodebird 왜 이런 에러를 뿜는것일까요 ㅠㅠㅠ 흠..

2
haemil 프로필

제로초님 글보고 SSL 갱신 관련 문의드립니다. haemil 3달 전
제로초님이 작성해주신 글인📄 nginx와 let's encrypt로 SSL 적용하기(+자동 갱신)를 통해 많은 도움을 받고 있습니다. 감사합니다.🙇‍♂️🙇‍♂️ 그런데 학습 중📖  궁금증이 생겨서 문의드립니다.🙋‍♂️ 본문을 따라서 진행하다가 아래 내용 대로 certbot이 없어서 certbot을 생성 후..! 명령어를 설정하려고 하는데, certbot-auto로 진행하더라도 크론탭에 설정할 내용이 certbot이 되어야 하는 건지 궁금증이 생겼습니다. certbot-auto로 진행할 경우 certbot 대신 아래처럼 certbot-auto로 진행해도 되는 것인지 궁금하여 문의드립니다.🙋‍♂️ SHELL=/bin/sh PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin 0 */12 * * * root certbot-auto -q renew --nginx --renew-hook 'service nginx reload' 항상 감사합니다. 제로초님 🙇‍♂️🙇‍♂️🙇‍♂️

4
haemil 프로필

제로초님 아래 질문에 연이어 문의드립니다. haemil 3달 전
제로초님 아래 질문에 연이어 문의드립니다.🙇‍♂️ Q.🙋‍♂️  nginx 설정과 관련된 질문 A.🧑‍🏫  "네 cors 에러는 IP로 하는 경우는 해결하기 힘듭니다. 그런데 3000번 포트에 어드민을 두셨다고 하셨으니 ham.com:3000으로 요청을 보내면 되지 않나요? 대신 3000번 포트는 EC2 방화벽 인바운드에서 허용을 해주셔야 겠지요." 위와 같은 답변을 주신 이후에 1. aws 보안그룹에 가서 사용자 지정 TCP 규칙으로 3000번 포트를 개방했습니다. 이 부분 말씀해주셔서 감사합니다. 인바운드 규칙 설정을 놓치고 있었는데, 제로초님이 말씀해주셔서 아래처럼 설정했습니다.  2. 그리고 프론트에서 요청을 보내는 axios baseURL을 'https://ham.com:3000/'과 'http://ham.com:3000/'으로 시도해보았는데, https의 경우에는 cors 에러가 발생하는 것 같고, http의 경우에는 'Mixed Content' 에러가 발생하는 것 같습니다. '같습니다' 라고 표현하는 이유는 이 http의 경우에도 cors 에러인 경우가 있는데 아직 경우의 수를 좁히지 못했습니다. 🤔 3. 혹시 싶어서 PostMan으로 'https://ham.com:3000/'과 'http://ham.com:3000/' 에 각각 요청을 보내본 결과 'http://ham.com:3000/'는 정상 응답을 하였고, 'https://ham.com:3000/' 은 응답이 없습니다... 🤕 4. ham.com:3000 주소를 가진 백엔드 서버가 정상적으로 응답을 해준다면 해결될 문제인 것 같은데, 백엔드에도 https를 적용하면 해결될 문제일까요? 5. 만약 백엔드에 https 를 적용해서 해결가능한 문제라면 리액트 배포 보너스 강의👨‍🏫 중 백엔드에 https 적용하기가 실마리가 될 수 있을까요?! 6. 혹시 제가 놓치고 있는 설정이나 부분이 있다면 혹시 말씀을 부탁드릴 수 있을까요? 🙋‍♂️ 감사합니다. 제로초님🙇‍♂️

4

66,000원

내 목록 추가 237 공유
지식공유자 : 조현영
총 71개 수업˙총 15시간 11분
평생 무제한 수강
수료증 발급 강의
중급이상 대상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스