묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결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 관련 너무 자료가 없어요...
-
미해결현존 최강 크롤링 기술: Scrapy와 Selenium 정복
PhantomJS 가 중단..
Important: PhantomJS development is suspended until further notice 라고 뜨네요. 추후 공지가 있을떄까지는 중단이라고 하는가 봅니다.
-
미해결Flutter 입문 - 안드로이드, iOS 개발을 한 번에 (with Firebase)
파이어 베이스 구글 로그인을 구현한뒤 몇가지 질문이 있습니다.
앱에서 구글 로그인을 사용하는건 편리하고 좋은거 같은데 (의미는 대충 파악하고 복붙만 했어여 구글 로그인 객체로 로그인한뒤 그 결과를 파이어 베이스 유저에 저장하면 루트 페이지에서 그 변화(로그인 상태 변화)를 감지해서 로그인 상태가 될경우 탭 페이지 출력 이런식으로 (인자값이나 토큰 설정 같은건 의미를 정확히 모르고 일단 복붙했어여 ) 그런데 이시점에서 질문이 4가지 있습니다 1.구글 파이어베이스 로그인을 구현한뒤 추가적인 계정 관련 정보를 저장해야 한다면 (전화 번호, 팔로잉 팔로우 등등) 클라우드 파이어 스토어에 nosql 형식으로 저장하나여? 2.로그인과 계정 정보(팔로잉 팔로워 등등)만 파이어베이스와 연동하고 그외는 전형적인 api 서버들과 연동하는것도 괜찮은 방식이 되나여? 3.로그인 로직은 그냥 복붙해서 써서 어렵지 않은거 같은데 orm 비슷한 로직들이 전형적인 api 서버(node,장고 등)에 대한 호출과는 조금 다른것 같아서 좀더 어렵게 느껴지는데 전형적인 api 서버 + flutter 강의는 아직 안찍으셨나여? 4.책도 구입하는게 좋을까여? (플루터와 다트 기초가 부족해서여 그리고 1,2,3의 답이 혹시 책에 있을까여?) 알려주시면 감사여 !
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
안녕하세요 강사님 auth 부분 질문드릴게요
안녕하세요 강사님 한번 완강하고 두번째 듣는중입니다. #13 Auth 기능만들기 강의를 들었습니다. app.get('/api/users/auth',auth,(req,res)=>{ ...생략 부분에서 잘 이해가 안되는게.. 로그인 할때는 포스트맨으로 post register을 돌리고, 로그 아웃할때는 포스트맨으로 get logout 을 돌리잖아요? 근데 auth 부분은 포스트맨에서 get auth 이렇게 돌리는것도 아닌데 어떻게 실행이 되는지 잘 이해가 안되네요.. 마치 제가 느끼기에는 로그인 할때 자동으로 auth 부분까지 돌아가는 것 같이 느껴지네요.. 답변해주시면 정말 감사하겠습니다!
-
미해결데브옵스(DevOps)를 위한 쿠버네티스 마스터
1.19 버전에서 deployment 생성 스크립트가 변경된 것 같네요
kubectl run 명령어는 pod 실행 명령어로 바뀌고 deployment를 생성하려면 kubectl create deployment {디플로이먼트-이름} --image={이미지-이름} 와 같은 형태로 해야되네요, 제가 잘 본게 맞는지 확인부탁드립니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
게시글 작성 후 삭제 시 워크벤치 게시글 ID는 변경안되나요?
게시글을 작성하면서 id가 1,2,3,4 ... 올라가면서 현재는 23, 24로 나오는데 게시글을 전부 삭제하고, 작성하면 1, 2가 아니고 25, 26 ... 이게 정상인건가요?
-
미해결[리뉴얼] 처음하는 파이썬 데이터 분석 (쉽게! 전처리, pandas, 시각화 전과정 익히기) [데이터분석/과학 Part1]
머신러닝/인공지능 기본
선생님, 머신러닝/인공지능 기본 강의는 언제쯤 출시(?)예정이신가요?ㅎㅎ 정확하진 않겠지만 대략적으로라도 알려주심 감사하겠습니다. 기다리려구요.
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
box-sizing태그에 대해서 궁금한점이 있습니다.
아래와 같이 box sizing을 안넣고 padding을 20px; 그리고 border를 10px를 줬을때 두번째 사진처럼 패팅이 먹히는데, 박스사이징을 보더박스로 한 경우에는 상하좌우로 20px; 패딩이 안먹히잖아요. 원래 그런건가요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
aws ec2 프리티어 사용제한에 대한 질문입니다
ec2 서버 월 750 시간 무료라고 알고 있는데 11월 22일 부터 시작한 ec2 서버가 왜 750 시간 모두 사용이 되었는지 모르겠습니다. 현재 2달러 과금이 되었는데 서버를 계속 켜놓으면 과금이 많이 되나요? 꺼놓는게 나을까요 ㅠㅠ..
-
미해결[개념부터 실습까지] 추천 시스템 입문편
sunplot
개봉연도 시각화 수업을 google colaboratory에서 진행하며 그대로 따라했는데 sunplot의 x축(개봉연도)이 오름차순이 아니라 중구난방으로 나와서 막대바가 들쭉날쭉이네요 원래 이런건가요?
-
미해결Vue.js 시작하기 - Age of Vue.js
배포 질문.
안녕하세요. 좋은 vue강의 만들어주셔서 감사합니다. 프론트엔드는 보통 배포시에 build 된 결과물을 서버에 올리고 nginx로 연결하는 방법을 이용하나요? 현업에서 백엔드와 함께 전체적인 서비스 배포가 어떻게 이루어지는지 궁금합니다.
-
미해결코어 자바스크립트
오프라인과 온라인 중
오프라인과 온라인 중 뭘 들으면 좋을까요? 웬만하면 생략보다는 더 깊이 강의하신 내용이 좋겠는데 고민이네요. 이제 막 시작하려는 학생입니다!
-
해결됨스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
회원가입 테스트 오류관련 질문드립니다
강사님 안녕하세요! 강의 잘 듣고있습니다. 다름이 아니라 회원가입 단위테스트를 하는데 오류관련하여 질문드립니다! <테스트환경 : 윈도우10, 인텔리제이 커뮤니티버전> 아래와같이 실행하여 h2오픈하고 회원가입 단위테스트를 했습니다 테스트 결과는 히카리관련 오류와 jdbc연결오류입니다 wrong user name or password관련한 오류는 스프링부트2.4부터 application.properties에 spring.datasource.username=sa를 추가해줘야한다고 하여 추가된상태입니다. 시간되실때 확인부탁드립니다:)
-
해결됨모의해킹 실무자가 알려주는, SQL Injection 공격 기법과 시큐어 코딩 : PART 1
연결 연산자를 지워버리는 경우에 대한 질문이 있습니다.
te'||(case when 1=1 then 'e' else 'a' end)||'st 라는 파라미터로 테스트를 해본다고 하셧는데, 이건 ORACLE 에서만 가능한건가요? 연결연산자만 다른 같은 구문을 MYSQL에서 select 'te' (case when 1=1 then 'e' else 'a' end) 'st' 이런식으로 쿼리를 보내봤더니 에러가 뜨더라구요. 왜 오라클에서는 되고 mysql에서는 안되는지 궁급합니다.
-
미해결스프링 시큐리티
실전 프로젝트 - 인증 프로세스 Form 인증구현 8) 인증 부가 기능
선생님 이번에 강의 보고 있는데 이번에 코드 추가하면소 로그인이 안되더라구요 DB에 저장되어 있는것도 확인했는데 예외도 안생기고 오류 메시지도 없어서 이전 강의 내용들을 다시 참고 해서 코드도 다시 재타이핑 했는데 로그인이 안되요..ㅠ 계속 비밀번호를 입력하라고만 나오네요 ..ㅠㅠ 이게 무슨일일까요.. ㅜ 결국 하다가 안되서 질문드려요 혹시 몰라서 깃허브 주소 남기고 갑니다.ㅠㅠ https://github.com/kyungchan3007/SpringSecurity
-
미해결4차 산업혁명 시대의 경제심리, 행동경제학에 주목하라!
챕터2와 챕터3의 키워드정리가 같은 동영상이 올라와있는것 같습니다.
강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다.
-
해결됨[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part1: C# 기초 프로그래밍 입문
Delegate 권장 호출 방식이 궁금합니다.
Delegate를 여러 방법으로 호출할 수 있다고 알고있는데요. 질문이 터무니없을 수 있지만,, 어떤 생성/호출방식이 권장되는지, 아니면 상황에 따라 각각 호출하는 방식의 사용빈도가 동일한지 궁금합니다. 그게 아니면 delegate의 직접적인 호출은 아예 사용되지 않고 event로 감싸서 호출하는 방식만 권장되는지 궁금합니다. delegate int OnClicked(); static void ButtonPressed(OnClicked clickedFunction) { clickedFunction(); } OnClicked clicked = new OnClicked(TestDelegate); -> 생성1 OnClicked clicked = TestDelegate; -> 생성2 clicked(); -> 호출1 ButtonPressed(clicked); -> 호출2
-
미해결[리뉴얼] 처음하는 파이썬 데이터 분석 (쉽게! 전처리, pandas, 시각화 전과정 익히기) [데이터분석/과학 Part1]
plotly 레이아웃 업데이트
(디테일하고 가장 예쁜 시각화 라이브러리 사용법 이해 2, 8분 10초 쯤) 여기서 보면 레이아웃을 업데이트할 때 fig.update_layout( { "title": { "text": "Graph with <b>go.Bar</b>", "x": 0.5, "y": 0.9, "font": { "size": 20 라고 하여 title 안에 사전형태로 text를 지정해주는데 "xaxis": { "title": "random number", "showticklabels":True, "dtick": 1 X축에 대한 내용을 업데이트 할 때는 title 안에 사전 형태로 text를 추가로 작성하지 않고 바로 들어갈 내용을 적는 차이가 있는 이유가 있나요?
-
해결됨실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
application.yml의 spring: datasource: url: jdbc:h2:tcp://localhost/~/jpashop;MVCC=true
안녕하세요. 김영한 강사님!! 강의 수강중 질문이 생겼습니다! 다름이 아니라 src/main/resources의 application.yml에 spring: datasource: url: jdbc:h2:tcp://localhost/~/jpashop;MVCC=true 위와 같이 MVCC=true 를 붙였더니, org.h2.jdbc.JdbcSQLNonTransientConnectionException: Unsupported connection setting "MVCC" [90113-200] 와 같은 Exception 이 생겨서 이것이 어떤 오류이고 왜 생긴 것인지 질문을 드리고자 합니다. MVCC=true 를 제거하였더니 Test는 정상적으로 작동하였습니다!! JPA 프로그래밍 기본편을 수강하지 않은체 야생형으로 수강중이어서 데이터베이스 커넥션 및 sql 설정과 관련하여 미숙한 점 미리 양해부탁드립니다.
-
미해결[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
ppt 교안은 어디서 받을 수 있나요?
강의 정말 재밌어요! 혹시 ppt 교안 제공해주시나요??