묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
프로필 페이지에서 새로고침 시 오류
안녕하세요, 처음에 로그인하고 프로필로 들어가면 에러가 안나는데, 프로필페이지에서 새로고침을하면 이런 에러가뜹니다. 팔로워 팔로잉 없을때 오류인줄알고 한명씩 넣어봐도 똑같이 뜨네요,, 그래서 제로초님 코드 복붙해봐도 그대로인거 보면 코드오류는 아닌거같은데 혹시 프로필페이지 에서 새로고침시 오류뜨는거 이거 왜그럴까요..??
-
미해결
리액트 service workers
예전 리액트에서는 앱 인스톨만해도 서비스 워커스라는 파일이 있던데 요즘은 업데이트 되면서 사라진건가요??
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
next.js에서 swr 서버사이드 렌더링 질문드립니다.
next.js에 swr, typescript를 이용해 노드버드 실습을 해보다가 서버사이드 렌더링에 대해 궁금한 게 생겼습니다. 사용자가 만약 로그인을 한 상태일 때, 서버사이드 렌더링을 해서 컴포넌트에 사용자 정보를 넣어준 상태로 페이지가 보여지도록 하고 싶은데요. 강의에서는 pages/index.js에서 리덕스를 이용하여 LOAD_MY_REQUEST 액션을 dispatch 한 뒤, components/AppLayout.js 에서 useSelector로 me 값을 가져 오면 사용자 정보가 담겨진 채로 AppLayout.js 컴포넌트가 랜더링 됩니다. swr을 적용해서 동일하게 구현해보려고 하는데요. swr에서는 page/index.js에서 서버사이드에서 로그인한 사용자 정보롤 가지고 오더라도, components/AppLayout.js에서 useSWR을 사용하면 처음 [로그아웃] 상태일 때의 화면이 잠깐 나오고, [로그인]상태일 때의 모습으로 변합니다. 혹시 swr을 이용해서 pages/index.js에서 서버사이드 렌더링으로 가지고 왔던 값을 components/AppLayout.js에도 페이지 렌더링 초기에 값을 함께 전달해주는 방법은 없을까요? 제가swr을 이용해 아래처럼 적용해봤는데, 다른 방법이 있을까요? pages/index.tsx export const getServerSideProps: GetServerSideProps = async function({ req }) { const cookie: string = req ? req.headers.cookie : ''; if (cookie) { const data = await fetcher.get('/user', { cookie }); if (data) { return { props: { userProps: data }, }; } } return { props: { userProps: null }, }; }; function Index({ userProps }: InferGetServerSidePropsType<typeof getServerSideProps>) { const { data: user } = useSWR<IUser>('/user', fetcher.get, { initialData: userProps }); return <AppLayout>{user ? user.nickname : '로그인해주세요'}</AppLayout>; } components/AppLayout.tsx function AppLayout() { const { data: user } = useSWR<IUser>('/user', fetcher.get); return ( <div css={userNavStyle}> {user ? ( <> <Profile image={user.profile} size='40px' /> </> ) : ( <Link href='/login'> <a href='' className='login'> 로그인 </a> </Link> )} </div> ); }
-
미해결
Refused to load the font '<URL>' because it violates the following Content Security Policy directive: 에러
안녕하세요? 보시는 것 처럼, react(프론트)/nodejs(서버) 로 간단한 앱을 만들고 heroku에 배포했더니 Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. Refused to load the font 'https://fonts.gstatic.com/s/sourcesanspro/v14/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. 이런 오류 메세지가 계속 뜹니다. 많은 구글 결과 아래와 같이 메타태그를 넣어줘도 동일한 에러가 발생합니다. <meta http-equiv="Content-Security-Policy" content="default-src 'self' ; style-src 'self' 'unsafe-inline' https://fonts.gstatic.com/* data:; font-src 'self' data:; "> 정말 몇일 동안 ...이것만 붙들고 있는데도 해결이 안되네요 ㅠㅠ 아시는 분 부탁드립니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그대로 따라한것 같은데 에러가 뜨는데 확인 부탁드립니다.
Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. PS D:\learn-all-with-javascript\grab-market-web> npm install -g create-react-app C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app -> C:\Users\motiongrapher\AppData\Roaming\npm\node_modules\create-react-app\index.js + create-react-app@4.0.3 added 67 packages from 25 contributors in 5.659s PS D:\learn-all-with-javascript\grab-market-web> create -react-app . 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create -react-app . + ~~~~~~ + CategoryInfo : ObjectNotFound: (create:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException create-react-app : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> create-react-app . 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app . + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> create-react-app. 름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create-react-app. + ~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (create-react-app.:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\learn-all-with-javascript\grab-market-web> create-react-app . create-react-app : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\motiongrapher\AppData\Roaming\npm\create-react-app.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + create-react-app . + ~~~~~~~~~~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS D:\learn-all-with-javascript\grab-market-web> npm create-react-app. Usage: npm <command> where <command> is one of: access, adduser, audit, bin, bugs, c, cache, ci, cit, clean-install, clean-install-test, completion, config, create, ddp, dedupe, deprecate, dist-tag, docs, doctor, edit, explore, fund, get, help, help-search, hook, i, init, install, install-ci-test, install-test, it, link, list, ln, login, logout, ls, org, outdated, owner, pack, ping, prefix, profile, prune, publish, rb, rebuild, repo, restart, root, run, run-script, s, se, search, set, shrinkwrap, star, uninstall, unpublish, unstar, up, update, v, version, view, whoami npm <command> -h quick help on <command> npm -l display full usage info npm help <term> search for help on <term> npm help npm involved overview Specify configs in the ini-formatted file: C:\Users\motiongrapher\.npmrc or on the command line via: npm <command> --key value Config info can be viewed via: npm help config npm@6.14.13 C:\Program Files\nodejs\node_modules\npm PS D:\learn-all-with-javascript\grab-market-web> create-react-app. create-react-app. : 'create-react-app.' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이 름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + create-react-app. + ~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (create-react-app.:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\learn-all-with-javascript\grab-market-web>
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기
npm run start 시 cannot find module 에러
강의 내용 중 npm run start하는 과정에서 자꾸 에러가 뜹니다 .. 다음 영상으로의 진도를 못나가는 상황이라 질문 올려봅니다 ㅠㅠ npm run start > chatbot-app@1.0.0 start > node index.js C:\Users\ddffs\Desktop\chatbot-starter\node_modules\grpc\src\grpc_extension.js:57 throw e; ^ Error: Cannot find module 'C:\Users\ddffs\Desktop\chatbot-starter\node_modules\grpc\src\node\extension_binary\node-v93-win32-x64-unknown\grpc_node.node' Require stack: - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\grpc\src\grpc_extension.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\grpc\src\client_interceptors.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\grpc\src\client.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\grpc\index.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\google-gax\build\src\grpc.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\google-gax\build\src\index.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\dialogflow\src\v2\agents_client.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\dialogflow\src\v2\index.js - C:\Users\ddffs\Desktop\chatbot-starter\node_modules\dialogflow\src\index.js - C:\Users\ddffs\Desktop\chatbot-starter\server\routes\dialogflow.js - C:\Users\ddffs\Desktop\chatbot-starter\index.js at Function.Module._resolveFilename (node:internal/modules/cjs/loader:927:15) at Function.Module._load (node:internal/modules/cjs/loader:772:27) at Module.require (node:internal/modules/cjs/loader:999:19) at require (node:internal/modules/cjs/helpers:93:18) at Object.<anonymous> (C:\Users\ddffs\Desktop\chatbot-starter\node_modules\grpc\src\grpc_extension.js:32:13) at Module._compile (node:internal/modules/cjs/loader:1095:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10) at Module.load (node:internal/modules/cjs/loader:975:32) at Function.Module._load (node:internal/modules/cjs/loader:816:12) at Module.require (node:internal/modules/cjs/loader:999:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\grpc\\src\\grpc_extension.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\grpc\\src\\client_interceptors.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\grpc\\src\\client.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\grpc\\index.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\google-gax\\build\\src\\grpc.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\google-gax\\build\\src\\index.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\dialogflow\\src\\v2\\agents_client.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\dialogflow\\src\\v2\\index.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\node_modules\\dialogflow\\src\\index.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\server\\routes\\dialogflow.js', 'C:\\Users\\ddffs\\Desktop\\chatbot-starter\\index.js' ] }
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품 세부설명페이지에서 데이터 값 통신이 안되네요
main 컴포먼트에서는 잘나오는데 상품 세부 페이지 가명 아무것도 안뜨네요 포스트맨으로 http://localhost:8080/products/id 으로 값으로 똑같은 주소를 넣으면 response값은 잘 나오는데 react에서 만 이러네요
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
https적용 후 로그인이 되지 않습니다
안녕하세요 제로초님! 질문있습니다ㅠㅠ 프론트와 백서버 둘 다 https 적용 후, 로그인을 시도하면 저런 식으로 주소에 이메일과 비밀번호가 생기면서 로그인이 되지 않습니다. 무엇을 잘 못 한 건지 예상이 가지 않아서 어디서부터 확인해야 할지 몰라 글을 남깁니다ㅠㅠ 기를 이용해주세요.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
조현영님
현영님 vue, react 프레임워크를 사용하지 않고 바닐라 자바스크립트로 Nodebird 를 만드는 강좌 같은 건 안나오나요!?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
id 태그 질문입니다.
안녕하세요 그랩님. 강좌 잘 듣고 있습니다. 제가 id값을 동일하게 지정해도 한 id값만 적용된다고 배웠는데, 실제로 해 보니 동일한 id값을 갖는 모든 텍스트가 색이 변했습니다. 이렇게 된다면 id와 class에 차이가 없는 것 아닌가요?? --------코드---------- <html> <head> <style type="text/css"> p { color: orange; } #id-test { color: skyblue; } .love { color: #BA68C8; font-size: 100; font-weight: 900; } .love2 { color: #00AAFF; font-size: 100; font-weight: 900; } </style> </head> <body> <p>Hello</p> <p>Hello!</p> <div id="id-test">id</div> <div id="id-test">id</div> <div class="love">class</div> <div class="love2">class</div> </body> </html>
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
boiler_plate에 passport.js 적용 가능할까요?
안녕하세요 강사님의 강의를 완강하고 완성된 프로젝트를 입맛대로 가지고 놀면서 이런저런 기능을 복습도 하고(회원가입에서 핸드폰 번호 받는 기능을 혼자 완성하고 엄청 좋아라 했네요 ㅎㅎ )오류도 혼자 해결해보고 하면서 공부하고 있는 수강생입니다. 그런데 강사님의 유튜브 영상 댓글에서 다른 수강생분이 passport에 관한 질문을 하셨고 강사님이 그에 대해 "굉장히 편리하고 좋은 모듈이이며, sns인증 로그인 등을 매우 간편하게 구현하게 해준다 그런데 기초 강의에서까지 모듈로 로그인을 구현하는건 아닌것 같아서 가장 일반적으로 로그인을 구현하는 방식을 알려드렸다." 라는 내용으로 답변을 하신걸 읽은 기억이 있습니다. 시간이 좀 지나서 저런 내용이 맞았는지 확신은 없네요 ^^;; 제가 궁금한건 이제 저희가 만든 보일러 프로젝트에 sns로그인을 도입을 해보고 싶은데요 passport를 이용하는 방법과 그냥 도입하는건 아무래도 번거로움의 차이가 큰 것 같더라구요 이미 로컬 로그인 방식은 저희가 강의에서 구현을 했고 여기에 passport를 도입해서 sns로그인을 구현 해보고 싶은데 코드간에 충돌을 일으키거나 로그인/회원가입의 방식이 달라서 구현이 불가능하다거나 하는 문제는 없을까요? 혹은 제가 모르는, passport를 도입하는 방법을 알려주는 강사님의 다른 강의가 있을까요??
-
미해결[리뉴얼] 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)
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
vscode 터미널창에서 node 명령어 질문이 있습니다!
npm run start 해서 mongoDB connected.. 됐다고 뜨고 다시 그아래 뭔가 명령어를 칠만한게 작동이 안되더라구요. 따로 되는 방법이 있을까요..?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
포스트맨에서 아래와 같은 오류가 발생합니다.
구글링을 해봐도 모르겠네요 ㅠㅠ POST http://http:/localhost:5000/register Error: getaddrinfo ENOTFOUND http ▶Network ▶Request Headers Content-Type: text/plain User-Agent: PostmanRuntime/7.28.0 Accept: */* Cache-Control: no-cache Postman-Token: 08248e94-9645-4529-9d87-bb1278bcb7f8 Host: http: Accept-Encoding: gzip, deflate, br Connection: keep-alive ▶Request Body ▶POST http://http:/localhost:5000/register ▶POST http://http:/localhost:5000/register ▶POST http://localhost:5000/register ▶POST http://localhost:5000/register ▶
-
해결됨[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
Sequelize raw query store procedure 질문입니다.
안녕하세요 강의 잘 수강하고 있습니다! sequelize raw query로 db 에 미리 작성했던 store procedure 을 호출은 불가능한가요? 구글링, 공식문서에도 찾아봤는데 안나와서 이렇게 질문드립니다! 또한 추가로 raw query 사용을 const [results, metadata] = await sequelize.query("call myTest()"); 위와 같이 작성하였더니 에러로 TypeError: Cannot read property 'query' of undefined 이런식의 에러가 발생하는데 따로 import를 { sequelize } 말고 해주어야 하나요?
-
미해결[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
쿠키부분 reduce관련해서 질문드립니다.
안녕하세요.쿠키부분 reduce관련해서 질문드립니다.제가 평상시 알던 reduce는 reduce((acc,cur,index,arr)=>{})형식으로 사용하고 있었습니다.그런데 해당부분 강좌에서 const parseCookies = (cookie = '') => cookie .split(';') .map(v => v.split('=')) .reduce((acc, [k,v]) => { acc[k.trim()] = decodeURIComponent(v) return acc; }, {}); 이렇게 reduce((acc,[k,v])=>{})이렇게 대괄호로 묶어서 사용하셨더라구요.저의 검색 실력이 부족하고 이것저것 만져봐도 어떤의미로 저걸 사용하셨는지 잘 모르겠어서 이렇게 질문드립니다.
-
해결됨[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
multer를 이용한 이미지 업로드 req.body.url 오류..
multer 수업을 수강한뒤 이미지 업로드를 위해 수업 실습처럼 이미지를 먼저 서버에 전송하여 압축한 뒤 이후에 저는 게시물이 아닌 동아리 정보 등록 폼으로 작성을 하려고 합니다. 실습과 같이 /img 라우터로 res.json을 이용해 url까지 전송하였습니다. 그 후 폼 제출 버튼을 클릭해서 콘솔로 req.body.url을 확인해보면 undefined 라고 나옵니다.. 저는 왜 req.body.url에 정보가 없는건가요??
-
미해결
redis와 nodejs 관련해서 강의가 있을까요?
nodeJS 와 Redis 대규모 서비스를 통한 예제가 있을까요? 관련 강의가 있으면 좋을 것 같은데 아니면 간단한 강의라도 있으면 좋겠습니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
application 에러가 발생하는 이유가 뭘까요...
heroku에 서버 배포한 후 링크에 접속하면 application error라는 화면과 함께 heroku logs --tail라는 명령어를 사용해 에러내역을 확인할 수 있다는 설명이 나오는데요 명령어를 치면 아래와 같은 에러 로그가 나옵니다.. at=error code=H10 desc="App crashed" method=GET path="/" 여기저기 찾아보면서 package.json scripts에 heroku-postbuild 추가하기 package.json engine에 node와 npm 버전을 입력하기 heroku 빌드팩 변경하기 heroku restart하기 procfile 생성하여 web:node index.js 입력하기 이외에도 여러 방법을 다 시도해봐도 해결이 안되네요...
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
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개의 콘솔 에러가 발생합니다 어떻게 해결해야 하나요?