회원가입 피그마 정답이 있는지 궁금하네요 열심히 만들었는데 비교를 할 수가 없어서 문제이네요최대한 비슷하게 했는데 미묘하게 달라서 제가 맞게 한건지 모르겠네요 섹션 7에 파이널 정답이 있는건 아는데 섹션2랑은 많이 달라서 문제네요  

회원가입 페이지 만들기(커스텀 훅) 강의를 듣던 중 질문 남깁니다.스타일 객체를 컴포넌트 바깥에 적으면 리랜더링을 줄일 수 있나요? 강의에서 style props값을 넣어줄때 객체로 넣어주면 react는 {} === {} //false이기에 매번 다르게 인식해서 리랜더 돌기에 useMemo를 해주면 좋다고 들었습니다.그런데, antd예시를 보니 style 객체를 컴포넌트 바깥에 두는 경우도 있더라구요.import { Button, Form, Input, } from 'antd'; const tailFormItemLayout = { wrapperCol: { xs: { span: 24, offset: 0, }, sm: { span: 16, offset: 8, }, }, }; const App = () => { const [form] = Form.useForm(); return ( <Form form={form} name="register" > <Form.Item name="agreement" valuePropName="checked" {...tailFormItemLayout} > <Checkbox> I have read the <a href="">agreement</a> </Checkbox> </Form.Item> </Form> ); }; export default App;이처럼 stlye에 담길 객체를 App 컴포넌트 바깥에 넣어두면 App이 랜더링되는 것과는 별개로 전역 선언된 거니까 리랜더 문제가 없는건 아닐까 궁금하여 문의 남깁니다.한마디로 App이 호출되서 랜더링 될때 tailFormItemLayout는 바깥에 선언되어있으니 리랜더 될 일이 없지 않을까..? 강의 잘 듣고 있습니다. 현명한 질문을 한 건지 모르겠네요. 답변기다리겠습니다. 감사합니다.

package-lock.jspackage.jsontsconfig.json src디렉터리강의 보면 다운받아서 초기설정해주는것같은데얘네는 개발자가 원래 다 직접 쳐야하나요???아니면매번 파일들을 저장했다가 프로젝트처음할때붙여놓고 npm i 하고 해야하는건가요???

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

안녕하세요 제로초님우분투 서버에서 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 상에서 오류가 발생하고 있습니다. 해당 부분들은 강의를 따라가면서 현재까지 건드린 적이 없는 부분입니다.