inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

DiaryItem에 key={it.id}전달 이유

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요, 강의를 수강하다 궁금한 점이 있어 여쭤보려합니다. React에서 배열 사용하기 1 - 리스트 렌더링(조회) 강의 16분 35초 쯤 DiaryItem에 key={it.id}값을 전달하고 뒤에 {...it}을 전달하는 코드를 작성하게 되는데 {...it}을 전달하게 되면 it 내부에 있는 id도 같이 전달되게 되는데 굳이 key값에 it.id를 중복해서 전달하는 이유가 궁금합니다. 그래서 key={it.id}를 지워보았는데 코드는 동일하게 동작하였습니다. 이유가 무엇인가요?

  • nodejs
  • javascript
  • react
박태완 댓글 1 좋아요 1 조회수 390

uuid 에러

해결됨

풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기

안녕하세요. 수업을 듣던중에 같은 방법으로 uuid 라이브러리를 다운받고 실행을 하고있는데 이런 에러가 발생을 하고 있는데 혹시 어떤 부분이 문제인지 알수있을까요..? @types/uuid 로 삭제 설치 다시 해보고 진행해도 계속 같은 에러가 발생합니다 ㅠ <package.json> "dependencies": { "@types/uuid": "^8.3.4", "graphql-request": "^5.0.0", "graphql-tag": "^2.12.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-query": "^3.39.2", "react-router-dom": "^6.4.3", "sass": "^1.56.1" }, <handlers.ts> import { v4 as uuid } from "uuid"; const mock_products = Array.from({ length: 20 }).map((_, i) => ({ id: uuid(), imageUrl: `https://placeimg.com/200/150/${i + 1}`, price: 50000, title: `임시상품${i + 1}`, description: `임시상세내용${i + 1}`, createAt: new Date(1668159460287 + i * 1000 * 60 * 60 * 10).toString(), })); <에러 내용> [plugin:vite:import-analysis] Failed to resolve import "uuid" from "src\mocks\handlers.ts". Does the file exist? C:/Users/home/Desktop/배포/shop/shopping/src/mocks/handlers.ts:3:27 1 | import { graphql } from "msw"; 2 | import GET_PRODUCTS from "../graphql/products"; 3 | import { v4 as uuid } from "uuid"; | ^ 4 | const mock_products = Array.from({ length: 20 }).map((_, i) => ({ 5 | id: uuid(), at formatError (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:39971:46) at TransformContext.error (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:39967:19) at normalizeUrl (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:36835:33) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async TransformContext.transform (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:36968:47) at async Object.transform (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:40224:30) at async loadAndTransform (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dis

  • firebase
  • graphql
  • react
어벙리벙 댓글 1 좋아요 0 조회수 974

index.tsx에서 ProductItem부분에서 해당 반환 형식이 유효하지 않다고 할 때

해결됨

풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기

index.tsx에서 ProductItem부분에서 해당 반환 형식이 유효하지 않다고 하면서 화면에 Display되지 않을때 어디를 확인하면 되는지 조언 부탁드립니다~ 데이터는 BASE_URL로 부터 잘 오고 있습니다 mac에서 vsc사용하고 있습니다 아래는 해당부분입니다 import { useQuery } from "react-query" import ProductItem from "../../components/product/item" import { fetcher, QueryKeys } from "../../queryClient" import {Product} from "../../types" const ProductList = () => { const {data} = useQuery<Product[]>(QueryKeys.PRODUCTS, () => fetcher({ method: 'GET', path: '/products' }), ) /* id: 1 title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops" price: 109.95 description: "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday" category: "men's clothing" image: "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg" ▶ rating 2 items rate: 3.9 count: 120 */ return ( <div> <ul> {data?.map(product => ( <ProductItem {...product} key={product.id} /> ))} </ul> </div> ) //return (<div>상품목록</div>) } export default ProductList components/product/item.tsx 파일입니다

  • graphql
  • firebase
  • react
givita_dev 댓글 2 좋아요 0 조회수 488

npm start 이후 크롬창에 아무것도 뜨지않음

미해결

처음 만난 리액트(React)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 사진 첨부 순서대로 index.js, Comment.jsx, CommentList.jsx, npm start시 출력되는 크롬 화면입니다. 이전 시계 실습에서도 동일하게 빈 화면이 출력 됐는데 타 수강생님이 올려주신 코드를 적용하니 해결이 됐어서 다음 챕터를 진행하였습니다. 그런데 동일하게 빈화면이 출력되어 어떤 부분에서 문제가 있는지 도저히 찾을 수 없어서 질문드립니다.

  • javascript
  • HTML/CSS
  • react
alsdl413211 댓글 2 좋아요 2 조회수 2097

이미지 프리로딩 질문

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

강의에서 이미지url을 프리로딩하는것을 알려주셨는데 혹시 이미 리액트 폴더안에 에셋으로 넣어놓은 이미지 파일이나 폰트를 모달 띄우기 전에 미리 프리로딩 하는 방법을 알 수 있을까요?

  • devtools
  • react
qutuzm 댓글 1 좋아요 1 조회수 402

Deploy complete

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

강의와 같이 다 성공적으로 하고 firebase deploy 까지 완료 했는데 강사님처럼 도메인 주소 들어가면 프로젝트가 안뜨고 사지관 같이 뜹니다 ㅜㅠ

  • javascript
  • nodejs
  • react
sangyong_99 댓글 1 좋아요 0 조회수 342

마지막에 말씀하신 내용이 잘 이해가 안갑니다.

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요. 강의를 듣다가 마지막에 하신 말씀이 잘 이해가 안돼서 질문드립니다. 복잡한 상태 관리 로직 분리하기 - useReducer의 22:31 부분에서 "dispatch는 함수형 업데이트 그런거 필요 없이 호출하면 알아서 현재의 state를 참조해서 자동으로 해주니 useCallback을 사용하면서 dependency array를 걱정할 필요가 없다." 라고 하셨는데 이게 무엇을 의미하는 말씀인지 말 모르겠습니다...

  • react
  • javascript
  • nodejs
H K 댓글 1 좋아요 1 조회수 550

drop table 후 질문드리겠습니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 제로초님 강의 잘듣고있습니다. 배포는 처음이라 해당강의를 들으면서 무작정 따라하면서 실습을 하고 있습니다. 근데 제가 모르고 drop table까지 따라해서 database가 삭제됬습니다. 그래서 우분투 back으로 간 뒤 다시 db를 생성했습니다. 근데 db는 정상적으로 생성이 됬는데 테이블을 검색해보면 다음과 같이 Empty set이 출력이 되더라고요 이러한 경우에는 다시 인스턴스를 생성해야될까요? ㅜㅜ mysql> show databases; +--------------------+ | Database | +--------------------+ | information_schema | | mysql | | performance_schema | | recipe.io | | sys | +--------------------+ 5 rows in set (0.00 sec) mysql> use recipe.io; Database changed mysql> show tables; Empty set (0.00 sec) mysql>

  • express
  • react
  • redux
  • nodejs
  • Next.js
hib4888 댓글 1 좋아요 0 조회수 376

s3 배포시 Re-run all jobs 버튼 부재

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

Re-run all jobs 버튼이 없어서 node.js에서 오류가 발생하는데 혹시 어떻게 해야할까요?

  • react
  • redux
  • typescript
  • tdd
  • Next.js
The Rolling Stones 댓글 1 좋아요 0 조회수 370

redux-toolkit에서 createAsyncThunk 오류

미해결

안녕하세요 한참 검색하다 해결을 못해서 질문합니다. 현재 vite를 통해 react를 돌리고 있는데 redux-toolkit으로 상태관리를 하고 있습니다. 그러던 중 비동기 store를 만들기 위해 createAsyncThunk를 사용했는데 컴퍼넌트내에서 호출 시 Actions must be plain objects. Use custom middleware for async actions. 다음과 같은 오류가 발생했습니다. 그래서 console에 값을 찍어보니 type과 action 대신 creatorAction이라는 함수가 결과 값으로 나왔습니다. 호출 시에 '변수명()'를 붙여주었는데도 다음과 같은 결과를 받았는데 해결 방안이 있는지 궁금합니다. (추가로 create-react-app으로 설치한 다른 폴더에서는 잘 작동됩니다.)

  • redux-toolkit
  • vite
  • react
성주영 댓글 0 좋아요 0 조회수 220

postman에서 no environment

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

postman에서 우측 상단의 no environment를 클릭해도 다른 항목이 나오지 않습니다.

  • postma
  • 포스트맨
  • tensorflow
  • environment
  • react-native
  • react
  • express
  • 머신러닝 배워볼래요?
  • javascript
  • nodejs
  • HTML/CSS
댓글 2 좋아요 0 조회수 570

axios 1.1.2 버전 issue ( SyntaxError: Cannot use import statement outside a module)

미해결

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

혹시나 에러가 나신다면, package.json폴더에 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"", "eject": "react-scripts eject" }, 로 변경 후 test를 종료 후 재 실행시키면 됩니다. 방법은 test에서 직접 스크립트 수정하거나 jest.config.js파일을 만들어 moduleNameMapper을 사용하시면 됩니다! 참고 https://stackoverflow.com/questions/73958968/cannot-use-import-statement-outside-a-module-with-axios https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring

  • jest
  • 웹앱
  • react
  • React-Context
손서연 댓글 5 좋아요 4 조회수 2252

채널 생성시 channelData.map is not a function

미해결

Slack 클론 코딩[실시간 채팅 with React]

채널생성 클릭하면 channeldata.map is not a function이라고 에러가 뜨는데 channelData뿌려지는곳에 ?옵셔널도 줬고.. 아래처럼 잘 작성한것같은데 어딜 놓쳤는지 모르겠습니다. 새로고침하면 추가된 채널명이 출력됩니다. workspace import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { FC, useCallback, useState } from 'react'; import { Navigate, useParams } from 'react-router-dom'; import useSWR from 'swr'; import { AddButton, Channels, Chats, Header, LogOutButton, MenuScroll, ProfileImg, ProfileModal, RightMenu, WorkspaceButton, WorkspaceModal, WorkspaceName, Workspaces, WorkspaceWrapper, } from './styles'; import gravatar from 'gravatar'; import Menu from '@components/menu'; import { Link } from 'react-router-dom'; import { IChannel, IUser, IWorkspace } from '@typings/db'; import { Button, Input, Label } from '@pages/signup/styles'; import useInput from '@hooks/useInput'; import Modal from '@components/modal'; import { toast } from 'react-toastify'; import CreateChannelModal from '@components/createChannelModal'; const Workspace: FC = ({ children }) => { const { workspace, channel } = useParams<{ workspace: string; channel: string }>(); const { data: userData, error, mutate } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000 }); const { data: channelData } = useSWR<IChannel[]>(userData ? `/api/workspaces/${workspace}/channels` : null, fetcher); if (!userData) { return <Navigate to="/login" />; } const [showUserMenu, setShowUserMenu] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); const [showWorkspaceModal, setShowWorkspaceModal] = useState(false); const [showCreateChannelModal, setShowCreateChannelModal] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); //functions const onLogout = useCallback(() => { axios .post('/api/users/logout', null, { withCredentials: true, }) .then((res) => { mutate(res.data); }); }, []); const onClickUserProfile = useCallback(() => { setShowUserMenu(!showUserMenu); }, [showUserMenu]); const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal(true); }, []); const onCreateWorkspace = useCallback( (e) => { e.preventDefault(); if (!newWorkspace || !newWorkspace.trim()) return; if (!newUrl || !newUrl.trim()) return; //trim ->띄어쓰기 하나도 통과 돼버리는걸 막는다. axios .post( '/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }, ) .then((res) => { mutate(res.data); setShowCreateWorkspaceModal(false); setNewWorkspace(''), setNewUrl(''); }) .catch((err) => { console.dir(err); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, [newWorkspace, newUrl], ); const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); setShowCreateChannelModal(false); }, []); const toggleWorkspaceModal = useCallback(() => { setShowWorkspaceModal(!showWorkspaceModal); }, [showWorkspaceModal]); const onClickAddChannel = useCallback(() => { setShowCreateChannelModal(true); }, []); return ( <div> <Header> <RightMenu> <span onClick={onClickUserProfile}> <ProfileImg src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} /> {showUserMenu && ( <Menu style={{ right: 0, top: 38 }} onCloseModal={onClickUserProfile} show={showUserMenu}> <ProfileModal> <img src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} /> <div> <span id="profile-name">{userData.nickname}</span> <span id="profile-active">Active</span> </div> </ProfileModal> <LogOutButton onClick={onLogout}>로그아웃</LogOutButton> </Menu> )} </span> </RightMenu> </Header> <WorkspaceWrapper> <Workspaces> {userData.Workspaces?.map((ws: IWorkspace) => { return ( <Link key={ws.id} to={`/workspace/${123}/channel/일반`}> <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton> </Link> ); })} <AddButton onClick={onClickCreateWorkspace}>+</AddButton> </Workspaces> <Channels> <WorkspaceName onClick={toggleWorkspaceModal}>Sleact</WorkspaceName> <MenuScroll> <Menu show={showWorkspaceModal} onCloseModal={toggleWorkspaceModal} style={{ top: 95, left: 80 }}> <WorkspaceModal> <h2>Sleact</h2> {/* <button onClick={onClickInviteWorkspace}>워크스페이스에 사용자 초대</button> */} <button onClick={onClickAddChannel}>채널 만들기</button> <button onClick={onLogout}>로그아웃</button> </WorkspaceModal> </Menu> {channelData?.map((v, idx) => ( <div key={idx}>{v.name}</div> ))} </MenuScroll> </Channels> <Chats> {children}</Chats> </WorkspaceWrapper> <Modal show={showCreateWorkspaceModal} onCloseModal={onCloseModal}> <form onSubmit={onCreateWorkspace}> <Label id="workspace-label"> <span>워크스페이스 이름</span> <Input id="workspace" value={newWorkspace} onChange={onChangeNewWorkspace} /> </Label> <Label id="workspace-url-label"> <span>워크스페이스 url</span> <Input id="workspace" value={newUrl} onChange={onChangeNewUrl} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> <CreateChannelModal show={showCreateChannelModal} onCloseModal={onCloseModal} setShowCreateChannelModal={setShowCreateChannelModal} /> </div> ); }; export default Workspace; createChannelModal import Modal from '@components/modal'; import useInput from '@hooks/useInput'; import { Button, Input, Label } from '@pages/signup/styles'; import { IChannel, IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { useCallback, VFC } from 'react'; import { useParams } from 'react-router-dom'; import { toast } from 'react-toastify'; import useSWR from 'swr'; interface Props { show: boolean; onCloseModal: () => void; setShowCreateChannelModal: (flag: boolean) => void; } const CreateChannelModal: VFC<Props> = ({ show, onCloseModal, setShowCreateChannelModal }) => { const [newChannel, onChangeNewChannel, setNewChannel] = useInput(''); const { workspace, channel } = useParams<{ workspace: string; channel: string }>(); const { data: userData } = useSWR<IUser | false>(`/api/users`, fetcher); const { data: channelData, mutate } = useSWR<IChannel[]>( userData ? `/api/workspaces/${workspace}/channels` : null, fetcher, ); const onCreateChannel = useCallback( (e) => { e.preventDefault(); axios .post( `/api/workspaces/${workspace}/channels`, { name: newChannel, }, { withCredentials: true }, ) .then((res) => { setShowCreateChannelModal(false); mutate(res.data); setNewChannel(''); }) .catch((err) => { console.dir(err); toast.error(err.response?.data, { position: 'bottom-center' }); }); }, [newChannel], ); return ( <Modal show={show} onCloseModal={onCloseModal}> <form onSubmit={onCreateChannel}> <Label id="channel-label"> <span>채널</span> <Input id="channel" value={newChannel} onChange={onChangeNewChannel} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> ); }; export default CreateChannelModal;

  • 웹팩
  • typescript
  • react
  • Socket.io
  • babel
  • 클론코딩
soh308 댓글 3 좋아요 0 조회수 608

tailwindcss 적용이 안 됩니다

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

따라 치면서 실습하는데 적용이 안 되길래 삽질 하다가 혹시나 싶어서 강의 자료를 다운 받아 npm run start 해 보았는데요 그것도 이렇게 적용이 안 되게 보이네요... 뭐가 문제일까요? ㅜ.ㅜ

  • typescript
  • tdd
  • react
  • redux
  • Next.js
김가희 댓글 5 좋아요 0 조회수 1976

여러번 계속 돌려보고했는데 오류를 못찾겠습니다 ㅜㅜ

미해결

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

이거는 reple 입니다. 리플 모델입니다. 이거는 댓글 입력했을때 들어오는 값이랑 맨위에 사진17번째줄 콘솔입니다. 포스트아이디가 없습니다.. 포스트 area 에서 postInfo 를 콘솔한것이 이것 이며 여기서 props.postID 를 가져오지를 못해서.. 값이 안들어가는것 같습니다. 혹시 강의가 업데이트 되거나 제가 잘못한 부분이있을까요..? PostArea.js 에서 댓글지역으로 프롭이렇게 보냈습니다 영상과같이.

  • nodejs
  • express
  • firebase
  • mongodb
  • react
댓글 1 좋아요 1 조회수 572

CommandError: You must set settings.ALLOWED_HOSTS if DEBUG is False. 오류가 뜹니다.

해결됨

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

강의내용대로 쭉 따라가면서 askcomapny경로에서 settings 폴더를생성 cd askcompany로 경로 이동후 git add .를 한뒤 git mv settings.py settings/common.py 로 파일이동 그 상태로 runserver를 해봤더니 CommandError: You must set settings.ALLOWED_HOSTS if DEBUG is False. 오류가 뜸 원래 경로에 settings.py파일을 다시 만들어 보고 runserver를 해봤더니 오류가 사라짐 옮기는 과정에서 문제가 있는건지는 모르겠네요 DEBUG = True 이고 ALLOWED_HOSTS = ['*'] 설정까지도 해봤는데 왜 저런 오류가 뜨는걸까요?

  • react
  • django
  • python
  • docker
yezi9733 댓글 1 좋아요 0 조회수 1613

ReactDom is not defined

미해결

만들면서 배우는 리액트 : 기초

안녕하세요~ 수업 잘 듣고 있습니다. 처음 react, reactdom script 및 babel script 를 추가하고 서버를 보니 ReactDom 오류가 나네요. 추가해야 할 부분이 있을까요? Uncaught ReferenceError: ReactDom is not defined at <anonymous>:13:1 at i (babel.min.js:24:29679) at r (babel.min.js:24:30188) at o (babel.min.js:24:30596) at u (babel.min.js:24:30969) at f (babel.min.js:1:1812) at babel.min.js:1:6287

  • react
  • javascript
smile 댓글 1 좋아요 3 조회수 1577

Invalid href passed to next/router

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 94강 13:55초를 보면 콘솔 창에 next-dev.js?3515:20 Invalid href passed to next/router: /u//r/ test02/043hzrH/test44 , repeated forward-slashes (//) or backslashes \ are not valid in the hre 와 같은 에러가 떠있습니다. [username].tsx에서 <Link href={`/u/${comment.post?.url}`}> 을 불러 올때 url에 '/r/test02/043hzrH/test44'가 담겨 오면서 슬래쉬(//)가 2번 입력되어 생기는 에러 같습니다. 제공된 소스코드에도 위와 같이 입력되어 있어요. 아래와 같이 '/'를 지우고 링크를 href에 넣어주면 에러가 사라지는데 이게 맞을까요? <Link href={`/u${comment.post?.url}`}>

  • nodejs
  • typescript
  • postgresql
  • docker
  • react
  • Next.js
  • 클론코딩
heonpage 댓글 1 좋아요 1 조회수 990

import { User } from "../entities/User"

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 백엔드 entities에서 Post, Sub, Comment는 아래와 같이 import Post from "../entities/Post" import Sub from "../entities/Sub" import Comment from "../entities/Comment" 처럼 불러올 수 있게 작성하셨는데 User만 import {User} from "../entities/User" 중괄호를 넣어서 불러와야 합니다. export default class User extends BaseEntity 가 아닌 export class User extends BaseEntity 로 작성한 이유가 있을까요?

  • nodejs
  • postgresql
  • docker
  • typescript
  • react
  • Next.js
  • 클론코딩
heonpage 댓글 1 좋아요 0 조회수 233

post?.voteScore undefined

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 81강을 수강중입니다. src/pages/r/[slug]/[identifier]/[slug].tsx 작성중 {post.voteScore} 를 콘솔로 찍어보면 undefined가 나와서 페이지에 노출되지 않습니다. 타입을 voteScore? : number 로 한게 문제인가해서 ?를 지워보았지만, 증상은 동일했고 api를 불러오면서 voteScore는 0으로 초기화되지 않은채 받는것 같아요. 그러던 중 백엔드의 Post.ts를 살펴보았더니 get voteScore()를 get V oteScore()로 오타 아닌 오타를 가져가서 초기화 되지 않았단걸 알아내었습니다. 누군가에게 도움이 되시길 바라며

  • 클론코딩
  • Next.js
  • typescript
  • nodejs
  • docker
  • postgresql
  • react
heonpage 댓글 1 좋아요 0 조회수 343

인기 태그

인프런 TOP Writers

주간 인기글