묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기
환경변수가 어디서 쓰이는지 잘 모르겠습니다 ㅠ
전체적인 구조는 잘 설명해 주셔서 이해했습니다! 클라이언트 - 노드 서버 - dialogflow API 이렇게 되는데, 이번 강의에서 노드 라우트에서 보면 제가 dialogflow에서 만든 계정 정보(프로젝트 아이디 등등)를 가지고서 세션을 형성해서 연결하는 것까지 이해했습니다! 그래서 그 특정 정보를 가지고 제 계정으로 만들었던 dialogflow API로 보내게 되는 거구요! 그런데, GOOGLE_APPLICATION_CREDENTIALS 환경변수를 만들긴 했는데 이것이 어디에 쓰이는지 모르겠습니다... ㅠ '프로젝트 이름-key.json' 라는 파일 안에는 제가 생성한 dialogflow 프로젝트 정보가 들어 있는데요, 이것이 있는 파일 경로를 이용해 일단 환경 변수를 셋팅했는데, 딱히 코드 상에서는 해당 환경 변수를 이용하는 곳이 없더라구요... ㅠ 그런데 서버를 돌리고 포스트맨으로 요청을 보내면 잘 응답이 오는 것을 확인할 수 있었습니다. 즉, 현재 노드 서버와 dialogflow API가 연결이 잘 됐다는 뜻인데요, 왜 이게 가능한지 모르겠습니다... const projectId = config.googleProjectID; const sessionId = config.dialogFlowSessionID; // 내 계정을 이용하여 dialogflow와의 세션 생성 const sessionClient = new dialogflow.SessionsClient(); const sessionPath = sessionClient.sessionPath(projectId, sessionId); 위에서 보시면 그저 프로젝트 이름하고, 임의로 정한 세션 아이디명을 넣어준 것 뿐인데, 어떻게 노드 서버가 제 dialogflow 프로젝트를 특정하여 잘 연결하는지 원리를 모르겠습니다...
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
postman에서 POST 방식으로 데이터를 넣어봤는데, html 코드로 cannot POST만 확인됩니다.
현재 회원가입 기능까지 구현하고, postman에서 POST 방식으로 데이터를 넣어봤는데, html 코드로 cannot POST만 확인되어서 무엇이 문제인지 궁금합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
dispatch(loggoutUser())
회원가입/로그인은 dispatch를 통해서 redux에 상태를 전달하는 것으로 봐서 로그아웃도 마찬가지라고 생각했는데요! 여기에서는 왜 dispatch대신 응답을 통해 넘어온 sucess메세지만으로 로그아웃을 마무리하는지 알 수 있을까요~?
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
process.env.NODE_ENV
강의 너무나 잘보고 있습니다.궁금한 게 있는데 process.env는 제가 설정을 따로 안했는데도 쓸 수 있는걸 보니,노드를 설치하면 따라오는 process객체를 통해 접근하는 거로 이해가 가는데요.그렇다면 1.NODE_ENV도 노드설치시 process.env객체 안에 자동으로 있는 key이기에 사용가능한가요? 2. process.env.NODE_ENV === 'production'은 헤로쿠 통해 배포시에 사용하는 것은 알겠는데 npm start 실행시 production일지 / dev일지는 제가 따로 안 준것 같은데 별 말 없으면 노드는 자동으로 dev모드로 실행하는 건가요???
-
미해결React로 NodeBird SNS 만들기
react-helmet
6버전 이상부턴 default export가 없어서 import {Helmet} from 'react-helmet'; 이렇게 받아와야 하는거 같아요 버전 업데이트를 하면서 default export를 안쓰고 {}로 감싸고 import 해와야 하는데, 질문) 패키지에 어떤 기능추가를 위해서 저렇게 default export를 안쓰고 바꾸는 건가요?? 보통 어떤경우에 패키지 개발자가 저렇게 바꾸는지 궁금합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
User.js 에서 this
userSchema.pre("save", function (next) { var user = this; if (user.isModified("password")) { bcrypt.genSalt(saltRounds, function (err, salt) { ... var user = this 를 하면 user 에는 뭐가 담기게 되는거죠?ㅠㅠ 또 여기서 var user = this 를 선언을 했는데 userSchema.methods.generateToken = function (callback) { var user = this; var token = jwt.sign(user._id.toHexString(), "secretToken"); ... 왜 여기서 또 선언을 하는 거에요? User.js 에서 user 이라는 변수가 뭔지 정확히 모르겠습니다ㅠㅠ
-
미해결React로 NodeBird SNS 만들기
미들웨어 이렇게 추가하는거 맞나요..??
middleware.js exports.postExist = async(req,res,next)=>{ const post = await db.Post.findOne({ where: { id: req.params.id } }); if (!post) { return res.status(404).send("해당 페이지가 존재하지 않습니다"); } next(); } post.js router.delete('/:id', isLoggedIn, postExist, async(req,res,next)=>{ try{ await db.Post.destroy({ where: {id: req.params.id}}); res.send(req.params.id); }catch(e){ console.error(e); next(e); } }) next()만 추가해서 다음 동작으로 갈수있게 해주었는데 더 추가할게 있는지 궁금합니다..!
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
안녕하세요.
추가적으로 궁금한점이 있어서 이렇게 남깁니다. 로그아웃 버튼을 클릭하면 mongoDB에 token이 "" 사라지게 구현해놓으셨는데, ie에서 application > cookies에서는 아직 token이 계속 있더라구요.. 상관이 없을까요?
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
파일필터
파일필터 정상작동여부 판단을 위해서 mp4가 아닌 png를 올려보앗는데 업로드폴더에 들어갑니다 ㅠㅠ
-
미해결React로 NodeBird SNS 만들기
질문있습니다
1. 프론트에서 넥스트와 익스프레스를 연결했는데, 그러면 프론트에서도 익스프레스로 서버를 돌리고 백엔드에서도 익스프레스로 서버를 돌리면, 각각의 익스프레스로 프론트,백 서버를 돌리는것이 맞나요?? 2. 프론트에서 넥스트와 익스프레스를 연결한건 동적라우팅을 쓰려하는데, 넥스트에서 안되니 그저 익스프레스를 동적라우팅을 쓰기위한 수단으로 사용하는 건가요??
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
TypeError: Cannot read property 'prototype' of undefined
https://github.com/ryun3433/inf-todo.git 깃헙주소입니다. 이런 에러가 계속 납니다 ㅠ.ㅠ 뭐가 문제인지 잘 모르겠습니다.. 도와주시면 정말 감사하겠습니다 TypeError: Cannot read property 'prototype' of undefined (anonymous function) C:/Users/patmo/Documents/myProject/inf-todo/client/node_modules/express/lib/response.js:42 39 | * @public var res = Object.create(http.ServerResponse.prototype)
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
도와주세요...
계속 붙잡고 있어도 안되서 헬프를 칩니다.. 뭐가 문제인거죠..? auth.js 파일에서 findbytoken을 만드는데 계속 안되기만 합니다. TypeError: User.findByTokenis not a function at auth (C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\middleware\auth.js:8:10) at Layer.handle [as handle_request] (C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\express\lib\router\layer.js:95:5) at next (C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\express\lib\router\route.js:137:13) at Route.dispatch (C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\express\lib\router\route.js:112:3) at Layer.handle [as handle_request] (C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\express\lib\router\layer.js:95:5) at C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\express\lib\router\index.js:281:22 at Function.process_params (C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\express\lib\router\index.js:335:12) at next (C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\express\lib\router\index.js:275:10) at cookieParser (C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\cookie-parser\index.js:71:5) at Layer.handle [as handle_request] (C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\express\lib\router\index.js:317:13) at C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\express\lib\router\index.js:284:7 at Function.process_params (C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\express\lib\router\index.js:335:12) at next (C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\express\lib\router\index.js:275:10) at C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\body-parser\lib\read.js:130:5 at invokeCallback (C:\Users\AndrewLee\Desktop\node_basic\boilerPlate\node_modules\raw-body\index.js:224:16)ㄱ계속 이 문구만 뜨고요 함수가 아니라는데 저는 함수를 user.js에 만들었고.. 아 이게 무슨 문제일까요.. auth.js const { User } = require('../models/user'); let auth = (req, res, next) => { // 이곳에서 인증처리를 하는 곳 // 클라이언트 쿠리에서 토큰을 가져온다 ==> 쿠키 파서를 이용한다. let token = req.cookies.x_auth; console.log('auth/token :' + token); // 토큰을 복호화한 후 유저를 찾는다. User.findByToken(token, (err, user) => { if (err) throw err; if (!user) { return res.json({ isAuth: false, error: true })// 유저가 없으니까 } else { // 유저가 있으면 req.token = token; // 이렇게 설정해주는 이유는 콜러에서 req.token , req.user와 같이 사용할 수 있게 하기 위해서이다. req.user = user; next(); } }); // 유저가 있으면 인증 오케이 // 유저가 없으면 인증 노노 } module.exports = {auth}; user.js const mongoose = require('../node_modules/mongoose'); const bcrypt = require('bcrypt'); const saltRounds = 10; const myPlaintextPassword = 's0/\/\P4$$w0rD'; const someOtherPlaintextPassword = 'not_bacon'; var jwt = require('jsonwebtoken'); const userSchema = mongoose.Schema({ name :{ type:String, maxlength:50 }, email:{ type:String, trim:true, //스페이스를 없앤다 unique : 1 // 유일한 특성 }, password :{ type:String, minlength:5 }, lastname:{ type:String, maxlength:50 }, role:{ // 롤을 주는 이유는 유저의 관리권한을 부여하기 위해서 type: Number, defalut: 0 }, image:String , token:{ // 토큰을 이용해서 유효성등을 나중에 관리함 type: String }, tokenExp :{ // 토큰의 유효기간 type:Number } }) userSchema.pre('save', function (next) { var user = this; console.log('1'); if (user.isModified('password')) { console.log('2'); bcrypt.genSalt(saltRounds, function (err, salt) { console.log('3'); if (err) return next(err); console.log('4'); bcrypt.hash(user.password, salt, function (err, hash) { console.log('5'); if (err) return next(err); console.log('6'); console.log(hash); user.password = hash; next(); }); }); }else{ next(); } }) userSchema.methods.comparePassword = function(planPassword,cb){ bcrypt.compare(planPassword,this.password,function(err,isMatch){ if(err) return cb(err); cb(null,isMatch); } ); } userSchema.methods.generateToken =function(cb){ var user = this; // json웹토큰을 이용해서 토큰을 생성하기 var token = jwt.sign(user._id.toHexString(), 'hihello'); // 이렇게 토큰을 만들면 ,, // user._id + hihello = token이 되고, 나중에는 token과 hihello로 user._id를 만들 수 있다. user.token = token ; user.save(function(err,user){ if(err) return cb(err); // 에러가 났으면 에러를 전달 cb(null,user); // 문제가 없으면 에러는 없고 유저를 전달 자 그럼 index.js로 넘어가서~ }); } userSchema.methods.B= function(token,cb){} userSchema.methods.findByToken= function(token,cb){ var user = this; // 토큰을 디코드 한다. user_id + '' = token console.log("1 : " + token ); jwt.verify(token, 'hihello',function(err,decoded){ // 유저 아이디를 이용해서 유저를 찾은 다음에 // 클라이언트에서 가져온 token과 db에 보관된 토큰이 일치하는지 확인 user.findOne({"_id":decoded,"token":token},function(err,user){ if(err){ return cb(err); }else{ cb(null, user); } }) }) } const User = mongoose.model('User',userSchema); console.log(User.comparePassword); module.exports = {User}; 좋은 강의 항상 감사드립니다.
-
미해결누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌
렌더링시 두번씩 반복 됩니다.
shouldComponentUpdate 기능 구현하기전부터 콘솔 로그확인시 두번씩 반복되는 것을 확인할수있는데, 적용후에도 동일하게 나타납니다. 어떤 문제인지 잘 파악이 되지않아 해당 화면 첨부드립니다. 확인부탁드리겠습니다. 감사합니다.
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
노드 리액트 기초 강의 #12 토큰 생성 with jsonwebtoken 강의 중 오류 ㅠㅠ
기초 강의 12번 부분에서 이러한 에러가 나는데 이유를 못찾겠습니다. ㅠㅠ 윗 부분은 제 소스코드입니다. 비밀번호를 틀리게 보내면 loginSuccess: false로 제대로 오는데 비밀번호를 올바르게하면 맨 윗 사진과같이 답변이 오네요 ㅠㅠ
-
해결됨웹 게임을 만들며 배우는 React
게임 버그 문의
게임을 바고 시작하자마자 가위바위보를 선택하면 undefine된 변수를 참조했다고 에러가 뜹니다. 그리고 게임을 계속 진행하면 가위 바위 보가 점점 더 빨리 나오는 데 이것은 어떻게 제어를 해줘야 할까요?
-
해결됨웹 게임을 만들며 배우는 React
prevState는 어디서 온건가요?
this.setState((prevState => {)) 부분에서 PrevState 는 어디서 온건가요? 이해하기 어렵네요.
-
미해결React로 NodeBird SNS 만들기
sudo 계정이후 permission denied
안녕하세요 영상 보고 첫 배포 성공 후, 똑같은 코드를 깃허브에서 다시 다운받아서 다시 배포하는 연습을 하고 있습니다. front 서버에 배포를 하려고 하는데 - sudo su - npm run build ( build 디렉토리는 /home/ubuntu/새로정의한프로젝트명/front) 여기서 permission denied가 떨어지네요 이하 에러 로그입니다.=------------------------------------------------> root@ip-172-31-35-199:/home/ubuntu/zepettoland/ch9_zepettoland/front# npm run build > react-nodebird-front@1.0.0 build /home/ubuntu/zepettoland/ch9_zepettoland/front > cross-env ANALYZE=true next build sh: 1: cross-env: Permission denied npm ERR! code ELIFECYCLE npm ERR! errno 126 npm ERR! react-nodebird-front@1.0.0 build: `cross-env ANALYZE=true next build` npm ERR! Exit status 126 npm ERR! npm ERR! Failed at the react-nodebird-front@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2019-11-25T03_23_39_728Z-debug.log 기존 소스에 프로젝트명만 바꾼건데요 문의드리겠습니다. 감사합니다.
-
해결됨TDD 개발 방법론을 활용한 React Native 앱 개발
No tests found, exiting with code 1 에러
{ "name": "ReactNativeTDD", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint ." }, "dependencies": { "react": "16.9.0", "react-native": "0.61.1" }, "devDependencies": { "@babel/core": "^7.6.2", "@babel/runtime": "^7.6.2", "@react-native-community/eslint-config": "^0.0.5", "babel-jest": "^24.9.0", "eslint": "^6.5.1", "jest": "^24.9.0", "metro-react-native-babel-preset": "^0.56.0", "react-test-renderer": "16.9.0" }, "jest": { "preset": "react-native" } } __tests__ 폴더명 변경 시 yarn run test 를 하게 되면 testMatch: **/__tests__/**/*.[jt]s?(x), **/?(*.)+(spec|test).[tj]s?(x) - 0 matches 이렇게 테스트가 작성된 폴더를 찾지 못하는 경우가 있습니다. 강의의 진행과 동일하게 했는데도 이렇게 에러가 나네요. 검색 결과 package.json 파일에서 "jest" : { "preset": "react-native", "testRegex": "(/tests/.*|(\\.|/)(test))\\.js$" } 이렇게 testRegex 에 대한 추가 설정을 해주고 나면 테스트 폴더가 잡힙니다. 무슨 문제인지 알고 싶습니다.
-
미해결React & Express 를 이용한 웹 어플리케이션 개발하기
질문있습니다..
return data.map((contact, i) => { return (this.handleClick(i)}/>); }); 주석 부분 아래에 원래는 this.handleClick(i) 라고 작성하셨다가 여기는 arrow function 사용해야한다고 하셨는데.. 강의 부분에서 전에 말씀해주셨다고 하셨는데 도저히 기억이 안나네요 ㅠㅠ