172만명의 커뮤니티!! 함께 토론해봐요.
미해결
Vue로 Nodebird SNS 만들기
안녕하세요, 제로초 선생님. 강의를 끝가지 다 보았으나,, https 적용과 관련된 내용을 찾을 수 없었는데요 nuxt 서버에 적용하는 방법을 알려주시면 감사하겠습니다 ㅠㅠ
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
아이디를 넘겨주는 곳에서 bind로 id 값을 바인딩 해주면 어떨까요? { isEditing ? < MsgInput mutate = { onUpdate . bind ( null , id ) } text = { text } /> : text } < button onClick = { startEdit . bind ( null , id ) } > Fix </ button >
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
product array에 설정한 값이 다 있는 걸 보면 서버가 정상적으로 돌아가는 것 같은데 위에 404에러가 뜨는 이유가 뭘까요.?
미해결
예전 리액트에서는 앱 인스톨만해도 서비스 워커스라는 파일이 있던데 요즘은 업데이트 되면서 사라진건가요??
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
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 > ); }
미해결
안녕하세요? 보시는 것 처럼, 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:; " > 정말 몇일 동안 ...이것만 붙들고 있는데도 해결이 안되네요 ㅠㅠ 아시는 분 부탁드립니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
안녕하세요~ 강사님 수업들으면서 react, redux를 배워나가는 수강생입니다. 다름이 아니라, 저 아래코드에서요 const user를 console.log 를 하니 이렇게 object 나와서, 저 userId를 가져 오려고 했는데요.. 이렇게 하니깐, userId를 읽지 못한다는 에러가 뜨더라구요. (근데 처음에는 읽어오는데, 새로고침하거나 딴 곳으로 리다렉팅하면 못 읽어오는 것 같아요) useSelect으로 위처럼 nested object들을 불러올수가 없는 건가요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
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하는 과정에서 자꾸 에러가 뜹니다 .. 다음 영상으로의 진도를 못나가는 상황이라 질문 올려봅니다 ㅠㅠ 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 적용 후, 로그인을 시도하면 저런 식으로 주소에 이메일과 비밀번호가 생기면서 로그인이 되지 않습니다. 무엇을 잘 못 한 건지 예상이 가지 않아서 어디서부터 확인해야 할지 몰라 글을 남깁니다ㅠㅠ 기를 이용해주세요.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
현영님 vue, react 프레임워크를 사용하지 않고 바닐라 자바스크립트로 Nodebird 를 만드는 강좌 같은 건 안나오나요!?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
npm run start 실행시 ReferenceError: User is not defined라고 에러가 뜨고 포스트맨에서 send시 표기가 안됩니다. 라고 에러가 뜨고 포스트맨에서 send시 표기가 안됩니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
npm run start 실행시 ReferenceError: User is not defined라고 에러가 뜨고 포스트맨에서 send시 표기가 안됩니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
다른 질문 글에 달린 유투브 링크타고 가서 설정하라는데로 했는데 안돼서 이것저것 만지다가 cmd로 변경된거 같은데 계속 오류가 나는데 어떻게 해야하나요???
미해결
Slack 클론 코딩[실시간 채팅 with React]
양질의 강의 정말 잘 보고 있습니다 하지만 에러로 진행을 하지 못하고 있습니다 첫 강의부터 코드를 따라서 타이핑한 결과 > sleact-ts-front@1.0.0 build > cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" NODE_ENV=production webpack [webpack-cli] Unable load 'C:\Users\nogo0\#code\LearnSlackClone\front\webpack.config.ts' [webpack-cli] Unable to use specified module loaders for ".ts". [webpack-cli] ⨯ Unable to compile TypeScript: error TS5083: Cannot read file 'C:\tsconfig-for-webpack-config.json'. [webpack-cli] Cannot find module 'typescript-node/register' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Cannot find module 'typescript-register' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Cannot find module 'typescript-require' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Cannot find module 'sucrase/register/ts' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Cannot find module '@babel/register' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Please install one of them npm ERR! code 2 npm ERR! path C:\Users\nogo0\#code\LearnSlackClone\front npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c cross-env TS_NODE_PROJECT=\tsconfig-for-webpack-config.json\ NODE_ENV=production webpack npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\nogo0\AppData\Local\npm-cache\_logs\2021-06-22T08_10_13_340Z-debug.log C:\Users\nogo0\#code\LearnSlackClone\front>npm run build > front@1.0.0 build > cross-env TS_NODE_PROJECT="tsconfig-for-webpack-config.json" webpack asset app.js 4.13 KiB [emitted] (name: app) ../../../#code/LearnSlackClone/front/client.tsx 39 bytes [not cacheable] [built] [code generated] [1 error] ERROR in ../../../#code/LearnSlackClone/front/client.tsx Module build failed (from ../../../#code/LearnSlackClone/front/node_modules/babel-loader/lib/index.js): Error: Cannot find module 'C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\babel-loader\lib\index.js' Require stack: - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\loadLoader.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\LoaderRunner.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\NormalModule.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\NormalModuleFactory.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\Compiler.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\webpack.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\index.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack-cli\lib\webpack-cli.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack-cli\lib\bootstrap.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack-cli\bin\cli.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\bin\webpack.js at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15) at Function.Module._load (node:internal/modules/cjs/loader:769:27) at Module.require (node:internal/modules/cjs/loader:997:19) at require (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at loadLoader (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\loadLoader.js:19:17) at iteratePitchingLoaders (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\LoaderRunner.js:182:2) at runLoaders (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\LoaderRunner.js:397:2) at NormalModule.doBuild (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\NormalModule.js:646:3) at NormalModule.build (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\NormalModule.js:791:15) at C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\Compilation.js:1242:12 front (webpack 5.24.2) compiled with 1 error in 67 ms npm ERR! code 1 npm ERR! path C:\Users\nogo0\#code\LearnSlackClone\front npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c cross-env TS_NODE_PROJECT=tsconfig-for-webpack-config.json webpack npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\nogo0\AppData\Local\npm-cache\_logs\2021-06-22T08_11_20_386Z-debug.log ------------------------------------------------------- 위와 같은 에러가 발생하였고 갈피를 잡을수없어서 제로초님 깃허브를 참고하여 setting/ts폴더를 통쨰로 복붙하고 기존에 있던 node_modules, package-lcok.json을 삭제하고 npm i로 모두 재설치 했습니다 그럼에도 불구하고 아래같은 에러가 뜨는데 혹시 제가 빠뜨린 부분이 있을까요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
링크 타고 들어가면 justify-contents라고 적혀있는데 실제로는 justify-content로 s를 빼야 하는 것 같습니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요 그랩님. 강좌 잘 듣고 있습니다. 제가 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>
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
안녕하세요 강사님의 강의를 완강하고 완성된 프로젝트를 입맛대로 가지고 놀면서 이런저런 기능을 복습도 하고(회원가입에서 핸드폰 번호 받는 기능을 혼자 완성하고 엄청 좋아라 했네요 ㅎㅎ ) 오류도 혼자 해결해보고 하면서 공부하고 있는 수강생입니다. 그런데 강사님의 유튜브 영상 댓글에서 다른 수강생분이 passport에 관한 질문을 하셨고 강사님이 그에 대해 "굉장히 편리하고 좋은 모듈이이며, sns인증 로그인 등을 매우 간편하게 구현하게 해준다 그런데 기초 강의에서까지 모듈로 로그인을 구현하는건 아닌것 같아서 가장 일반적으로 로그인을 구현하는 방식을 알려드렸다." 라는 내용으로 답변을 하신걸 읽은 기억이 있습니다. 시간이 좀 지나서 저런 내용이 맞았는지 확신은 없네요 ^^;; 제가 궁금한건 이제 저희가 만든 보일러 프로젝트에 sns로그인을 도입을 해보고 싶은데요 passport를 이용하는 방법과 그냥 도입하는건 아무래도 번거로움의 차이가 큰 것 같더라구요 이미 로컬 로그인 방식은 저희가 강의에서 구현을 했고 여기에 passport를 도입해서 sns로그인을 구현 해보고 싶은데 코드간에 충돌을 일으키거나 로그인/회원가입의 방식이 달라서 구현이 불가능하다거나 하는 문제는 없을까요? 혹은 제가 모르는, passport를 도입하는 방법을 알려주는 강사님의 다른 강의가 있을까요??
미해결
Slack 클론 코딩[실시간 채팅 with React]
이렇게 요청 보냈는데 500 에러가나네요.. back 파일이 잘못된걸까요 axios . post ( 'http://localhost:3095/api/users' , { email , nickname , password , }) . then (( response ) => { console . log ( response ); }) . catch (( error ) => { console . log ( error . response ); })
