묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
라우터 푸시
섹션 27 라우팅 강의를 따라서 진행하며useRouter 를 사용해 router.push(/폴더경로) 를 입력하고 버튼 onClick 이벤트에 바인딩 해주었습니다.각 버튼 클릭시 url 은 정상적으로 이동되는걸로 나오는데, UI 화면은 바뀌지가 않습니다.콘솔로그를 찍어봐도 클릭 이벤트도 정상작동 되는걸로 나오는데.. 도대체 뭐가 문제일까요ㅠAPP.js 에서 컴포넌트를 바꿔봤을 때도 각 버튼 별 이동 페이지들이 문제없이 뜨는걸 확인했습니다.url 이동시 화면만 새로고침되지 않는 것 같아요..이렇게 경로 변경만 되고 화면은 리렌더링 되지 않는 경우엔 어떻게 해결해야하나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
createBoard 질문있습니다
const 나의그래프큐엘셋팅 = gql` mutation createBoard($createBoardInput: CreateBoardInput!) { createBoard(createBoardInput: $createBoardInput) { _id } } `;처음에 단순히 결과값을 _id 만을 받도록 코딩했었는데 이 결과 등록하기 버튼을 누르면 create 된 값이 화면에 리렌더링 되기는 했지만 글의 갯수가 10개로 고정이 됬습니다. 예를들어 이미 1,2,....,9,10 이라는 글이 화면에 보이는 상황에서 a라는 글을 추가하면 a,1,2,...,9,10 으로 화면이 보이는 것이 아니라 a,1,2...,8,9 까지만 보입니다.const 나의그래프큐엘셋팅 = gql` mutation createBoard($createBoardInput: CreateBoardInput!) { createBoard(createBoardInput: $createBoardInput) { _id writer title contents } } `;그리고 다음과 같이 코드를 수정하게 되면 원하는 결과가 나오게 되었는데 무슨 차이가 있는 것일까요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
게시판 API 만들기 - cors 빨간 밑
안녕하세요 선생님!강의 게시판 API 만들기 실습을 보고 ApolloServer 안에 cors: true를 적었는데 빨간 밑줄이 생기면서 '{ typeDefs: string; resolvers: { Query: { fetchBoards: () => Promise<Board[]>; }; Mutation: { createBoard: (parent: any, args: any, context: any, info: any) => Promise<string>; }; }; cors: boolean; }' 형식의 인수는 'ApolloServerOptions<any>' 형식의 매개 변수에 할당될 수 없습니다. 개체 리터럴은 알려진 속성만 지정할 수 있으며 'ApolloServerOptionsWithTypeDefs<any>' 형식에 'cors'이(가) 없습니다. 라고 오류가 떴는데 아무리 찾아봐도 해결방법을 몰라 글을 올리게 되었습니다
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 과제 피드백 부탁드립니다!
안녕하세요 강의를 들은 이후 나름 열심히 과제를 수행중이었는데, 도저히 해결되지 않는 문제도 있고, 피드백을 받고 싶어 질문을 남깁니다! 여성, 남성 선택 박스의 가운데 공백이 아무리 해도 생기질 않습니다.2. 이용 약관 아래에 <hr> 태그가 먹히지 않습니다. 입력하면 줄이 생겨야하는데 생기지 않고 있어요. (정확한 위치는 사진 속 주석 참고 부탁드립니다.) 3. 아래쪽 전체적 간격이 뭔가 어정쩡한 느낌입니다..4. 코드를 보시고 혹시 제가 고쳐야 할 점이나, 공부가 필요한 부분이 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
프로젝트 전체 다운 받아서 보려고 하는데 git 주소 알려주세요
프로젝트 전체 다운 받아서 보려고 하는데 git 주소 알려주세요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Section 50 결제처리 레벨업 추가 학습 주제
Section 50 결제처리 레벨업 추가 학습 주제에서 포인트 충전 관련하여 문의드립니다. createPointTransactionsOfLoading에 API를 요청 했는데 404에러가 나옵니다!아임포트(테스트용)로 결제 성공하였고 응답받은 impUid도 잘 추가하였고, accessToken도 헤더에 포함시켰습니다. 무슨 문제일까요?ㅠㅠ 요청 mutationmutation { createPointTransactionOfLoading(impUid: "imp_618843313239") { amount } }error메세지{ "errors": [ { "message": "Request failed with status code 404", "locations": [ { "line": 2, "column": 3 } ], "path": [ "createPointTransactionOfLoading" ], "extensions": { "code": "INTERNAL_SERVER_ERROR", "exception": { "stacktrace": [ "Error: Request failed with status code 404", " at Object.callErrorProcessor (/codecamp_backend_api/dist/common/libraries/errorProcessor.js:8:11)", " at CreatePointTransactionOfLoadingService.fetchPaymentFromImpUid (/codecamp_backend_api/dist/api/pointTransaction/services/mutation/createPointTransactionOfLoading.service.js:42:36)", " at runMicrotasks (<anonymous>)", " at processTicksAndRejections (internal/process/task_queues.js:93:5)", " at async target (/codecamp_backend_api/node_modules/@nestjs/core/helpers/external-context-creator.js:76:28)", " at async /codecamp_backend_api/node_modules/@nestjs/core/helpers/external-proxy.js:9:24" ] } } } ], "data": null
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
display: flex 의 기능은 무엇인가요?
프리캠프 css정렬강의에서자식 box들을 정렬하기 위하여, 부모 box의 속성 및 값으로 display: flex을 먼저 쓰고,flex-direction : row로 할건지, flex-direction : column으로 할건지 결정하고.이어 justify content나 align itmes등을 사용하던데그럼, display: flex의 기능은 무엇인가요?display : flex 라는 코드 없이 위의 flex기능들을 구사하면 문제가 생기나요??시험삼아 display : flex 라는 코드 없이 뒤이어flex-direction : row;justify items : center;align items : center; 라고 적고 확인해보니. 부모 박스 안에 자식 박스가 마치 flex-direction : column ; 만 실행된 것과 같은 효과가 나타났습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Image Upload시 register 문의
안녕하세요.포트폴리오를 만들던 도중 제 스스로 해결되지 않아 질문드립니다.import { useForm } from "react-hook-form"; import { wrapFormAsync } from "../../../../../../commons/libraries/asyncFunc"; import { yupResolver } from "@hookform/resolvers/yup"; import { productRegisterSchema } from "../../../../../commons/validation/Main"; import InputLong from "../../../../../commons/Input/long"; import Textarea01 from "../../../../../commons/Input/textarea"; import Button01 from "../../../../../commons/button/01"; import InputLongNormal from "../../../../../commons/Input/longNormal"; import { gql, useMutation } from "@apollo/client"; import type { IMutation, IMutationCreateUseditemArgs, } from "../../../../../../commons/types/generated/types"; import { useRouter } from "next/router"; import ImageUpload01 from "../../../../../commons/imageUpload/imageUpload"; interface IFormData { name: string; remarks: string; contents: string; price: number; images: string[]; } export const CREATE_USED_ITEM = gql` mutation createUseditem($createUseditemInput: CreateUseditemInput!) { createUseditem(createUseditemInput: $createUseditemInput) { _id } } `; export default function ProductRegisterBody(): JSX.Element { const { register, handleSubmit, formState } = useForm<IFormData>({ resolver: yupResolver(productRegisterSchema), mode: "onChange", }); const router = useRouter(); const [createUseditem] = useMutation< Pick<IMutation, "createUseditem">, IMutationCreateUseditemArgs >(CREATE_USED_ITEM); const onClickSubmit = async (data: IFormData): Promise<void> => { console.log(data); await createUseditem({ variables: { createUseditemInput: { name: data.name, remarks: data.remarks, contents: data.contents, price: data.price, images: data.images, }, }, }); void router.push("/markets"); }; return ( <form onSubmit={wrapFormAsync(handleSubmit(onClickSubmit))}> <InputLong register={register("name")} tag="상품명" /> <div>{formState.errors.name?.message}</div> <InputLong register={register("remarks")} tag="한줄요약" /> <div>{formState.errors.remarks?.message}</div> <Textarea01 register={register("contents")} tag="상품설명" /> <div>{formState.errors.contents?.message}</div> <InputLong register={register("price")} tag="판매가격" /> <div>{formState.errors.price?.message}</div> <InputLongNormal tag="태그입력" /> <div>거래위치</div> <div> <p>사진첨부</p> <ImageUpload01 register={register("images")} /> </div> <button> 테스트</button> <Button01 title="등록하기" isActive={formState.isValid} onClick={onClickSubmit} /> </form> ); } import { useMutation } from "@apollo/client"; import { useState, type ChangeEvent, useRef } from "react"; import { UPLOAD_FILE } from "../upload01/Upload01.queries"; import type { IMutation, IMutationUploadFileArgs, } from "../../../commons/types/generated/types"; import * as S from "./styles"; import type { UseFormRegisterReturn } from "react-hook-form"; interface IInputProps { register: UseFormRegisterReturn; } export default function ImageUpload01(props: IInputProps): JSX.Element { const [image, setImage] = useState(""); const [images, SetImages] = useState(""); const fileRef = useRef<HTMLInputElement>(null); const [uploadFile] = useMutation< Pick<IMutation, "uploadFile">, IMutationUploadFileArgs >(UPLOAD_FILE); const onChangeImageFile = async ( event: ChangeEvent<HTMLInputElement>, ): Promise<void> => { const file = event.target.files?.[0]; const result = await uploadFile({ variables: { file } }); console.log(result.data?.uploadFile.url); SetImages(result?.data?.uploadFile?.url ?? ""); }; console.log(images); const onClickFile = (): void => { fileRef.current?.click(); }; return ( <> <S.Wrapper> <S.Image src={`https://storage.googleapis.com/${images}`} alt="" /> <S.ImageClick onClick={onClickFile}> +</S.ImageClick> <S.HiddenInput onChange={onChangeImageFile} type="file" ref={fileRef} /> <S.HiddenInput value={images} {...props.register} autoFocus name="images" /> </S.Wrapper> </> ); } 일단 요령이 없어서 아래 처럼 만들었습니다.사진을 올리면 register를 위해 value값이 변경되는 input창을 만들었으나 등록하기를 누르면 graphql에 업로드되지가 않습니다.{price: 333, contents: '3333', remarks: '333', name: '333', images: ''} 허나 저 빨간 v표시 친 부분을 한번 클릭한다면 {price: 33, contents: '3333', remarks: '333', name: '3333', images: 'codecamp-file-storage/2023/9/17/Vector.png'}다음처럼 images가 잘 입력됩니다. 클릭하지 않아도 자동으로 변경되면 images를 업로드 시킬 수 있는 방법이 있을까요? 아니면 참고할만한 다른 방법들이 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
피그마 CSS 속성이 안보여요
강의에서처럼 이미지를 클릭해도오른쪽 하단에 css 정보가 안보여요..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
accessToken 저장 관련 질문
안녕하세요! accessToken 저장 관련하여 궁금한 점이 생겨 질문드립니다.로그인의 결과로 accessToken을 받아오고 이것을 보안 문제를 해결하고자 로컬/세션 스토리지가 아닌 변수(recoil state)에 저장하셨고 이를 로그인한 사람의 정보를 요청하기 위해 쿠키를 통해 headers에 연동 시키셨는데, 이러면 변수에 저장한 값을 어쨌든 headers의 쿠키에서 확인할 수 있게 되어 글로벌 변수에 저장한 의미가 없어진 것 아닐까 하는 생각이 들어서 질문드리게 되었습니다.항상 좋은 강의 감사드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입과제
안녕하세요. 회원가입 과제를 하려고 하는데너무 막막해서요...모양만 똑같이 만들면 되는 건가요?아니면 실제로 입력이 되는 형식대로 만들어야 하는 건가요?
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
productdetail 데이터 안불러와지고 있습니다.
전체 목록까지는 불러와 지는데 상세페이지가 안되고 있습니다.rest까지는 됐었는데 graphql로 바꾸면서 잘안돼고 있네요...정상적으로 query key와 id는 잘 들어가는것 같습니다.https://github.com/littleduck1219/Web_Toy_Project/tree/main/shopping-mall
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 36 antd icon 임포트 에러
안녕하세요.antd 임포트할때 이런 에러가 발생했는데요.이전 커뮤니티 글을 확인해서선생님이 말씀해주신 강의용 버전으로 바꾸고yarn.lock과 노드모듈즈를 다시 지운다음yarn install했는데도 아직도 저렇게 에러가 나와서요ㅠㅠ뭐가 문제일까요?yarn dev해보니 아이콘은 잘 나와요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
가상클래스 hover의 h는 묵음이 아니라서 호버로 발음하는게 나을거 같습니다.
'강력한 CSS' 의 '선택자2' 강의 에서 강사님이 .class:hover {} 설명시 hover 에서 h는 묵음이라 over라고 발음한다고 하셨는데요.hover 의 h는 묵음이 아니네요.over(오버?) 유사하게 발음하기 보단 həvər(호버/허버 등)로 유사하게 발음해야 의사소통에 헷갈림이 없을거 같습니다.별거 아닌 맞춤법, 발음 같은거를 잘못 됐다고 말하는건 아니고요, over는 개발업무나 개발 공부 등을 하면서 비교적 자주 나오는데, hover를 over로 발음시 의사소통에 혼란스러울거 같아서 노파심에 적어봤습니다.hover는 over로 발음하는 것보단, həvər(호버/허버 등)로 발음하는게 나을거 같습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
린터와 포맷터 강의 중 inport부분 파싱 에러
강사님 설치하는것도 잘 따라했는데강사님은 import부분에 오류가 안뜨는데 저는 import부분에서 이런 오류가 뜨더라고요. tsconfig에서 뭐가 잘못됐단건지 모르겠어요ㅠ
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
query 에러 발생했습니다.
Unexpected Application Error!No QueryClient set, use QueryClientProvider to set oneError: No QueryClient set, use QueryClientProvider to set one at useQueryClient (http://localhost:3000/node_modules/.vite/deps/chunk-PPRRYNMJ.js?v=afce5f27:2826:11) at useBaseQuery (http://localhost:3000/node_modules/.vite/deps/chunk-PPRRYNMJ.js?v=afce5f27:3003:23) at useQuery (http://localhost:3000/node_modules/.vite/deps/chunk-PPRRYNMJ.js?v=afce5f27:3051:10) at ProductList (http://localhost:3000/src/pages/products/index.tsx?t=1694339505145:26:7) at renderWithHooks (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:12169:26) at mountIndeterminateComponent (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:14919:21) at beginWork (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:15900:22) at beginWork$1 (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:19747:22) at performUnitOfWork (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:19192:20) at workLoopSync (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:19131:13)import { Suspense, useEffect } from "react"; import { getClient } from "./queryClient"; import { QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { routes } from "./routes"; import { useRoutes } from "react-router-dom"; const App = () => { const elem = useRoutes(routes); const queryClient = getClient(); console.log("QueryClient:", queryClient); // useEffect(() => { console.log("QueryClientProvider is mounted."); }, []); return ( <QueryClientProvider client={queryClient}> <Suspense fallback={<div>Loading...</div>}>{elem}</Suspense> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> ); }; export default App; import React from "react"; export const DynamicIndex = React.lazy(() => import("./pages/index")); export const DynamicProductsIndex = React.lazy(() => import("./pages/products/index")); export const DynamicProductsId = React.lazy(() => import("./pages/products/[id]"));import GlobalLayout from "./pages/_layout"; import * as Lazy from "./Lazy"; export const routes = [ { path: "/", element: <GlobalLayout />, children: [ { path: "/", element: <Lazy.DynamicIndex />, index: true }, { path: "/products", element: <Lazy.DynamicProductsIndex />, index: true }, { path: "/products/:id", element: <Lazy.DynamicProductsId /> }, ], }, ]; export const pages = [{ route: "/" }, { route: "/products" }, { route: "/products/:id" }]; queryclient와 queryprovider를 잘 설정한것 같은데 에러가 발생하고 있습니다. 거의 4시간 가까이 찾아본것 같습니다.. Lazy부분은 따로 분리를 안하면 경고를 띄워서 분리를 했습니다. 이리저리 만져서 tool도 안뜨는걸 뜨게 했는데 저 에러는 도저히 해결이 안되네요 ... https://github.com/littleduck1219/Web_Toy_Project/tree/main/shopping-mall
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section 28 과제 중 오류
TypeError: Cannot read properties of undefined (reading 'target') 이런 오류를 어떻게 해결해야 할 지 모르겠습니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
아이콘과 글자 사이 간격
안녕하세요! css 싸이월드 1일차 과제 중에 아이콘과 글자 사이의 간격을 조절할 수 있는 방법이 있는 지 궁금해져 질문 드립니다!아래는 제가 작성한 html 코드이고아래는 라이브서버 화면입니다!별과 인스타그램 사이 간격이 위 3개의 글자보다 넓어 신경이 쓰이네요... 차이를 알고자 배경색을 깔아둔 것입니다. 답변 주시면 감사하겠습니다 :)
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
html에 iframe으로 연결했는데 안떠요..
안녕하세요.. 매번 사소한걸로 질문드리고 있어욥...싸이월드 만들기 2탄 수업들으면서 같이 실습하고 있는데 html에는 제대로 입력을 한것같은데 화면에는 제대로 안떠서 문의글 남깁니다... 머가 문제인지 모르겠어요ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
variables 값들이 바뀌질 않습니다
const setGraphql = gql` mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } } `; export default function GraphqlMutationPage() { const [createBoardMutation] = useMutation(setGraphql); const onClickSubmit = async () => { try { const result = await createBoardMutation({ // await 을 빼주면 promise 상태로 변환 variables: { // variables => $ 역할을함 writer: '훈이', title: 'ㅎㅇ', contents: '반갑습니다', }, }); console.log(result); } catch (error) { console.error(error); } }; 다음과 같이 코드를 작성해보았습니다. 데이터 요청은 보내지지만 variables 값들이 바뀌질 않습니다.