코드를 혼자 짜보려고 하는 중에 type error:cannot read property 'map' of undefined가 뜹니다. 서버쪽은 postman연동했을때 잘 뜨는데 논리 하자가 있는 것 같습니다..ㅠㅠ뭐가 문제일까요 main/index.js import "./index.css"; import axios from "axios"; import React from "react"; import { API_URL } from "../config/config.js"; function MainPage() {   const [products, setProducts] = React.useState([]);   React.useEffect(function () {     axios       .get(`${API_URL}/products`)       .then(function (result) {         console.log("RESULT값:", result);         const products = result.data.products;         setProducts(products);       })       .catch(function (error) {         console.log("error발생");       });   }, []);   return (     <div>       <div id="banner">         <img src="images/banners/banner1.png" />       </div>       <h1>판매되는 상품들</h1>       <div id="product-list">         {products.map(function (product, index) {           return (             <div className="product-card">               <div>                 <div className="product-contents">                   <span className="product-name">{product.name}</span>                   <span className="product-price">{product.price}원</span>                   <div classNmae="product-footer">                     <div className="product-seller">                       <img                         className="product-avatar"                         src="images/icons/avatar.png"                       />                       <span>{product.seller}</span>                     </div>                   </div>                 </div>               </div>             </div>           );         })}       </div>     </div>   ); } ####App.js export default MainPage; import "./App.css"; import MainPageComponent from "./main"; function App() {   return <MainPageComponent />; } export default App; ##server const express = require("express"); const cors = require("cors"); const app = express(); const port = 7070; const models = require("./models"); app.use(express.json()); app.use(cors()); app.get("/products", (req, res) => {   models.Product.findAll({     attributes: ["id", "name", "price", "imageUrl", "seller", "createdAt"],   })     .then((result) => {       console.log("RESULT값 :", result);       res.send({         product: result,       });     })     .catch((error) => {       console.error("ERROR가 발생하였습니다: ", error);     }); }); app.listen(port, () => {   console.log("그랩 마켓의 서버가 돌아가고 있습니다.");   models.sequelize     .sync()     .then(() => {       console.log("✓ DB 연결 성공");     })     .catch(function (err) {       console.error(err);       console.log("✗ DB 연결 에러");       process.exit();     }); });

질문은 아니구요. 같은 문제로 고생하시는 분들이 많아 제 방법을 공유합니다 1) root 비밀번호 설정 2) 관리자 권한으로 설치 아래는 제가 찾은 링크이니 참고하세요 root 비밀번호 설정 https://heeestorys.tistory.com/877 관리자 권한으로 설치 https://online.codingapple.com/unit/react1-install-create-react-app-npx/

Filter도 결국 middleware에서 처리할 수 있을거 같은데 나누는 이유가 있을까요?

저번 강의까진 노드 모듈스 파일이 없었고 갑자기 생겨서 저도 다운받으려고 create-react-app .을 했는데 사진처럼 뜹니다. web이란 폴더 안에 market_web, marker_server 두개의 폴더가 있고 market_web에 깔려있다고 다른 파일인 marker_server에 깔 수 없는건가요?

안녕하세요, 처음에 로그인하고 프로필로 들어가면 에러가 안나는데, 프로필페이지에서 새로고침을하면 이런 에러가뜹니다. 팔로워 팔로잉 없을때 오류인줄알고 한명씩 넣어봐도 똑같이 뜨네요,, 그래서 제로초님 코드 복붙해봐도 그대로인거 보면 코드오류는 아닌거같은데 혹시 프로필페이지 에서 새로고침시 오류뜨는거 이거 왜그럴까요..??

product array에 설정한 값이 다 있는 걸 보면 서버가 정상적으로 돌아가는 것 같은데 위에 404에러가 뜨는 이유가 뭘까요.?

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> ); }

제가 이 강의의 기초강의인 코로나맵1을 안듣고  바로 2를 들어서 그런지 모르겠지만..  아직 만들지도 않은 tag들에 CSS를 적용 하고 API들의 기능들에 이런저런 설명도 하나 없고~  너무 따라치세요~ 식 강의 아닌가요?  이 강의 5분 들으면  공식문서 뒤져서 id네임은 꼭 저렇게 쓰라고 정해진건지~  map div에 style은 꼭 인라인으로 써야하는 건지  Event는 뭔지,  왜 addEventListener가 아니고 addListener인지  이거저거 하나하나 뒤져가면서 진도를 나가고 있습니다.  이거 강의가 5만원가까이 되는걸로 기억하는데  결과물은 어떨지 모르겠으나  강의 내용이 너무너무 부실하네요!! 

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>

main 컴포먼트에서는 잘나오는데 상품 세부 페이지 가명 아무것도 안뜨네요 포스트맨으로 http://localhost:8080/products/id 으로 값으로 똑같은 주소를 넣으면 response값은 잘 나오는데 react에서 만 이러네요

안녕하세요 제로초님! 질문있습니다ㅠㅠ 프론트와 백서버 둘 다 https 적용 후, 로그인을 시도하면 저런 식으로 주소에 이메일과 비밀번호가 생기면서 로그인이 되지 않습니다. 무엇을 잘 못 한 건지 예상이 가지 않아서 어디서부터 확인해야 할지 몰라 글을 남깁니다ㅠㅠ 기를 이용해주세요.

현영님 vue, react 프레임워크를 사용하지 않고 바닐라 자바스크립트로 Nodebird 를 만드는 강좌 같은 건 안나오나요!?

다른 질문 글에 달린 유투브 링크타고 가서 설정하라는데로 했는데 안돼서 이것저것 만지다가 cmd로 변경된거 같은데 계속 오류가 나는데 어떻게 해야하나요???

안녕하세요 그랩님. 강좌 잘 듣고 있습니다. 제가 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>

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)

현재 서버는 express로 빌드해 LocalHost로 접속이 가능한 상태입니다. 목표는 웹 브라우저에서 Start Button을 누르면 Python 파일을 실행시키고 싶습니다. spawn을 사용하면 터미널에 node spawn 명령을 입력하여 python파일을 터미널에 실행시키는 것이 가능하긴한데, 그 명령을 다른 js 파일에서 버튼 입력을 document.querySelector로 받아와 python 파일을 실행시키는 방법은 혹시 없을까요...?

카카오api의 문제인거 같은데 코딩 실수는 없는거 같은데 무슨 문제인지 여쭤봅니다.

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 입력하기 이외에도 여러 방법을 다 시도해봐도 해결이 안되네요...

isLoggedIn이라는 함수를 따로 만들어 2개의 함수를 사용하는 이유가 isLoggedIn함수를 재사용하기 위해서인지 아님 다른 이유가 있는지 궁금합니다. 제가 생각하기에는 1개의 함수로 만들어 사용할 수 있다고 생각합니다. 

안녕하세요 선생님.. 밑에 사진을 보면 알 수 있겠지만 선생님이 이 전 강의에서 예시로 작성하신 코드에다가 <Script ~~ /> 이 태그를 복습 겸해서 다시 사용해볼려고 했는데 사진처럼 Script로 다른 Aleart("~");이 있는 JS파일을 불러와서 저장하고 브라우저에서 봤는데 아무것도 안뜨고 하얀 화면 밖에 없는데 코드에 무슨 오류가 있길래 실행이 안되는 거에요ㅜㅜ?