묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
ORM에 대해 질문드립니다.
이전 질문은 보니 관계형 데이터 베이스로도 강의를 제작할 계획이 있다고 하셨는데요 1. 존안님께서 실무에서 쓰는 DB는 MySQL 인가요?? 2. 그럼 ORM 종류는 무엇으로 하시나요? 시퀼라이즈, 프리즈마.. 등등 어떤것으로 사용하시나요?
-
미해결리액트로 나만의 블로그 만들기(MERN Stack)
새로고침시 로그인이 유지 되지 않습니다.
되게 여러번 따라 했는데, 새로고침 하고난 후 로그인이 유지가 되지 않습니다..ㅠㅠ authSaga 속의 함수들이 제대로 작동하지 않는것 같습니다.... authoSaga속 함수를 호출하는 시작이 어딘지 순서 또한 잘 파악되지 않습니다..ㅠ 계속 401에러가 뜹니다. ㅠㅠ
-
미해결웹 게임을 만들며 배우는 React
바벨을 적용하니까 에러가 나면서 라이크버튼이 적용되지 않습니다.
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)
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
12강, POST를 보내면 [ERR_HTTP_HEADERS_SENT] 에러
- 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
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
name, email, password가 전달이 안됩니다.
보시다시피, 모든 소스 코드 다 제대로 설정한 거 같은데 안됩니다. 도대체 뭘 수정해야 할까요? 무료로 양질의 강의를 제공해주셔서 진심으로 감사드립니다.
-
해결됨웹 게임을 만들며 배우는 React
value에 대해 질문드립니다.
안녕하세요. 강사님께서 알려주신대로 작성한 것 같은데 정답일 때 number(value)의 값이 초기화가 안되어 문의드립니다. 제가 수동으로 지워야만 지워집니다.. 테스트는 크롬으로 진행하였습니다. 따로 스크립트 오류는 안나는 것 같은데 제가 뭘 잘못하고 있는 걸까요? <html> <head> <meta charset="UTF-8" /> <title>구구단</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> class GuGuDan extends React.Component { constructor(props) { super(props); this.state = { first: Math.ceil(Math.random() * 9), // 첫번째값 second: Math.ceil(Math.random() * 9), // 두번째값 value: '', // 입력값 result: '', // 결과값 } } // html 안에 script 를 따로 빼서 onSubmit() 메소드로 변경 onSubmit = (e) => { e.preventDefault(); if(parseInt(this.state.value) === this.state.first * this.state.second) { this.setState({ result: '정답', first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: '', }); } else { this.setState({ result: '땡', value: '', }); } }; onChange = (e) => { this.setState({ value: e.target.value }); }; // 그리기 render() { return ( <div> <div>{this.state.first} * {this.state.second} = ?</div> <form onSubmit={this.onSubmit}> <input type="number" vaule={this.state.value} onChange={ this.onChange } /> <button>입력</button> </form> <div>{this.state.result}</div> </div> ); } } </script> <script type="text/babel"> ReactDOM.render(<GuGuDan />, document.querySelector('#root')); </script> </body> </html>
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
postman에서 email값이 null...
안녕하세요, 수업 정말 감사합니다~! 오타인것 같아서, 선생님 깃허브도 보고 비교하면서 했는데, 여전히 고쳐지지가 않아서, 질문드려요 ㅠ console로 찍었을때, user값이 이 값으로 나오는데, 들어노는게 문제인지 어느 부분이 잘못되었을까요? email값이 null이네요.. ㅠ { role: 0, _id: 5fcf43430591df2796372b6c } https://github.com/cocoball200/react-project 위에 제 깃허브에서 commit 메세지에 error부분들을 고쳤습니다! 항상 감사합니다~!
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
노드버드 검색에 대해서
안녕하세요!! 강의를 구매하고 시작합니다. 그런데 궁금한 점이 있는데..... 구글에서 '노드버드'라고 검색하니깐, 검색이 되는 것을 확인했습니다. 그런데 네이버에서 '노드버드'를 검색을 해보니 아무것도 보이지 않네요?? 1. 네이버 검색엔진에 등록은 안하신 건가요? 2. 네이버에서는 검색엔진 최적화가 안되는 건가요? 3. 개인 포트폴리오를 만들고 싶은데요, 리액트로 블로그를 만들어서 검색엔진 최적화를 하고 싶은데요. 제가 게시물을 작성 한다면.... 그 각자의 게시물이 검색엔진에 의해서 검색이 될 수 있는거죠? p.s. 조현영 강사님~ 리액트로 검색엔진 최적화가 된다길래.. 뒤도 돌아보지 않고 질렀습니다. 강의 열심히 들어볼께요! 그리고 이걸 마스터 하면 다른 타입스크립트 강좌도 구매할 예정입니다^^
-
미해결웹 게임을 만들며 배우는 React
☆ Cannot find module 'babel-preset-env' 오류 해결방법
options: { presets: ['@babel/env', '@babel/react'] } presets: ['@babel/preset-env' ...] 영상에서는 이렇게 나오는데요 "preset-" 얘들을 빼주시면 정상적으로 빌드 됩니다
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
ExperimentalWarning: The fs.promises API is experimental 오류 ㅠㅠ
실행시키면 계속 이 에러만 나요ㅠㅠ 어떻게 해결할 수 있을까요..? 감사합니다! (node:14149) ExperimentalWarning: The fs.promises API is experimental > boiler-plate@1.0.0 start > node index.js Example app listening at http://localhost:5000 { MongoParseError: Invalid connection string at parseConnectionString (/Users/Mia/Documents/boiler-plate/node_modules/mongodb/lib/core/uri_parser.js:565:21) at connect (/Users/Mia/Documents/boiler-plate/node_modules/mongodb/lib/operations/connect.js:282:3) at cb (/Users/Mia/Documents/boiler-plate/node_modules/mongodb/lib/mongo_client.js:224:5) at maybePromise (/Users/Mia/Documents/boiler-plate/node_modules/mongodb/lib/utils.js:665:3) at MongoClient.connect (/Users/Mia/Documents/boiler-plate/node_modules/mongodb/lib/mongo_client.js:220:10) at Promise (/Users/Mia/Documents/boiler-plate/node_modules/mongoose/lib/connection.js:820:12) at new Promise (<anonymous>) at NativeConnection.Connection.openUri (/Users/Mia/Documents/boiler-plate/node_modules/mongoose/lib/connection.js:817:19) at _mongoose._promiseOrCallback.cb (/Users/Mia/Documents/boiler-plate/node_modules/mongoose/lib/index.js:345:10) at Promise (/Users/Mia/Documents/boiler-plate/node_modules/mongoose/lib/helpers/promiseOrCallback.js:31:5) at new Promise (<anonymous>) at promiseOrCallback (/Users/Mia/Documents/boiler-plate/node_modules/mongoose/lib/helpers/promiseOrCallback.js:30:10) at Mongoose._promiseOrCallback (/Users/Mia/Documents/boiler-plate/node_modules/mongoose/lib/index.js:1135:10) at Mongoose.connect (/Users/Mia/Documents/boiler-plate/node_modules/mongoose/lib/index.js:344:20) at Object.<anonymous> (/Users/Mia/Documents/boiler-plate/index.js:9:10) at Module._compile (internal/modules/cjs/loader.js:689:30) name: 'MongoParseError' }
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
제이쿼리와 리액트 합칠 수 있다는 점에서 궁금한 점이 생겻는데요.
리액트 네이티브와 네이티브 언어(스위프트, 코틀린)도 합쳐서 개발을 할 수 있는 걸까요?
-
해결됨실전 리액트 프로그래밍
이전 상태값을 기반으로 다음 상태값을 사용하는 사례가 어떤게 있을까요?
영상 내에서는 이전 상태값을 이용해서 +1을 계속 해주는 예제를 보여주셨는데요! 영상 속 사례에서는 굳이 [count]를 의존성 배열에 안넣어줘도 작동을 하니까 어느 부분에서 유용하게 쓰이는지가 좀 헷갈리더라구요..! 이전 상태값을 기반으로 다음 상태값을 사용하는 사례가 어떤게 있을까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. 제로초님. 질문이 있어 문의 드립니다.
안녕하세요 제로초님, 강의 잘 보고 있다가, 댓글 삭제 기능도 만들고 싶어 만들어 보았는데요... 삭제시 삭제는 되나 새로고침을 해야 사라지는 부분이 있더라구요, 삭제 버튼 클릭시 바로 사라지도록 하고 싶은데 어느 부분이 잘못 됬는지 감이 잡히질 않습니다ㅠㅠ 한번 확인 부탁드려요ㅠㅠ reducer api onClick 삭제 버튼 사가
-
해결됨실전 리액트 프로그래밍
useEffect 실전 활용법2 부분 질문
끝에 첨부한 코드로 실행하면 작동은 잘 됩니다.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> ); }
-
미해결리액트로 나만의 블로그 만들기(MERN Stack)
Redux/saga를 많이 사용하게 되면 불리할까요?
강의와 별개의 내용일수도 있지만, 한가지 여쭙고 싶습니다. 선생님 강의를 듣고 테이블을 좀 많이 사용하는 프로젝트를 하나 해보고 있습니다. 각 테이블마다 saga/reducer를 하나씩 만들고 있는데요, 이럴경우 문제가 될 수 있나요? 공통된 부분은 묶어내고 싶긴 한데, 분류하기가 조금 복잡해서요. 예를 들어, authReducer, customerReducer, productReducer 등등 각 테이블마다 다 만들었거든요. 이런 경우 퍼포먼스 면에서 부족함이 있을까요? 내용이많고 큰 프로젝트보단 중/소 규모의 프로젝트가 리액트에 어울리다라는 이야기를 들은적이 있었지만, 개발하는 사람의 능력에 따라 다르겠지만, 제가 배운 내용을 기반으로 한번 프로젝트를 진행해보고 싶어서 이렇게 시도해보고 있습니다. 강의와 관련있는 질문을 남겨주세요.• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)• 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달에도 요령이 필요합니다.• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요! 구체적인 질문일수록 명확한 답을 받을 수 있어요.• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다. 기본적인 예의를 지켜주세요.• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
제로초님 질문드립니다ㅜㅜ
const express = require('express'); const bcrypt = require('bcrypt'); const { User } = require('../models') // 구조분해 할당 const router = express.Router(); router.post('/', async (req,res,next)=> { try { const exUser = await User.findOne({ where : { email: req.body.email, } }); // 비동기 fidOne 찾는 함수 if (exUser) { return res.status(403).send('이미 사용중인 아이디입니다.'); } const hashedPassword = await bcrypt.hash(req.body.password, 12) await User.create({ email: req.body.email, password: hashedPassword, nickname: req.body.nickname, }) res.status(200).send('success'); } catch (error) { console.error(error); next(error); } }) module.exports = router; 이미 있는 이메일로 가입 했을경우, status 403과 send로 에러 메세지를 보냈습니다. 이미 있는 이메일로 가입 했을 경우에 SIGN_UP_REQUEST 만 실행되고 SIGN_UP_FAILUTE 실행되지 않아 alert창이 뜨질 않습니다 ㅠㅠ 뭐가 문제 일까요..
-
미해결실전 리액트 프로그래밍
setState 비동기 처리관련질문입니다.
제가 setState가 비동기처리이면서 배치이다 라는것을 보면서 궁금한 점이생겼는데요.. onAdd함수를 보면 currentId를 1증가시키고, todo변수에 값을 할당한뒤 setTodoList에 값을 넣어서 렌더링하는 순서인데요. 만약에 동기처리처럼 onAdd버튼을 클릭시 currentId에 1을 증가한후, 그값을 todo에 넣은뒤 그 값을 setTodoList에 반영 하고 싶다고면 어떻게 해야할까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
AppLayout.js 에서
AppLayout.prototype = { children: Protypes.node.isRequired } 꼭 사용해야 next 에서 children 를 사용할수 있는건가요? react에서는 prototype을 사용하지 않고 children를 사용한것으로 기억해서요
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
redux-saga 의 흐름.
질문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 쪽을 실행되는부분이 이해가 잘 가지않습니다.! 영상 몇번 돌려보고 찾아도 봤는데 스스로 해결하지 못해 질문 드립니다 ㅜㅠ..
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
axios.defaults.baseURL 지정 후, 다른 서버에 요청을 보내려면?
/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 값도 각자 넣으려면 어떻게 해야하는지 궁금합니다!
