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 > ); }
python / pyautogui / pillow 모두 최신 버젼으로 되어 있습니다. vscode 상에서 b = pyautogui . locateCenterOnScreen ( ' five.png ' , confidence = 0.7 ) print ( b ) 다음처럼 five.png 이미지 파일 가운데 좌표를 출력하고 싶은데 런하면 터미널에 다음과 같은 에러가 뜹니다 ㅠㅠ PyScreezeException('The Pillow package is required to use this function.') 이미 pillow 라이브러리가 설치가 되어 있음에도 이런 에러가 왜 발생할까요? 이걸 해결하기 위해서 1) pillow > pyautogui 순으로 재설치 2) cmd 관리자 실행으로 해서 강제 재설치 3) 과거 PIL 라이브러리 있으면 삭제 모두 해보았지만 그대로 에러가 뜨는 상황입니다. python이 3.9.6 버젼인데 호환이 안 맞는게 문제인걸까요? 도와주세요 ㅠㅠ
- 학메뉵 없는 경우 습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중Debug with python 메뉴가 없어요ㅠㅠ하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요? 보시는 것 처럼, 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들을 불러올수가 없는 건가요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 Page not found (404) Request Method: GET Request URL: http://127.0.0.1:8000/ Using the URLconf defined in pragmatic.urls , Django tried these URL patterns, in this order: admin/ account/ The empty path didn’t match any of these. You’re seeing this error because you have DEBUG = True in your Django settings file. Change that to False , and Django will display a standard 404 page. . 밑에는 제 코드 입니다. 밑에 보시는 것 처럼 accoutapp이 추가되어있는데 왜 저런 에러가 발생하는 것인가요? INSTALLED_APPS = [ 'django.contrib.admin' , 'django.contrib.auth' , 'django.contrib.contenttypes' , 'django.contrib.sessions' , 'django.contrib.messages' , 'django.contrib.staticfiles' , 'accountapp' , ]
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>
안녕하세요 제로초님! 질문있습니다ㅠㅠ 프론트와 백서버 둘 다 https 적용 후, 로그인을 시도하면 저런 식으로 주소에 이메일과 비밀번호가 생기면서 로그인이 되지 않습니다. 무엇을 잘 못 한 건지 예상이 가지 않아서 어디서부터 확인해야 할지 몰라 글을 남깁니다ㅠㅠ 기를 이용해주세요.
양질의 강의 정말 잘 보고 있습니다 하지만 에러로 진행을 하지 못하고 있습니다 첫 강의부터 코드를 따라서 타이핑한 결과 > 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로 모두 재설치 했습니다 그럼에도 불구하고 아래같은 에러가 뜨는데 혹시 제가 빠뜨린 부분이 있을까요?
