inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

OOP 란 무엇인가요?

미해결

Java/Spring 주니어 개발자를 위한 오답노트

최근 OOP 란 무엇인가요? 질문을 받았는대, 어버버한 경험이 있는대, 범위가 너무 광범위하여 답하기가 어렵습니다.

  • java
  • spring
  • 객체지향
  • 소프트웨어-테스트
박경훈 댓글 2 좋아요 0 조회수 1415

에러처리

미해결

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

에러처리 해줄때 app.js에 에러처리 미들웨어를 해주시는데 꼭 이 방식으로 에러 처리를 해줘야하나요? 아니면 보통 router를타고 특정 함수에서 res.status(405).json(dfsa);이렇게 하나하나 처리해주면 안되나요?

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
dch3030 댓글 1 좋아요 0 조회수 255

6분28 초 카테고리 부모와 자식

미해결

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

@ManyToOne @JoinColumn(name = "parent_id") private Category parent; @OneToMany(mappedBy = "parent") private List<Category> child = new ArrayList<>(); 부모와 자식을 이렇게 설정해준다는데, 부모를 Many To One 자식을 One To Many 로 해주는게 이해가 안갑니다. 왜 이렇게 연관관계를 설정해 줘야 하는건가요?

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
김지수 댓글 1 좋아요 1 조회수 831

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 조회수 830

데이터 질문이요

미해결

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 조회수 429

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

미해결

실전! 코틀린과 스프링 부트로 도서관리 애플리케이션 개발하기 (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

(req,res,next) -> next()

미해결

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

책에서 프로젝트를 진행하다보면 보통 try { } catch(error) { console.error(error); next(error) } 로 next(error)를 해주시는데 error가 발생했을때 console.error(error)를 찍고 next(error)에서 에러처리(ex)프로젝트에서 app.use((err, req, res, next) => { res.locals.message = err.message; res.locals.error = process.env.NODE_ENV !== 'production' ? err : {}; res.status(err.status || 500); res.render('error'); }); 여기로로 보내지는게 맞나요?

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
dch3030 댓글 1 좋아요 0 조회수 371

제로초 슬랙방에 참여가 불가능합니다.

해결됨

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

위와 같이 활성 상태가 아니라고만 뜹니다. http://bitly.ws/yCFL 이 링크를 통해 들어가려고 시도했습니다. 2번째 동영상 강의교안, 깃헙 등 링크모음 강의에 있는 링크 입니다.

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
김보성 댓글 1 좋아요 0 조회수 649

@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 조회수 535

fetchResult() deprecated

미해결

실전! Querydsl

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

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

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 조회수 1237

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 조회수 495

인기 태그

인프런 TOP Writers

주간 인기글