안녕하세요. 프로시저를 만든는 도중 에러가 발생해서 질문드립니다.똑같이 작성했는데도 에러가 나오네요. 세미콜론도 여러번 확인했는데 혹시 오류가 나는 다른 이유가 있을까요??

안녕하세요 제로초님우분투 서버에서 npm run build를 하는데처음에는ModuleNotFoundError: Module not found: Error: Can't resolve 'immer' in '/home/ubuntu/react-nodebird/front/util'> Build error occurredError: > Build failed because of webpack errorsat build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:15:918)at runMicrotasks (<anonymous>)at processTicksAndRejections (internal/process/task_queues.js:95:5)npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! nodebird@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next buildnpm ERR! Exit status 1npm ERR!npm ERR! Failed at the nodebird@1.0.0 build script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 이 오류가 떠서 다시 immer 설치 후에 git commit, git push, 우분투 서버에서 git pull을 하였습니다. 그 다음에는 굵게 표시한 에러로 바뀌었는데./util/produce.jsAttempted import error: 'enableES5' is not exported from 'immer'.> Build error occurredError: > Build failed because of webpack errorsat build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:15:918)at runMicrotasks (<anonymous>)at processTicksAndRejections (internal/process/task_queues.js:95:5)npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! nodebird@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next buildnpm ERR! Exit status 1npm ERR!npm ERR! Failed at the nodebird@1.0.0 build script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.util/produce 파일은 강의에 나온 파일과 똑같습니다!오류가 왜 나는지 어떻게 해결해야 할지 모르겠어서 질문 남깁니다.. 감사합니다!immer 버전은 "immer": "^9.0.21", 입니다!! 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 현재 react-router-dom 공식사이트에 들어가면이제 creatBrowserRouter가 나오는데 이건 현재 최신버전이 바뀐건가요??저도 BrowsweRouter을 알고있었는데만약에 이런식으로 업데이트 돼서 새로운 버전이 나오면 새로운 버전을 공부하는 게 나을까요?아니면 기존에 사용했던 버전을 사용하는게 맞을까요??

import { useState, useRef, useEffect } from 'react'; function VideoPlayer({ src, isPlaying }) { const ref = useRef(null); useEffect(() => { if (isPlaying) { ref.current.play(); } else { ref.current.pause(); } }); return <video ref={ref} src={src} loop playsInline />; } export default function App() { const [isPlaying, setIsPlaying] = useState(false); return ( <> <button onClick={() => setIsPlaying(!isPlaying)}> {isPlaying ? 'Pause' : 'Play'} </button> <VideoPlayer isPlaying={isPlaying} src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" /> </> ); }위의 코드는 링크에 있는 리액트 공식 문서에 있는 코드입니다https://react.dev/learn/synchronizing-with-effectsuseEffect에서 배열을 생략하면 맨처음에 실행되고 그이후는 리랜더링 될때마다 실행된다는데 이번 강좌에서 리액트는 변경하는 props와 state만 리랜더링한다고 하셨습니다 그럼 useEffect를 배열없이 사용하면 연결된 모든 자식 혹은 부모 컴포넌트에서 리랜더링되는 props와 state가 발견이 되면 useEffect가 작동되는 건가요?

USER와 Profile테이블은 OneToOne 관계입니다.근데 서로 하나씩만 존재하다면 그냥 USER테이블에 Profile을 넣어버리면 되는거 아닌가요?OneToOne 관계를 유지하는 특별한 이유가 있나요??하나의 테이블이 커지는걸 방지하기 위해 OneToOne 관계를 형성하는 걸까요? 

1. mysql 1 : 다 관계인 모델이 2개일때 1 인쪽이 Post 인 모델과 다 인쪽이 Image 인 모델 둘이 묶여 있을때 post.addImages 라는 형식으로 Image가 자동으로 복수형으로 생성되는 걸로 알고있었습니다. 당연히 그런줄알고 (이때 모델명은 그냥 단순예시입니다.) Image가 아니라 Gas 라고 가정할때 post.addGass로 생성되나요? 제가 지금 하고 있는 프로젝트에서 post.addGass 로 사용할시에 post.addGass is not a function 에러가나 혹시나.. Gas의 복수형이 Gass가 아니기 때문에 post.addGas로 넣었더니 돼버렸습니다그게아니라 그냥 add.Gass가 맞는다면 제가 코드를 다시 봐야할꺼같습니다.

안녕하세요 제로초님 제가 개발하다 궁금한 사항이 생겼는데예시를 하나들면프론트 프로세스가 있고백엔드 프로세스가 있을때외부에서 접속가능하게 포트가 열려있는 것은 프론트만 되어있으면 되잖아요.관련해서 백엔드는 CORS 설정 및 차단 이전에 네트워크설정단에서 아예 포트가 외부에서 접속이 아예 안되면 되고그렇다면 ex) axios.defaults.baseURL = 'https://localhost:백엔드포트'; //backend URL즉 URL conntion을 잡을때 열려있는 ip,port가 아닌 localhost로 커넥션을 잡으면 문제가 있을까요?서비스 서버 기준으로전제조건 : 해당 프로세스들이 로컬환경에서 돌아갈경우

오늘 강의를 들어보니까 react는 자동으로 바뀐 props만 랜더링을 한다고 하셨는데 그럼 memo는 부모 노드가 바뀌었을 때 자식 컴포넌트가 랜더링 되는 것을 방지하기위해 자식 컴포넌트에만 적용한다고 생각하면 될까요?그렇다면 memo는 자식컴포넌트가 없을 때는 memo를 사용할 일이 아예 없는 것이 맞나요?

import React from "react"; import PropTypes from "prop-types"; import Link from "next/link"; import { Input, Menu, Row, Col } from "antd"; import { useState, UseMemo } from "react"; import UserProfile from "../components/UserProfile"; import LoginForm from "../components/LoginForm"; import styled from "styled-components"; const { Search } = Input; const onSearch = (value) => console.log(value); const SearchInput = styled(Input.Search)` verticalalign: middle; width: 200px; marginleft: 10px; `; const items = [ { label: <Link href="/">노드버드</Link>, key: "mail", }, { label: ( <div> <Link href="/profile">프로필</Link> <SearchInput placeholder="input search text" enterButton="Search" onSearch={onSearch} /> </div> ), key: "profile", }, { label: <Link href="/signup">회원가입</Link>, key: "signup", }, ]; let tmp = "mail"; const AppLayout = ({ children }) => { const [isLoggedIn, setIsLoggedIn] = useState(false); const [current, setCurrent] = useState(tmp); console.log(current); const onClick = (e) => { console.log("click ", e); setCurrent(e.key); tmp = e.key; }; return ( <div> <Row> <Col span={12} offset={6}> <Menu mode="horizontal" onClick={onClick} selectedKeys={[current]} items={items} /> </Col> </Row> <Row gutter={8}> <Col xs={24} md={6}> {isLoggedIn ? <UserProfile /> : <LoginForm />} </Col> <Col xs={24} md={12}> {children} </Col> <Col xs={24} md={6}> <a href="https://github.com/seroak" target="_blank" rel="noreferrer noopener" > Made by seooak </a> </Col> </Row> </div> ); }; AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout;제가 메뉴를 만들 때 ant 디자인 공식문서를 보고 const item에 요소를 작성해서 메뉴를 만드는 방식으로 코드를 작성했는데 이렇게 작서하니까 SearchInput에 styled 컴포넌트를 적용하는 것이 안됩니다 어떤 방식이 좋을까요?const SearchInput = styled(Input.Search)` verticalalign: middle; width: 200px; marginleft: 10px; `; const items = [ { label: <Link href="/">노드버드</Link>, key: "mail", }, { label: ( <div> <Link href="/profile">프로필</Link> <SearchInput placeholder="input search text" enterButton="Search" onSearch={onSearch} /> </div> ),맨위의 코드가 전체 코드이고 제가 궁금한 부분이 있는 코드는 아래에 있습니다

1.처음 해당 페이지로 이동시 back에있는 데이터만 정상적으로 불러와집니다.2.두번쨰 사진과 세번쨰 사진은 다른페이지로 이동했다가 다시 해당페이지로 돌아올때 useEffect 가 정상적으로 실행, map 함수를 통해 새로운 배열을 만들시에 전에있던 배열데이터가 남아있어 동일한 데이터가 계속 쌓이는 상황입니다. 새로고침시에는 다시 정상적으로 한번만 불러와진 데이터만 보인느데 다른 페이지를 다녀와도 map 함수가 실행될때 전에 있던 데이터는 빈배열로 다시 세팅하고 map 함수가 실행되는 방법이 무엇인지 아무리 찾아봐도 해결이 안되네요.. ㅠㅜ 구원의 손길 부탁드립니다import React, { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Col, Row } from 'antd' import SystemLayout from '../../components/System/SystemLayout'; import SystemCard from '../../components/System/SystemCard'; import { LOAD_SYSTEMS_REQUEST } from '../../reducers/system-post'; const Test = () => { const dispatch = useDispatch(); const { mainSystems } = useSelector((state) => state.systempost); useEffect(() => { dispatch({ type: LOAD_SYSTEMS_REQUEST, }); }, []); return ( <SystemLayout> <Row justify="space-evenly"> {mainSystems.map((systempost) => ( <Col xs={6}> <SystemCard key={systempost.id} systempost={systempost} /> </Col> ))} </Row> </SystemLayout> ); }; export default Test;

안녕하세요 제로초님.post, put, delete 할때 백엔드에서 response에 data를 담아 돌려보내는 보내는 이유가 궁금합니다.프론트에서 post, put, delete 요청을 보내면, 백엔드에서는 db에 업데이트만 하고, 아무것도 안 돌려주고 나서,프론트에서는 response 200 온거 확인한 후에, 프론트 안에서 data를 변경해도 되지 않나요??새로고침 할때는 mounted 할때 일괄적으로 list 보내면 되지 않나요?

강의중 자바스크립트 최신문법을 사용해서 설정했다고 언급(7:35)되는데 "module": "commonjs","target": "ES5",commonjs에 최신문법을 적용해도 상관없는건가요?exnext에 적용하는게 좀더 안정적이지 않을까 생각이 들어서 말씀드립니다.

안녕하세요, 강의 영상을 보면 Body나 Param를 입력하면 맨 위에 import가 자동으로 되던데 vsc extension의 기능인가요?

안녕하세요. 강의 잘 듣고 있습니다.현재 섹션 1까지 모두 수강하였습니다. 다만 제목과 같이 NicknameEditForm, FollowList 구현부터 웹에 렌더가 되지 않아 진도가 막힌 상태입니다...ㅜㅜantd나 스타일 컴포넌트의 문제 같아 환경설정도 변경해보고 VS code를 재다운로드하거나 버전별로 테스트 해보기도 했는데 아직 해결 방법을 찾지 못한 상태입니다. 코드 실행한 결과입니다. 회원 정보 카드 옆에 닉네임 수정 폼이나 팔로우 리스트가 생성되어야 하는데 전혀 뜨질 않네요. 혹시 어떤 해결 방법이 있을까요?아래는 환경과 작성한 코드입니다.{ "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next" }, "author": "kde", "license": "ISC", "dependencies": { "@ant-design/icons": "^5.1.3", "antd": "^4.3.1", "next": "^9.5.5", "prop-types": "^15.8.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-test-renderer": "^17.0.2", "styled-components": "^5.3.11" }, "devDependencies": { "eslint": "^8.41.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0" } }import React, { useCallback } from 'react'; import { Avatar, Button, Card } from 'antd'; const UserProfile = ({ setIsLoggedIn }) => { const onLogOut = useCallback(() => { setIsLoggedIn(false); }, []); return ( <Card actions={[ <div key="twit">짹짹<br/>0</div>, <div key="following">팔로잉<br/>0</div>, <div key="following">팔로워<br/>0</div>, ]} > <Card.Meta avatar={<Avatar>test</Avatar>} title="test" /> <Button onClick={onLogOut}>로그아웃</Button> </Card> ); }; export default UserProfile;import React, { useMemo } from "react"; import { Form, Input } from 'antd'; const NicknameEditForm = () => { return ( <Form style={{ marginBottom: '20px', border: '1px solid #d9d9d9', padding: '20px' }}> <Input.Search addonBefore="닉네임" enterButton="수정"/> </Form> ); }; export default NicknameEditForm;import React from "react"; import PropTypes from 'prop-types'; import { Button, List, Card } from 'antd'; import { StopOutlined } from '@ant-design/icons'; const FollowList = ({ header, data }) => { return ( <List style={{ marginBottom: '20px' }} grid={{ gutter: 4, xs: 2, md: 3 }} size="small" header={<div>{header}</div>} loadMore={<div style={{ textAlign: 'center', margin: '10px 0' }}><Button>더보기</Button></div>} bordered dataSource={data} renderItem={(item) => ( <List.Item style={{ marginTop: '20px' }}> <Card actions={[<StopOutlined key="stop"/>]}> <Card.Meta description={item.nickname}/> </Card> </List.Item> )} /> ); }; FollowList.propTypes = { header: PropTypes.string.isRequired, data: PropTypes.array.isRequired, }; export default FollowListimport React, { useState } from 'react'; import PropTypes from 'prop-types'; import Link from 'next/link'; import { Menu, Input, Row, Col } from 'antd'; import UserProfile from '../components/UserProfile'; import LoginForm from '../components/LoginForm'; // const SearchInput = styled(Input.Search)` // vertical-align: middle; // `; const AppLayout = ({ children }) => { const [isLoggedIn, setIsLoggedIn] = useState(false); return ( <div> <Menu mode="horizontal"> <Menu.Item> <Link href="/"><a>노드버드</a></Link> </Menu.Item> <Menu.Item> <Link href="/profile"><a>프로필</a></Link> </Menu.Item> <Menu.Item> <Link href="/signup"><a>회원가입</a></Link> </Menu.Item> <Menu.Item> <Input.Search enterButton style={{ verticalAlign: 'middle' }}/> </Menu.Item> </Menu> <Row gutter={8}> <Col xs={24} md={6}> {isLoggedIn ? <UserProfile setIsLoggedIn={setIsLoggedIn}/> : <LoginForm setIsLoggedIn={setIsLoggedIn}/>} </Col> <Col xs={24} md={12}> </Col> <Col xs={24} md={6}> <a href="http://google.com" target="_blank" rel="noreferrer noopener">메인화면</a> </Col> </Row> </div> ); }; AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout;import React, { useState, useCallback, useMemo } from 'react'; import { Form, Input, Button } from 'antd'; import Link from 'next/link'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import useInput from '../hooks/useInput'; // const ButtonWrapper = styled.div` // margin-top: 10px; // `; // const FormWrapper = styled(Form)` // padding: 10px; // `; function LoginForm({ setIsLoggedIn }) { const [id, onChangeId] = useInput(''); const [password, onChangePassword] = useInput(''); // const style = useMemo(() => ({ marginTop: 10 }), []); const onSubmitForm = useCallback(() => { console.log(id, password); setIsLoggedIn(true); }, [id, password]); return ( <Form onFinish={onSubmitForm} style={{ padding: '10px' }}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-password">비밀번호</label> <br /> <Input name="user-password" type="password" value={password} onChange={onChangePassword} required /> </div> <div style={{ marginTop: '10px' }}> <Button type="primary" htmlType="submit" loading={false}>로그인</Button> <Link href="/signup"><a><Button>회원가입</Button></a></Link> </div> </Form> ); } LoginForm.propTypes = { setIsLoggedIn: PropTypes.func.isRequired, } export default LoginForm;/* eslint-disable react/jsx-no-undef */ /* eslint-disable no-unused-vars */ import React from 'react'; import Head from 'next/head'; import AppLayout from '../components/AppLayout'; import NicknameEditForm from '../components/NicknameEditForm'; import FollowList from '../components/FollowList'; const Profile = () => { const followerList = [{ nickname: 'test1' }, { nickname: 'test2' }, { nickname: 'test3' }]; const followingList = [{ nickname: 'test1' }, { nickname: 'test2' }, { nickname: 'test3' }]; return ( <> <Head> <title>내 프로필 | NodeBird</title> </Head> <AppLayout> <NicknameEditForm/> <FollowList header="팔로잉 목록" data={followingList}/> <FollowList header="팔로워 목록" data={followerList}/> </AppLayout> </> ); }; export default Profile;

안녕하세요. 강사님지금 sleact db를 생성하였고 table도 다 생성된 상태입니다.nest-typeorm 폴더와 front 폴더 를 둘 다 실행시키면   api/users api를 요청할 때ENOENT: statusCode":404, no such file or directory, stat \public\index.html'이러한 에러가 발생합니다. middlewares/frontend.middleware.ts 파일의 경로가 잘못되어 있나 해서 res.sendFile( path.join(__dirname, '..', '..', '..', 'public', 'index.html'), );를 res.sendFile(path.join(__dirname, '../', 'public', 'index.html'));로 바꿔주었더니api 로그인 페이지로 가지 않고 바로 workspace로 가집니다.response도 html파일로 옵니다. (어떠한 api를 요청해도 마찬가지입니다.) 어떤 부분에서 잘못되었는지 감이 안 잡히네요...힌트라도 주시면 감사하겠습니다! 

안녕하세요? 강의 계속 잘 듣고 있습니다.아래 그림같이 도커강의 듣던중 docker-compose.yaml 파일에서 포트번호가 주석처리된 것을 취소하는 수정작업뒤, 다시 빌드를 하지않고 실행을 해도 된다고 하셨는데 잘 이해가 가지않습니다.Dockerfile안에서 COPY . /myfolder/ 명령어를 실행할 때 docker-compose.yaml 파일도 같이 카피되는 것 아닌가요? 그러면 다시 빌드 해줘야 할것같은데 js파일만 해당하는 건가요? 아직 빌드 개념이 잘 안잡히네요.. 2. 아래 코드는 몽고DB에서 데이터 조회와 등록하는 코드입니다. 여기서 get 메서드에서는 Board.find에 await를 붙이는 것은 이해했습니다. 그런데 post 메서드에서 board.save()에 await를 붙이는 것이 잘 이해가 안갑니다. board.save()에서 response값을 받아오는것도 아니고 단순히 저장작업만 하는 것처럼 보이는데요. 실제로 await를 안 써줘도 정상적으로 저장이 되었습니다. async/await를 어떤 상황에 써야할지 좀 헷갈리네요아 그리고 퀴즈9 하다가 질문합니다.1) 밑에 코드에서 116번줄 Phone.findOne({ phone })에서 Phone.findOne({ phone }).token 이런 식으로 뒤에 .token을 붙이면 userToken에 값이 저장이 안되고 밑에 if문에서 userToken.token 으로하면 token값이 제대로 나오는데 왜 그런가요?2) 다음 질문은 위에 2번질문과 비슷할 수도 있는데 120번줄 await Phone.updateOne({ phone: phone }, { isAuth: true }) 에서 await를 안 붙였더니 db에서 isAuth가 true로 바뀌지 않더라구요. response는 제대로 왔습니다. db에 업데이트하는 과정과 response하는 과정이 독립적일줄 알았는데 그게 아닌가요? -과제하느라 머리가 어질어질해서 질문이 좀 정돈된 것 같지 않은데 양해부탁드립니다. ㅠ ^^;;

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;

안녕하세요.프론트와 백엔드 통신 중에 문제가 있어 질문드립니다.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가 더 먼저 출력됩니다.이러한 결과에 대한 원인이 궁금합니다!!