inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

매장 데이터 json 파일

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

안녕하세요, 강사님 강의 잘 수강하고 있습니다! 3-2 매장 데이터 불러오기 강의에서 매장 정보가 담긴 json 파일은 어디서 구해오는 파일인지 궁금합니다. 올려주신 json파일로 강의 수강 진행하고 있지만, 원하는 다른 매장 데이터로 이용하고 싶을 경우 어디에서 이 json 파일을 얻어와야 하는 것인가요? 감사합니다!

  • seo
  • next.js
  • vercel
  • Next.js
  • csr
  • ssg
  • csr
  • ssg
  • ssr
  • vercel
  • ssr
CJY00N 댓글 2 좋아요 3 조회수 652

Notion 공유 요청을 보냈는데 오지 않았어요.

미해결

코딩테스트 [ ALL IN ONE ]

개발자 취업 비밀노트는 제대로 왔는데 코딩테스트 강의는 공유가 오지 않네요... 제 아아디와 이메일은 아이디 : SecondPhantom 이메일은 second2phatom@gmail.com 입니다.

  • python
  • algorithm
  • 코테 준비 같이 해요!
댓글 1 좋아요 1 조회수 517

상태관리 라이브러리 관련 수업은 없을까요?

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

요즘 프론트 공고를 보면, 경력/신입을 불문하고 redux, recoil, mobX 등 상태관리 라이브러리가 필수 자격요건에 들어가있는 경우가 많더라구요. 그런데 해당 props 수업을 듣고 생각나서 커리큘럼을 다시 보니까 다른 기술들은 다 강의가 있는데 딱 상태관리 라이브러리 관련 수업 제목만 안보였습니다. 혹시나 뒤의 강의 내용에 포함되어 있는 건지는 아직 다 보진 못했지만 관련 강의가 없다면 상태관리 라이브러리는 포트폴리오에 굳이 적용시키지 않아도 추후 서류를 넣을 때 포트폴리오에 상태관리 라이브러리 적용 경험이 없다면 합불 당락을 결정할 정도로 하자가 되지 않을지 궁금합니다. 아직 이른 걱정일지는 모르겠지만, 나중에 완강하고 따로 상태관리 라이브러리를 공부해서 추후 포트폴리오 완성 시 별도로 공부해서 적용 시켜볼지, 아니면 적용 시키지 않고 그대로 포트폴리오로 써도 상관 없을지 멘토님의 의견이 궁금합니다. 좋은 강의 감사합니다.

  • node.js
  • graphql
  • seo
  • react
  • next.js
  • nodejs
  • Next.js
FRONTEER 댓글 1 좋아요 0 조회수 497

경로별 페이지명은 무조건 index.js 여야 하나요?

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

문득 수업 듣다가 궁금해진 부분인데요, boards 폴더 안에 list 폴더 만들고 index.js 만들고 detail 폴더 만들고 index.js 만드는게 아니라, 바로 같은 경로에 list.js, detail.js 이런 식으로 만드는건 next.js에서 안되는 방식일까요?

  • node.js
  • react
  • seo
  • graphql
  • nodejs
  • next.js
  • Next.js
FRONTEER 댓글 1 좋아요 0 조회수 1247

이렇게 코드 짜도 되나요?

미해결

파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)

강사님 안녕하세요. 강의 잘 듣고 있습니다. 감사합니다. 세가지 질문이 있습니다. 1. 아래와 같이 코드 짜도 되나요? 2. 코드가 맞다면, 제가 탐색 알고리즘 원리로 푼게 맞나요? 3. 강사님 코드가 더 효율이 높다고 보면 되는건가요? 이정도 차이면 코딩테스트에서 큰건가요? - 제 코드 실행시간: 0.00021576881408691406 - 강사님 코드 시간: 0.00020885467529296875

  • 코테 준비 같이 해요!
  • 코딩-테스트
  • python
홍푸름 댓글 2 좋아요 1 조회수 799

Server Error Error: The default export is not a React Component in page: "/02-02-counter-state"

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강의 들을때마다 점점 지치네요.. 맥 윈도우 다쓰는데 매번 오류나고 뭐가문제인지 모르겠네요 공부를 하려고 해도 의욕이 떨어져요 Server Error Error: The default export is not a React Component in page: "/02-02-counter-state" This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack Object.renderToHTML file:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/render.js (234:19) doRender file:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/next-server.js (1392:57) <unknown> file:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/next-server.js (1487:34) <unknown> file:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/response-cache.js (63:42) ResponseCache.get file:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/response-cache.js (80:11) DevServer.renderToResponseWithComponents file:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/next-server.js (1423:53) DevServer.renderToResponse file:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/next-server.js (1559:39) process.processTicksAndRejections node:internal/process/task_queues (95:5) async DevServer.pipe file:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/next-server.js (1111:25) async Object.fn file:///Users/jinho/Desktop/codecamp-frontend-jinho/class/node_modules/next/dist/server/next-server.js (912:21)

  • react
  • node.js
  • seo
  • graphql
  • nodejs
  • next.js
  • Next.js
김진호 댓글 1 좋아요 0 조회수 1366

yarn generate 에러

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

Invalid Custom Plugin "typescript" 라면서 에러가 뜹니다 어떻게 해결해야 할까요?

  • node.js
  • Next.js
  • nodejs
  • seo
  • react
  • next.js
  • graphql
cheolung 댓글 1 좋아요 1 조회수 722

파이참 gutter 색상이 너무 궁금합니다.

해결됨

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

파이참 사용시 좌측처럼 코드가 있는부분은 색상이 다르던데 이건 어떻게 해야할까요? 강의 듣다가 이게 궁금해서 계속 옆길로 빠지게 됩니다 ;;;

  • python
  • docker
  • react
  • django
히징징 댓글 1 좋아요 0 조회수 375

수정 페이지 마운트 직후, 온체인지 핸들러가 인풋 값을 ""으로 인식하여, 인풋 값를 지웠을 경우, 온체인지 핸들러가 값의 변동을 인식하지 못하는 문제가 있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 강의 잘 보고있습니다. 수정 페이지 마운트 직후, 온체인지 핸들러가 인풋 값을 ""으로 인식하고, 인풋 값를 지웠을 경우, 온체인지 핸들러가 값의 변동을 인식하지 못하는 문제가 있습니다. 즉, 수정 페이지의 각 인풋 디폴트 값들에 데이터가 불러와진 후, 값을 입력하는 것이 아니라 삭제할 경우에 값의 변동을 온체인지 핸들러가 인식하지 못하여 발생합니다. 따라서, 인풋의 온체인지 핸들러를 통해 인풋 값들이 비어있는지 확인하는 유효성 검사에 작은 오류가 있습니다. 수정페이지 마운트 직후 데이터를 불러온 뒤, 값이 인풋에 입력된 후, 온체인지핸들러가 변동을 인식하게 할 수 있을까요? 혹시 비슷한 인풋 값들을 객체에 묶어 저장하는 방식을 지양해야 할까요? import { type ChangeEvent, useState, useRef, useEffect } from 'react'; import { useRouter } from 'next/router'; import BoardWrite_presenter from './BoardWrite_presenter'; import { CREATE_BOARD, UPDATE_BOARD, UPLOAD_FILE } from './BoardWrite_queries'; import { useMutation, useQuery } from '@apollo/client'; import { type IBoardWrite_container_Props, type IUpdatedVariables, } from './BoardWrite_types'; import { type Address } from 'react-daum-postcode/lib/loadPostcode'; import { checkFileValidation } from '../../commons/checkFileValidation'; import { Modal, Spin } from 'antd'; import type { RcFile } from 'antd/es/upload'; import type { UploadFile } from 'antd/es/upload/interface'; import { getBase64 } from '@/src/commons/utils/utils'; import { FETCH_BOARD } from '../detail/BoardDetail_queries'; import { type IQuery } from '@/src/commons/types/generated/types'; import { Loading3QuartersOutlined } from '@ant-design/icons'; export default function BoardWrite_container( props: IBoardWrite_container_Props ) { const router = useRouter(); const boardId = router.query.boardId; if (props.isEditing && !boardId) { return ( <Spin indicator={<Loading3QuartersOutlined spin />} /> ) } const { data } = useQuery<Pick<IQuery, 'fetchBoard'>>(FETCH_BOARD, { variables: { boardId, }, }); const fetchBoard = data?.fetchBoard; if (props.isEditing && !boardId && !fetchBoard) { return ( <Spin indicator={<Loading3QuartersOutlined spin />} /> ) } const [createBoard] = useMutation(CREATE_BOARD); const [updateBoard] = useMutation(UPDATE_BOARD); const [images, setImages] = useState('youtube'); const [isOpen, setIsOpen] = useState(false); const [writerError, setWriterError] = useState(false); const [passwordError, setPasswordError] = useState(false); const [titleError, setTitleError] = useState(false); const [contentsError, setContentsError] = useState(false); const [valid, setValid] = useState(false); interface ICoreInput { [key: string]: string writer: string password: string title: string contents: string } const [coreInput, setCoreInput] = useState<ICoreInput>({ writer: fetchBoard?.writer ?? '', password: '', title: fetchBoard?.title ?? '', contents: fetchBoard?.contents ?? '' }) const [coreInputErorr, setCoreInputErorr] = useState({ writer: false, password: false, title: false, contents: false }) useEffect(() => { if (fetchBoard) { setCoreInput({ ...coreInput, writer: String(fetchBoard.writer), title: String(fetchBoard.title), contents: String(fetchBoard.contents), }) } }, [data]) const onChangeCoreInput = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { setCoreInput({ ...coreInput, [e.currentTarget.id]: e.currentTarget.value }); setCoreInputErorr({ ...coreInputErorr, [e.currentTarget.id]: false }); const AllInputs: string[] = []; for (const prop in coreInput) { if (prop !== e.currentTarget.id) { AllInputs.push(coreInput[prop]) } else { AllInputs.push(e.currentTarget.value) } } console.log("AllInputs : " + AllInputs) if (!AllInputs.includes('' && "undefined")) { setValid(true); } else setValid(false); }; const onChangeImages = (e: ChangeEvent<HTMLInputElement>) => { setImages(e.target.value); }; const [input, setInput] = useState({ zipcode: "", address: "", addressDetail: "", youtubeUrl: "" }) const onChangeInput = (e: ChangeEvent<HTMLInputElement>) => { setInput({ ...input, [e.target.id]: e.target.value }); }; const onSubmit = async (e: { preventDefault: () => void }) => { e.preventDefault(); if (coreInput.writer === '') { setWriterError(true); } if (coreInput.password === '') { setPasswordError(true); } if (coreInput.title === '') { setTitleError(true); } if (coreInput.contents === '') { setContentsError(true); } if (coreInput.writer && coreInput.password && coreInput.title && coreInput.contents) { try { const result = await createBoard({ variables: { createBoardInput: { writer: coreInput.writer, contents: coreInput.contents, password: coreInput.password, title: coreInput.title, youtubeUrl: input.youtubeUrl, images, boardAddress: { zipcode: input.zipcode, address: input.address, addressDetail: input.addressDetail, }, }, }, }); void router.push(`/boards/${result.data.createBoard._id}`); } catch (error) { if (error instanceof Error) alert(error.message); } } }; const onUpdate = async (e: { preventDefault: () => void }) => { e.preventDefault(); const updatedVariables: IUpdatedVariables = { boardId, password: coreInput.password, updateBoardInput: { contents: coreInput.contents, title: coreInput.title, youtubeUrl: input.youtubeUrl, images, boardAddress: { zipcode: input.zipcode, address: input.address, addressDetail: input.addressDetail, }, }, }; if (!coreInput.password) { setPasswordError(true); } if (!coreInput.title) { setTitleError(true); } if (!coreInput.contents) { setContentsError(true); } if (!coreInput.password && !coreInput.title && !coreInput.contents) { try { const result = await updateBoard({ variables: updatedVariables, }); void router.push(`/boards/${result.data.updateBoard._id}`); } catch (error) { if (error instanceof Error) alert(error.message); } } }; const onToggleModal = () => { setIsOpen((prev) => !prev); }; const handleComplete = (data: Address) => { let fullAddress = data.address; let extraAddress = ''; if (data.addressType === 'R') { if (data.bname !== '') { extraAddress += data.bname; } if (data.buildingName !== '') { extraAddress += extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName; } fullAddress += extraAddress !== '' ? ` (${extraAddress})` : ''; } setInput({ ...input, address: fullAddress, zipcode: data.zonecode }); onToggleModal(); }; const [uploadFile] = useMutation(UPLOAD_FILE); const [imgUrl, setImgUrl] = useState("") const fileRef = useRef<HTMLInputElement>(null) const onClickFile = () => { fileRef.current?.click() } const onChangeFile = async (e: ChangeEvent<HTMLInputElement>) => { const file = e.target.files?.[0]; const isValid = checkFileValidation(file); if (!isValid) { return } if (isValid) { try { const result = await uploadFile({ variables: { file } }) setImgUrl(result.data?.uploadFile.url) } catch (error) { if (error instanceof Error) { Modal.error({ content: error.message }) } } } } const [previewOpen, setPreviewOpen] = useState(false); const [previewImage, setPreviewImage] = useState(''); const [previewTitle, setPreviewTitle] = useState(''); const [fileList, setFileList] = useState<UploadFile[]>([]); const handleCancel = () => { setPreviewOpen(false); }; const handlePreview = async (file: UploadFile) => { if (!file.url && !file.preview) { file.preview = await getBase64(file.originFileObj as RcFile); } setPreviewImage(file.url ?? (file.preview as string)); setPreviewOpen(true); setPreviewTitle(file.url ? (file.name || file.url.substring(file.url.lastIndexOf('/') + 1)) : ""); }; return ( <BoardWrite_presenter onChangeInput={onChangeInput} onChangeCoreInput={onChangeCoreInput} onChangeImages={onChangeImages} writerError={writerError} passwordError={passwordError} titleError={titleError} contentsError={contentsError} zipcode={input.zipcode} address={input.address} onSubmit={onSubmit} onUpdate={onUpdate} valid={valid} isEditing={props.isEditing} data={data} isOpen={isOpen} handleComplete={handleComplete} onToggleModal={onToggleModal} imgUrl={imgUrl} onClickFile={onClickFile} onChangeFile={onChangeFile} fileRef={fileRef} fileList={fileList} handlePreview={handlePreview} setFileList={setFileList} previewOpen={previewOpen} previewTitle={previewTitle} handleCancel={handleCancel} previewImage={previewImage} /> ); } import { Button, Image, Modal, Upload } from 'antd'; import DaumPostcodeEmbed from 'react-daum-postcode'; import { Main, Title } from '../../../commons/styles/emotion'; import * as S from './BoardWrite_styles'; import { type IBoardWrite_presenter_Props } from './BoardWrite_types'; import type { UploadProps } from 'antd/es/upload'; import { PlusOutlined } from '@ant-design/icons'; export default function BoardWrite_presenter( props: IBoardWrite_presenter_Props ) { const valid = props.valid; const isEditing = props.isEditing; const data = props.data?.fetchBoard; const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => { props.setFileList(newFileList); }; const uploadButton = ( <div> <PlusOutlined /> <div style={{ marginTop: 8 }}>Upload</div> </div> ); return ( <Main> <S.Form> <Title>게시물 {isEditing ? '수정' : '등록'}</Title> <div className="writer"> <S.InputWrapper> <label>작성자</label> <input id="writer" onChange={props.onChangeCoreInput} type="text" placeholder="이름을 입력해주세요." defaultValue={props.data?.fetchBoard.writer ?? ""} readOnly={!!props.data?.fetchBoard.writer} /> {props.writerError && ( <p className="alert">이름을 입력해주세요.</p> )} </S.InputWrapper> <S.InputWrapper> <label>비밀번호</label> <input id="password" onChange={props.onChangeCoreInput} autoComplete="off" type="password" placeholder="비밀번호를 입력해주세요." defaultValue={``} /> {props.passwordError && ( <p className="alert">비밀번호를 입력해주세요.</p> )} </S.InputWrapper> </div> <S.InputWrapper> <label>제목</label> <input id='title' onChange={props.onChangeCoreInput} type="text" placeholder="제목을 작성해주세요." defaultValue={data?.title} /> {props.titleError && ( <p className="alert">제목을 작성해주세요.</p> )} </S.InputWrapper> <S.InputWrapper> <label>내용</label> <textarea id='contents' onChange={props.onChangeCoreInput} placeholder="내용을 작성해주세요." defaultValue={props.data?.fetchBoard.contents} /> {props.contentsError && ( <p className="alert">내용을 작성해주세요.</p> )} </S.InputWrapper> <S.InputWrapper> <label>주소</label> <div className="zipcode"> <input id="zipcode" onChange={props.onChangeInput} type="text" // placeholder="00000" readOnly value={ props.address || (props.data?.fetchBoard.boardAddress?.address ?? "") } /> <button onClick={(e) => { e.preventDefault(); props.onToggleModal(); }} > 우편번호 검색 </button> {props.isOpen && ( <Modal title={'우편번호 검색'} open={props.isOpen} onOk={props.onToggleModal} onCancel={props.onToggleModal} > <DaumPostcodeEmbed onComplete={props.handleComplete} ></DaumPostcodeEmbed> </Modal> )} </div> <input id='address' onChange={props.onChangeInput} className="address" type="text" readOnly value={props.address !== "undefined" ? props.address : ""} /> <input id='addressDetail' onChange={props.onChangeInput} type="text" defaultValue={ data?.boardAddress?.addressDetail ? data?.boardAddress?.addressDetail : '' } /> </S.InputWrapper> <S.InputWrapper> <label>유튜브</label> <input id='youtubeUrl' onChange={props.onChangeInput} type="text" placeholder="링크를 복사해주세요." defaultValue={ data?.youtubeUrl ? data?.youtubeUrl : '' } /> </S.InputWrapper> <S.InputWrapper> <label>사진업로드</label> <Button onClick={props.onClickFile}>사진 업로드</Button> <input style={{ display: "none" }} ref={props.fileRef} onChange={props.onChangeFile} type="file" /> </S.InputWrapper> {props.imgUrl && <Image src={`https://storage.googleapis.com/${props.imgUrl}`}></Image>} <S.InputWrapper> <label>사진 첨부</label> <Upload // action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={props.fileList} onPreview={props.handlePreview} onChange={handleChange} > {props.fileList.length >= 8 ? null : uploadButton} </Upload> <Modal open={props.previewOpen} title={props.previewTitle} footer={null} onCancel={props.handleCancel}> <img alt={props.previewTitle} style={{ width: '100%' }} src={props.previewImage} /> </Modal> </S.InputWrapper> <S.InputWrapper> <div className="radios"> <span> <input type="radio" id="youtube" name="radios" value="youtube" defaultChecked onChange={props.onChangeImages} /> <label htmlFor="youtube">유튜브</label> </span> <span> <input type="radio" id="image" name="radios" value="image" onChange={props.onChangeImages} /> <label htmlFor="image">사진</label> </span> </div> </S.InputWrapper> <S.SubmitButton onClick={isEditing ? props.onUpdate : props.onSubmit} valid={valid} disabled={!valid} > {isEditing ? '수정하기' : '등록하기'} </S.SubmitButton> </S.Form> </Main> ); }

  • node.js
  • Next.js
  • react
  • nodejs
  • next.js
  • graphql
  • seo
이경석 댓글 1 좋아요 0 조회수 411

선생님 세그멘테이션관련 질문을 드립니다 ㅎ

미해결

[개정판] 딥러닝 컴퓨터 비전 완벽 가이드

선생님 안녕하세요 이번에 선생님강의 머신러닝2개, 컴퓨터비젼2개를 모두 완강한 열혈팬 회사원입니다 ㅎㅎㅎ 선생님 강의 덕분에 이번에 회사에서 세그멘테이션을 담당하게 되엇는데, 세그멘테이션강의관련 질문이 잇어서 이렇게 메일을 드립니다 ㅎ 바쁘시겟지만 조언 좀 부탁드리겟습니다 <배경> 이번에 검출할 객체(첨부파일)는 바늘과 같이 아주 가늘고 긴 객체(섬유)인데 이미지1장당 객체전체면적이 0.5 - 2%밖에 없는 아주 미세한 객체입니다. 실제원본데이터에서도 객체는 눈으로 자세히 보아야 검출할수 잇을정도입니다 ㅎ (학습데이터30장, 학습마스크영상 30장, 테스트데이터 5장 ). 사용모델은 깃헙에서 공개한 U-NET모델로 세그멘테이션을 수행햇는데, 첫epoch부터 정확도가 90%이상, 로스가 0.1이하로 상당히 높은 성능을 보엿는데 예측결과이미지영상에는 아무것도 검출이 안된 상태(완전검은영상)입니다. 참고로 다른 이미지데이터를 가지고 U-NET모델로 세그멘테이션을 수행해본결과 예측결과도 상당히 잘되어서 모델에는 문제가없는것으로 판단햇습니다. 여기서 조언을 좀 부탁드리겠습니다. 1> 정확도는 90%이상, 로스가 0.1이하인데 아무것도 검출이 안되엇다는 것은 , 객체가 너무미세해서 검출을 못한걸로 이해해도 되는지요? 2> 이런경우 성능을 올리기 위한방법으로 오그멘테이션방법도 잇는데, 특히 사용해야할 오그멘테이션방법이 잇는지요? 참고로 확대기능등을 사용햇습니다. 3> 다른방법으로 선생님CNN강의에서사용한 mark-rcnn 방법도 해볼려고 하는데, 어떻게 생각하시는지요? 글을 적다보기 글이 너무 길어져서 죄송합니다, 바쁘시겟지만 조언 좀 부탁드리겟습니다 ㅎ

  • 머신러닝
  • tensorflow
  • 딥러닝
  • 컴퓨터-비전
  • keras
  • python
  • 딥러닝
  • 컴퓨터-비전
  • 머신러닝 배워볼래요?
anycad11 댓글 1 좋아요 0 조회수 422

UI 재사용성 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

export const Row = styled.div` display: flex; flex-direction: row; width: 100%; justify-content: space-between; padding: 0 24px; margin: 8px 0; `; <Row style={{ justifyContent: "start" }}> <InputFieldSmall style={{ marginRight: "16px" }}> <Input placeholder="07250" /> </InputFieldSmall> <ButtonBlack>우편번호 검색</ButtonBlack> </Row> 안녕하세요! 컴포넌트 재사용성에 관하여 질문드리고 싶은게 있습니다! 1일차 게시글 작성 UI 만들기 과제를 진행하던 중 CSS 스타일을 재사용 하기 위해서 Row라는 컴포넌트를 만들었습니다. UI상 justify-content속성에 space-between 또는 flex-start 같이 약간만 변하는 부분이 존재해서 inline-stlye을 사용하였습니다. 제공 해주신 레퍼런스 코드에는 inline-style을 사용하지 않으셨는데 inline-style을 사용하는 것은 좋지 않은 방식인가요?

  • nodejs
  • node.js
  • graphql
  • react
  • next.js
  • seo
  • Next.js
aphopis 댓글 1 좋아요 0 조회수 412

SSG 설명에서 나온 Disable cache 의 다른 렌더링방식들과 비교

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

안녕하세요! SSG 관련 설명해주실 때 개발자도구에서 Disable cache를 하면서 static 데이터가 이미 들어와있고 etag가 여전히 그대로인 것으로 캐시와 상관 없이 해당 static 데이터가 영향을 주는 것을 확인해주셨는데요. 그렇다면 SSR, CSR에서 Disable cache 했을시 위의 현상과 다른게 있나요 ... ? SSR은 서버에서 계속 보낼테니 cache랑 상관 없을 것 같고 ... CSR도 JS 파일을 들고 있을테니 이 역시 상관 없을 것 같아서요...! 혹시 CSR 특징에서 언급해주신 'JS 캐시 가능' 과 관련이 있다면 브라우저가 JS 캐시를 어떻게 활용하는지도 궁금합니다! 감사합니다!

  • seo
  • next.js
  • vercel
  • Next.js
  • vercel
  • csr
  • csr
  • ssg
  • ssr
  • ssg
극복밤송 댓글 2 좋아요 2 조회수 667

searchbar 포트폴리오 리뷰 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

searchbar 포트폴리오 리뷰에서 props로 searchbar 컴포넌트에 refechBoardsComment넘겨서 searchbar 컴포넌트에서 refechBoardsComment이용하여 페이지네이션을 수정없이 lastpage를변경할 수 있는데 const { data: dataBoardsCount, refetch: refechBoardsCount } = useQuery<Pick<IQuery, "fetchBoardsCount">,IQueryFetchBoardsCountArgs>(FETCH_BOARDSCOUNT,{variables:{search:keyword}}); 이렇게 FETCH_BOARDSCOUNT에 variables 값의 search를 keyword(검색어)로 주어도 똑같이 작동하는데 이 방법이 refechBoardsComment props로 넘겨줄 필요없어 간단한거 같은데 refechBoardsComment이용한 것과 같은거 맞나요? 아님 refechBoardsComment를 이용한 것과 차이가 있는 건가요?

  • node.js
  • seo
  • nodejs
  • react
  • next.js
  • graphql
  • Next.js
Main 댓글 1 좋아요 0 조회수 403

section 04 퀴즈 질문입니다 ㅠ

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

삭제하기 버튼을 눌럿을때 이런 에러가 뜨는데 이유를 모르겠습니다 ㅜㅠ

  • Next.js
  • node.js
  • graphql
  • react
  • next.js
  • seo
  • nodejs
호겸 댓글 1 좋아요 0 조회수 316

graphql 관련 질문이 있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 수업 내용 중, graphql 실습 관련하여 궁금한 것이 있습니다. 실습 과정에서 createProduct API에 파라미터 값을 저장해서 보내려 하는 과정에서 mutation을 구성할 때 createProductInput 이라는 부분은 REST API의 다중 JSON 방식으로 보내는 것으로 해석하면 될까요? 그런데 해당 데이터를 fetchProduct 로 조회 시 다중 JSON과 같은 그림이 아닌, 그냥 같은 한 덩어리로 넘어오는데 왜 저장할 때는 다중 JSON과 같은 방식으로 넣고 조회 시에는 그냥 뭉쳐져서 조회 되는지 차이가 궁금합니다. (그럼 굳이 CREATE 시 다중 JSON과 같은 방식으로 넣는 이유가 궁금합니다) 그리고 중간에 createProductInput 을 사용하는 이유에 대해서 오해를 방지하기 위함이라고 말씀해주셨는데 키 값도 있는데 왜 오해를 불러 일으킨다는 것인지 잘 이해를 못했습니다. 질문 요약 첫 사진의 createProductInput 부분이 REST API의 다중 JSON 같은 방식이라고 보면 될까요? createProduct 로 값을 넣을 때는 이중 JSON과 같은 방식으로 파라미터를 넣고 API를 넘겨줬는데 데이터를 조회하면 그냥 1차원 JSON으로 넘어오는데 그럼 왜 굳이 createProduct 에서 이중 JSON 방식으로 구성해서 넣는 것인지 궁금합니다. createProduct 에서 createProductInput 로 한 번 더 감싸는 자세한 이유 (수업 중간에 number라는 키 값으로 보이는 것도 있는데 오해를 불러 일으킬 수도 있다는 말씀에서 왜 오해인지 자세히 이해를 못함) 입니다. 감사합니다.

  • node.js
  • Next.js
  • seo
  • nodejs
  • next.js
  • graphql
  • react
FRONTEER 댓글 1 좋아요 0 조회수 501

_app.tsx 에러

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

_app.tsx 로 바꾸고나서 <Component/>에서 에러가 나는데 어떻게 해야하나요...?

  • react
  • node.js
  • graphql
  • seo
  • nodejs
  • next.js
  • Next.js
jisu2775 댓글 2 좋아요 0 조회수 526

error An unexpected error occurred: "/Users/leejeonghun/Desktop/ ... /class/package.json: Unexpected token } in JSON at position 670".

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

멘토님 안녕하세요, 1) 웹페이지를 실행시키는 yarn dev 명령어를 입력했을때, 페이위 제목과 같은 에러가 떴는데 무엇이 문제일까요? 2) 인덱스와 홈.모듈.css 두 창을 비교 설명하시는 과정에서 강의 그대로 따라 했는데 저의 홈.모듈 창에는 title 이 아얘 뜨지 않았습니다. 이 경우는 혹시 제가 모르는 사이 리액트 17이 아니라 18이 깔려있어서 그런걸까요? 아니면 다른 문제일까요? (분명 리액트 17.0.2?로 수정해서 저장하고서 설치했었는데요ㅜㅜ)

  • node.js
  • seo
  • react
  • nodejs
  • next.js
  • graphql
  • Next.js
충실한 독수리 댓글 1 좋아요 0 조회수 1045

props.data?.fetchBoard?.writer 와 props.data?.fetchBoard.writer 차이

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

BoardDetail.presenter.js 파일에서 데이터 가져올 때, props.data ?.fetchBoard?.writer로 가져오시는 데, props.data ?.fetchBoard.writer로 해도 오류 안 나고 잘 작동하는데 한 번 더 ?를 사용해서 확인하는 이유가 궁금합니다!

  • react
  • node.js
  • seo
  • nodejs
  • next.js
  • graphql
  • Next.js
구구 댓글 1 좋아요 1 조회수 447

Error: error: Unexpected token `< (jsx tag start)`

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

수업 자료와 똑같이 코딩을 하였는데도 불구하고 해당 페이지로 접속을 하면 위와같은 오류가 출력됩니다. 무슨문제인지 알 수 있을까요..? ㅜㅠ

  • node.js
  • Next.js
  • graphql
  • nodejs
  • next.js
  • react
  • seo
권건우 댓글 1 좋아요 0 조회수 1243

인기 태그

인프런 TOP Writers

주간 인기글