안녕하세요. 강의 잘 보고 있습니다. :)다름이 아니라 run start 시 아래와 같은 문구가 뜨고 있어 질문 드립니다.One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already in your node_modules folder for unrelated reasons, but it may break at any time. babel-preset-react-app is part of the create-react-app project, which is not maintianed anymore. It is thus unlikely that this bug will ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies to work around this error. This will make this message go away. 구글링을 해서 아래 코드를 추가하면 된다고 하여 일단 해결은 하였는데요.npm install --save-dev @babel/plugin-proposal-private-property-in-object 저의 지식으로는 이런 이슈가 왜 발생했고 단순히 저 코드를 추가함으로서 어떻게 해결되었는지 잘 이해가 되지 않아 강의 내용과는 무관하나 여쭤봅니다. 이런 오류를 몇 번 봤었는데 매번 이렇게 코드를 입력해야 하는지 혹시 강사님 께서는 오류 발생 원인과 해결 방법을 아실까요? 감사합니다.

예제 3-2 전역 공간에서의 this(Node.js 환경)실행 결과에 대한 질문입니다.console.log(this); console.log(global); console.log(this === global); 3번째 줄에 실행결과가 false가 나왔습니다.책에서는 true의 결과가 실행된다고 표시되었는데 버전이 바뀌어서 결과가 바뀐 건지 혹은 실행환경의 문제인지 질문합니다.

안녕하세요, 선생님! 완전 입문자 중에 찐입문자, 초보중에 쌩 초보인 사람입니다.아무리 자바스크립트 강의를 들어도 뭔가 개념이 와닿지 않아서 뒤로 넘어가지 못하다 선생님 강의를 만나고 하나씩 개념을 잡아가고 있습니다! (우선 너무 감사드린단 인사 먼저 드려요)강의를 듣다보니 노드랑 메소드라는 표현을 자주 사용하시더라구요.대략적으로 무엇을 가르켜 말씀하시는지는 알겠으나, 정확히 말씀하시는 노드와 메소드에 대해 개념을 잡고 가고 싶어서요..! 한번 정의내려주실 수 있으실까요?

 import { Body, Controller, Post, Res } from '@nestjs/common'; import { AuthService } from './auth.service'; import { LoginUserValue } from './dto/cats.request.dto'; import { Response } from 'express'; @Controller('auth') export class AuthController { constructor(private readonly authService: AuthService) {} @Post() async login(@Body() val: LoginUserValue, @Res() res: Response) { const result = await this.authService.login(val); //cookie에 토큰을 담아서 보내줌 다음과 같이 console.log(result.refreshToken); console.log('여기서 못나가네'); res.setHeader( 'Set-Cookie', `refreshToken=${result.refreshToken}; path=/; `, ); console.log('뭐야 여기오네?'); // res.setHeader( // 'Set-Cookie', // `refreshToken=${result.refreshToken}; path=/; domain=localhost; SameSite=None; Secure; HttpOnly`, // ); // res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); res.json({ accesstoken: result.accessToken }); } }  먼저, 저는 지금 그래프큐엘을 사용하지않고restAPI를 사용하며 진도를 따라가고 있습니다.질문드릴 코드는 위와같이 되어있습니다. 원래는 return을 해주고있었는데 res설정하고 쿠키세팅하고나니까 return이 안먹고 클라이언트에서는 무한대기에 빠집니다. 그래서 혹시나해서 res.json으로 하니까 응답이 또 정상적으로 가더라구요..그래서 일단 다음과 같이 코드를 수정해두고 원래대로 return을 사용하고있는데혹시 정석은 어떻게 해야하는지 알려주시면 감사하겠습니다.임시 수정 코드import { Body, Controller, Post, Req, Res } from '@nestjs/common'; import { AuthService } from './auth.service'; import { LoginUserValue } from './dto/cats.request.dto'; import { Response } from 'express'; @Controller('auth') export class AuthController { constructor(private readonly authService: AuthService) {} @Post() async login( @Body() val: LoginUserValue, @Res({ passthrough: true }) res: Response, ): Promise<any> { const result = await this.authService.login(val); //cookie에 토큰을 담아서 보내줌 다음과 같이 res.setHeader( 'Set-Cookie', `refreshToken=${result.refreshToken}; path=/; `, ); // res.setHeader( // 'Set-Cookie', // `refreshToken=${result.refreshToken}; path=/; domain=localhost; SameSite=None; Secure; HttpOnly`, // ); // res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); return { accesstoken: result.accessToken }; } }  

 현 시점에서 nest공식문서 가보면어센틱케이션에 passport는 없어지고그냥 @nestjs/jwt만 있는것으로 바뀌어있고passport는recipes카테고리로 이동되어있고install 도 $ npm install --save @nestjs/passport passport passport-local $ npm install --save-dev @types/passport-local이렇게 나와있는것으로 보이는데그냥 위 passport따라가면되나요?

.

https://learnwitheunjae.dev/api/sinabro-js/ecommerce혹시나 치기 귀찮으신 분들이 있을꺼 같아 적어놓습니다.그리고 크롬 사용하시는분들은 크롬 확장 프로그램의 JSONVue 을 검색하셔서 추가하시면 웹에서도 json 으로 format 으로 깔끔하게 보실 수 있습니다.

폴더 복사 붙여넣기 후 이름 변경시아래와 같은 에러가 뜬다면뭘 점검해 봐야 하나요?복사 붙이기로 새로 생성된 폴더 안의,파일을 열거나 하지 않았는데,복사 완료 후 폴더명 변경시 왜 오류가 나는 걸까요?답변 주시면 감사하겠습니다.  Error: '03-04-rest-api-with-express-board-'을 (를) 'section03'(Error: EBUSY: resource busy or locked, rename 'c:\study\node_codecamp\class\section03\03-04-rest-api-with-express-board-' -> 'c:\study\node_codecamp\class\section03\03-04-rest-api-with-express-swagger')(으)로 이동할 수 없습니다.

아래 코드를 실행할때마다 오류가 발생해서 여쭤봤습니다. 그전에 startStandaloneServer가 없을때에는 오류는 안나왔지만 grapql페이지로 접속하였을때 빨간불이 들어오고 서버가 제대로 접속되지않아서 방법을 바꾸니 typeerror가 발생했는데 어디에서도 server.addPlugin을 작성하지않았고 공식페이지에서의 방법도 해봤는데 왜 오류가 나는지 찾지를 못했습니다import { ApolloServer } from "apollo-server"; import { startStandaloneServer } from "@apollo/server/standalone"; const typeDefs = `#test # Board에 관한 Query는 # 로직 내에 Query가 없는 채로 실행했을 때 나타나는 # "Error: Query root type must be provided." 에러 방지를 위한 것입니다. type BoardReturn { number: Int writer: String title: String contents: String } type Query { fetchBoards: [BoardReturn] } type Mutation { # 1. 아래에 createTokenOfPhone API의 요청 데이터 타입을 지정해 주세요. createTokenOfPhone(phone : Int) : String } `; const resolvers = { Query: { fetchBoards: (_, args) => { return [ { number: 1, writer: "철수", title: "제목입니다", contents: "내용입니다", }, { number: 2, writer: "영희", title: "좋은 날씨입니다", contents: "내용입니다", }, ]; }, }, Mutation: { createTokenOfPhone: (_, args) => { // 2. 아래 로직을 만들어 주세요. // (힌트: phone.js 내에 존재하는 함수들을 사용해서 로직을 완성해 주시면 됩니다. // 로직 구성이 어려우신 분들은 rest_api 폴더 내에 존재하는 index.js 파일을 참고해 주세요.) // 2-1. 휴대폰번호 자릿수 맞는지 확인하기 const phone = args.phone; if (phone.length > 10 || phone.length < 10) { return "핸드폰 번호 재확인 해주세요"; } // 2-2. 휴대폰 번호 자릿수가 맞다면 핸드폰 토큰 4자리 만들기 const result = String(Math.floor(Math.random() * 1000)).padStart(4, "0"); // 2-3. 만든 토큰을 핸드폰번호에 토큰 전송하기 return `token : ${result}`; }, }, }; const server = new ApolloServer({ typeDefs, resolvers, }); await startStandaloneServer(server); // server.listen(3000).then(({ url }) => { // console.log(`🚀 Server ready at ${url}`); // });

//index.js import express from "express" const app = express() import { checkPhone } from "./phone.js" app.get("/", function (req, res) { res.send("Hello World") }) app.get("/phone", (req, res) => { const p = checkPhone() res.send(p) }) app.listen(3000)  //phone.js export function checkPhone() { return true }  확장자를 생략해도 되는걸로 알고있었는데,확장자를 생략하면 왜 에러가 날까요?ERR_MODULE_NOT_FOUND에러가 나는 이유가 궁금합니다.    

"상품 업로드 기능 구현-2" 강의 중 잘 따라가다가 후반부에서 경로 문제로 인해 문의드립니다.업로드 페이지에서 업로드는 잘 되나, 업로드 후 메인 페이지에서 등록된 이미지가 나오지 않아 확인해보니 "/" 대신에 콘솔에는 캡처1과 같이 "\\" 가 나오고 DB Browser에서는 캡처2와 같이 "\"가 나옵니다. : 캡처1 입니다. : 캡처2 입니다.원인을 찾아보니 windows에서 파일 경로를 다룰 때 "\\"로 하기 때문에 생기는 문제라고 하는데요...어떻게 해결하면 좋을지 모르겠습니다.해결방법을 알려주시면 감사하겠습니다.

Modal.vue 의 style 에 scoped 속성을 주면 왜 slot 의 디자인이 적용되지 않는 건가요??인터넷을 뒤져보니 이렇게 동작하는 게 정상적이라고는 하지만, 정작 왜 그런지는 이해가 안됩니다.그리고 혹시 <style scoped> 를 쓰더라도 slot 에 디자인을 적용시킬 방법은 없을까요?

외부 라이브러리 모듈화 방법(차트)강의 듣고 있는데,App.vue에chart.js 를 import하고mounted() {}사이에 코드를 넣어 주고npm install run 으로 서버를 구동 시켰는데WebSocket connection to 'ws://192.168.2.114:8080/ws' failed: 라는 에러가 발생하네요.해당 강의가 예전에 촬영되어서 현재 상황과 안맞을 수도 있지만, 현 강의 프로젝트 구조에서 해결 방안을 알고 계시면 알려주시면 감사하겠습니다.

 안녕하세요!해당 수업에서 CORS 에러가 발생한 이유를 다른 작성자 분께서 질문해주셨는데, 강사님께서 프론트엔드와 백엔드의 포트가 달라서 그렇다고 대답해주셨습니다. 백엔드에서는 app.listen을 통해 포트를 설정을 해주었지만, 프론트엔드에서는 포트를 설정한 적이 없는데 포트번호를 어떻게 알 수 있나요..?설정하는 방법이 따로 있는건가요?그리고 이전수업에서 한 컴퓨터에서는 프론트엔드와 백엔드의 포트번호가 달라야한다고 말씀하셨는데, 그렇다면 하나의 컴퓨터에서는 same origin이 될 수 없는건가요?

섹션2 Material 학습 중에 있는데요, 강사님 영상에서는 마우스 드래그를 통해 오브젝트가 회전하는데, 저는 안됩니다.^^; 뭔가 세팅을 하는 게 있을 것 같은데, 아마 다 공부하고 나면 알 수 있는거겠죠?

선생님 수업 따라서 열심히 따라 왔는데 여기서 막히네요.해결 좀 부탁드립니다.제가 나이가 53인데 사다리차 운전 하면서 자영업 하는데 다른길좀 가보려고 공부하는 중이거든요. 다른 분들한테는 쉬운걸 텐데 저한테는 어렵네요.구글링 해보고 네이버 도 찾아봣는데 찾을수가 없네요.이걸 해결해야 앞으로 나갈수 있을것 같은데 도와주세요.감사합니다

 이 강의만 들으면 되나요?아니면 파이썬이나 자바는 제가 따로 공부해야하나요?

chapter 15 실습에서 막힙니다.styled-components를 @latest 붙여서 다운받았는데도 실행이 안됩니다.그냥 빈 하얀 화면만 뜹니다...다른 챕터는 확인해보니까 다 되던데, 왜 styled-components 실습만 왜 안될까요?Blocks.jsx 파일 코드import styled from "styled-components"; const Wrapper = styled.div` padding: 1rem; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; background-color: lightgrey; `; const Block = styled.div` padding: ${(props) => props.padding}; border: 1px solid black; border-radius: 1rem; background-color: ${(props) => props.backgroundColor}; color: white; font-size: 2rem; text-align: center; `; const blockItems = [ { label: "1", padding: "1rem", backgroundColor: "red", }, { label: "2", padding: "3rem", backgroundColor: "green", }, { label: "3", padding: "2rem", backgroundColor: "blue", }, ]; function Blocks(props) { return ( <Wrapper> {blockItems.map((blockItem) => { return ( <Block padding={blockItem.padding} backgroundColor={blockItem.backgroundColor} > {blockItem.label} </Block> ); })} </Wrapper> ); } export default Blocks; index.js 파일 코드import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; // import Library from "./chapter_03/Library"; // import Clock from "./chapter_04/Clock"; // import CommentList from "./chapter_05/CommentList"; // import NotificationList from "./chapter_06/NotificationList"; // import Accomodate from "./chapter_07/Accommodate"; // import ConfirmButton from "./chapter_08/ConfirmButton"; // import LandingPage from "./chapter_09/LandingPage"; // import AttendanceBook from "./chapter_10/AttendanceBook"; // import SignUp from "./chapter_11/SignUp"; // import Calculator from "./chapter_12/Calculator"; // import ProfileCard from "./chapter_13/ProfileCard"; // import DarkOrLight from "./chapter_14/DarkOrLight"; import Blocks from "./chapter_15/Blocks"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <Blocks /> </React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();빈 하얀 화면에서 F12 눌러서 오류 확인해보니까 이렇게 뜹니다.Warning: Each child in a list should have a unique "key" prop.Check the render method of Blocks. See https://reactjs.org/link/warning-keys for more information. at O (http://localhost:3000/static/js/bundle.js:43804:6) at BlocksprintWarning @ react-jsx-dev-runtime.development.js:872react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same appSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.printWarning @ react.development.js:209react.development.js:1618 Uncaught TypeError: Cannot read properties of null (reading 'useContext') at Object.useContext (react.development.js:1618:1) at StyledComponent.ts:124:1 at O (StyledComponent.ts:190:1) at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-dom.development.js:21636:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1)2react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same appSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.printWarning @ react.development.js:209react.development.js:1618 Uncaught TypeError: Cannot read properties of null (reading 'useContext') at Object.useContext (react.development.js:1618:1) at StyledComponent.ts:124:1 at O (StyledComponent.ts:190:1) at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-dom.development.js:21636:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1)react-dom.development.js:18687 The above error occurred in the <styled.div> component: at O (http://localhost:3000/static/js/bundle.js:43804:6) at BlocksConsider adding an error boundary to your tree to customize error handling behavior.Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.logCapturedError @ react-dom.development.js:18687react-dom.development.js:26923 Uncaught TypeError: Cannot read properties of null (reading 'useContext') at Object.useContext (react.development.js:1618:1) at StyledComponent.ts:124:1 at O (StyledComponent.ts:190:1) at renderWithHooks (react-dom.development.js:16305:1) at updateForwardRef (react-dom.development.js:19226:1) at beginWork (react-dom.development.js:21636:1) at beginWork$1 (react-dom.development.js:27426:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) at renderRootSync (react-dom.development.js:26434:1) 뭐가 문제일까요?

npm start 하고 localhost:3000으로 접속이 되었고, 리액트 로딩창만 나오고 다음창이 로드가 안됩니다. 터미널에서도 successfully 뜨고 코드도 오류가 없습니다. 왜 로딩이안될까요 ? 단순 컴퓨터문제일까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.function solution(arr) { let answer = 0; let dx = [-1, 0, 1, 0]; let dy = [0, -1, 0, 1]; for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr.length; j++) { console.log(arr[i][j]); for (let k = 0; k < 4; k++) { let nx = i + dx[k]; let ny = j + dy[k]; if ( nx >= 0 && nx < arr.length && ny < arr.length && ny >= 0 && arr[i][j] > arr[nx][ny] ) { answer++; } } } } return answer; }알려주신 것처럼 flag 변수로 아닌 것을 찾아서 숫자를 늘려주는 것과 맞는 경우에 늘려주는 것이 어떤 차이가 있는건지 헷갈리네요...