172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
getStaticProps강의의 2분대에 나오는 코드를 동일하게 작성하고 npm run dev를 입력해서 localhost:3000/section1/getStaticProps 로 접속을 했는데 개발자도구에서 보니 계속 pending으로만 되어있고 빈 화면으로 계속 로딩중 상태에서 변화가 없는데 왜그런건가요? 콘솔에 별다른 에러도 안뜹니다 getStaticProps함수를 주석처리해주면 정상적으로 접속이 되는데 해당 함수를 사용하기만 하면 이렇게 접속이 안돼요
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
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; 이렇게만 해도 디자인 잘 적용 됩니다!
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
복습하면서 강의를 보지 않고 저 혼자 다시 만들어보고 있는 중입니다. 그래서 드래그 라이브러리나 React.memo 같은 기능은 우선 차치하고 CRUD 기능만 해보려고 하는데요. edit을 위한 💬 버튼을 누를 경우 다른 할 일들도 editing... 으로 전체 수정되는 오류가 있습니다 ㅠㅠ 어디가 꼬였는지 알 수 없어 몇 시간 째 헤매고 있는데, 어느 부분이 문제인지 알 수 있을까요? Lists 컴포넌트에서 문제가 발생하고 있습니다. App.js import 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.js import 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.js import 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;
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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 형식이 제네릭이 아닙니다.' 이 오류가 계속 뜹니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강사님 안녕하세요, 제가 배운거 바탕으로 포트폴리오를 제작중인데요 body 태그에 접근할려면 구글링 해본 결과 _document 파일이 있어야 하는데 아무리 찾아봐도 _document가 없더라구요 혹시 body태그에 접근하는방법을 여쭤봐도 될까요? ※ document.querySelector 접근할 생각을 했는데 react, next.js에서는 되도록이면 사용안하는게 좋다고해서 어쩔수없을때는 사용해도 될까요?
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
server state 관리를 swr 말고 react-query를 사용하려고 합니다. 아래와 같이 해당 queryKey를 가지고 stores에 대한 data를 전역으로 관리하고 싶었는데, fetchFunction 자리에 stores props가 들어갈 수 없어서 처음에 어떻게 initialdata를 가져올 수 있을지 잘 모르겠습니다.. react-query는 수업때 배우진 않지만 혹시 아시는 부분이 있다면 알려주시면 감사하겠습니다 !! const { data } = useQuery([queryKey], fetchFun)
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
> 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이라고 뜹니다 소스를 비교했을 땐 동일한 것 같은데, 어떤 부분이 잘못 된걸까요?
미해결
실리콘밸리 엔지니어가 가르치는 파이썬 장고 웹프로그래밍
sqliteBrowser 사용하는 수업에서 db.sqlite3를 열려고 하니, database is locked 라는 메시지가 뜹니다. 그래서 ChatGPT나 Bard... Googling을 이용해봤지만, 저에게 해당될만한 내용이 없네요. 혹시 몰라 재부팅도 해봤습니다. 이거 DB부분만 지웠다가 다시 까는 방법이 있을까요? (makemigrations, migrate 부분)
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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 을 정의하려고 했거든요!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
let phone1 = document.getElementById('phone1').value; function ph1() { if (phone1.length === 3) { document.getElementById('phone2').focus(); } } let phone1 을 상위에 정의 하면 왜 null 값으로 읽히는 걸까요 ?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
동일한 질문이 있는데 답변을 이해하지 못해서 질문합니다. 저는 [깃허브아이디]/상위폴더/하위폴더/ 하위폴더2 에 지금까지 만든 넷플릭스 파일들이 있습니다. 이 경우에 package.json의 homepage 부분과 index.js의 basename은 어떻게 설정해야 하는 것인지요? 아까까지 전체 주소(하위폴더2까지) homepage, basename을 작성하여 배포했는데 완성된 주소는 상위폴더까지만 적혀 있습니다. 지금은 [깃허브아이디]. github.io/[상위폴더]/로 다시 배포했는데 상위폴더 안의 Read.me만 나오고 있습니다. (캐시 삭제 및 20분 정도 기다림) ㅠㅠ 왜 이러는지 알고 싶습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓을 만들고 있습니다. 이부분인데 여기서 판매중상품 판매된상품 두개로 나눠서 searchbar(검색)을 만들었습니다. useSerach 파일로 밑에 코드로 따로 빼놨고 (useSearch) container 이부분에서 onChangeSearch안에 있는 refetch를 어떻게 가져와야 하나요 refetch: SoldOutTrueRefetch || SoldOutFalseRefetch 이렇게 처음에 가져오려고 했지만 실패했습니다.. presenter 코드가 조금 지저분하지만 완성이 목표라서 현재 짜는 코드는 조금 지저분해도 이런식으로 두개를 가져오고 싶습니다. refetch 부분 어떤식으로 가져와야할지 알려주세요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
게시판 페이지 카운트는 있는데 혹시 중고아이템은 페이지카운트 쿼리가 없는건가요? ㅠㅜ 찾아봐도 없는거 같아서 무한스크롤로 했는데 혹시나해서 글 남깁니다!!
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
안녕하세요 선생님 현재 모델링 및 평가(회귀)부분을 학습하고 있습니다. 코드를 따라가면서 실습을 진행하고 있는데, rmse 값이 선생님과 달라 질문 드립니다. 제가 알기로는 모델링을 하는 과정에서 예측한 값이 달라질 수 있고, 이에 따라 평가지표인 rmse 값이 다를 수 있다...라고 알고 있습니다. 그런데 값의 차이 뿐만이 아니라 baseline과 scaler 적용 결과가 좋은지 나쁜지가 달라 질문드립니다. 예를 들어, 선생님께서 하셨을때는 RandomForestRegressor의 baseline이 rmse값이 가장 좋았고(작았고), scaler를 적용했을 때 rmse가 커져서 scaler 적용은 하지 않는게 좋다~라는 내용의 실습이었는데 제가 했을 때는 baseline의 rmse보다 scaler를 적용했을 때의 rmse가 작아 scaler를 적용하는 것이 좋다..는 결론이 나옵니다. 질문을 정리하자면, 모델링을 하는 과정에서 선생님과 제가 실습한 예측값과 rmse가 다른게 맞는지 다른게 맞다 해도 scaler 적용여부 등을 바꿀 수 있을 정도로 예측값과 rmse가 달라질 수 있는지 (추가질문)달라지더라도 선생님 실습값 : 4728.xx 제 실습값 6025.174022213681 이정도로 달라질 수 있는지... (추가질문) 모델링 및 평가(회귀) 24:56에서 수험자는 알 수 없는 영역>y_test로 rmse로 구하시고 결과값이 17909.xx로 나왔는데 여기에서도 charges에 로그변환 한 이후기 떄문에 원래는 np.exp(pred)로 rmse를 구했어야 하는지 일 것 같습니다. 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요, 회사에서, 신규 프로젝트에서 'react 18 버전'을 사용 한다고 하였는데요. node 18 버전, 타입스크립트, ant 디자인 등등 관련해서, 프로젝트 작업 시 조언, 작업 방식..등 과 관련한 내용 있으시면 혹시 공유 가능할까요..?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
PostCard 컴포넌트에서 댓글목록 부분을 강의에 나와있는 대로 작성하면 파라미터가 undefined라고 에러가 뜨더군요 코드는 아무리 살펴봐도 틀린 부분이 없어서 package.json 보고 하나하나 지웠다 깔았다 하면서 검사했는데 antd를 강의랑 같은 버전으로 깔면 에러가 안 나오더군요. (대신 디자인이 하나도 적용이 안됩니다)
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의보면서 그대로 작성했는데 targetDate 부분이 오류가 납니다. 여기서 안되니까 remaining 에서도 오류나고.. 콘솔 찍으면 NaN 만 출력이 되네요ㅠㅠ 왜그럴까요? <script> const dateFormMaker = function () { const inputYear = document.querySelector("#target-year-input").value; const inputMonth = document.querySelector("#target-month-input").value; const inputDate = document.querySelector("#target-date-input").value; const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`; return dateFormat; }; const counterMaker = function () { const targetDateInput = dateFormMaker(); const nowDate = new Date(); const targetDate = new Date(targetDateInput).setHours(0,0,0,0); /* error */ const remaining = (targetDate - nowDate) / 1000; const remainingDate = Math.floor(remaining / 3600 / 24); const remainingHours = Math.floor(remaining / 3600) % 24; const remainingMin = Math.floor(remaining / 60) % 60; const remainingSec = Math.floor(remaining) % 60; console.log(remainingDate, remainingHours, remainingMin, remainingSec); console.log(targetDate); }; </script>
