다른분이 질문하신건데  9:30초에   const productId = props.match.params.productId; 여기서 props.match.params.productId 가 어디서 나온건지 잘 모르겠습니다 ㅠㅠ. App.js 에서 Auth로 감싸줘서 props가 있는건 알겠는데  match.params.productId가 어디서 나온건지 모르겠네요 ㅠㅠ App.js -> hoc/auth.js -> user_actions.js->index.js-> routes/users.js 까지 가봤는데 잘 모르겠네요 ㅠㅠ

삭제된 글입니다

세팅 제이슨을 검색하면 그랩님 화면과 다르게 엄청나게 많은 코드가 뜨는데 제가 잘못 검색한건지, 그냥 이 밑에 그대로 코드를 추가하면 되는지 궁금합니다. 그리고 프리티어가 꼭 필요한지도 궁금합니다. 프리티어 없이 써왔어서 있고 없고의 차이가 현저할까요?

reducers 폴더의 index파일의 rootReducer함수에서 defalut: return state 들어가는이유 설명해주실때  액션타입해서 그 다음상태 만들어주는것을 처리해주는대 리듀서 초기화할때 또 rootReducer함수가 실행이되는대 그때defalut: return state이 부분이 없으면 리턴값이 undefined된다 이렇게 설명해주셨는대 리듀서가 왜 초기화되는지 이유가 궁금합니다!

AppLayout에서 store에서 IsLoggedIn 가져오는데서 에러가 발생합니다.  const isLoggedIn = useSelector((state) => state.user.isLoggedIn); 에러 코드  TypeError: Cannot read property 'user' of undefined const initialState = { user: { isLoggedIn: false, user: null, signUpdata: {}, loginData: {}, }, post: { mainPosts: [], }, }; const rootReducer = (state = initialState, action) => { switch (action.type) { case "LOG_IN": return { ...state, user: { ...state.user, isLoggedIn: true, user: action.data, }, }; case "LOG_OUT": return { ...state, user: { ...state.user, isLoggedIn: false, user: null, }, }; default: return; } }; 뭐가 문제일까여...힝ㅜㅜㅜㅜ

이전 질문은 보니 관계형 데이터 베이스로도 강의를 제작할 계획이 있다고 하셨는데요 1. 존안님께서 실무에서 쓰는 DB는 MySQL 인가요?? 2. 그럼 ORM 종류는 무엇으로 하시나요? 시퀼라이즈, 프리즈마.. 등등 어떤것으로 사용하시나요?

되게 여러번 따라 했는데,  새로고침 하고난 후 로그인이 유지가 되지 않습니다..ㅠㅠ  authSaga 속의 함수들이 제대로 작동하지 않는것 같습니다.... authoSaga속 함수를 호출하는 시작이 어딘지  순서 또한 잘 파악되지 않습니다..ㅠ 계속 401에러가 뜹니다. ㅠㅠ

element.style { } user agent stylesheet body { display: block; margin: 8px; } margin 8 8 border ‒ ‒ padding ‒ ‒ 1113 × 1247 ‒ ‒ ‒ ‒ 8 8 Console What's New Issues top Default levels Some messages have been moved to the Issues panel. View issues index.html:95 Live reload enabled. babel.min.js:1 You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/ react-dom.development.js:82 Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. in LikeButton in div react-dom.development.js:19662 The above error occurred in the <LikeButton> component: in LikeButton in div Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. react-dom.development.js:11237 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. at checkForNestedUpdates (react-dom.development.js:23228) at scheduleUpdateOnFiber (react-dom.development.js:21299) at Object.enqueueSetState (react-dom.development.js:12774) at LikeButton.Component.setState (react.development.js:557) at LikeButton.render (<anonymous>:49:23) at finishClassComponent (react-dom.development.js:17295) at updateClassComponent (react-dom.development.js:17245) at beginWork (react-dom.development.js:18755) at beginWork$1 (react-dom.development.js:23314) at performUnitOfWork (react-dom.development.js:22289) ​

- Postman으로 email, PW를 보내며 '비밀번호가 틀렸습니다' 가 Response로 돌아오면서 아래 에러가 나옵니다... 비번은 분명 맞는데 이런 에러가 나옵니다ㅜ 혹시 이유를 알 있나요? - 좀 길지만 전체 코드 복붙했습니다. 감사합니다!  CODE ERROR _http_outgoing.js:558     throw new ERR_HTTP_HEADERS_SENT('set');     ^ Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client     at ServerResponse.setHeader (_http_outgoing.js:558:11)     at ServerResponse.header (/Users/user/VS Code/project_with_NodeJS/boiler-plate/node_modules/express/lib/response.js:771:10)     at ServerResponse.send (/Users/user/VS Code/project_with_NodeJS/boiler-plate/node_modules/express/lib/response.js:170:12)     at ServerResponse.json (/Users/user/VS Code/project_with_NodeJS/boiler-plate/node_modules/express/lib/response.js:267:15)     at /Users/user/VS Code/project_with_NodeJS/boiler-plate/index.js:48:20     at /Users/user/VS Code/project_with_NodeJS/boiler-plate/models/user.js:62:9     at /Users/user/VS Code/project_with_NodeJS/boiler-plate/node_modules/bcrypt/bcrypt.js:210:13     at processTicksAndRejections (internal/process/task_queues.js:75:11) {   code: 'ERR_HTTP_HEADERS_SENT' } npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! boiler-late@1.0.0 start: `node index.js` npm ERR! Exit status 1 npm ERR!  npm ERR! Failed at the boiler-late@1.0.0 start 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!     /Users/user/.npm/_logs/2020-12-28T03_02_38_926Z-debug.log

안녕하세요!! 강의를 구매하고 시작합니다. 그런데 궁금한 점이 있는데..... 구글에서 '노드버드'라고 검색하니깐, 검색이 되는 것을 확인했습니다. 그런데 네이버에서 '노드버드'를 검색을 해보니 아무것도 보이지 않네요?? 1. 네이버 검색엔진에 등록은 안하신 건가요?  2. 네이버에서는 검색엔진 최적화가 안되는 건가요? 3. 개인 포트폴리오를 만들고 싶은데요, 리액트로 블로그를 만들어서 검색엔진 최적화를 하고 싶은데요. 제가 게시물을 작성 한다면.... 그 각자의 게시물이 검색엔진에 의해서 검색이 될 수 있는거죠? p.s. 조현영 강사님~ 리액트로 검색엔진 최적화가 된다길래.. 뒤도 돌아보지 않고 질렀습니다. 강의 열심히 들어볼께요! 그리고 이걸 마스터 하면 다른 타입스크립트 강좌도 구매할 예정입니다^^

options: { presets: ['@babel/env', '@babel/react'] } presets: ['@babel/preset-env' ...] 영상에서는 이렇게 나오는데요 "preset-" 얘들을 빼주시면 정상적으로 빌드 됩니다

리액트 네이티브와 네이티브 언어(스위프트, 코틀린)도 합쳐서 개발을 할 수 있는 걸까요?

영상 내에서는 이전 상태값을 이용해서 +1을 계속 해주는 예제를 보여주셨는데요! 영상 속 사례에서는 굳이 [count]를 의존성 배열에 안넣어줘도 작동을 하니까 어느 부분에서 유용하게 쓰이는지가 좀 헷갈리더라구요..! 이전 상태값을 기반으로 다음 상태값을 사용하는 사례가 어떤게 있을까요?

끝에 첨부한 코드로 실행하면 작동은 잘 됩니다.window.addEventListener('click', () => {    onClickRef.current();});문제는 강의에 나오는 코드인 위 코드로 작성하면 removeEventListener를 반환 해주더라도계속해서 이벤트가 삭제되지 않고 클릭할 때마다 Listener가 계속 생성되면서Count 가 몇 배로 불어나는 버그가 생깁니다.addEventListener에서 화살표함수를 사용하여 OnClickRef.current(); 를 호출해주는이유가 있나요?물론 removeEventListener없이 화살표 함수로  eventListener 를 실행하여도의존성 배열부분에 빈배열로 남기면 당연히 작동은 잘 합니다.그런데 보통 removeEventListener 를 리턴해주는 것이 정석인 것 같은데화살표함수로 호출한 eventListener는 removeEventListener로 제거가 안되더라구요.별거 아닌 코드인데 원인을 모르니 답답하네요.그리고 제가 작성한 코드에서도 이 부분을 ref객체를 useEffect 내에서 수정하지 않으면 문제가 생기는데 왜 그런지 모르겠네요..강의에서 설명해주신 바로는 useEffect 내에서 ref객체를 수정하는 이유는 이후에 있을 concurrent mode로 실행될 때를 대비해 사용하는 것이고,concurrent mode로 실행하지 않을 시에는 문제가 생기지 않을 것이다라고 하셨는데,Component 함수에서 직접 수정 시엔 원인 모를 문제로 웹이 다운 되어버립니다. 느낌상 어떤 부분이 지나치게 렌더링이 되면서 다운 되는 느낌인데 뭔지 모르겠습니다.왜 이런 현상이 일어나는지 알 수 있을까요?import { useState } from "react"; import MyComponent from "./components/MyComponent"; function App() { const [count, setCount] = useState(0); function onClick() { setCount(count + 1); } return ( <div> <MyComponent onClick={onClick}/> <div>{count}</div> </div> ); } export default App;import { useEffect, useRef } from "react"; export default function MyComponent({ onClick }) { const onClickRef = useRef(); useEffect(() => { onClickRef.current = onClick; }); useEffect(() => { window.addEventListener('click', onClickRef.current); return () => window.removeEventListener('click', onClickRef.current); }); return ( <div>테스트</div> ); }

제가 setState가 비동기처리이면서 배치이다 라는것을 보면서 궁금한 점이생겼는데요.. onAdd함수를 보면 currentId를 1증가시키고, todo변수에 값을 할당한뒤 setTodoList에 값을 넣어서 렌더링하는 순서인데요. 만약에 동기처리처럼 onAdd버튼을 클릭시 currentId에 1을 증가한후, 그값을 todo에 넣은뒤 그 값을 setTodoList에 반영 하고 싶다고면 어떻게 해야할까요?

AppLayout.prototype = {     children: Protypes.node.isRequired } 꼭 사용해야 next 에서 children 를 사용할수 있는건가요? react에서는 prototype을 사용하지 않고 children를 사용한것으로 기억해서요

질문1.   리덕스사가에 액션이 전달되는 과정 dispatch({ type: LOG_IN_REQUEST, data: { email, password }, }); 위와 같이 로그인 버튼을 눌렀을때 인자로 전달된 액션을 dispatch 하게 되는데. function* watchLogIn() { yield takeLatest(LOG_IN_REQUEST, logIn); } 이후 사가에서  LOG_IN REQUEST 에관한 액션이 왔을떄 login 함수가 실행된다는 흐름은 이해를 했습니다. 하지만 액션객체의 type 속성인 LOG_IN_REQUEST 가 어떻게 위에 takeLatest 의 첫번째 인자로 인식이되어 login 함수가 실행되는지 직관적으로 이해가 가지않습니다. 이미 사가 라이브러이에서 정해진 규칙같은 건가요 ? 액션을 디스패치 할때 {type: `액션타입`} 형태여야만 takeLatest('액션타입') 이 인식이되는지 궁금합니다. 질문2. yield function* logIn(action) { try { console.log('saga logIn'); // const result = yield call(logInAPI); yield delay(1000); => 멈춤? yield put({ => 멈춤? type: LOG_IN_SUCCESS, data: action.data, }); } catch (err) { console.error(err); yield put({ type: LOG_IN_FAILURE, error: err.response.data, }); } } yield 는 중단점 역활을 한다고 이해했습니다. 그럼 위에 takeLatest 의 두번째인자로  위 login 함수가 실행될때 첫번째 yield delay(1000) 이 실행되고 멈추는게아니라 계속에서 아래 yelid put 쪽을 실행되는부분이 이해가 잘 가지않습니다.! 영상 몇번 돌려보고 찾아도 봤는데 스스로 해결하지 못해 질문 드립니다 ㅜㅠ..  

/front/sagas/index.js 에서 axios.defaults.baseURL = 'http://localhost:3065'; axios.defaults.withCredentials = true; 이렇게 공통으로 지정을 해주는데, 만약에 예외적으로 다른 URL을 사용하고 싶으면 어떻게 하나요? function loadPostsAPI(data) {     return axios.get('http://naver.com/test', data); } 이런식으로 개별적으로 URL 넣어주면 될까요? 아니면 애초에 공통URL을 지정해주지 말고 각자 넣어줘야 하는걸까요? 공통URL과 더불어 withCredentials 값도 각자 넣으려면 어떻게 해야하는지 궁금합니다!

인자를 객체로 넘겼다고 에러가 뜨는데, auth를 구현하는 app.get에서 자꾸 문제가 있다고 합니다. 오타는 도저히 못찾겠는데,, 문제가 무엇일까요 const express = require('express') const app = express() const port = 5000 const bodyParser = require('body-parser'); const { User } = require("./models/User"); const config = require('./config/key'); const cookieParser = require('cookie-parser'); const auth = require('./middleware/auth'); // application / x-www-form-urlencoded app.use(bodyParser.urlencoded({extended : true})); // application / json app.use(bodyParser.json()); app.use(cookieParser()); const mongoose = require('mongoose'); //mongoDB 연결 mongoose.connect(config.mongoURI,{ useNewUrlParser: true, useUnifiedTopolongy: true, useCreateIndex: true, useFindAndModify: false }).then(() => console.log('MongoDB connected !')) .catch(err => console.log('MongoDB Error !')); //Hello world 출력 app.get('/', (req, res) => { res.send('Hello World!') }); //register 라우트 app.post('/api/users/register', (req, res) => { // 회원가입 할 때 필요한 정보들을 client으로부터 받아오면 // 그것들을 database에 넣어준다. const user = new User(req.body) user.save((err, userInfo) => { if(err) return res.json({ success : false, err }) return res.status(200).json({ success: true }); }); }); // login 라우트 app.post('/api/users/login', (req, res) => { // console.log('ping') //요청된 이메일을 데이터베이스에서 있는지 찾는다. User.findOne({ email: req.body.email }, (err, user) => { // console.log('user', user) if (!user) { return res.json({ loginSuccess: false, message: "제공된 이메일에 해당하는 유저가 없습니다." }) } //요청된 이메일이 데이터 베이스에 있다면 비밀번호가 맞는 비밀번호 인지 확인. user.comparePassword(req.body.password, (err, isMatch) => { // console.log('err',err) // console.log('isMatch',isMatch) if (!isMatch) return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다." }) //비밀번호 까지 맞다면 토큰을 생성하기. user.generateToken((err, user) => { if (err) return res.status(400).send(err); // 토큰을 저장한다. 어디에 ? 쿠키 , 로컳스토리지 res.cookie("x_auth", user.token) .status(200) .json({ loginSuccess: true, userId: user._id }) }) }) }) }) // auth 라우트 (미들웨어로 사용될 것입니다.) app.get('/api/users/auth', auth, (req, res) => { //여기 까지 미들웨어를 통과해 왔다는 얘기는 Authentication 이 True 라는 말. res.status(200).json({ _id: req.user._id, isAdmin: req.user.role === 0 ? false : true, isAuth: true, email: req.user.email, name: req.user.name, lastname: req.user.lastname, role: req.user.role, image: req.user.image }) }) app.get('/api/users/logout', auth, (req, res) => { // console.log('req.user', req.user) User.findOneAndUpdate({ _id: req.user._id }, { token: "" } , (err, user) => { if (err) return res.json({ success: false, err }); return res.status(200).send({ success: true }) }) }) // 포트를 통해 index.js 를 실행합니다. app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) }); 위는 index.js  const { User } = require('../models/User'); let auth = (req, res, next) => { //인증 처리를 하는곳 //클라이언트 쿠키에서 토큰을 가져온다. let token = req.cookies.x_auth; // 토큰을 복호화 한후 유저를 찾는다. User.findByToken(token, (err, user) => { if (err) throw err; if (!user) return res.json({ isAuth: false, error: true }) // console.log('userh', user) req.token = token; req.user = user; next(); }) } module.exports = { auth };  auth.js // 모듈 (User에서는 데이터 베이스를 위한 몽구스, 유저의 비밀번호 암호화를 위한 비크립트, 유저의 개개인 토큰을 얻기 위한 제이슨웹토큰을 가져온다.) const mongoose = require('mongoose'); const bcrypt = require('bcrypt'); const jwt = require('jsonwebtoken'); // 비밀번호 암호화를 위한 salt 값 설정. salt 값은 암호화된 비밀번호를 해킹하기 어렵게 만들 수 있음. const saltRounds = 10; // 유저의 정보들을 객체화, 이른 바 유저 스키마를 생성한다. ( 몽구스의 메소드 ) // 각 유저들의 이름, 이메일, 비밀번호 등 개인정보를 담기 위한 객체임. 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, default: 0 }, token: { type: String, }, tokenExp: { type: Number }, image : String }) // 유저 스키마 이전에 실행될 것임. userSchema.pre('save', function (next) { var user = this; if (user.isModified('password')) { //비밀번호를 암호화 시킨다. bcrypt.genSalt(saltRounds, function (err, salt) { if (err) return next(err) bcrypt.hash(user.password, salt, function (err, hash) { if (err) return next(err) user.password = hash next() }) }) } else { next() } }) // comparePassword 라는 이름의 유저 스키마 메소드를 생성합니다. ( 당연히 비밀번호 비교를 위한 메소드이겠지요? ) userSchema.methods.comparePassword = function (plainPassword, cb) { //plainPassword 1234567 암호회된 비밀번호 $2b$10$l492vQ0M4s9YUBfwYkkaZOgWHExahjWC bcrypt.compare(plainPassword, this.password, function (err, isMatch) { if (err) return cb(err); cb(null, isMatch); }) } userSchema.methods.generateToken = function (cb) { var user = this; // console.log('user._id', user._id) // jsonwebtoken을 이용해서 token을 생성하기 var token = jwt.sign(user._id.toHexString(), 'secretToken') // user._id + 'secretToken' = token // -> // 'secretToken' -> user._id user.token = token user.save(function (err, user) { if (err) return cb(err) cb(null, user) }) } userSchema.statics.findByToken = function(token, cb) { var user = this; // 토큰을 decode 한다. jwt.verify(token, 'secretToken', function(err, decoded) { // 유저 아이디를 통해서 유저를 찾은 다음에 // 클라이언트에서 가져온 token과 DB에서 가져온 토큰이 일치하는지 확인합니다. user.findOne({ "_id" : decoded, "token" : token }, function(err, user) { if(err) return cb(err); cb(null, user); }) }) } // 유저스키마 => User 라는 이름으로 모델화. const User = mongoose.model('User', userSchema); // 방금 모델화한 User 밖에서도 사용가능하도록 exports. module.exports = { User }; user.js 입니다. 문제가 무엇일까요, ㅠ

index 페이지에 /Posts 요청에서  sequelizeeagerloadingerror Image is not associated to Comment 에러가 나고 로그인도 안되요 models 폴더 말고 다른 파일도 수정해야하는 곳이 있나요?