inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

str.toLowerCase is not a function

미해결

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

예상하지 못한 부분에서 에러가 나와서 질문 남겨드립니다 ! ChatBox.tsx import React, { useCallback, useEffect, useRef, VFC } from 'react'; import { ChatArea, EachMention, Form, MentionsTextarea, SendButton, Toolbox } from './styles'; import autosize from 'autosize'; import { Mention, SuggestionDataItem } from 'react-mentions'; import { useParams } from 'react-router'; import useSWR from 'swr'; import { IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import gravatar from 'gravatar'; interface Props { chat: string; onSubmitForm: (e: any) => void; onChangeChat: (e: any) => void; placeholder?: string; } const ChatBox: VFC<Props> = ({ chat, onSubmitForm, onChangeChat, placeholder }) => { const { workspace } = useParams<{ workspace: string }>(); const { data: userData, error, revalidate, mutate, } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, // 2초 }); const { data: memberData } = useSWR<IUser[]>(userData ? `/api/workspaces/${workspace}/members` : null, fetcher); const textareaRef = useRef<HTMLTextAreaElement>(null); useEffect(() => { if (textareaRef.current) { autosize(textareaRef.current); } }, []); const onKeydownChat = useCallback( (e) => { if (e.key === 'Enter') { if (!e.shiftKey) { e.preventDefault(); onSubmitForm(e); } } }, [onSubmitForm], ); const renderSuggestion = useCallback( ( suggestion: SuggestionDataItem, search: string, highlightedDisplay: React.ReactNode, index: number, focus: boolean, ): React.ReactNode => { if (!memberData) return; return ( <EachMention focus={focus}> <img src={gravatar.url(memberData[index].email, { s: '20px', d: 'retro' })} alt={memberData[index].nickname} /> <span>{highlightedDisplay}</span> </EachMention> ); }, [memberData], ); return ( <ChatArea> <Form onSubmit={onSubmitForm}> <MentionsTextarea id="editor-chat" value={chat} onChange={onChangeChat} onKeyPress={onKeydownChat} placeholder={placeholder} inputRef={textareaRef} allowSuggestionsAboveCursor > <Mention appendSpaceOnAdd trigger="@" data={memberData?.map((v) => ({ id: v.id, display: v.nickname })) || []} renderSuggestion={renderSuggestion} /> </MentionsTextarea> <Toolbox> <SendButton className={ 'c-button-unstyled c-icon_button c-icon_button--light c-icon_button--size_medium c-texty_input__button c-texty_input__button--send' + (chat?.trim() ? '' : ' c-texty_input__button--disabled') } data-qa="texty_send_button" aria-label="Send message" data-sk="tooltip_parent" type="submit" disabled={!chat?.trim()} > <i className="c-icon c-icon--paperplane-filled" aria-hidden="true" /> </SendButton> </Toolbox> </Form> </ChatArea> ); }; export default ChatBox; 혼자서 해결해보려다가 못찾고 있어서 질문 남겨드려요 ㅠㅠ

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
유니크한 고슴도치 댓글 2 좋아요 0 조회수 832

데이터 질문이요

미해결

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

const onSubmitForm = useCallback( (e) => { e.preventDefault(); if (chat?.trim() && chatData) { const savedChat = chat; mutateChat((prevChatData) => { prevChatData?.[0].unshift({ id: (chatData[0][0]?.id || 0) + 1, content: savedChat, SenderId: myData.id, Sender: myData, ReceiverId: userData.id, Receiver: userData, createdAt: new Date(), }); return prevChatData; }, false).then(() => { localStorage.setItem(`${workspace}-${id}`, new Date().getTime().toString()); setChat(''); if (scrollbarRef.current) { console.log('scrollToBottom!', scrollbarRef.current?.getValues()); scrollbarRef.current.scrollToBottom(); } }); axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => console.log('first')) .catch(console.error); } }, [chat, workspace, id, myData, userData, chatData, mutateChat, setChat], ); const onMessage = useCallback( (data: IDM) => { if (data.SenderId === Number(id) && myData.id !== Number(id)) { mutateChat((chatData) => { chatData?.[0].unshift(data); return chatData; }, false) 이부분은 socket?.on('dm', onMessage) dm보내는 페이지에서 디엠을 보낼 때 onSubmitForm에서 mutate가 먼저 실행돼서 화면 데이터를 먼저 바꿔주고 그 다음 서버로 데이터를 보낸 뒤 처리하는 과정에서 socket.emit()이 실행되고 onMessage가 실행되는 걸로 이해했는데요. onMessage가 받는 데이터가 onSumbitForm의 mutate가 인자로 받는 함수랑 똑같아서 중복작업이 아닌가 싶어서 onMessage mutate 안의 chat.Data ?.[0].unshift(data)를 지우고 실행해봐도 똑같은 결과가 나오는데 이 코드는 왜 있는 건가요?

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
댓글 1 좋아요 0 조회수 413

DM 내용 표시하기

미해결

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

안녕하세요 강의중에 DM 내용 표시 하기 강의에서 map을 활용해 DM내용을 표시하는 부분인데 DM을 클릭하고 내용을 확인할 때 TypeError에러가 뜨면서 chatData.map is not a function 이라는 오류가 나오고 있습니다.. 혼자 해결하다 막혀서 질문 남겨 드립니다! DirectMessage.tsx (return 부분) return ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nicknam} /> <span>{userData.nickname}</span> </Header> <ChatList chatData={chatData} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); chatList.tsx import React, { VFC, useCallback, useRef } from 'react'; import { ChatZone } from './styles'; import { IDM } from '@typings/db'; import Chat from '@components/Chat'; import { Scrollbars } from 'react-custom-scrollbars'; interface Props { chatData?: IDM[]; } const ChatList: VFC<Props> = ({ chatData }) => { const scrollbarRef = useRef(null); const onScroll = useCallback(() => {}, []); return ( <ChatZone> <Scrollbars autoHide ref={scrollbarRef} onScrollFrame={onScroll}> {chatData?.map((chat) => ( <Chat key={chat.id} data={chat} /> ))} </Scrollbars> </ChatZone> ); }; export default ChatList; chat.tsx import { IDM, IChat } from '@typings/db'; import React, { VFC, memo, useMemo } from 'react'; import gravatar from 'gravatar'; import { ChatWrapper } from './styles'; interface Props { data: IDM; } const Chat: VFC<Props> = ({ data }) => { const user = data.Sender; return ( <ChatWrapper> <div className="chat-img"> <img src={gravatar.url(user.email, { s: '36px', d: 'retro' })} alt={user.nickname} /> </div> <div className="chat-text"> <div className="chat-user"> <b>{user.nickname}</b> <span>{data.createdAt}</span> </div> <p>{data.content}</p> </div> </ChatWrapper> ); }; export default Chat; 오류내용

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
유니크한 고슴도치 댓글 1 좋아요 0 조회수 376

프로퍼티와 메서드의 초기화 질문입니다.

미해결

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

public class student { public int score; public int getScore() { return this.score; } } 위와 같은 코드가 있고 연관관계 매핑이 되어있어 현재 프록시 상태라고 가정했을 때 점수를 얻기 위해 student.score를 사용 하면 영속성 컨텍스트로부터 초기화를 받지 못하고, student.getScoret()를 하면 초기화를 받는 건가요 ? 만약 프로퍼티 접근을 사용했을 때 초기화를 받지 모한다면 studnet.score 안에는 무슨 값이 들어있게 되는 건가요 ?

  • java
  • jpa
댓글 1 좋아요 0 조회수 344

fetch join 과 EAGER

미해결

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

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예 [질문 내용] 제가 이해한게 맞을까요? 일단 기본적으로 type을 LAZY 로 하는 이유는 조회할때 한 방에 다른 엔티티까지 쿼리가 나가고 그거에 연관된 엔티티까지 쿼리가 나가면 비효율 적이다. 그래서 LAZY 를 쓰는데 조회할때 다른 Entity 의 값도 가져오려면 LAZY 타입이니 쿼리가 많이 나가서 fetch JOIN 으로 한 쿼리로 연결 시킨다. 그러면 EAGER 바꾸면 될 것같지만, EAGER 는 예측할 수 없는 문제도 있고, 다른곳에서 조회할때는 또 다른 엔티티의 값이 필요가 없을 수도 있기 때문에 기본은 LAZY로 해두고 다른 엔티티의 값이 필요한 특수한 경우에만 fetch JOIN 을 한다.

  • java
  • spring
  • spring-boot
  • jpa
dionisos198 댓글 1 좋아요 1 조회수 431

와 진짜 대박이네요 디폴트 파라미터 하나로 이렇게 편해질수가 ㅜ

미해결

실전! 코틀린과 스프링 부트로 도서관리 애플리케이션 개발하기 (Java 프로젝트 리팩토링)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 자바 스프링에서는 테스트용 생성자 메서드가 있어도, 매번 일일히 null을 넣어준다거나 하는 문제점들이 있어서 결국 Builder를 사용했었는데 코틀린에서는 롬복 Builder가 지원되지 않는다고 해서 엄청 고민 중이였습니다 근데 이번 강의 보니까 그냥 온전한 객체 만들어주는 팩터리 메서드 하나 만들어놓고 테스트용으로 필요한 인자 값들만 설정해주면 되는 거였군요 진짜 미쳤다.. 갓틀린.. 잘 배워갑니다..

  • java
  • spring
  • kotlin
  • spring-boot
  • 리팩토링
euni 댓글 1 좋아요 1 조회수 343

웹소켓은 프록시 사용 할 수 없나요?

해결됨

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

`http://localhost:3095/ws-${workspace}` 위 주소로는 잘 되는데 `/api/ws-${workspace}` 로는 연결이 안됩니다. 웹소켓은 프록시 못쓰는건지, 못쓴다면 혹시 왜 안되는건지 이유를 여쭈워도 괜찮을까요?

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
grs0412 댓글 1 좋아요 0 조회수 1674

연관관계 메서드의 위치는 핵심적으로 컨트롤 하는 쪽이 무슨 말일까요?

미해결

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

24분 30초부터 연관관계 메서드에 관련해서 설명해주시는데 연관관계 메서드의 위치는 핵심적으로 컨트롤 하는 쪽에 있는 것이 좋다 이게 무슨 말인지 잘 이해가 되지 않습니다 ㅠㅠ

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 361

Scss문법

해결됨

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

styles.tsx파일을 보면 & img {...} & > div {...} 이렇게 있던데 '>' 기호가 있고 없고의 차이점은 뭔가요?

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
roider2316 댓글 1 좋아요 0 조회수 330

chat box가 위에 고정되어 있습니다.

미해결

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

DirectMessage import React, { useCallback, useState } from 'react'; import gravatar from 'gravatar'; import { Container } from 'semantic-ui-react'; import { Header } from './styles'; import useSWR from 'swr'; import { useParams } from 'react-router'; import fetcher from '@utils/fetcher'; import ChatBox from '@components/ChatBox'; import useInput from '@hooks/useinput'; import axios from 'axios'; import { IDM } from '@typings/db'; import ChatList from '@components/ChatList'; const DirectMessage = () => { const { workspace, id } = useParams<{ workspace: string; id: string }>(); const { data: userData } = useSWR(`/api/workspaces/${workspace}/users/${id}`, fetcher); const { data: myData } = useSWR('/api/users', fetcher); const { data: chatData, mutate: mutateChat, revalidate, } = useSWR<IDM[]>(`/api/workspace/${workspace}/dms/${id}/chats?perPage=20&page=1`, fetcher); const [chat, onChangeChat, setChat] = useInput(''); const onSubmitForm = useCallback( (e) => { e.preventDefault(); console.log('chat'); if (chat?.trim()) { axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => { revalidate(); setChat(''); }) .catch(console.error); } }, [chat], ); if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nicknam} /> <span>{userData.nickname}</span> </Header> <ChatList chatData={chatData} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); }; export default DirectMessage; ChatList import React, { VFC } from 'react'; import { ChatZone, Section } from './styles'; import { IDM } from '@typings/db'; import Chat from '@components/Chat'; interface Props { chatData?: IDM[]; } const ChatList: VFC<Props> = ({ chatData }) => { return ( <ChatZone> {chatData?.map((chat) => { <Chat key={chat.id} data={chat} />; })} </ChatZone> ); }; export default ChatList; 보여드린 코드처럼 chatbox 중간에 chatlist를 넣게 되면 자동으로 아래로 내려갈 수 있게 했습니다. 말씀대로 chatlist를 만들고 directmessage사이에 chatlist를 import 했습니다. 그런데 아래로 내려오지 않고 상단으로 그대로 고정되어 있어서 아무리 찾아보려고 해도 답이 안나오는거 같아 질문 남겨드립니다 ㅠ

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
유니크한 고슴도치 댓글 1 좋아요 0 조회수 498

updateItem질문입니다.

미해결

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

@PostMapping("/items/{id}/edit") public String updateItem(@PathVariable Long id, @ModelAttribute Item item) { Item findItem = itemService.findById(item.getId()); //더티 체킹 findItem.setId(item.getId()); findItem.setName(item.getName()); findItem.setPrice(item.getPrice()); findItem.setStockQuantity(item.getStockQuantity()); findItem.setAuthor(item.getAuthor()); findItem.setIsbn(item.getIsbn()); return "redirect:/items"; } 강의를 보지 않고 스스로 코드를 짜보고 있는데 이렇게 하니까 수정내역이 반영 되지 않더라구요 스스로 생각해봤을 때는 다음 2가지 이유 중 하나일 것 같은데 이유가 이유가 무엇인가요 ㅠㅠ? findItem은 영속성 컨텍스트가 관리하지 않는 객체가 된 것이다. 따라서 더티체킹이 되지 않는다. 영속성 컨텍스트가 관리하는 엔티티는 맞지만 Controller에는 트랜잭션이 없어서 반영이 안되는 것이다.

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 658

@Param의 존재 이유>?

미해결

실전! 스프링 데이터 JPA

@EntityGraph(attributePaths = "team") List<Member> findEntityGraphByUsername(@Param("username")String username); 이번 강의를 복습하다 보니까 강사님께서 @Param을 사용하셨더라구요.(강의 20:59) findByAge(), findOptionalByUsername()과 같은 메소드는 @Param 애노테이션 없이도 잘 동작 했는데 따로 특별한 이유가 있는 것일까요?

  • java
  • spring
  • spring-boot
  • jpa
댓글 1 좋아요 1 조회수 536

fetchResult() deprecated

미해결

실전! Querydsl

됐던데 앞으로는 강의의 searchPageComplex와 같은 방법 (content따로, total따로)으로만 구현하고 사용하면 되는 건가요 ? searchPageSimple 부분은 필요가 없는 건가요?

  • java
  • jpa
댓글 1 좋아요 0 조회수 1368

tuple자료구조가 어떻게 되어 있는 건가요 ?

미해결

실전! Querydsl

@Test public void tupleProjection() throws Exception { List<Tuple> result = queryFactory .select(member.username, member.age) .from(member) .fetch(); System.out.println("result = " + result); for (Tuple tuple : result) { String username = tuple.get(member.username); Integer age = tuple.get(member.age); System.out.println("username = " + username); System.out.println("age = " + age); } } result = [[member1, 10], [member2, 20], [member3, 30], [member4, 40]] username = member1 age = 10 username = member2 age = 20 username = member3 age = 30 username = member4 age = 40 출력값이 위와 같은데 .get()메소드로 꺼내는 걸로 보면 Map과 같은 자료구조인건가 싶기도 하면서, 통째로 출력하면 List<List<>>와 같은 자료구조의 모습이더라구요 tuple은 어떤 자료구조인가요?

  • java
  • jpa
댓글 1 좋아요 0 조회수 1238

join메서드 궁금증입니다 ..

미해결

실전! Querydsl

List<Member> result = queryFactory .selectFrom(member) .join(member.team, team) .where(team.name.eq("teamA")) .fetch(); 위의 QueryDSL문을 sql문으로 번역하면 select * from member as m join team as t on m.team _id = t.team _id where t.name ='teamA' 가 맞나요? 관계형DB를 객체 다루듯이 사용하기 위해 Member안에는 Team 클래스가 있고, Team 클래스 안에는 Member 클래스가 있지만 실제로는 .join(member.team, team) 와 같은 코드를 작성하면 내부적으론 DB의 테이블에 가서 외래키와 기본키를 비교해서 값을 가져오는 건가요 ?

  • java
  • jpa
댓글 1 좋아요 0 조회수 496

제공되는 html 파일을 사용해도 될까요?

미해결

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

QueryDSL까지 강의를 다 듣고 난 이후에 게시판이나 쇼핑몰 같은 포트폴리오를 만들기전에 자그맣게 배운걸 써보고 싶은데 html,css,js를 모르다보니 view쪽을 처리할 수가 없더라구요. 그래서 혹시 활용1편에 제공되는 HelloShop view단 파일을 사용해도 될지 궁금합니다. 깃허브에 올리려고 하고 백엔드단 코드는 전부 스스로 짤 생각입니다.!

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 337

지연로딩과 fetchJoin 성능 차이

미해결

실전! 스프링 데이터 JPA

즉시로딩을 사용하면 Member 객체를 불러 올 때 1+N문제가 발생하고 Lazy로딩을 사용하면 Team 객체를 사용할 때 쿼리문이 나가서 즉시로딩이든 지연로딩이든 결국 1+N 문제가 생기는 게 맞나요 ? 이 1+N 문제의 해결방법으로 fetchJoin이 나온 것 같은데 지연 로딩, 즉시 로딩보다 무조건 fetchJoin이 이점이 있는 것 아닌가요? 왜 디폴트값으로 지연로딩으로 설정하고 fetchJoin을 선택해서 사용하는지 궁금합니다. 기본적으로 fetchJoin을 사용하고 연관관계에 있는 객체를 사용하지 않을 것 같은 경우에만 지연로딩을 선택적으로 사용하는게 더 편하지 않나요? 사용하지 않는 객체를 가져오는 fetchJoin의 쿼리문 몇 줄이 성능에 그렇게 큰 영향을 미치나요?

  • java
  • spring
  • spring-boot
  • jpa
댓글 2 좋아요 1 조회수 652

2분 정도에 이 코드는 안되는 이유가 있나요?

미해결

실전! 스프링 데이터 JPA

Team teamA = new Team("teamA"); Team teamB = new Team("teamB"); teamRepository.save(teamA); teamRepository.save(teamB); memberRepository.save(new Member("member1", 10, teamA)); memberRepository.save(new Member("member2", 10, teamB)); 강의에서 이렇게 한번에 하려다가 Member를 생성해주고 따로 save를 해주던데 한번에 하면 안되는 이유가 있을까요 ?

  • java
  • spring
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 331

Page 자료구조에 관해 질문입니다.

미해결

실전! 스프링 데이터 JPA

PageRequest pageRequest = PageRequest.of(0, 3, Sort.by(Direction.DESC, "username")); int age = 10; //when Page<Member> page = memberRepository.findByAge(age, pageRequest); PageRequest.of 코드에서 첫 번째 파라미터가 무엇을 의미하는지 헷갈립니다. PageRequest.of 의 2번째 파라미터는 한 페이지의 element 개수이고(limit), 3번째 파라미터는 정렬 조건이 맞나요? List<Member> content = page.getContent(); assertThat(content.size()).isEqualTo(3); assertThat(page.getTotalElements()).isEqualTo(5); assertThat(page.getNumber()).isEqualTo(0); assertThat(page.getTotalPages()).isEqualTo(2); assertThat(page.isFirst()).isTrue(); assertThat(page.hasNext()).isTrue(); page.getContent()는 현재 페이지의 데이터를 가져오는 메소드인가요? page.getNumber()는 현재 페이지를 가져오는 메소드인가요? Page는 책처럼 0,1,2,3 ... 이렇게 페이지가 있는 거고 Content는 그 Page안에 있는 데이터를 의미하는 건가요? List<List<data>> 와 같은 구조로 되어 있는 것일까요? Page와 Content의 자료 구조가 어떻게 되어있는지가 궁금합니다.

  • java
  • spring
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 665

영상 5:20 설명 질문

해결됨

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

실패하면 then의 revalidate때문에 원래 있던 데이터가 사라진다고 하셨는데 따로 catch부분에서 처리해줘야 이전에 넣어뒀던 가짜 데이터를 삭제하는 등 처리되는 거 아닌가요?

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
roider2316 댓글 1 좋아요 0 조회수 253

인기 태그

인프런 TOP Writers

주간 인기글