안녕하세요.node.js에서 java의 jar파일을 불러서 실행시키고 싶어서 java 모듈을 설치했습니다. (npm install java)그런데 아래 처럼 설치 오류가 나와서 어떻게 해야할지 모르겠습니다. 방법이 있다면 알려주시면 좋겠습니다.npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs npm ERR! code 1 npm ERR! path C:\workspace\test\node_modules\java npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node-gyp rebuild npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.3.1 npm ERR! gyp info using node@18.16.0 | win32 | x64 npm ERR! gyp info find Python using Python version 3.11.3 found at "C:\Python311\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 checking VS2019 (16.11.33529.622) found at: npm ERR! gyp ERR! find VS "C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools" npm ERR! gyp ERR! find VS - found "Visual Studio C++ core features" npm ERR! gyp ERR! find VS - found VC++ toolset: v142 npm ERR! gyp ERR! find VS - missing any Windows SDK npm ERR! gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use 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:\workspace\test\node_modules\node-gyp\lib\find-visualstudio.js:122:47) npm ERR! gyp ERR! stack at C:\workspace\test\node_modules\node-gyp\lib\find-visualstudio.js:75:16 npm ERR! gyp ERR! stack at VisualStudioFinder.findVisualStudio2013 (C:\workspace\test\node_modules\node-gyp\lib\find-visualstudio.js:369:14) npm ERR! gyp ERR! stack at C:\workspace\test\node_modules\node-gyp\lib\find-visualstudio.js:71:14 npm ERR! gyp ERR! stack at C:\workspace\test\node_modules\node-gyp\lib\find-visualstudio.js:390:16 npm ERR! gyp ERR! stack at C:\workspace\test\node_modules\node-gyp\lib\util.js:54:7 npm ERR! gyp ERR! stack at C:\workspace\test\node_modules\node-gyp\lib\util.js:33:16 npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:427:5) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:513:28) npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1091:16) npm ERR! gyp ERR! System Windows_NT 10.0.19045 npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\workspace\\test\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" npm ERR! gyp ERR! cwd C:\workspace\test\node_modules\java npm ERR! gyp ERR! node -v v18.16.0 npm ERR! gyp ERR! node-gyp -v v9.3.1 npm ERR! gyp ERR! not ok npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\yeeun\AppData\Local\npm-cache\_logs\2023-06-07T07_26_56_717Z-debug-0.log 오류를 해결하고자 참조한 링크입니다.https://yuhe-dogspaw.tistory.com/19https://velog.io/@wjs4199/React-npm-install%EC%8B%9C-node-gyp-%EC%97%90%EB%9F%AChttps://www.npmjs.com/package/node-gyp 다음과 같은 시도를 해보았지만 모두 실패 했습니다.해결 시도 1.python 2.x로 다운그레이드visual studio 2019 설치관리자모드 명령프롬프트에서 다음 2개 설치npm install --global node-gypnpm install --global --production windows-build-tools실패 ㅜㅜ해결 시도2.npm install -g node-gypnode-gyp rebuild --python "파이썬 2.x 설치 경로"npm config set python "파이썬 2.x 설치 경로"실패 ㅜㅜ 그리고, 혹시 jar 파일 말고 class 파일을 실행시키는 방법도 있을까요?const java = require('java'); java.classpath.push('jar/test.jar'); const something = java.import('com.house.test.Test'); const instance = new something(); const message = '테스트트트'; instance.fnSync(message);이렇게 사용을 하고 있는데 class 파일로도 실행할 수 있으면 좋겠습니다. 개발pc : window 10 homenode.js 버전 : 18.16 (msi로 설치할 때 강의 초반에 말씀하신 체크박스를 체크하고 설치함)python 버전 : 3.11참고로 window 11 home 혹은 window 10 pro 에서는 설치가 잘 되었습니다. 

App.js에 있는 <BrowserRouter>태그를 Index.js의 Provider위로 감싸주세요 그러니 Loginpage.js등에서 navigate가 정상작동하네요참고하세요.

/client/src/user_action.js에 const request = axios.post('/api/users/login', dataToSubmit) // DB (server/index.js)주소와 /sever/index.js에 app.post('/api/users/login',(req, res) =>{주소를 같게 맞춰 주시면 될듯합니다. 참고해주세요.

npm run dev를 작동시킨 후에 boilder-plate 상에서 오류가 발생하고 있습니다. 해당 부분들은 강의를 따라가면서 현재까지 건드린 적이 없는 부분입니다.

구글링을 통하여 아래와 같이 강의 내용 코드에서 유효성검사를 진행하는 코드를 간단하게 작성하였습니다. 이렇게 하는 방식이 맞을까요?// Middleware import { validationResult } from "express-validator"; export const validatorErrorChecker = async (req, res, next) => { const errors = validationResult(req); if (!errors.isEmpty()) { //에러가 있으면 400 Error return res.status(400).json({ errors: errors.array() }); } next(); } // Controller단 import { Router } from "express"; import { pagination } from "../../../middleware/pagination"; import { body } from "express-validator"; import { validatorErrorChecker } from "../../../middleware/validator" import { UsersDTO, CreateUserDTO, UpdateUserDTO } from "../dto"; import { UserService } from "../service"; // Router class UserController { router; path = "/users"; userService; constructor() { this.router = Router(); this.userService = new UserService(); this.init(); } init() { this.router.get("/", pagination, this.getUsers.bind(this)); this.router.get("/detail/:id", [ //유효성 검사 body('email').exists().isEmail(), body('password').exists().isLength({ min:10, max:20 }), ], this.getUser.bind(this)); this.router.post("/", this.createUser.bind(this)); this.router.patch("/:id", this.updateUser.bind(this)); this.router.delete("/:id", this.deleteUser.bind(this)); } ... } const userController = new UserController(); export default userController;

useState로 number를 만들어서 createBoard로 작성한 게시글의 번호를 저장해두고그 number를 variables로 넣어서 내용을 확인하려고 합니다.import { gql } from "@apollo/client"; import { useQuery } from "@apollo/client"; import { useMutation } from "@apollo/client"; import React, { useState } from "react"; const CREATE_BOARD = gql` mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } } `; const FETCH_BOARD = gql` query fetchBoard($number: Int) { fetchBoard(number: $number) { number writer title contents } } `; const GraphqlMutationArgsPage = () => { const [createBoard] = useMutation(CREATE_BOARD); const { data: fetchBoardData, refetch } = useQuery(FETCH_BOARD); const [number, setNumber] = useState(0); const onClickSubmit = async () => { const result = await createBoard({ variables: { // variables: $ 역할 writer: "훈이", title: "안녕하세요!", contents: "반갑습니다.", }, }); console.log(result); setNumber(result.data.createBoard.number); }; const onClickFetch = async () => { await refetch({ number }); console.log(fetchBoardData); }; return ( <div> <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button> {number} <button onClick={onClickFetch}>GRAPHQL-API 내용확인</button> </div> ); }; export default GraphqlMutationArgsPage; 이렇게 refetch를 사용하는게 맞나요?현재 작성한 게시글이 조회가 안되고 직전 게시글이 조회가 되네요.. 현재 작성한 게시글 number는 13280인데 조회된 게시글은 13279입니다.

안녕하세요.프론트와 백엔드 통신 중에 문제가 있어 질문드립니다.restoreAcessToken 기능을 사용하기 위해서 쿠키를 사용해야 합니다.서버측과 프론트측 주소가 다른 경우 쿠키 정보를 전송하기 위해서는credentials: 'include'로 설정해야 하잖아요?그러면 브라우저에 다음과 같은 오류가 발생합니다.Access to fetch at 'http://localhost:3000/graphql' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.프론트 주소: localhost:8080백엔드 주소: localhost:3000서버측에서 cors 문제를 해결하기 위해 사용한 코드는 아래와 같습니다.app.enableCors({ origin: "http://localhost:8080", // 요청을 보내는 클라이언트의 주소를 명시 credentials: true, });오류 해결을 위해서 어떻게 해야하는 걸까요?  그리고 새 토큰을 발급 받는 아래 setRefreshToken의 코드도 수정돼야 하는지요? network 탭에서는 쿠키가 들어온게 확인이 되는데 application 탭에서는 확인이 됐다 안됐다 합니다..setRefreshToken({ user, res }: IAuthServiceSetRefreshToken): void { const refreshToken = this.jwtService.sign({ email: user.email, sub: user.userId }, { secret: process.env.JWT_REFRESH_KEY, expiresIn: "2w" }); res.setHeader("Set-Cookie", `refreshToken=${refreshToken}; path=/;`); } 답변 부탁드립니다.감사합니다.

package.json에서 "type": "module" 설정 유무에 따라 우선 순위가 다르게 나오는 이유가 궁금합니다.setImmediate(() => { console.log("immediate"); }); process.nextTick(() => { console.log("nextTick"); }); setTimeout(() => { console.log("timeout"); }, 0); Promise.resolve().then(() => console.log("promise"));위의 코드로 설정없이 실행 시 강의 처럼 동일한 결과가 출력되는데설정을 추가 하면 아래처럼 promise가 더 먼저 출력됩니다.이러한 결과에 대한 원인이 궁금합니다!! 

import React from "react"; import PropTypes from "prop-types"; import Link from "next/link"; import { Menu } from "antd"; const AppLayout = ({ children }) => { return ( <div> <Menu mode="horizontal"> <Menu.Item> <Link href="/">노드버드</Link> </Menu.Item> <Menu.Item> <Link href="/profile">프로필</Link> </Menu.Item> <Menu.Item> <Link href="/signup" legacyBehavior> <a>회원가입</a> </Link> </Menu.Item> </Menu> {children} </div> ); }; AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout;이렇게만 해도 디자인 잘 적용 됩니다!

import { UpCircleOutlined } from "@ant-design/icons"; import styled from '@emotion/styled' import { MouseEvent } from "react"; import { useState } from "react"; const MyIcon = styled(UpCircleOutlined)` color: red; font-size: 130px; ` export default function LibaryIconPage(): JSX.Element { const [ count, setCount] = useState(0) const onClickDelete = (event: MouseEvent<HTMLDivElement>): void => { console.log(event.currentTarget.id) setCount(count + 1) console.log(count) } return ( <div id="삭제" onClick={onClickDelete}> <MyIcon />; </div> ) } MyIcon에서 위와 같은 오류가 뜹니다!

알려주신데로 한거 같은데반응이 성공적이지 않았다 400 상태 코드를 받았다고 alert창에 뜨는데.. 어떤게 문제 인지 잘 모르겠네요 ㅠㅠ 네트워크 페이로드를 보면 다 잘 들어간거같은데...페이로드랑 코드입니다.{operationName: "createProduct",…}operationName: "createProduct"query: "mutation createProduct($seller: String, $createProductInput: CreateProductInput!) {\n createProduct(seller: $seller, createProductInput: $createProductInput) {\n id\n _typename\n }\n}"variables: {seller: "김갑수", createProductInput: {pName: "안경", contents: "멋진 안경", price: "15000"}}createProductInput: {pName: "안경", contents: "멋진 안경", price: "15000"}contents: "멋진 안경"pName: "안경"price: "15000"seller: "김갑수"import { gql, useMutation } from "@apollo/client"; import { useState } from "react"; const CREATE_PRODUCT = gql` mutation createProduct( $seller: String $createProductInput: CreateProductInput! ) { createProduct(seller: $seller, createProductInput: $createProductInput) { _id } } `; export default function Boards_05_quiz() { //js const [seller, setSeller] = useState(""); const [pName, setPname] = useState(""); const [contents, setContents] = useState(""); const [price, setPrice] = useState(""); const [createProduct] = useMutation(CREATE_PRODUCT); const onChangeSeller = (event) => { setSeller(event.target.value); }; const onChangePname = (event) => { setPname(event.target.value); }; const onChangeContents = (event) => { setContents(event.target.value); }; const onChangePrice = (event) => { setPrice(event.target.value); }; const onClickHandler = async () => { try { const result = await createProduct({ variables: { seller, createProductInput: { pName, contents, price, }, }, }); console.log(result); } catch (error) { alert(error.message); } }; return ( //html <div> <input type="text" placeholder="판매자명을 입력해주세요" onChange={onChangeSeller} ></input> <input type="text" placeholder="상품명을 입력해주세요" onChange={onChangePname} ></input> <input type="text" placeholder="삼품내용을 입력해주세요" onChange={onChangeContents} ></input> <input type="text" placeholder="상품가격을 입력해주세요" onChange={onChangePrice} ></input> <button onClick={onClickHandler}>상품등록</button> </div> ); }

const onClickSpan = (event: MouseEvent<HTMLSpanElement>) => { alert(event.currentTarget.id + "번 게시물입니다.") console.log(event.currentTarget.id) } const onClickDiv = (event: MouseEvent<HTMLDivElement>) => { alert(event.currentTarget.id + "번 게시물입니다.") console.log(event.currentTarget.id) } const qqq = (event: MouseEvent<HTMLSpanElement>) => { alert("클릭 타이틀") } // map의 특이점 또는 callback함수의 특이점 : 중괄호{} 로 쓰면return 생략 불가능 , () 로 쓰면 return 생략 가능 return( <> <div> {data?.fetchBoards.map((el: any) => ( // 함수타입은 인자 받는 곳에서 타입을 선언해주면됨 <div> <span> <input type='checkbox' /> </span> <span onClick = {() => ( // 안에서 바로 지정해버리는 법 alert(el.number + "번 게시물입니다. 안에서 지정 법") )} style = {mystyle}>{el.number}</span> <span id = {el.number} onClick = {onClickSpan} style = {mystyle}>{el.writer}</span> <span id = {el.number} onClick = {onClickSpan} style = {{margin: "10px"}}>{el.title}</span> <span id = {el.number} onClick = {onClickSpan} style = {{margin: "10px"}}>{el.contents}</span> </div>))} </div> <div> {data?.fetchBoards.map((el: any) => ( // 위에서 처럼 하나하나 지정 말고 한번에 지정하는 법 (이벤트 버블링으로 클릭 이벤트 전파) <div id={el.number} onClick={onClickDiv}> <span> <input type='checkbox' /> </span> <span onClick = {qqq} style = {mystyle}>{el.number}</span> <span style = {mystyle}>{el.writer}</span> <span style = {{margin: "10px"}}>{el.title}</span> <span style = {{margin: "10px"}}>{el.contents}</span> </div>))} </div>위 코드에서 span 태그에는 HTMLSpanElement Div 태그에는 HTMLDivElement 를 적용했는데 'MouseEvent 형식이 제네릭이 아닙니다.' 이 오류가 계속 뜹니다!

npm run dev 명령어를 실행했을 때 다음과 같은 에러 로그가 생성됩니다.react-boiler-plate@1.0.0 dev> concurrently "npm run backend" "npm run start --prefix client"sh: concurrently: command not found

비동기 함수를 왜 굳이 동기처럼 실행시키기 위해 await을 사용하는 건가요?처음부터 함수를 만들때 동기로 만들면 되는거 아닌가요?동기, 비동기가 잘이해가 안가네요..

강사님 안녕하세요, 제가 배운거 바탕으로 포트폴리오를 제작중인데요body 태그에 접근할려면 구글링 해본 결과 _document 파일이 있어야 하는데아무리 찾아봐도 _document가 없더라구요 혹시 body태그에 접근하는방법을여쭤봐도 될까요?※ document.querySelector 접근할 생각을 했는데 react, next.js에서는 되도록이면사용안하는게 좋다고해서 어쩔수없을때는 사용해도 될까요?

선생님 강의 정말 좋네요!정말 상세하게 알기 쉽게 알려주셔서 감사합니다.저는 지금 useState(3)강의를 듣다가여기저기 에러가 나고 있어서 여쭈어 봅니다.혹시 강의 맨 마지막에 올려주신 소스코드에Test.js 파일이 있거나,어떤 파일을 참고해야하는 지 알 수 있을까요?(찾아보고는 있는데 잘 안보이네요.)

안녕하세요.강의를 통해 많은 도움 받고 있습니다.일하면서 배우는 중이라 필요한 내용들을 그때마다 찾아서 공부하고 있습니다. 그런데 강의 특성상 각 단계를 차례대로 따라가지 않으면 새로운 세션을 공부하기 위한 베이스 코드가 없기 때문에 어려움을 겪고 있습니다. 혹시 version2의 각 세션을 시작하기 위한 베이스 코드를 제공해주시기는 어려울까요?감사합니다.

 안녕하세요.섹션29 10-08 강의 약 5:30 부분에서 타입스크립트 에러에 관한 숙제를 내주셨는데요. 해당 숙제와 관련된 해설 및 코드가 있는지 궁금합니다.

안녕하세요? 강의 잘 듣고 있습니다.서버관련해서 몇가지 헷갈리는 개념이 있어서 질문드립니다. 서버가 백엔드만 지칭하는 용어인 줄 알았는데 프론트나 DB에도 서버개념이 있다는 것이 신기했습니다. 단순히 데이터를 제공하는 입장이면 전부 서버라는 용어를 사용해도 되는 것인가요?브라우저와 클라이언트를 같은 개념으로 생각해도 되는지요? 더 나아가 프론트까지? (저는 백엔드 개발을 공부하고 있어서 백엔드입장에서는 브라우저, 클라이언트, 프론트가 전부 같은 포지션으로 생각됩니다.)백엔드서버가 브라우저의 접속도 기다린다고 하셨는데 백엔드서버는 프론트엔드서버하고만 통신하는 것이 아닌가요?예를들어 브라우저(클라이언트?)에서 회원가입창을 클릭하고 프론트서버에서 화면을 보여줍니다.그리고 휴대폰인증번호를 입력한다고 하면, 프론트서버가 그 번호을 받아 백엔드서버로 넘겨줘서 백엔드에서 검증뒤 프론트로 보내주고, 프론트는 인증결과를 브라우저에 표시해줍니다.보통 이런 경우 백엔드는 브라우저가 아니라 프론트하고 교류를 하는 것이 아닌가 생각합니다. 근본적으로 궁금한 것은 클라이언트가 브라우저에서 이런 저런 작업(클릭, 입력)을 했을 때 브라우저, 프론트, 백엔드, DB에서 서로 어떻게 통신을 하는지 내부에서 어떤 작업들이 일어나는지등의 큰 흐름을 알고 싶은데 이건 지금 질문하기보단 강의를 끝까지 들어봐야될것 같네요 ^^;;

섹션 6에서 CRS vs SSR 하나의 프로젝트에 2개를 번갈아가면서 구현된다는 말씀이 있는데, 마이크로프론트엔드를 말씀하시는걸까요? 아님 다른 방법이 있나요?