묻고 답해요
138만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
<코멘트달기 section> boardId 오류
import { useState } from "react"; import CommentPageUi from "./BoardCommentWrite.presenter"; import { useMutation } from "@apollo/client"; import { CREATE_BOARD_COMMENT } from "./BoardCommentWrite.queries"; import { useRouter } from "next/router"; import { FETCH_BOARD_COMMENTS } from "../list/BoardCommentList.queries"; export default function CommentPage () { const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [contents, setContents] = useState(""); const [createBoardComment] = useMutation(CREATE_BOARD_COMMENT) const router = useRouter; const onChangeWriter = (event) => { setWriter(event.target.value) } const onChangePassword = (event) => { setPassword(event.target.value) } const onChangeContents = (event) => { setContents(event.target.value) } const onClickSubmit =async() => { try { await createBoardComment ({ variables : { createBoardCommentInput: { writer : writer, password : password, contents : contents, rating: 0, }, boardId: router.query.boardId, }, refetchQueries: [ { query: FETCH_BOARD_COMMENTS, variables: { boardId : router.query.boardId}, }, ], }); } catch (error) { alert(error.message); } alert("정상적으로 댓글이 달렸습니다.") } return ( <CommentPageUi onChangeWriter = {onChangeWriter} onChangePassword ={onChangePassword} onChangeContents ={onChangeContents} onClickSubmit = {onClickSubmit} contents={contents} > </CommentPageUi> ) }comment write import { gql } from "@apollo/client"; export const CREATE_BOARD_COMMENT = gql` mutation createBoardComment( $createBoardCommentInput: CreateBoardCommentInput! $boardId: ID! ) { createBoardComment( createBoardCommentInput: $createBoardCommentInput boardId: $boardId ) { _id } } `;comment write queryimport { gql } from "@apollo/client"; export const FETCH_BOARD_COMMENTS = gql` query fetchBoardComments($boardId: ID!) { fetchBoardComments(boardId: $boardId) { _id writer contents createdAt rating } } `;comment list queryimport { useQuery } from "@apollo/client" import { FETCH_BOARD_COMMENTS } from "./BoardCommentList.queries" import { useRouter } from "next/router" import BoardCommentListUI from "./BoardCommentList.presenter" export default function BoardCommentList() { const router = useRouter() const {data} = useQuery(FETCH_BOARD_COMMENTS, { variables: {boardId : router.query.boardId} }) return ( <BoardCommentListUI data={data} /> ) }comment list폴더명 에러1에러2둘 다 boardId와 관련있고, 내용으로 봐서는 boardId에 값이 없는 것 같은데, 코드를 아무리 봐도 문제점을 모르겠네요.. 문제가 뭘까요 ???
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요. span 태그의 부모에 display: flex 를 적용하는데 왜 적용되는지 아무리 생각해도 이해가 되지 않아 질문드립니다.
<li className={styles.menu} key={menu.name}> <span className={styles.name}>{menu.name}</span> <span className={styles.price}>{menu.price}</span> </li>위 코드는 DetailContent.tsx 코드의 일부입니다.위 코드에서 span 태그의 경우 inline 태그이기 때문에 부모 태그인 li 태그에 display: flex 속성을 적용해도 의미가 없는 것이 당연하다고 생각했습니다.그런데 위 코드에서는 inline 태그인 span 태그가 display: flex에 영향을 받고 있더라구요.혹시 제가 잘못 이해하는 걸까요? 혹은 다른 이유가 있는걸까요??(Next.js 관련 질문이 아니라 너무 지엽적인 질문이라 죄송합니다...!)
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수정하기 뮤테이션
안녕하세요 선생님 !하나 궁금한 점이 있어서 질문 드려요.게시물 수정할 때, 기존에 입력한 값이 사라지고 수정한 내용만 남는 문제가 발생해, 수정하기 버튼을 눌렀을 때 기존 값도 남아있고, 수정한 내용도 체인지 돼서 나오게끔 하는 부분을 공부중입니다.(이미지는 강의내용 캡쳐입니다)궁금한 게, 이렇게 코드를 적용하고 게시물을 수정하면 바뀐 내용들만 뮤테이션이 날라간다는 건 이해 하겠는데 기존에 입력한 값들이 안 사라지고 출력되는 건 이해가 쉽지 않네요.. !! 어차피 writer,title,contents 스테이트는 수정된 게 없으니 빈 값 아닌가요 ? 빈 값인데 초기값이 나온다는 게 ..ㅠㅠ 미리 답변 감사합니다 선생님.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
과제부분에 조건2에 대한 질문이요
freeboard_frontend 랜딩페이지를 만들어보세요 ( 접속 시 첫 화면 )라고 나와있는데 이 조건이 무엇을 의미하나요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
naver로고 important 값 주는 이유
안녕하세요. 강의 잘 듣고 있습니다. css가 중요한 것은 아니지만 important가 없으면 안되는 이유가 궁금해서 질문드립니다.naver 로고에 important 값을 주는 이유는 naver 에서 자체적으로 주는 css 값 때문이라고 생각했는데, 제가 생각한 게 맞을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 깃 클론 주소를 못찾겠습니다.
피그마 주소밖에 확인이 안되는데,어디에 나와있는건가요..??
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
useEffect clean up function 내부 코드의 역할
return () => { marker?.setMap(null) }해당 코드는 어떤 역할을 하는건가요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 카카오맵 질문
중고마켓 구현 중에 계속 구글링해도 해결이 안돼서 질문드립니다ㅠHeader에 판매하기 Link가 있고, 클릭하면 /product/new 로 이동하게 했습니다주소창에 직접 주소를 입력해서 들어가면 에러가 안뜨는데, 버튼을 클릭해서 들어가면TypeError: window.kakao.maps.LatLng is not a constructor 에러가 발생하는데원인이 뭘까요 ....??Header <Link href="/product/new"> <a> <S.HeaderIcon> 판매하기 </S.HeaderIcon> </a> </Link>BoardWritedeclare const window: typeof globalThis & { kakao: any } export default function BoardWrite(props: IBoardWriteProps): JSX.Element { const router = useRouter() const { setValue, trigger } = useForm({ mode: "onChange", }) useEffect(() => { const script = document.createElement("script") script.src = "https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=앱키" document.head.appendChild(script) script.onload = () => { window.kakao.maps.load(function () { const container = document.getElementById("map") // 지도를 담을 영역의 DOM 레퍼런스 const options = { // 지도를 생성할 때 필요한 기본 옵션 center: new window.kakao.maps.LatLng(37.462381, 126.813369), // 지도의 중심좌표. level: 3, // 지도의 레벨(확대, 축소 정도) } const map = new window.kakao.maps.Map(container, options) // 지도 생성 및 객체 리턴 }) } }, [])
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
useRef 사용이유
강의에 useRef 사용 이유에 대해선 안나오는거 같은데 아래 두 코드는 왜 사용된건지 설명해주실 수 있나요?? const mapRef = useRef<NaverMap | null>(null) mapRef.current = map
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 ver1, ver2 뭘듣고 있는지 어떻게 알수있나요?
강의 ver1, ver2 뭘듣고 있는지 어떻게 알수있나요? ver1, ver2 표시가 안되어있어서요!html, css, javascript 는 노션 링크 따로있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
깃주소
깃주소 알려주세요, 뭐 다 들어야 깃 주소를 아는건지 왜 찾을수가 없나요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 게시물 Pick
혹시 중고마켓에서 게시글들어갈때 해당 게시글을 찜했는지 알 수 있는 API가 있을까여?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이미지 못찾겠네요
강력한 css 섹션 5 단위심화 강의에서 고슴도치 이미지 파일을 자료에 올려놨다고 하는데 못찾겠어요 ㅡㅡ...뭔 자료를 이렇게 찾기 힘들게 올려논건지?장난하나.. 이미지 찾다가 시간 다갔네
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
시작 할때 0-2 branch 에서 시작 하는게 맞나요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.빈 폴더에서 npx create-next-app@latest --typescript 로 시작 해야 하는지 아니면 받은 소스의 0-2 브랜치 에서 npx create-next-app@latest --typescript 로 시작 하는게 맞는지 어떤건가요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
useEffect의 clean up 함수를 실행해야 하는 이유가 무엇일까요??
안녕하세요 강사님! 유익한 강의 아주 잘 듣고 있습니다.혹시 컴포넌트 unmount 시 맵 객체를 destroy 해야 하는 이유를 알 수 있을까요?destroy를 하지 않아도 코드 동작에는 큰 문제가 없는 것 같습니다. 혹시 메모리 상의 문제나 다른 문제가 있어서 이 코드를 작성해야 하는걸까요??next/script로 네이버 지도 불러오기 강의 (8:40)useEffect(() => { return () => { mapRef.current?.destroy(); } }) 예를 들면, setInterval의 경우 Unmount시 clearInterval을 하지 않을 경우 계속 백그라운드에서 실행되기 때문에 clearInterval을 해줘야한다고 바로 이해가 됐습니다. 하지만 위의 경우 꼭 맵 객체를 destroy 해야하는걸까요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
노션 강의자료
노션에 있는 자료들이랑 실제 강의에서 쓰이는 자료들이랑 차이가 좀 있네요. 강의에 들어있는 내용이 다 들어있는 것도 아니고요... 혹시 추후에 보강되거나 강의에 나오는 자료가 제공되진 않을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Section 50 퀴즈 관련 질문입니다.
backend playground를 보고 작업하고 있으나 추가로 질문 드려야만 해결할 수 있는 부분이 있어 여쭤봅니다.loading 페이지에서 createPointTransactionOfLoading을 사용하여 이것을 complete 페이지에서 fetch해서 가져와야할 거 같은데 fetch 할 때 필요한 api를 모르겠어서 임시로 fetchPointTransactionsOfSelling로 했습니다. createPointTransactionOfLoading 부분에서 id는 사용자 아이디인데 impUid는 뭘 의미하나요? 회원가입 하면 id가 발급되는 것처럼 해당 api에서 자체적으로 발급되는 걸까요?amount가 포인트 양인 것 같아서 기존의 포인트에 포인트를 중첩하려면 loading과 complete에 동일한 api를 fetch해서 Selected를 더하는 게 맞나요?createPoint와 fetchPoint할 때 필요한 요소는 뭐가 더 있는지 궁금합니다.complete 페이지에서 'IPointTransaction[]' 형식에 'amount' 속성이 없습니다. 라고 뜨는데 어떻게 해결하나요? 작성한 코드입니다.complete ({data?.fetchPointTransactionsOfSelling.amount}에 amount 속성이 없다는 빨간 줄) import { gql, useQuery } from "@apollo/client" import type { IQuery, IQueryFetchPointTransactionsOfSellingArgs } from "../../../../src/commons/types/generated/types" const FETCH_POINT = gql` query { fetchPointTransactionsOfSelling { _id impUid amount } } ` export default function CompletePage():JSX.Element { const { data } = useQuery<Pick<IQuery,"fetchPointTransactionsOfSelling">,IQueryFetchPointTransactionsOfSellingArgs>(FETCH_POINT) return <>충전한 포인트는 {data?.fetchPointTransactionsOfSelling.amount}원</> }loading (Number(amount)에 이름 찾을 수 없다는 빨간 줄)import { gql, useQuery, useMutation } from "@apollo/client" import type { IQuery } from "../../../../src/commons/types/generated/types" import { loginCheck } from "../../../../src/components/commons/hocs/withAuth" import { useRouter } from "next/router" import type { ChangeEvent } from "react" import { useState } from "react" const FETCH_USER_LOGGED_IN = gql` query { fetchUserLoggedIn { email name } } ` const CREATE_POINT = gql` mutation createPointTransactionOfLoading($impUid:ID!){ createPointTransactionOfLoading(impUid:$impUid){ _id impUid amount } } ` declare const window: typeof globalThis & { IMP: any } function LoadingPage():JSX.Element { const router = useRouter() const { data } = useQuery<Pick<IQuery,"fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN) const [ myFunction ] = useMutation(CREATE_POINT) const selectList = [0,500,1000,2000,5000]; const [Selected, setSelected] = useState(0); const handleSelect = (e:ChangeEvent<HTMLSelectElement>):void => {setSelected(Number(e.target.value));}; const onClickPayment = ():void => { if (Selected === 0) { alert("금액을 선택해주세요."); return; } const IMP = window.IMP; IMP.init("imp27255777"); IMP.request_pay({ // param pg: "kakaopay", pay_method: "card", // merchant_uid: "ORD20180131-0000011", name: `Section 50-${Selected}원 결제`, amount: Selected, buyer_email: data?.fetchUserLoggedIn.email, buyer_name: data?.fetchUserLoggedIn.name, buyer_tel: "", buyer_addr: "", buyer_postcode: "", m_redirect_url:"" }, async (rsp:any) => { if (rsp.success === true) { await myFunction({ variables:{ impUid : data?.fetchUserLoggedIn._id, amount: Number(amount) + Selected } }) const {Modal} = await import("antd") Modal.success({content:"등록 성공"}) void router.push("/z_quiz/section50/complete") } else { alert("결제 실패") } }); } return (<> <div>{data?.fetchUserLoggedIn.name}님 환영합니다.</div> <select onChange={handleSelect} value={Selected}> {selectList.map((item) => ( <option value={item} key={item}>{item}</option> ))} </select> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" /> <script src="https://cdn.iamport.kr/v1/iamport.js" /> <button onClick={onClickPayment}>충전하기</button> </>) } export default loginCheck(LoadingPage);loginimport { gql, useMutation } from "@apollo/client" import { type ChangeEvent, useState } from "react" import type { IMutation, IMutationLoginUserArgs } from "../../../../src/commons/types/generated/types" import { useRecoilState } from "recoil" import { accessTokenState } from "../../../../src/commons/stores" import { useRouter } from "next/router" import { wrapFormAsync } from "../../../../src/commons/libraries/asyncFunc" const LOGIN_USER =gql` mutation loginUser($email:String!, $password:String!){ loginUser(email:$email,password:$password){ accessToken } } ` export default function LoginPage():JSX.Element { const router = useRouter() const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [loginUser] = useMutation<Pick<IMutation,"loginUser">,IMutationLoginUserArgs>(LOGIN_USER) const [, setAccessToken] = useRecoilState(accessTokenState) const onChangeEmail = (event: ChangeEvent<HTMLInputElement>):void => { setEmail(event.currentTarget.value) } const onChangePassword = (event: ChangeEvent<HTMLInputElement>):void => { setPassword(event.currentTarget.value) } const onClickLogin = async ():Promise<void> => { try { const result = await loginUser({variables: { email, password }}) const accessToken = result.data?.loginUser.accessToken if (accessToken=== undefined) { alert("로그인 실패") return ;} setAccessToken(accessToken) localStorage.setItem("accessToken", accessToken) void router.push("/z_quiz/section50/loading") } catch(error) { if (error instanceof Error ) alert(error.message) } } return ( <form onSubmit={wrapFormAsync(onClickLogin)}> 이메일: <input type="text" onChange={onChangeEmail} /> 비밀번호: <input type="password" onChange={onChangePassword} /> <button>로그인</button> </form> ) }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[라이브러리 아이콘 실습] 강사님께는 보이지 않는 ts에러 빨간 줄이 보입니다.
MyIcon으로 이모션을 통해 만들어도, 그냥 Antd에서 복사붙여넣기해서 프레그먼트안에 넣어도 같은 오류가 발생해요.구글에 검색해도 해결방법이 나오지 않네요ㅠ
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
<div id="__next"> 질문
제가 따로 하고 있는 next.js 프로젝트에는 이런 div가 없는데 혹시 없다면 문제가 있는건가요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
강의파일 열면 왜 전부 다 빨간줄이 뜰까요???
강의 파일을 열면 에러가 뜨는데 어떻게 해결하나요? ㅠㅠ