묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>
Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider> ▶ 3 stack frames were collapsed. LoginPage C:/Users/su/Desktop/infran_node_react_practice/client/src/components/views/LoginPage/LoginPage.js:12 9 | const [Password, setPassword] = useState("") 10 | 11 | > 12 | const dispatch = useDispatch(); | ^ 13 | 14 | const onEmailHandler=(event)=>{ 15 | setEmail(event.currentTarget.value); View compiled 계속 이렇게 에러가 뜨는데..방법을 모르겠습니다.. 해결하신 분 계실까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
TypeError: nextCallback is not a function (next-redux-wrapper 7.0)
next-redux-wrapper가 7.0.0 버전으로 업데이트되면서 수정사항이 생겼습니다. 에러 Server Error TypeError: nextCallback is not a function 해결 방법(변경사항) version 6.0.2 > const getServerSideProps = wrapper.getServerSideProps(async (context) => { context.store.dispatch(~~~); context.store.dispatch(END); await store.sagaTask.toPromise(); }); version 7.0.0 > const getServerSideProps = wrapper.getServerSideProps( (store) => async ({ req, res, ...etc }) => { store.dispatch(~~~); store.dispatch(END); await store.sagaTask.toPromise(); } ); 추가적으로 동적라우팅 (강의 : 다이나믹 라우팅) 할 때도 (req, res, ...etc) > (req, res, params, ...etc) 로 수정하시면 됩니다. next-redux-wrapper 참고 자료(getServerSideProps) (https://github.com/kirill-konshin/next-redux-wrapper#getserversideprops) 변경사항 (https://github.com/kirill-konshin/next-redux-wrapper#upgrade-from-6x-to-7x)
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
사가 관련해서 질문있습니다.
안녕하세요. 강의 수강 중 질문있어서 문의드립니다. 사가 이용하여 api를 호출하는데, 해당 api는 다른 state의 업데이트로 인하여 재 호출 되는 구조입니다. 따라서 페이지 진입 시 동시에 3번이 호출 되는데요, function* loadMaxEpisode() { try { // yield는 await와 비슷 const result = yield call(loadMaxEpisodeAPI); // call 은 동기식, fork.는 비동기 console.log(result) alert(result.data.maxEpisode); yield put({ // put은 dispatch -> 즉, 액션을 dispatch한다. type: LOAD_MAXEPISODE_SUCCESS, data: result.data, // result로 하면 response값이 다 들어온다. }); } catch (err) { yield put({ type: LOAD_MAXEPISODE_FAILURE, data: err.response, }) }} 위 코드에서 result.data의 값이 500이 들어오면 result.action을 찍으면 500500이라는 값으로 보여집니다. (3번 호출 중 2개의 리스폰스 값이 위와 같이 합쳐서 보여지고, 나머지 하나는 정상인 500으로 반환됩니다.) 어느부분이 잘못 된 것인지 감이 안오네요...ㅠ 관련해서 어느 부분을 확인해 봐야할까요??
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
boilerplate 다운로드 및 npm install 시 에러
아직 root 폴더에서 npm install 하는 단계입니다. 에러를 구글링하다보니 windows-build-tools 를 설치해야한다고해서, 관리자권한으로 powershell 실행해서 잘 설치했는데 해결되지 않아서요..ㅠㅠ 어떻게 해야할지 알려주실 수 있을까요? ++ 에러메시지 아래 추천으로 npm config set python 을 실행해봤지만 해결되지 않았습니다. node-pre-gyp WARN Using needle for node-pre-gyp https download node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v83-win32-x64-unknown.tar.gz node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@14.16.0 (node-v83 ABI, unknown) (falling back to source compile with node-gyp) gyp ERR! find Python gyp ERR! find Python Python is not set from command line or npm configuration gyp ERR! find Python Python is not set from environment variable PYTHON gyp ERR! find Python checking if "python" can be used gyp ERR! find Python - "python" is not in PATH or produced an error gyp ERR! find Python checking if "python2" can be used gyp ERR! find Python - "python2" is not in PATH or produced an error gyp ERR! find Python checking if "python3" can be used gyp ERR! find Python - "python3" is not in PATH or produced an error gyp ERR! find Python checking if the py launcher can be used to find Python 2 gyp ERR! find Python - "py.exe" is not in PATH or produced an error gyp ERR! find Python checking if Python is C:\Python27\python.exe gyp ERR! find Python - "C:\Python27\python.exe" could not be run gyp ERR! find Python checking if Python is C:\Python37\python.exe gyp ERR! find Python - "C:\Python37\python.exe" could not be run gyp ERR! find Python gyp ERR! find Python ********************************************************** gyp ERR! find Python You need to install the latest version of Python. gyp ERR! find Python Node-gyp should be able to find and use Python. If not, gyp ERR! find Python you can try one of the following options: gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe" gyp ERR! find Python (accepted by both node-gyp and npm) gyp ERR! find Python - Set the environment variable PYTHON gyp ERR! find Python - Set the npm configuration variable python: gyp ERR! find Python npm config set python "C:\Path\To\python.exe" gyp ERR! find Python For more information consult the documentation at: gyp ERR! find Python https://github.com/nodejs/node-gyp#installation gyp ERR! find Python ********************************************************** gyp ERR! find Python gyp ERR! configure error gyp ERR! stack Error: Could not find any Python installation to use gyp ERR! stack at PythonFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:307:47) gyp ERR! stack at PythonFinder.runChecks (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:136:21) gyp ERR! stack at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:225:16) gyp ERR! stack at PythonFinder.execFileCallback (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:271:16) gyp ERR! stack at exithandler (child_process.js:315:5) gyp ERR! stack at ChildProcess.errorhandler (child_process.js:327:5) gyp ERR! stack at ChildProcess.emit (events.js:315:20) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) gyp ERR! stack at onErrorNT (internal/child_process.js:465:16) gyp ERR! stack at processTicksAndRejections (internal/process/task_queues.js:80:21) gyp ERR! System Windows_NT 10.0.19042 gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\\김하영\\STUDY\\react\\react_study_2\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding\\bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=C:\\김하영\\STUDY\\react\\react_study_2\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding" "--napi_version=7" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v83" gyp ERR! cwd C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt gyp ERR! node -v v14.16.0 gyp ERR! node-gyp -v v5.1.0 gyp ERR! not ok node-pre-gyp ERR! build error node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1) node-pre-gyp ERR! stack at ChildProcess.<anonymous> (C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\node-pre-gyp\lib\util\compile.js:83:29) node-pre-gyp ERR! stack at ChildProcess.emit (events.js:315:20) node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:1048:16) node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5) node-pre-gyp ERR! System Windows_NT 10.0.19042 node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\김하영\\STUDY\\react\\react_study_2\\boilerplate-mern-stack-master\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build" node-pre-gyp ERR! cwd C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt node-pre-gyp ERR! node -v v14.16.0 node-pre-gyp ERR! node-pre-gyp -v v0.14.0 node-pre-gyp ERR! not ok Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\김하 영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1) npm WARN react-redux@5.1.2 requires a peer of react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0 but none is installed. You must install peer dependencies yourself. npm WARN react-redux@5.1.2 requires a peer of redux@^2.0.0 || ^3.0.0 || ^4.0.0-0 but none is installed. You must install peer dependencies yourself. npm WARN react-boiler-plate@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! bcrypt@3.0.8 install: `node-pre-gyp install --fallback-to-build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the bcrypt@3.0.8 install 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! C:\Users\jerem\AppData\Roaming\npm-cache\_logs\2021-04-26T00_37_15_758Z-debug.log
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
504 에러 발생
Failed to load resource: the server responded with a status of 504 (Gateway Timeout) Uncaught (in promise) Error: Request failed with status code 504 이 2개의 콘솔 에러가 발생합니다 어떻게 해결해야 하나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
reducer함수에서 로컬 데이터에 find,filter,push등 해주는 이유가 궁금합니다.
안녕하세요 요즘 SWR과 redux를 섞어쓰고 있는 초보 학생입니다. 지식이 미약해서 부족한 질문이라도 들어주시면 감사하겠습니다. 리듀서 함수에서는 예를들면 이런 코드가 있으면 action.data를 mainPosts 맨앞에 둔다는 뜻인데 case ADD_POST_SUCCESS: draft.mainPosts.unshift(action.data); break; 이 코드는 프런트 환경에서 store에 있는 mainPosts에 action.data를 추가한다는 뜻으로 서버에 요청 상관없이 프론트 환경에서 새로고침 없이 view 변동을 보여주려고 쓰는 건가요? 저는 swr을 사용하면서 서버에서 mainPosts를 불러올때 데이터가 추가되면 mutate 로 체크를 해주었는데요. swr을 사용해서 data를 가져올 경우 굳이 전역스토어에 추가 게시글 데이터를 추가해야되는지?? 의문입니다. 그냥 서버에서 처리해주고 가져오면 되는거 아닌가? 이런 생각이 드는데 경험이 적다보니 아직 잘모르겠습니다. 그리고 선생님 최신강의를 보던중 swr로 전역상태를 관리할수있다는 말을 들었습니다. 근데 이기능은 react-query에 정식 릴리즈 되어있는것 같은데 이걸로 api 콜+전역상태관리 둘다 하게되면 굳이 리덕스를 사용하지 않아도 되는 걸까요?? 리덕스 세팅이나 코드량이 너무 긴 단점이 있지만 반면에 에러 헨들링은 쉽다는 장점이 있어? 의견을 여쭈어 보고싶습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
sagas/index.js의 axios default url을 localhost나 api.nodebird-hyun.shop 으로 바꾸면 ssr 로그인 유지가 안되요
sagas/index.js의 axios default url을 localhost 나 혹은 api.nodebird-hyun.shop 으로 바꾸면 ssr 로그인 유지가 안되요 axios.defaults.baseURL = 'http://127.0.0.1:3065'; // ssr 로그인 유지 o // axios.defaults.baseURL = 'http://localhost:3065'; ssr 로그인 유지 x // axios.defaults.baseURL = 'http://api.nodebird-hyun.shop'; ssr 로그인 유지 x 로그인 시점에서 쿠키가 생성은 되는거 같은데 application 탭을 열어보면 없는데 이유가 무엇일까여? 알려주시면 감사여
-
해결됨실전 리액트 프로그래밍
'react-redux 없이 직접 구현하기' 강의 중 궁금한 점이 있어 질문합니다.
안녕하세요. 강의 'react-redux 없이 직접 구현하기'를 듣던 중 궁금한 점이 있어 질문하게 되었습니다. 강의에서 아래와 같은 코드를 작성하셨습니다. const [, forceUpdate] = useReducer((v) => v + 1, 0); 설명하실 때 "상태값 변경 함수(forceUpdate)를 호출할 때마다. 상태값을 변경하는 코드이다. 이 함수(forceUpdate)가 호출될 때마다 컴포넌트를 렌더링하기 위해 작성했다."라고 말씀하셨습니다. 그런데 여기서 "컴포넌트를 다시 렌더링하는 것은 useState를 써도 되지 않을까?" 하는 생각이 들어 해당 라인에 useReducer를 useState로 바꿔서 실행해보니 오류는 발생하지 않았지만 timeline이 하나밖에 추가가 되지 않았습니다. useReducer를 사용한다는 것은 redux에서 발생하는 모든 action들에 대해 감지를 한다는 뜻일까요? 위의 코드가 정확히 구체적으로 어떤 역할과 효과를 가져오는지 잘 모르겠습니다. 답변 주시면 감사하겠습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
폴더와 파일 구조 질문이 있습니다
제가 예전에 리덕스를 공부할 때 리덕스의 로직순서를 배웠었는데요 이러한 흐름으로 실행이 된다고 배웠습니다 그런데 노드버드 프로젝트에는 컴포넌트의 AppLayout에서 LoginForm 컨테이너를 가져와서 실행하는데, 컨테이너에서 props로 전달하거나, 이 반대로 전달하는 거는프로젝트를 만드는 사람에 따라 다 다른건가요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
회원가입할 때 request payload에 저장되는 정보 노출 안 시키게 할 수 있나요?
안녕하세요 제로초님! 궁금한 부분이 있어 질문 드립니다. 회원가입할 때 개발자도구 network 탭에서 해당 요청의 request payload를 보면 회원가입할 때 입력했던 정보를 그대로 확인할 수 있는데요, 혹시 이거 노출시키지 않도록 설정할 수 있나요? 가령 비밀번호는 암호화 한다는가하는 방법으로요. 실제 실무에서는 이 부분이 보안상 문제가 될 거 같은데, 실무에서는 어떻게 처리하는지 궁금합니다. :) 감사합니다!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
npm run build 오류
안녕하세요 front에서 내용을 수정하고 ec2에서 git pull하고 npm run build과정에서 자꾸 먹통이 나는데 무슨 문제일까요?? 제가 했던 순서는 제로초님 말대로 그냥 로컬 : git commit -am " ~comit msg" git push origin master에서 git에 등록한 후 ubuntu 접속: sudo git pull sudo npm run build 아래의 캡처본과 같이 여기서 자꾸 동작이 멈추게 되네요... pm2 kill하고도 해봤고 pm2를 그대로 실행시킨 상태에서도 해도 똑같네요... 어딜 고쳐야하는 걸까요? (로컬에서 npm run build하면 제대로 작동하고 위의 경우에도 인스턴스 중지 후 다시 재시작해서 build하면 제대로 작동해요)
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
인피니트 스크롤 throttle 두번씩 요청 질문입니다,,,
안녕하세요, redux devtools 로 확인해보면 요청이 두번씩가는데 도데체 이유를 모르겠습니다..ㅠㅠ 코드도 동일하고 throttle 5000도 동일하게 적용했는데 왜그럴까요.. throttle을 설정했는데 요청이 두번갈수가 있나요?
-
해결됨실전 리액트 프로그래밍
BestScore 표현이 NaN 으로만 나타납니다.
한단계식 나아갈때마다 찾지 못할 에러에 빠지네요 ㅠㅠㅠ 전체다 코드 점검을 해본것 같은에,,,,, 제 힘으로 찾아지지가 않습니다 ㅠㅠ BestScore에서 숫자로 표현되지 않고 NaN으로 표현됩니다. 코드는 깃허브 주소에 있습니다. https://github.com/Doha-Dev/game2048 감사합니다!!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
동영상이 아닌 사진 저장
동영상이 아닌 사진으로 올리려고 하는데 사진 사이즈를 바꾸고 렌더 시키고 싶어서 ffmpeg의 screenshot의 옵션 이용했는데 썸네일이 저장이 안되네요 ㅠ 혹시 사진 사이즈를 바꾸고 렌더시킬 수 있는 방법이 있을까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
samesite=none 일 때 쿠키 공유 문제
안녕하세요. 쿠키 관련 질문이 있습니다. front에서 axios로 보낼 때 withcredentials: true 를 해주고 backend에서도 cors에서 credentials : true를 해주었기 때문에 로컬에서 프론트와 백엔드를 같이 돌릴 경우에는 쿠키 공유 문제가 없습니다. 그런데 백엔드를 aws EC2에 두고 프론트 엔드를 로컬에서 돌릴 경우 쿠키가 공유되지 않습니다. 원인은 samesite 정책 때문이고 해결하려면 backend에서 쿠키를 보낼 때 samesite=none과 secure:true를 같이 적용해줘야 한다는 걸 알았습니다. 이를 해결하려면 결국 https 적용을 위해 nginx로 프록시를 만들어 줘야 하는데 다른 방법이 있을까요? 간단한 방법은 로컬에서 계속 테스트 하다가 배포관련 수업에서 하는 것 처럼 도메인을 같이 등록하면 되긴 하지만 이런 경우에도 해결하는 방법이 있는지 궁금합니다.
-
해결됨실전 리액트 프로그래밍
강의를 따라 공부중인데 어디서 막혔는지 모르겠습니다.
키보드 조작하는 부분까지 강의를 따라 만들어둔 상태입니다. (스코어 부분 시작 직전까지, 약 37분 45초까지) * 키보드 동작을 넣기전에는 4x4 셀을 그린 후 두 곳에 랜덤하게 숫자2를 표현하였습니다. * 키보드 동작까지 완료 후 4x4 셀을 그린 후 아무런 타일이 생성되지 않고 있습니다. 키보드 동작시에 에러도 없습니다. 강의 진행 중 아무런 에러도 발생하지 않고 코드를 역추적해가며 살펴봐도 어디 부분에서 잘못을 했는지 찾아지지가 않습니다 ㅠㅠ 도움이 필요합니다! * 깃에 올려둔 코드 주소입니다( https://github.com/Doha-Dev/game2048.git )
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
리덕스 툴킷 유튜브 영상
안녕하세요, 제로초님 강의 잘 보고 있습니다. 예전에 유튜브에 리덕스 툴킷영상이 올라갔던걸로 기억하고, 봐야지... 하고 있었는데 없어졌네요?? 영상에 문제가 있어서 내리셨나요??
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님 질문있습니다.
다른분이 질문하신건데 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 까지 가봤는데 잘 모르겠네요 ㅠㅠ
-
propery 'nickname' of undefined
삭제된 글입니다
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
rootReduecer함수에서 리듀의 초기화
reducers 폴더의 index파일의 rootReducer함수에서 defalut: return state 들어가는이유 설명해주실때 액션타입해서 그 다음상태 만들어주는것을 처리해주는대 리듀서 초기화할때 또 rootReducer함수가 실행이되는대 그때defalut: return state이 부분이 없으면 리턴값이 undefined된다 이렇게 설명해주셨는대 리듀서가 왜 초기화되는지 이유가 궁금합니다!