묻고 답해요

리액트 버전 오류 나시는 분들 참고

해결됨

리액트로 나만의 블로그 만들기(MERN Stack)

node_modules 폴더 삭제 package-lock.json 파일 삭제 package.json 파일 아래 내용으로 대체 대체 후 npm i 명령어 입력 macOS 기준입니다. { "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12", "@testing-library/user-event": "^13.5.0", "bootstrap": "^5.2.0", "connected-react-router": "^6.9.3", "dotenv": "^16.0.1", "react": "^17", "react-dom": "^17", "react-redux": "^8.0.2", "react-router-dom": "^5.3.3", "react-scripts": "5.0.1", "reactstrap": "^9.1.3", "redux": "^4.2.0", "redux-saga": "^1.1.3", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

• redux
• mongodb
• express
• nodejs
• bootstrap
• react

npm install이 안됩니다

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

ilerplate-mern-stack-master\boilerplate-mern-stack-master> npm install npm WARN old lockfile npm WARN old lockfile The package-lock.json file was created with an old version of npm, npm WARN old lockfile so supplemental metadata must be fetched from the registry. npm WARN old lockfile npm WARN old lockfile This is a one-time fix-up, please be patient... npm WARN old lockfile npm WARN deprecated ini@1.3.5: Please update to ini >=1.3.6 to avoid a prototype pollution issue npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated mkdirp@0.5.4: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.) npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated source-map-url@0.4.0: See https://github.com/lydell/source-map-url#deprecated npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797) npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797) npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797) npm WARN deprecated bcrypt@3.0.8: versions < v5.0.0 do not handle NUL in passwords properly npm WARN deprecated node-pre-gyp@0.14.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future npm ERR! code 1 npm ERR! path C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c C:\Users\SAMSUNG\AppData\Local\Temp\install-ca11b823.cmd npm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v102' (1) npm ERR! node-pre-gyp info it worked if it ends with ok npm ERR! node-pre-gyp info using node-pre-gyp@0.14.0 npm ERR! node-pre-gyp info using node@17.4.0 | win32 | x64 npm ERR! node-pre-gyp WARN Using needle for node-pre-gyp https download npm ERR! node-pre-gyp info check checked for "C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node" (not found) npm ERR! node-pre-gyp http GET https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v102-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp http 404 https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v102-win32-x64-unknown.tar.gz npm ERR! 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-v102-win32-x64-unknown.tar.gz npm ERR! node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@17.4.0 (node-v102 ABI, unknown) (falling back to source compile with node-gyp) npm ERR! node-pre-gyp http 404 status code downloading tarball https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v102-win32-x64-unknown.tar.gz npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.0.0 npm ERR! gyp info using node@17.4.0 | win32 | x64 npm ERR! gyp info ok npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.0.0 npm ERR! gyp info using node@17.4.0 | win32 | x64 npm ERR! gyp info find Python using Python version 3.10.2 found at "C:\Users\SAMSUNG\AppData\Local\Programs\Python\Python310\python.exe" npm ERR! gyp ERR! find VS npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details npm ERR! gyp ERR! find VS looking for Visual Studio 2015 npm ERR! gyp ERR! find VS - not found npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8 npm ERR! gyp ERR! find VS npm ERR! gyp ERR! find VS ************************************************************** npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload. npm ERR! gyp ERR! find VS For more information consult the documentation at: npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows npm ERR! gyp ERR! find VS ************************************************************** npm ERR! gyp ERR! find VS npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use npm ERR! gyp ERR! stack at VisualStudioFinder.fail (C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:122:47) npm ERR! gyp ERR! stack at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:75:16 npm ERR! gyp ERR! stack at VisualStudioFinder.findVisualStudio2013 (C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:363:14) npm ERR! gyp ERR! stack at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:71:14 npm ERR! gyp ERR! stack at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:384:16 npm ERR! gyp ERR! stack at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7 npm ERR! gyp ERR! stack at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16 npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:406:5) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:520:28) npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1090:16) npm ERR! gyp ERR! System Windows_NT 10.0.19044 npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\SAMSUNG\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\\Users\\SAMSUNG\\OneDrive\\바탕 화면\\PersonalProjects\\WebProjects\\boilerplate-mern-stack-master\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding\\bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=C:\\Users\\SAMSUNG\\OneDrive\\바탕 화면\\PersonalProjects\\WebProjects\\boilerplate-mern-stack-master\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v102" npm ERR! gyp ERR! cwd C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt npm ERR! gyp ERR! node -v v17.4.0 npm ERR! gyp ERR! node-gyp -v v9.0.0 npm ERR! gyp ERR! not ok npm ERR! node-pre-gyp ERR! build error npm ERR! node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v102' (1) npm ERR! node-pre-gyp ERR! stack at ChildProcess.<anonymous> (C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\node-pre-gyp\lib\util\compile.js:83:29) npm ERR! node-pre-gyp ERR! stack at ChildProcess.emit (node:events:520:28) npm ERR! node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1090:16) npm ERR! node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5) npm ERR! node-pre-gyp ERR! System Windows_NT 10.0.19044 npm ERR! node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\SAMSUNG\\OneDrive\\바탕 화면\\PersonalProjects\\WebProjects\\boilerplate-mern-stack-master\\boilerplate-mern-stack-master\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build" npm ERR! node-pre-gyp ERR! cwd C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt npm ERR! node-pre-gyp ERR! node -v v17.4.0 npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.14.0 npm ERR! node-pre-gyp ERR! not ok npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\SAMSUNG\AppData\Local\npm-cache\_logs\2022-08-08T08_26_57_475Z-debug-0.log vscode는 최신버전을 사용중이고 node -v v17.4.0 npm -v 8.16.0 를 사용하고 있습니다.

• mongodb
• nodejs
• 웹앱
• redux
• react

강의 잘 들었습니다. 감사합니다!

미해결

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

안녕하세요. 진행하신 강의는 웹팩4이므로 저는 웹팩5로 진행하면서 정말 많은 공부가 되었습니다! 한 가지만 빼고 강의 코드를 웹팩5으로 변환시키는 것을 성공하였는데요. BannerPlugin을 사용하기 전에 직접 번들링 코드에 배너를 넣는 부분은 실패했습니다ㅠ 웹팩5에서는 더 이상 assets['main'js].source 함수를 사용하지 않는 것 같았습니다. 해당 함수를 재정의해봤지만 배너가 붙지 않더라구요. 공식문서를 뒤져보면서 이것저것 시도해봤지만 성공하지 못했습니다ㅠ 혹시 여기에 대한 해답이 있으시다면 공유 가능할까요?

• nodejs
• eslint
• 웹팩
• babel

Places 코드가 안돼요.

미해결

코로나맵 개발자와 함께하는 지도서비스 만들기 1

let ps = new naver.maps.service.Piaces(); Places(); 이부분이 안돼요. 검색 기능이 안되요. ㅠㅠ 도와주세요. <! DOCTYPE html > < html > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> < title > myfirstmap </ title > < link rel = "stylesheet" href = "/stylesheets/style.css" /> < script type = "text/javascript" src = "https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=x8m68jepl8" ></ script > < script src = "https://code.jquery.com/jquery-3.6.0.min.js" integrity = "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin = "anonymous" ></ script > < script type = "text/javascript" src = "//dapi.kakao.com/v2/maps/sdk.js?appkey=08431822c52c7e66355e30a38ecf97bc&libraries=services" ></ script > </ head > < body > < div id = "navbar" > myfirstmap </ div > < div id = "infoBox" > < div id = "infoTitle" > 현재날짜 </ div > < div id = "infoConent" > 2022.08.10 </ div > </ div > < div id = "search" > < input id = "search_input" placeholder = "목적지를 입력해주세요" /> < button id = "search_button" > 검색 </ button > </ div > < div id = "current" > 현재 위치 </ div > < div id = "map" style = " width: 100%; height: 100vh " ></ div > < script type = "text/javascript" src = "/data/data.js" ></ script > < script > var mapOptions = { center: new naver . maps . LatLng ( 37.3595704 , 127.105399 ), zoom: 10 , }; var map = new naver . maps . Map ( "map" , mapOptions ); var markerList = []; var infowindowList = []; for ( var i in data ) { var target = data [ i ]; var latlng = new naver . maps . LatLng ( target . lat , target . lng ); marker = new naver . maps . Marker ({ map: map , position: latlng , icon: { content: "<div class='marker'></div>" , anchor: new naver . maps . Point ( 12 , 12 ), }, }); var content = `<div class='infowindow_wrap'> <div class='infowindow_title'> ${ target . title } </div> <div class='infowindow_content'> ${ target . content } </div> <div class='infowindow_date'> ${ target . date } </div> </div>` ; var infowindow = new naver . maps . InfoWindow ({ content: content , backgroundColor: "#00ff0000" , borderColor: "#00ff0000" , anchorSize: new naver . maps . Size ( 0 , 0 ), }); markerList . push ( marker ); infowindowList . push ( infowindow ); } for ( var i = 0 , ii = markerList . length ; i < ii ; i ++) { naver . maps . Event . addListener ( map , "click" , ClickMap ( i )); naver . maps . Event . addListener ( markerList [ i ], "click" , getClickHandler ( i ) ); } function ClickMap ( i ) { return function () { var InfoWindow = infowindowList [ i ]; infowindow . close (); }; } function getClickHandler ( i ) { return function () { var marker = markerList [ i ]; var InfoWindow = infowindowList [ i ]; if ( infowindow . getMap ()) { infowindow . close (); } else { infowindow . open ( map , marker ); } }; } let currentUse = true ; $ ( "#current" ). click (() => { if ( "geolocation" in navigator ) { navigator . geolocation . getCurrentPosition ( function ( position ) { const lat = position . coords . latitude ; const lng = position . coords . longitude ; const latlng = new naver . maps . LatLng ( lat , lng ); if ( currentUse ) { marker = new naver . maps . Marker ({ map: map , position: latlng , icon: { content: '<img class="pulse" draggable="false" unselectable="on" src="https://myfirstmap.s3.ap-northeast-2.amazonaws.com/circle.png" >' , anchor: new naver . maps . Point ( 11 , 11 ), }, }); currentUse = false ; } map . setZoom ( 14 , false ); map . panTo ( latlng ); }); } else { alert ( "위치정보 사용 불가능" ); } }); let ps = new kakao . maps . services . Places (); $ ( "#search_input" ). on ( "keydown" , function ( e ) { if ( e . keyCode === 13 ) { let content = $ ( this ). val (); ps . keywordSearch ( content , placeSearchCB ); } }); function placeSearchCB ( data , status , pagination ) { if ( status === kakao . maps . services . Status . OK ) { let target = data [ 0 ]; const lat = target . y ; const lng = target . x ; const latlng = new naver . maps . LatLng ( lat , lng ); marker = new naver . maps . Marker ({ position: latlng , map: map , }); } else { alert ( "검색결과가 없습니다." ); } } </ script > </ body > </ html >

• express
• 웹앱
• vscode
• nodejs

혹시 git add . 하고나서 바로 git push하면 안될까요?

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

부탁드려요!~

• react
• nodejs

jwt passport 질문입니다

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

2종류의 user테이블 a_user, b_user 테이블을 가지고 있는데 각 유저테이블에 대해 jwt 검증을 나눠서 하고싶은데.. 아무리해도 안되는데 팁이 있을까요

• express
• mongodb
• nodejs
• NestJS
• ssr

안녕하세요! useParams에서 막혀서 질문 남깁니다 ㅠㅠ

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

우선 웹라이브러리 파트의 Link태그 적용 강의에서 후반부에 useParams 를 사용하게 되는데, 이부분부터 무언가 오류가 발생하네요.. 1. 메인화면 들어갔을때 오류화면 2. 상품클릭했을때 콘솔로그 상품을 클릭했을때 변경된 주소까지는잘 적용 되고, useParams 를 사용하기 전까지는 정상 작동 했는데, product 폴더의 index.js 에 useParams 만 넣으면 위처럼 오류가 발생합니다 이전에 소스에서는 문제가 안생겼군요 ㅠㅠ import { useParams } from "react-router-dom"; function ProductPage() { const { id } = useParams(); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage; 오타가 있나 싶어서 소스자료 복붙해도 마찮가지여서 문의로 남깁니다... react-router-dom 설치 할때 버전을 확인 못하고 그냥 설치했다가 나중에 확인해서 5.2 버전으로 다시 설치했는데, package.json 에는 5.2버전으로 정상적으로 보여지긴 하는데 오류내용이 버전이 충돌이 나서 그런건가 싶기도 하고.. 해결 방법이 있을까요? ㅠㅠ

• react-native
• tensorflow
• react
• HTML/CSS
• express
• nodejs
• 머신러닝 배워볼래요?
• javascript

node.js powerShell 실행

미해결

vs 깔아서 nodejs 실행 하려고 npx 만드려고 하는데 거부되었다고 합니다

• nodejs
• node.js
• powershell

에러가 납니다ㅜㅜ

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

강의를 보며 그대로 따라했는데 const query = req.query; console.log("QUERY : ", query); 를 추가했을때 터미널에 node server.js를 하면 에러가 납니다ㅜㅜ

• react
• nodejs
• react-native
• HTML/CSS
• express
• javascript
• 머신러닝 배워볼래요?
• tensorflow

선생님 안녕하세요. 렌더링 질문있습니다.

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

Counter 함수를 정의하고 상태가 변화하면서 리렌더링 되는지 확인하려고 console을 찍어봤는데 영상과 다르게 두 번 찍히더라구요. App.js에서 Counter 컴포넌트를 두 번 정의하지도 않았는데 console이 두 번 찍히는 경우는 어떤게 잘못된걸까요? 소스 코드는 선생님과 동일합니다.

• javascript
• nodejs
• react

port에 따라서 오류가 생기는 경우가 있습니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

안녕하세요. 좋은 강의 잘 듣고 있습니다. 2강에서 express 공식 문서에서 긁어와서 Index.js로 붙여넣는 과정에서 강사님은 port 숫자가 달라도 상관없다고 하셨습니다. 처음에는 강사님 따라서 저도 port를 5000으로 지정했는데 오류가 발생하여 기존 문서에 있던대로 3000으로 지정했더니 잘 작동했습니다. port가 어떤 것을 의미하는지, 왜 3000만 되는지가 궁금하여 질문드립니다. 감사합니다.

• nodejs
• react

Auth()를 처리하는 다른방식.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

export default Auth(LandingPage, null) 저 같은 경우는 위 코드가 안먹혀서 다른 방법을 생각해봤는데요. auth 부분을 export default function _auth ( option , adminRoute = null ) { const navigate = useNavigate () const dispatch = useDispatch () dispatch ( auth ()). then (( response ) => { console . log ( response ) //로그인 하지 않은 상태 if (! response . payload . isAuth ) { if ( option ) { navigate ( "/" ) } } else { //로그인 한 상태 if ( adminRoute && ! response . payload . isAdmin ) { navigate ( "/" ) } else { if ( option === false ) { navigate ( "/" ) } } } }) } 이렇게 수정해주고.. LandingPage 기준으로 Auth ( null ) 이 코드를 넣어준 후 export default LandingPage 이렇게 export해주시면 정상적으로 작동합니다. 다른 페이지도 같은 방식으로 적용해주시면 돼요!

• nodejs
• react

cat repository에서의 오류

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

async existsByEmail ( email : string ): Promise < boolean > { try { const result = await this . catModel . exists ({ email }); return result ; } catch ( error ) { throw new HttpException ( 'db error' , 400 ); } } 에서 return result부분에서 오류가 발생합니다. src/cats/cats.repository.ts:20:7 - error TS2322: Type 'Pick<Document<Cat, any, any>, "_id">' is not assignable to type 'boolean'. 20 return result; ~~~~~~~~~~~~~~ exists() 따라가 보면 리턴타입이 boolean이 아닌거 같은데 어떤 부분을 확인해 보면 좋을까요? console.log로 result를 찍어보면 { _id: new ObjectId~~~} 가 나옵니다.

• mongodb
• express
• nodejs
• ssr
• NestJS

제로초님 질문드리고싶습니다. 이런문제는 왜발생한건지 파일 캡쳐합니다 도저히 이해가 안돼네요 undefined property verify

미해결

Slack 클론 코딩[백엔드 with NestJS + TypeORM]

import { Injectable , ExecutionContext , HttpException , HttpStatus , } from '@nestjs/common' ; import { AuthGuard } from '@nestjs/passport' ; import { JwtService } from '@nestjs/jwt' ; @ Injectable () export class JwtAuthGuard extends AuthGuard ( 'jwt' ) { constructor ( private readonly jwtService : JwtService , // @Inject(forwardRef(() => AdminsService)) // private readonly adminsService: AdminsService, ) { super (); } canActivate ( context : ExecutionContext ) { const request = context . switchToHttp (). getRequest (); const { authorization } = request . headers ; if ( authorization === undefined ) { throw new HttpException ( 'Token 전송 안됨' , HttpStatus . UNAUTHORIZED ); } //const token = authorization.replace('Bearer ', authorization); const token = authorization . replace ( 'Bearer ' , '' ); //console.log(token, 'token!!!'); request . user = this . validateToken ( token ); return true ; } validateToken ( token : string ) { const secretKey = process . env . SECRET ? process . env . SECRET : 'dev' ; try { const data = this . jwtService . verify ( token , { secret : secretKey , }); console . log ( data , '11번가데이터' ); return data ; } catch ( e ) { switch ( e . message ) { // 토큰에 대한 오류를 판단합니다. case 'INVALID_TOKEN' : case 'TOKEN_IS_ARRAY' : case 'NO_USER' : throw new HttpException ( '유효하지 않은 토큰입니다.' , 401 ); case 'EXPIRED_TOKEN' : throw new HttpException ( '토큰이 만료되었습니다.' , 410 ); default : console . trace ( e ); // console.log('광섭짱과 함께하는 코딩공부',) throw new HttpException ( '서버 오류입니다.' , 500 ); } } } } 이부분은 jwt.guard.ts 입니다 저 빨간줄에서 Trace: TypeError: Cannot read properties of undefined (reading 'verify') 이렇게 나오는데 왜 저렇게 나오는건지 도저히 모르겠네요 해당 토큰값도 잘 받아와서 verify 를 이용해 토큰 유효성 검사를 진행하려하는데 그부분에서 에러가 계속 납니다... 도와주세요

• nodejs
• express
• NestJS
• TypeORM

useMemo와 useEffect 차이

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

useMemo 강의 잘 듣고 있습니다. 그런데, useMemo(() => { //생략 }, [data.length]); 한 것과 useEffect(() => { //생략 }, [data.length]); 한 것과 차이가 있을까요? 제가 생각했을때는 둘이 같이 작동할 것 같은데.. 어떻나요?

• nodejs
• javascript
• react

dataId = useRef(0) 질문입니다.

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

const dataId = useRef(0) 질문입니다. 강의 들을 때는 그냥 음~ 하면서 들었는데 나중에 생각해보니.. 왜 useRef를 쓰는 건지 잘 모르겠습니다. 그냥 const [dataId, setDataId] = useState(0); 해도 문제 없을 것 같은데.. 어떨까요??

• javascript
• nodejs
• react

faker2를 통해 blog. comment 생성 시도시의 오류

미해결

mongoDB 기초부터 실무까지(feat. Node.js)

Error: Blog validation failed: comments.blog: Path `comments.blog` is required., comments.user: Path `comments.user` is required., comments.content: Path `comments.content` is required. at ValidationError.inspect (/Users/yungsu2391naver.com/Desktop/mongodb_nodejs tutorial/inflearn_nodejs-mongodb/node_modules/mongoose/lib/error/validation.js:48:26) at formatValue (node:internal/util/inspect:782:19) at inspect (node:internal/util/inspect:347:10) at formatWithOptionsInternal (node:internal/util/inspect:2167:40) at formatWithOptions (node:internal/util/inspect:2029:10) at console.value (node:internal/console/constructor:324:14) at console.log (node:internal/console/constructor:360:61) at /Users/yungsu2391naver.com/Desktop/mongodb_nodejs tutorial/inflearn_nodejs-mongodb/src/routes/blogRoute.js:26:13 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { errors: { 'comments.blog': ValidatorError: Path `comments.blog` is required. at validate (/Users/yungsu2391naver.com/Desktop/mongodb_nodejs tutorial/inflearn_nodejs-mongodb/node_modules/mongoose/lib/schematype.js:1330:13) at SchemaType.doValidate (/Users/yungsu2391naver.com/Desktop/mongodb_nodejs tutorial/inflearn_nodejs-mongodb/node_modules/mongoose/lib/schematype.js:1314:7) at /Users/yungsu2391naver.com/Desktop/mongodb_nodejs tutorial/inflearn_nodejs-mongodb/node_modules/mongoose/lib/document.js:2762:18 at process.processTicksAndRejections (node:internal/process/task_queues:77:11) { properties: [Object], kind: 'required', path: 'comments.blog', value: undefined, reason: undefined, [Symbol(mongoose:validatorError)]: true }, 'comments.user': ValidatorError: Path `comments.user` is required. at validate (/Users/yungsu2391naver.com/Desktop/mongodb_nodejs tutorial/inflearn_nodejs-mongodb/node_modules/mongoose/lib/schematype.js:1330:13) at SchemaType.doValidate (/Users/yungsu2391naver.com/Desktop/mongodb_nodejs tutorial/inflearn_nodejs-mongodb/node_modules/mongoose/lib/schematype.js:1314:7) at /Users/yungsu2391naver.com/Desktop/mongodb_nodejs tutorial/inflearn_nodejs-mongodb/node_modules/mongoose/lib/document.js:2762:18 at process.processTicksAndRejections (node:internal/process/task_queues:77:11) { properties: [Object], kind: 'required', path: 'comments.user', value: undefined, reason: undefined, [Symbol(mongoose:validatorError)]: true }, 'comments.content': ValidatorError: Path `comments.content` is required. at validate (/Users/yungsu2391naver.com/Desktop/mongodb_nodejs tutorial/inflearn_nodejs-mongodb/node_modules/mongoose/lib/schematype.js:1330:13) at SchemaType.doValidate (/Users/yungsu2391naver.com/Desktop/mongodb_nodejs tutorial/inflearn_nodejs-mongodb/node_modules/mongoose/lib/schematype.js:1314:7) at /Users/yungsu2391naver.com/Desktop/mongodb_nodejs tutorial/inflearn_nodejs-mongodb/node_modules/mongoose/lib/document.js:2762:18 at process.processTicksAndRejections (node:internal/process/task_queues:77:11) { properties: [Object], kind: 'required', path: 'comments.content', value: undefined, reason: undefined, [Symbol(mongoose:validatorError)]: true } }, _message: 'Blog validation failed' }

• nodejs
• javascript
• error
• aws
• rest-api
• nodejs
• DBMS/RDBMS
• mongodb
• 데이터 엔지니어링

csp 오류

미해결

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

안녕하세요, htmlWebpackPlugin 관련 질문이 있어서 글 남깁니다. 현재 webpack5, htmlWebpackPlugin5 를 사용해서 예제를 진행하고 있는데, 위와 같은 csp 오류가 발생해서 질문드립니다.

• 웹팩
• babel
• eslint
• nodejs

PositiveIntPipe 생성할때 @Injectable() 사용한 이유

해결됨

탄탄한 백엔드 NestJS, 기초부터 심화까지

안녕하세요! 강의 잘듣고있습니다.!! PositiveIntPipe pipe를 만들때도 의존성 주입을 해야하기 때문에 @Injectable()를 사용하신건가요?? 만약 맞다면 사용한 이유가 궁금합니다.!!( @Injectable 를빼도 작동이 잘되고 파이프도 의존성을 주입해야하나? 라는 궁금증이 있어서 남깁니다!) 감사합니다!

• express
• mongodb
• nodejs
• ssr
• NestJS

mongodb 연결 불가 문제

미해결

탄탄한 백엔드 NestJS, 기초부터 심화까지

안녕하세요. .env에 MONGODB_URI를 못 읽어서 계속 mongodb connect 실패가 발생하고 있습니다. 혹시나 하여 app.modules.ts 에서 @Modules 앞 뒤로 MONGODB_URI를 콘솔로 찍어봤는데 @Modules 전에는 값이 안나오고 이후에는 잘 출력되는데요. 혹시 추가로 확인해야할 부분이 있을까요? 감사합니다.

• express
• mongodb
• nodejs
• NestJS
• ssr