173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 포트폴리오를 만들던 도중 제 스스로 해결되지 않아 질문드립니다. 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를 업로드 시킬 수 있는 방법이 있을까요? 아니면 참고할만한 다른 방법들이 있을까요?
react node.js seo graphql next.js
dlwjdgus3217
2023-09-17T16:05:59.765Z
댓글 2
좋아요 0
조회수 508
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의에서처럼 이미지를 클릭해도 오른쪽 하단에 css 정보가 안보여요..
react node.js seo graphql next.js
박주연
2023-09-16T17:36:01.241Z
댓글 1
좋아요 0
조회수 658
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! accessToken 저장 관련하여 궁금한 점이 생겨 질문드립니다. 로그인의 결과로 accessToken을 받아오고 이것을 보안 문제를 해결하고자 로컬/세션 스토리지가 아닌 변수(recoil state)에 저장하셨고 이를 로그인한 사람의 정보를 요청하기 위해 쿠키를 통해 headers에 연동 시키셨는데, 이러면 변수에 저장한 값을 어쨌든 headers의 쿠키에서 확인할 수 있게 되어 글로벌 변수에 저장한 의미가 없어진 것 아닐까 하는 생각이 들어서 질문드리게 되었습니다. 항상 좋은 강의 감사드립니다.
react node.js seo graphql next.js
asdqqq
2023-09-14T13:43:30.004Z
댓글 1
좋아요 0
조회수 441
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 회원가입 과제를 하려고 하는데 너무 막막해서요... 모양만 똑같이 만들면 되는 건가요? 아니면 실제로 입력이 되는 형식대로 만들어야 하는 건가요?
react node.js seo graphql next.js
2023-09-14T06:37:12.976Z
댓글 2
좋아요 0
조회수 417
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. antd 임포트할때 이런 에러가 발생했는데요. 이전 커뮤니티 글을 확인해서 선생님이 말씀해주신 강의용 버전으로 바꾸고 yarn.lock과 노드모듈즈를 다시 지운다음 yarn install했는데도 아직도 저렇게 에러가 나와서요ㅠㅠ 뭐가 문제일까요? yarn dev해보니 아이콘은 잘 나와요
react node.js seo graphql next.js
치카치카
2023-09-12T15:33:54.685Z
댓글 2
좋아요 0
조회수 416
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
'강력한 CSS' 의 '선택자2' 강의 에서 강사님이 .class:hover {} 설명시 hover 에서 h는 묵음이라 over라고 발음한다고 하셨는데요. hover 의 h는 묵음이 아니네요. over(오버?) 유사하게 발음하기 보단 həvər(호버/허버 등)로 유사하게 발음해야 의사소통에 헷갈림이 없을거 같습니다. 별거 아닌 맞춤법, 발음 같은거를 잘못 됐다고 말하는건 아니고요, over는 개발업무나 개발 공부 등을 하면서 비교적 자주 나오는데, hover를 over로 발음시 의사소통에 혼란스러울거 같아서 노파심에 적어봤습니다. hover는 over로 발음하는 것보단, həvər(호버/허버 등)로 발음하는게 나을거 같습니다.
박진화
2023-09-12T08:02:19.950Z
댓글 1
좋아요 0
조회수 923
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요 ! 강의 중에 a tag를 감싸고 있는 컴포넌트를 만들경우라고 하셨는데 useRouter나 Link를 쓰게 되면 a tag를 굳이 안써도 되지 않을까 생각하는데 그럼에도 불구하고 a tag를 쓰는 경우가 있을까요?
seo next.js vercel csr ssg ssr
bj2525
2023-09-12T07:58:08.241Z
댓글 2
좋아요 1
조회수 351
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강사님 설치하는것도 잘 따라했는데 강사님은 import부분에 오류가 안뜨는데 저는 import부분에서 이런 오류가 뜨더라고요. tsconfig에서 뭐가 잘못됐단건지 모르겠어요ㅠ
react node.js seo graphql next.js
치카치카
2023-09-11T17:16:03.531Z
댓글 3
좋아요 0
조회수 500
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요! 마지막에 8:20에 나오는 설명대로 commit을 나누어서 진행하고 push and build를 하였는데 아래와 같이 error가 발생하고 있습니다. 어떤 부분이 문제인지 궁금합니다 Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error SyntaxError: Unexpected token < in JSON at position 0 Error: Export encountered errors on following paths:/ 아래에 코드로 build하면 정상적으로 동작합니다.. const stores = (await import('../public/stores.json')).default
seo next.js vercel csr ssg ssr
bj2525
2023-09-11T11:31:49.986Z
댓글 2
좋아요 1
조회수 349
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
TypeError: Cannot read properties of undefined (reading 'target') 이런 오류를 어떻게 해결해야 할 지 모르겠습니다!
react node.js seo graphql next.js
naeun
2023-09-10T04:51:29.254Z
댓글 1
좋아요 0
조회수 369
미해결
Next.js 시작하기(feat. 지도 서비스 개발)
아니요: 'X-Robots-Tag' http 헤더에서 'noindex'가 감지됨 페이지 색인을 생성할 수 없음: ‘NOINDEX’ 태그에 의해 제외되었습니다. 라고 뜨는데, Robots.txt 도 제 url 에 맞춰서 변경했는데 뭐가 문제가 되는지 모르겠습니다..! 네이버 서치어드바이저에는 잘 등록된 상태 입니다.
seo next.js vercel csr ssg ssr
박혜민
2023-09-09T12:33:30.871Z
댓글 2
좋아요 0
조회수 2758
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
저는 scss 대신 emotion 스타일을 사용하고 컴포넌트or 페이지를 스타일 파일과 한폴더에 넣어 사용합니다 (아래와 같은 폴더구조) 페이지 폴더가 라우트 기능을 해서인지 다음과 같이 빌드 최적화에 실패햇다고 뜨는 현상이 있는데 컴포넌트폴더 에서는 문제없이 되는데 페이지 폴더에서만 이렇게 되는 원인이 무엇인가요? 또 해당 페이지를 컴포넌트로 이동신후 페이지에서 단순 호출만 하게 한다면 최적화가 정상적으로 되는건가요?
seo next.js vercel csr ssg ssr
최석우
2023-09-08T09:14:25.170Z
댓글 1
좋아요 1
조회수 467
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! css 싸이월드 1일차 과제 중에 아이콘과 글자 사이의 간격을 조절할 수 있는 방법이 있는 지 궁금해져 질문 드립니다! 아래는 제가 작성한 html 코드이고 아래는 라이브서버 화면입니다! 별과 인스타그램 사이 간격이 위 3개의 글자보다 넓어 신경이 쓰이네요... 차이를 알고자 배경색을 깔아둔 것입니다. 답변 주시면 감사하겠습니다 :)
react node.js seo graphql next.js
두두
2023-09-08T07:52:02.560Z
댓글 1
좋아요 0
조회수 766
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요.. 매번 사소한걸로 질문드리고 있어욥... 싸이월드 만들기 2탄 수업들으면서 같이 실습하고 있는데 html에는 제대로 입력을 한것같은데 화면에는 제대로 안떠서 문의글 남깁니다... 머가 문제인지 모르겠어요ㅠㅠ
react node.js seo graphql next.js
oonaa523
2023-09-07T13:10:23.688Z
댓글 1
좋아요 0
조회수 569
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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 값들이 바뀌질 않습니다.
react node.js seo graphql next.js
냥냥냥편치
2023-09-07T06:56:22.344Z
댓글 1
좋아요 0
조회수 270
미해결
Next.js 시작하기(feat. 지도 서비스 개발)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 네이버 클라우드 플랫폼에도 사용횟수는 늘어나고 있고 css를 건드려봐도 map이 생성이안되서 height 100% 가 먹히질 않고있습니다.. 뭐가문제일까요 ㅠㅠ ++ 개발자 도구 Network 를 열어봐도 잘 받아오고잇고 지도 이미지도 받아오는것을 확인 하였습니다.
seo next.js vercel csr ssg ssr
복실묘
2023-09-07T06:46:01.854Z
댓글 1
좋아요 1
조회수 513
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
image upload 의 주소가 google로 되어있다고 설명해주셨는데 백엔드 개발자가 google 쪽으로 설정한 것인지 아니면 graphql 에서 기본적으로 google 주소를 가지고 있는 것인지 궁금합니다
react node.js seo graphql next.js
kyb1208tg
2023-09-07T06:31:29.784Z
댓글 1
좋아요 0
조회수 261
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! section 26 포트폴리오 수행중, Invariant Violation이라는 에러가 떠서 이렇게 질문 드립니다.
react node.js seo graphql next.js
2023-09-05T10:18:55.182Z
댓글 1
좋아요 0
조회수 214
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
next Link를 이용하게 되면 해당 페이지에서 링크 페이지의 js를 미리 불러온다는 내용이 강의에 존재하였는데 헤더나 푸터등 모든페이지에 공용으로 들어가는 영역에 site맵 존재하고 모든 링크를 걸어 놓게 된다면 모든 페이지가 미리 js 형태로 불러와 지게 되는건가요? 해당 경우에는 next의 강점이 많이 무뎌질거 같아 질문합니다.
seo next.js vercel csr ssg ssr
최석우
2023-09-05T07:48:08.930Z
댓글 2
좋아요 1
조회수 299
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
04-04-graphql-mutation-input 파트에서 gql세팅에서 백틱을 사용하는데 백틱 내부 내용이 저는 문자열 처리되어서 강의와 같이 문자열이 아닌 함수 형태로 만들 수 있는 플러그인이 무엇일까요? 동작은 똑같이 동작하기는 합니다
react node.js seo graphql next.js
sirlyun23
2023-09-05T06:10:32.498Z
댓글 1
좋아요 0
조회수 214
