묻고 답해요
138만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수업 질문이용! event 관련해서...
const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); // error State const [emailError, setEmailError] = useState(''); //on 으로 시작하는 함수는 행동을 취할 때 마다 event 가 들어온다. => 이벤트핸들러함수 function onChangeEmail(event) { console.log(event); //행위 console.log(event.target); //행위 대상 console.log(event.target.value); //그래서 입력한 값이 뭔지 setEmail(event.target.value); } function onChangePassword(event) { setPassword(event.target.value); } //마지막 포장한 거 보내주기 function onClickSignup() { //진짜 포장이 잘 됐는지 확인해보기 console.log(email); console.log(password); //검증하기 //@ 가 들어가 있지 않다면 if (email.includes('@') === false) { // alert('이메일이 올바르지 않습니다!! @ 가 없음 !!'); // document.getElementById('error').innerText = '이메일이 올바르지 않습니다!! @ 가 없음 !!'; setEmailError('이메일이 올바르지 않습니다!! @ 가 없음 !!'); } else { // 메시지 알림 이전, Backend 컴퓨터에 있는 API(함수) 요청하기 alert('회원가입을 축하합니다!!'); } }onClicksignup 매개 변수로 event 를 써주지 않는 것은 이 함수는 입력값을 보내주지 않아서 그런걸까요 ?on 이 붙은 함수가 모두 event 를 사용할 수 있다는 것으로 이해하면 될까요 ?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수정하기 버튼이 동작이 안됩니다..
다른 것들은 다 작동이 되는데 수정하기 페이지에서 버튼을 눌러도 동작이 안됩니다 ㅜㅜ 콘솔에도 오류가 안 나오고 강의를 3번 처음부터 다시 봐도 뭐 때문에 동작을 안 하는지 모르겠습니다 ㅜㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
함수 호이스팅
Todolist 코드 작성할때 함수표현식으로 작성된 함수는 호이스팅이 되지않는다고 하셨는데,saveItemsFn같은 함수는 어떻게 정의 되기 전에 createTodo와 같은 함수에서 사용 할 수 있는건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Rest-API 실습 : postman/swagger api 링크 안됨
해당 강의의 http://example.codebootcamp.co.kr/api-docs/http://example.codebootcamp.co.kr/graphql사이트에 연결할 수 없다고 나옵니다 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn generate오류
$ yarn generateyarn run v1.22.19$ graphql-codegen✔ Parse Configuration⚠ Generate outputs ❯ Generate to ./src/commons/types/generated/typed.ts ✔ Load GraphQL schemas ✔ Load GraphQL documents ✖ Cannot use GraphQLObjectType "BoardReturn" from another module or realm. Ensure that there is only one instance of "graphql" in the node_modules directory. If d…error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. practice로 주소를 변경하고 yarn generate를 실행하는데 자꾸 위와같은 오류가 납니다 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
04-03-graphql-mutation-args 에서 작성한 게시글을 확인하려고 합니다.
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입니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
getStaticProps 사용시 무한로딩
getStaticProps강의의 2분대에 나오는 코드를 동일하게 작성하고 npm run dev를 입력해서 localhost:3000/section1/getStaticProps 로 접속을 했는데 개발자도구에서 보니 계속 pending으로만 되어있고 빈 화면으로 계속 로딩중 상태에서 변화가 없는데 왜그런건가요? 콘솔에 별다른 에러도 안뜹니다 getStaticProps함수를 주석처리해주면 정상적으로 접속이 되는데 해당 함수를 사용하기만 하면 이렇게 접속이 안돼요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
antd 임포트 이후 에러입니다
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에서 위와 같은 오류가 뜹니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section27 quiz 질문입니다.
알려주신데로 한거 같은데반응이 성공적이지 않았다 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> ); }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
MouseEvent 형식이 제네릭이 아닙니다.
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 형식이 제네릭이 아닙니다.' 이 오류가 계속 뜹니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Next.js body태그 접근
강사님 안녕하세요, 제가 배운거 바탕으로 포트폴리오를 제작중인데요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 업데이트
> 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' is of type 'unknown'. ts(18046)
강의 화면과 달리 result 타입이 unknown이라고 뜹니다소스를 비교했을 땐 동일한 것 같은데, 어떤 부분이 잘못 된걸까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Final signup 과제에서
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 을 정의하려고 했거든요!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
final signup 과제
let phone1 = document.getElementById('phone1').value; function ph1() { if (phone1.length === 3) { document.getElementById('phone2').focus(); } } let phone1 을 상위에 정의 하면 왜 null 값으로 읽히는 걸까요 ?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
search에 있는 refetch 질문이요.
중고마켓을 만들고 있습니다. 이부분인데 여기서 판매중상품 판매된상품 두개로 나눠서 searchbar(검색)을 만들었습니다. useSerach 파일로 밑에 코드로 따로 빼놨고 (useSearch)container이부분에서 onChangeSearch안에 있는 refetch를 어떻게 가져와야 하나요refetch: SoldOutTrueRefetch || SoldOutFalseRefetch 이렇게 처음에 가져오려고 했지만 실패했습니다.. presenter코드가 조금 지저분하지만 완성이 목표라서 현재 짜는 코드는 조금 지저분해도 이런식으로 두개를 가져오고 싶습니다. refetch 부분 어떤식으로 가져와야할지 알려주세요.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql useditem 질문입니다!
게시판 페이지 카운트는 있는데 혹시 중고아이템은 페이지카운트 쿼리가 없는건가요? ㅠㅜ찾아봐도 없는거 같아서 무한스크롤로 했는데 혹시나해서 글 남깁니다!!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Node 18 버전 강의
안녕하세요,회사에서, 신규 프로젝트에서 'react 18 버전'을 사용 한다고 하였는데요.node 18 버전, 타입스크립트, ant 디자인 등등 관련해서, 프로젝트 작업 시 조언, 작업 방식..등 과 관련한 내용 있으시면 혹시 공유 가능할까요..?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
d-day 코드오류
강의보면서 그대로 작성했는데 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>