inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

Cannot read properties of undefined (reading 'map')

미해결

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

제로초님, 코드를 따라친 후에 로그아웃을 하고 다시 로그인 하면 이런 에러메세지가 뜹니다. 그런데 네트워크 탭을 보면 로그인이 정상적으로 된거 같아서 새로고침을 하면 에러 메세지가 사라지고 슬랙에서 로그인된 화면이 제대로 뜹니다. 근데 또 여기서 워크스페이스를 생성하려고 하면 콘솔에 axioserror메세지가 떠서 어떻게 해야될지 모르겠습니다.. Workspace/index.tsx import axios from "axios"; import React, { FC, useCallback, useState } from "react"; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; import { Navigate, Routes, Route } from "react-router-dom"; import { AddButton, Channels, Chats, Header, LogOutButton, MenuScroll, ProfileImg, ProfileModal, RightMenu, WorkspaceButton, WorkspaceName, Workspaces, WorkspaceWrapper } from "@layouts/Workspace/style"; import gravatar from 'gravatar'; import loadable from '@loadable/component'; import Menu from "../../components/Menu"; import Modal from "../../components/Modal"; import { Link } from "react-router-dom"; import { IUser } from "@typings/db"; import { Button, Input, Label } from "@pages/SignUp/styles"; import useInput from "@hooks/useInput"; import {toast} from 'react-toastify'; const Channel = loadable(() => import('@pages/Channel')); const DirectMessage = loadable(() => import('@pages/DirectMessage')); const Workspace: FC<React.PropsWithChildren<{}>> = ({children}) => { const [showUserMenu, setShowUserMenu] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); // revalidate = 서버로 요청 다시 보내서 데이터를 다시 가져옴 // mutate = 서버에 요청 안보내고 데이터를 수정 const {data: userData, error, mutate} = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, }); const onLogout = useCallback(() => { axios.post('/api/users/logout', null , { withCredentials: true, }) .then(() => { mutate(false, false); }) }, []); const onClickUserProfile = useCallback((e: any) => { e.stopPropagation(); setShowUserMenu((prev) => !prev); }, []) const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal(true); }, []) const onCreateWorkspace = useCallback((e: any) => { e.preventDefault(); // 띄어쓰기도 검사해줘야됨 if(!newWorkspace || !newWorkspace.trim()) return; if(!newUrl || !newUrl.trim()) return; axios.post('http://localhost:3095/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }) .then(() => { mutate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }) .catch((error) => { console.dir(error); // 에러가 나면 사용자가 인지하게 해줌 toast.error(error.response?.data, { position: 'bottom-center' }) }) }, [newWorkspace, newUrl]) const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); }, []) if(!userData) { return <Navigate to="/login" /> } if(!userData) return null; 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 }} show={showUserMenu} onCloseModal={onClickUserProfile}> <ProfileModal> <img src={gravatar.url(userData.nickname, { s: '36px', 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) => { 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>Sleact</WorkspaceName> <MenuScroll>menu scroll</MenuScroll> </Channels> <Chats> <Routes> <Route path="/channel" element={<Channel />} /> <Route path="/dm" element={<DirectMessage />} /> </Routes> </Chats> {/* Input이 들어있으면 별도의 컴포넌트로 빼는 것을 추천(input에 글자를 입력할 때마다 여기 있는 함수들이 다 리렌더링 되기 때문에 비효율적) */} </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>워크스페이스 이름</span> <Input id="workspace" value={newUrl} onChange={onChangeNewUrl} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> </div> ) } export default Workspace; Modal/index.tsx import React, { useCallback, FC } from "react"; import { CloseModalButton, CreateModal } from "./style"; interface Props { show: boolean; onCloseModal: () => void; children: React.ReactNode; } const Modal: FC<Props> = ({show, children, onCloseModal}) => { const stopPropagation = useCallback((e: any) => { e.stopPropagation() }, []); if(!show){ return null; } return( <CreateModal onClick={onCloseModal}> <div onClick={stopPropagation}> <CloseModalButton onClick={onCloseModal}>&times;</CloseModalButton> {children} </div> </CreateModal> ); }; export default Modal; swr2.0 버전, react v18, typescript v18 swr을 최신버전 사용해서 revalidate대신 mutate를 사용했는데 제가 잘못 사용한건지 모르겠습니다.

  • 클론코딩
  • babel
  • typescript
  • socket.io
  • 웹팩
  • react
  • 클론코딩
  • Socket.io
성창수 댓글 2 좋아요 0 조회수 1887

기존의 테이블이 삭제되지 않습니다.

해결됨

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 여기에 질문 내용을 남겨주세요. application.yml jpa: hibernate: ddl-auto: create 이라 되어 있는데, 기존의 테이블이 드랍되지 않습니다. 질문 게시판을 검색해보니, H2의 버전이 1.4.200인 경우에는 하이버네이트 버전을 5.4.13.Final 로 바꿔야 한다고 되어 있네요. 그래서, build.gradle 에 ext["hibernate.version"] = " 5.4.13.Final " 를 추가 해놓고 다시 돌려보니 이제는 엄청난 에러메시지가 나오네용.. 하이버네이트 버전을 바꾸는 방법이 올바르지 않았나요?

  • JPA
  • 웹앱
  • spring
  • spring-boot
  • jpa
  • java
  • 웹앱
Shin Berg 댓글 1 좋아요 0 조회수 532

void의 정확한 의미를 모르겠어요

해결됨

나도코딩의 자바 기본편 - 풀코스 (20시간)

안녕하세요 챕터 6 부분을 공부하고 있는데 void를 쓰는 경우와 안쓰는 경우의 차이가 잘 와닫지 않습니다. 리턴값이 없으면 void를 쓰고, 리턴값이 있으면 void를 안쓴다고 알고 있는데 리턴값부터 이해가 잘 가지 않네요! 예를 들어서 // 호텔 주소 public static String getAdress() { return "서울시 어딘가"; } 과 셋째 줄에 sout "서울시 어딘가" 를 쓰는 것은 무엇이 다른건지요? 감사합니다 :)

  • java
  • 객체지향
  • oop
liltjay 댓글 1 좋아요 1 조회수 4796

현업에서의 jpql

해결됨

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오)예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 쿼리 dsl에서 많이 설명 해주셨는데요 그렇다면 dsl을 쓰는 현업에서는 jpql을 사용할 일이 전혀 없을까요 ? 전혀 없다고 해도 근본이 되는 jpql을 알아둬야 하겠지만 학습시간에 대한 비중을 어디에 크게 둬야 할지 의문입니다 .

  • java
  • spring-boot
  • jpa
  • JPA
  • spring
  • dsl
  • query
댓글 1 좋아요 0 조회수 985

팩토리 메서드를 정적으로 사용하는 이유에 대해서 궁금합니다

해결됨

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

안녕하세요 영한님 강의 잘 듣고 있습니다^^ 전부터 궁금해 왔던 것인데요, 팩토리를 만들 때 정적으로 올리는 이유에 대해서 궁금합니다 영한님이 다른 QnA에서 추천해 주신 내용들을 읽어보았으나 굳이 왜 "정적"영역으로 보내는 가에 대한 의문은 쉽게 풀리지 않습니다 ㅜㅜ 일단 정적 팩토리 메서드로 보내면 생성자들에 대한 응집도가 크게 떨어지는 느낌입니다. "엘레강트 오브젝트"라는 책을 보면 생성자는 10~15개 까지도 만들고 퍼블릭 메서드를 최대한 적게 가져가라고 가이드를 주는데요, 정적 영역으로 보내면 주/부 생성자로 보낼 수 없기 때문에 그 많은 생성자들이 다 흩어지고, 생성자들 간 관계를 맺을 수 없기 때문에 유연성이 떨어지고 코드 중복이 자주 일어나는 효과가 나는 것 같습니다 이는 굳이 정적 영역으로 보내지 않고 주/부 생성자로 구분하면 쉽게 해결될 일이 아닌가? 하는 생각도 들어 질문을 드립니다

  • java
  • 웹앱
  • spring-boot
  • spring
  • jpa
  • JPA
  • 웹앱
득이 댓글 1 좋아요 3 조회수 908

length 오류

미해결

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

콘솔 결과와 error가 같이 출력됩니다!

  • html/css
  • react-native
  • react
  • express
  • node.js
  • nodejs
  • 머신러닝
  • javascript
  • 머신러닝 배워볼래요?
  • tensorflow
  • HTML/CSS
유영 댓글 1 좋아요 0 조회수 739

body : ReadableStream 관련 문의드립니다.

해결됨

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

안녕하세요. 2강 진행 중 상품목록 조회시 msw Response 결과에 대한 body 값이 ReadableStream 으로 넘어옵니다. 이 경우 body 의 data를 확인할 방법이 있을까요? 답변 부탁드립니다. 감사합니다.

  • react
  • graphql
  • firebase
kylor 댓글 1 좋아요 0 조회수 856

연관관계의 주인을 양쪽 모두 설정할 경우

해결됨

자바 ORM 표준 JPA 프로그래밍 - 기본편

========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 일대다[1:N] 강의의 16분 29초 쯤에 연관관계의 주인이 양쪽에 모두 있으면 망한다라는 언급이 있으신데, 순서가 꼬이거나 예측이 안된다는게 구체적으로 어떤 의미인지 예시가 있을까요? 정말 단순하게 생각하면 어쨋든 연관관계의 주인이 아닌 쪽에서 mappedby를 통해 읽기 전용으로 설정하지 않아도 Member에서 추가하나 Team에서 추가하나 반영될 수 있다면 오히려 좋지 않나 싶은 의구심이 들어서 질문드립니다 감사합니다 :)

  • java
  • jpa
  • JPA
김윤식 댓글 1 좋아요 0 조회수 4932

선행 지식

해결됨

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

스프링 강의 선행으로 요구되는 지식이 자바, 관계형 데이터베이스 기초라고 되어 있는데요 자바랑 MySQL은 공부했습니다. 그런데 JDBC나 JSP, 서블릿, 디자인 패턴 등에 대한 지식이나 웹 개발에 대한 지식은 모른 채로 로드맵 시작해도 상관없나요?

  • spring-boot
  • MVC
  • mvc
  • java
  • spring
11 1 댓글 1 좋아요 0 조회수 535

webp 확장자질문

해결됨

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

강사님 안녕하세요 좋은강의 잘 수강중인 학생입니다. 강의중에는 클라이언트에 저장된 확장자 2개의 이미지를 사용해서 분기처리를 하셨는데요, 서버에서 받아오는 이미지파일을 분기처리 할려면(webp를 지원하지않는 브라우저를 위해) webp파일 이미지와 jpg(또는 png) 파일 이미지 총 2개 파일 이미지를 보내줘야 분기처리가 가능한가요? 아니면 서버에서 1개의 확장자 이미지를 보내주면 jpg -> webp 또는 webp->jpg로 바꾸어서 분기처리 하는방법은 없을까요?

  • react
  • devtools
형우리 댓글 1 좋아요 1 조회수 440

allocationSize 관련하여 질문올립니다!

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 잘모르겠습니다 ㅎㅎ.. 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 1. 데이터 삽입 순서 관련 질문 서버가 여러 대 있다고 가정했을 때, 각 서버에 하단의 이미지처럼 메모리에 50개씩 값을 올려둘 경우, DB에 들어가는 데이터가 순차적으로 안들어가지 않나요? 구체적으로 생각해보지는 않았지만, 순차적으로 데이터가 들어가지 않을 경우에 대한 이슈가 있지 않을까 싶어서 질문드립니다! 2. 중간에 비어있는 구간 관련 질문 위와 마찬가지로 서버가 여러 대 있고 각 서버마다 50개씩 메모리에 할당했다고 가정했을 때, 특정 서버가 죽게되면 죽은 서버의 메모리가 가지고있던 개수만큼의 공백이 생기지 않나요? (거의 그럴 일은 없겠지만) 서버가 시도때도없이 다운될 경우 아무리 Long 타입을 지정했음에도 수가 넘어가는 케이스가 생기지 않을까 싶습니다.

  • jpa
  • JPA
  • java
seungseopahn 댓글 1 좋아요 1 조회수 843

react-router-dom link클릭시 이동이 안되는 오류

미해결

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

안녕하세요 강사님 해당 상품을 클릭했을때 url은 바뀌지만 상품상세페이지로 화면은 바뀌지 않는 오류가 발생했습니다(새로고침하면 화면이 바뀌긴 합니다) 다른 수강생들의 비슷한 질문답변을 참고하여 <React.StrictMode>를 지워도보고 react-router-dom 버전도 5.2.0이고 Route path도 "/products/:id"라고 적었는데 여전히 오류가 해결되지 않습니다 https://github.com/kanghanju/grab-market-client/commit/01c0657f4f64398b47493c1b2c3b44836bf1a785# 여기는 Link태그 해당 수업코드 파일입니다!

  • html/css
  • HTML/CSS
  • 머신러닝 배워볼래요?
  • react
  • node.js
  • react-native
  • nodejs
  • 머신러닝
  • tensorflow
  • express
  • javascript
한조 댓글 2 좋아요 0 조회수 1588

인텔리제이 무료 버전도 학습에 지장없나요?

해결됨

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

지장없다는 말도 있고 있다는 말도 있던데 저는 김영한님 로드맵 2개 다 들을 예정인데 강의가 몇십 개 있더라구요 인텔리제이 무료 버전을 써서 막히는 부분들이 있을까요?

  • java
  • mvc
  • spring
  • spring-boot
  • MVC
11 1 댓글 1 좋아요 0 조회수 467

편집

미해결

프로젝트로 배우는 React.js

72번째 강의 초반부 편집오류 있습니다.

  • es6
  • react
  • redux
댓글 1 좋아요 0 조회수 323

비동기문제

미해결

프로젝트로 배우는 React.js

강의에서는 toast가 비동기적으로 실행되는것을 해결하기 위해 useRef를 활용했는데 혹시 async나 promise로도 해결이 가능한건가요?

  • react
  • es6
  • redux
댓글 1 좋아요 1 조회수 320

페치조인 별칭

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/) [질문 내용] 질문 1 ============================================ 별칭과 관련하여 영한님의 댓글을 찾아보던 도중 라는 글이 있습니다. 제가 이해한 바로는 1:N 이던 N:1 이던 1:1 이던 페치조인할때 별칭은 사용하지 않는것이 좋지만 페치 조인시 별칭을 사용했을때와 별칭을 사용하지 않았을때와 의 데이터가 일치한다면(정합성) 사용 할수 있다 이렇게 이해를 했는데 맞나요 ? 질문 2 ============================================ 페치조인시 1:N 에서 페이징을 사용할수 없는 이유는 페치조인의 메커니즘 자체가 1:N 이면 N 만큼 데이터를 다 가지고 있어야 하는데 ex) @OneToMany(mappedBy = "team") private List<Member> members = new ArrayList<>(); (Team 은 페치조인시 members 의 뻥튀기 된 데이터를 모두 가지고 있어야한다) 그런데 이때 페이징을 실행하면 뻥튀기된 데이터를 가지고 있을수가 없다. 그래서 JPA는 메모리에 모든 정보를 끌어모아 저장 시킨후 메모리에서 페이징 처리를 실행 하기 때문에 메모리 부족 현상이 나타날수 있다 이렇게 이해를 했는데 맞나요 ? (질문1,2) ======================질문3 페이징 처리를 위해 N:1 을 1:N 으로 바꿔서 페치조인을 하면 되는데 막상 이 쿼리를 디비에 실행해도 둘다 데이터가 각 3건씩 똑같이 나오는게 맞나요 ? (뻥튀기 가 일어나면 데이터가 더많아야 하는게 아닌가요 ? 1:n 조인이) 각각 1:N , N:1 페치조인 실행한 결과 [데이터 뻥튀기는 -> 데이터 베이스 쿼리는 동일하게 나오나, 자바 객체에서 뻥튀기 ->[중복] 현상이라고 생각하면 되는건가요 ??] 이 부분은 몆번을 봐도 햇갈리네요

  • JPA
  • java
기팝 댓글 1 좋아요 1 조회수 1288

playground api-docs 질문

미해결

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

playground에서 api-docs가 강의에 있는 docs랑 다릅니다 같게 할 방법이 있을까요?

  • seo
  • react
  • graphql
  • nodejs
  • Next.js
cheolung 댓글 2 좋아요 0 조회수 446

DB 연결 성공 후 테이블 까지 만들었습니다.

미해결

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

그런데 테이블을 선택해서 코드를 보려면 자꾸 workbench가 팅겨서 꺼집니다 ㅠㅠ 코드를 깃허브에 있는 class형 함수를 긁어서 사용해서 문제가 되는걸까요..?ㅠㅠ 아래는 오류창입니다..

  • redux
  • nodejs
  • react
  • express
  • Next.js
hyuri 댓글 2 좋아요 1 조회수 557

HistoryListView 구현 시 KeywordListView 상속 받는 것에 관련해 문의드립니다.

해결됨

[React 1부] 만들고 비교하며 학습하는 React

안녕하세요. 강사님께서 강의에서 HistoryListView 클래스를 작성하실 때 KeywordListView를 상속 받아서 작성하셨는데요. 실무에서도 이와 같이 비슷한(동일한 수준의) 클래스 중 하나를 먼저 구현하고 이를 상속 받아 다른 클래스를 만드는 경우가 흔히 있나요? 저는 아래와 같이 공통의 기능을 갖고 있는 또 다른 클래스 (ex. ListView)를 만들고, 각 클래스들(ex. KeywordListView, HistoryListView)이 이 공통의 클래스를 상속받는 것이 좋을 것이라고 생각했었거든요. KeywordListView -> ListView -> View HistoryListView -> ListView -> View 강사님께서 사용하신 방법 대로 하면 기존의 코드를 최대한 활용할 수 있다는 장점은 있지만 서로 동일한 수준의 클래스가 서로 상속을 받게 되는 것 같아서요.

  • react
  • MVC
JIYEON KIM 댓글 1 좋아요 -2 조회수 391

./gradlew 실행이 안됩니다.

미해결

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] cmd창에서 dir입력하고 gradle은 있는데 gradlew는 나오지 않네요... C드라이브 안에 study 폴더가 있고, 그안에 hello spring이 있는 상태인데 어느 부분에서 잘못한 것일까요? ㅠㅠ

  • java
  • spring
  • MVC
  • spring-boot
댓글 1 좋아요 1 조회수 754

인기 태그

인프런 TOP Writers

주간 인기글