파인튜닝시 제공해 주신 웹사이트에서 모델 선택은 어디 있나요?

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;이렇게만 해도 디자인 잘 적용 됩니다!

Throttling navigation to prevent the browser from hanging. See <URL>. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection Throttling navigation to prevent the browser from hanging. See https://crbug.com/1038223. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection 계속 강의 잘 듣고 있었는데 며칠 전부터 이런 에러 메시지가 뜨면서 로그인해서 넘어가면 아무 화면도 뜨지 않습니다. git reset --hard로 이전 코드로 돌려놔봐도 전에는 잘 되던 코드도 지금 안됩니다.구글링해봐도 무슨 말인지 잘 모르겠는데 뭐가 문제일까요....

https://nextjs.org/docs/messages/module-not-found wait - compiling... error - ./pages/_app.js:1:0 Module not found: Can't resolve '@/styles/globals.css' > 1 | import "@/styles/globals.css"; 2 | 3 | export default function App({ Component, pageProps }) { 4 | return <Component {...pageProps} />;안녕하세요 강사님 !섹션 23 example 리액트 세상 강의 중 yarn dev를 입력하면 위와 같은 에러가 확인됩니다. _app.js 파일에서 global.css를 불러오는 부분 @/styles/global.css 을 상대적인 주소로 가져올 수 있도록// import "@/styles/globals.css"; import "../styles/globals.css"; export default function App({ Component, pageProps }) { return <Component {...pageProps} />; }위와 같이 변경해봐도 동일한 에러가 발생합니다.global.css 파일을 삭제해봐도 에러가 발생합니다.이상태에서 index.js 파일에서 주석 처리한 부분을 지우게 되면 아래와 같은 에러가 확인됩니다.// index.js import Head from "next/head"; import Image from "next/image"; // import styles from "@/styles/Home.module.css"; 제가 다운받은 버전은 package.json 파일에서 아래와 같이 확인할 수 있습니다.{ "name": "class", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", "next": "12.1.0", "react": "17.0.2", "react-dom": "17.0.2" } } 강사님 파일에서는 저와 다른 부분이 확인되는데 제가 빼먹은게 있는건지, 새로 다운받아야 하는 것이 있는 걸까요? 버전 차이인 걸까요? 이유가 뭘까요..?@emotion/client @next/font // 제 파일에는 없고 강사님 파일에서 확인되는 부분 그리고 해당 수업 중 질문이 있는데요,yarn add 기능 또는 npm install 기능 명령어로 설치 시, 각각 다른 파일에 기록이 된다고 하셨는데요강사님께서 package-lock.json 파일을 삭제 하셨는데, 혹시 파일을 삭제하신 이유가가급적 yarn.lock 파일로 통일하기 위함이 맞을까요? package-lock.json 과 yarn.lock 파일은 서로 다르게 기록이 되어있지 않은가요? 파일이 초기에 생성된 시점이라 한개의 파일을 삭제해도 무방한건지 이와 관련해 궁금합니다.

복습하면서 강의를 보지 않고 저 혼자 다시 만들어보고 있는 중입니다. 그래서 드래그 라이브러리나 React.memo 같은 기능은 우선 차치하고 CRUD 기능만 해보려고 하는데요.edit을 위한 💬 버튼을 누를 경우 다른 할 일들도 editing... 으로 전체 수정되는 오류가 있습니다 ㅠㅠ 어디가 꼬였는지 알 수 없어 몇 시간 째 헤매고 있는데, 어느 부분이 문제인지 알 수 있을까요? Lists 컴포넌트에서 문제가 발생하고 있습니다. App.jsimport React, { useState } from "react"; import Form from "./components/Form"; import Lists from "./components/Lists"; function App() { const today = new Date(); const month = today.getMonth() + 1; const day = today.getDate(); const [value, setValue] = useState(""); const [todoData, setTodoData] = useState([]); const handleSubmit = (event) => { event.preventDefault(); let newTodo = { id: Date.now(), title: value, done: false, }; setTodoData([...todoData, newTodo]); setValue(""); }; const handleClear = () => { setTodoData([]); }; return ( <div className="flex justify-center items-center min-h-screen w-screen bg-purple-100"> <div className="w-full lg:max-w-lg lg:max-w-3/4 p-6 m-4 bg-white rounded shadow"> <div className="flex justify-between pb-2"> <h1> 📌 {month}월 {day}일 오늘의 할 일 </h1> <button onClick={handleClear}>🧹 전체 삭제</button> </div> <Lists todoData={todoData} setTodoData={setTodoData} /> <Form handleSubmit={handleSubmit} value={value} setValue={setValue} /> </div> </div> ); } export default App; Lists.jsimport React, { useState } from "react"; const Lists = ({ todoData, setTodoData, title, id }) => { const [isEditing, setIsEditing] = useState(false); const [editedTitle, setEditedTitle] = useState(title); const handleDelete = (id) => { let newTodoData = todoData.filter((data) => data.id !== id); setTodoData(newTodoData); }; const handleDone = (id) => { let newTodoData = todoData.map((data) => { if (data.id === id) { data.done = !data.done; } return data; }); setTodoData(newTodoData); }; if (isEditing) { return <div>Editing...</div>; } else { return ( <div> {todoData.map((data) => ( <div className="flex py-2 my-2 justify-between items-center border rounded bg-purple-50" key={data.id} > <div className="mr-2 p-2"> <input className="mr-2" type="checkbox" defaultChecked={data.done} onChange={() => handleDone(data.id)} ></input> <span className={data.done ? "line-through" : undefined}> {data.title} </span> </div> <div className="pr-2"> <button className="mr-2" onClick={() => setIsEditing(true)}> 💬 //오류 발생 </button> <button className="mr-2" onClick={() => handleDelete(id)}> ❌ </button> </div> </div> ))} </div> ); } }; export default Lists; Form.jsimport React from "react"; const Form = ({ handleSubmit, value, setValue }) => { const handleChange = (event) => { setValue(event.target.value); }; return ( <div> <form className="flex justify-between pt-2" onSubmit={handleSubmit}> <input className="p-2 mr-2 border-2 rounded shadow w-full" type="text" placeholder="할 일을 입력하세요" value={value} onChange={handleChange} /> <input className="p-2 border-2 rounded bg-purple-200 text-white hover:bg-purple-300" type="submit" value="입력" /> </form> </div> ); }; export default Form;

5:36 부분에setState 를 활용해서 notifications에 들어있던 내용을 지워야만 unmount가 되던데왜 그런건가요??render() 부분에서 더 이상 출력?할 만한 내용이 없다고 판단해서 unmount가 되는건가요?

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 파일이 있거나,어떤 파일을 참고해야하는 지 알 수 있을까요?(찾아보고는 있는데 잘 안보이네요.)

> git push -u origin master To https://github.com/eunpse/preCamp.git ! [rejected] master -> master (non-fast-forward) error: failed to push some refs to 'https://github.com/eunpse/preCamp.git' hint: Updates were rejected because the tip of your current branch is behind hint: its remote counterpart. Integrate the remote changes (e.g. hint: 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details.과제에 알려주신 방법으로 깃에 먼저 파일을 올렸다가, 내용을 수정하고 다시 깃에 올리려고 하는데 오류가 발생합니다. git pull을 해라 이런 말이 있는 것 같은데 어떻게 해야하나요?

강의 화면과 달리 result 타입이 unknown이라고 뜹니다소스를 비교했을 땐 동일한 것 같은데, 어떤 부분이 잘못 된걸까요?

if ( state.data.row * state.data.cell - state.data.mine === state.opendCount + openedCount ) { halted = true; result = "승리하셨습니다"; } return { ...state, tableData, opendCount: state.opendCount + openedCount, halted, result, };위 코드는 제로초님이 작성하신 코드입니다여기서 halted와 result에 값을 갱신할때 state.halted 이렇게 한 것이 아니고 그냥 halted=true이렇게 갱신을 하셨습니다 if ( state.data.row * state.data.cell - state.data.mine === state.opendCount + openedCount ) { state.halted = true; state.result = "승리하셨습니다"; } return { ...state, tableData, opendCount: state.opendCount + openedCount, halted: state.halted, result: state.result, };왜 state를 안 붙이고 그냥 할 수 있을까 해서 state를 붙여서 해봤더니 return 구문에서 halted: state.halted 이거 처럼 따로 갱신하는 구문이 필요했습니다 state를 붙일 때와 안붙일때 어떤 차이가 있나요?

안녕하세요.강의를 따라하고 있는 중 파일 참조 부분에서"Unresolved template reference" 메세지가 발생합니다. 밑줄이 생긴 것과는 상관없이 작동에는 아무런 영향이 없기는 합니다. 하지만 깔끔하게 만들어 두고자 하는 마음에 검색을 해보았지만 뚜렷한 해결책을 찾지는 못하였습니다. 감사합니다.

let phone1 = document.getElementById('phone1').value; function ph1() { if (phone1.length === 3) { document.getElementById('phone2').focus(); } }function ph1() { let phone1 = document.getElementById('phone1').value; if (phone1.length === 3) { document.getElementById('phone2').focus(); } }안녕하세요. 섹션1 final 과제 sign up 진행 중입니다.핸드폰 번호를 입력하면 포커스를 이동 중에 첫번째 코드블럭 같이 정의한 후 포커스를 이동하려 했더니 되지 않더라고요! 혹시 위의 두 코드 블럭은 다른 코드로 정의되는 것인가요 ?저는 {} 밖에서 정의를 해 주면 전체 코드에 적용된다고 해서 한번에 phone1,phone2,phone3 을 정의하려고 했거든요!     

function checkmood(mood, goodCallback, bacCallback) { if (mood === "good") { goodCallback(); } else { bacCallback(); } } checkmood("good", sing, cry); function sing() { console.log("sing"); } function cry() { console.log("cry"); } checkmood("good", sing, cry) 이 부분에서 sing이 함수이지만 값으로 들어갔는데, 함수 인자는 값으로만 들어가는걸까요?!

 let phone1 = document.getElementById('phone1').value; function ph1() { if (phone1.length === 3) { document.getElementById('phone2').focus(); } }  let phone1 을 상위에 정의 하면 왜 null 값으로 읽히는 걸까요 ?