172만명의 커뮤니티!! 함께 토론해봐요.
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님 이미지가 안들어가져서 데이터를 삭제하고 다시 만들었는데 갑자기 잘되던것들이 이렇게 오류가 계속뜨네요. 아래는 현재 데이터 테이블들입니다
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
안녕하세요 비동기 함수들은 백그라운드로 보내서 실행이 된다고 하셨는데 그럼 백그라운드에서 실행되는 애들이 멀티스레드로 실행이 되는건가요? setTimeout, promise를 호출하면 둘 다 백그라운드로 이동하는데 여기서 백그라운드 영역은 여러 스레드가 백그라운드로 온 함수들을 동시에 실행하고 태스크 큐로 보내고 이벤트 루프가 호출 스택이 비었을 때 태스크 큐에 작업이 남아있다면 호출스택으로 올려서 작업을 실행하는 것이 맞을까요? 감사합니다!
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님 npm 사이트에서 devtools 보니까 cache하고 mutate가 사라져있는데 swr하고 swr-devtools 버전을 강의하고 일치시키면 mutate 만되고 cache가 안됩니다!
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님 디엠부분에서는 안읽은 메시지 표시가 떠서 읽으면 없어지는데 채널부분에서는 없어지지않고 남아있습니다!
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님 Dm에서는 이미지가 드래그업로드가 되는데 채널에서는 500에러가 뜹니다! 백엔드코드 최신버전인데 바꿔야할것이 있나요? POST http://localhost:3095/api/workspaces/sleact/dms/%EC%9D%BC%EB%B0%98/images 500 (Internal Server Error) Error at Query.run (/Users/js/Desktop/sleact/back/node_modules/sequelize/lib/dialects/mysql/query.js:52:25) at /Users/js/Desktop/sleact/back/node_modules/sequelize/lib/sequelize.js:314:28 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async MySQLQueryInterface.insert (/Users/js/Desktop/sleact/back/node_modules/sequelize/lib/dialects/abstract/query-interface.js:308:21) at async DM.save (/Users/js/Desktop/sleact/back/node_modules/sequelize/lib/model.js:2432:35) at async DM.create (/Users/js/Desktop/sleact/back/node_modules/sequelize/lib/model.js:1344:12) at async /Users/js/Desktop/sleact/back/routes/api.js:522:20 POST /api/workspaces/sleact/dms/%EC%9D%BC%EB%B0%98/images 500 7.558 ms - 898
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요~ 그전까지 잘되다가 오랜만에 다시 강의를 이어가려고하는데 갑자기 안됩니다 ㅠㅠ 뭐가 문제일까요.. 회원가입시에도 페이지가 넘어가지않고 계속 CORS 오류가 생기네요.. https://github.com/nuring9/react-SWR-SlackClone_front 제가 따라한 코드 깃허브 주소올립니다 ㅠㅠ
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 SWR관련 질문이 있습니다. 혹시 React 18버전에서는 SWR DevTools를 어떻게 사용할 수 있는지 부탁 드립니다. 감사합니다.
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님! 채팅보내기 강의를 보고있는데 workspace/index.tsx에서 갑자기 socket 코드 가 생겼는데 강의에는 설명이 없는거 같아서 문의 남깁니다!
미해결
Java/Spring 주니어 개발자를 위한 오답노트
최근 OOP 란 무엇인가요? 질문을 받았는대, 어버버한 경험이 있는대, 범위가 너무 광범위하여 답하기가 어렵습니다.
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
에러처리 해줄때 app.js에 에러처리 미들웨어를 해주시는데 꼭 이 방식으로 에러 처리를 해줘야하나요? 아니면 보통 router를타고 특정 함수에서 res.status(405).json(dfsa);이렇게 하나하나 처리해주면 안되나요?
미해결
실전! 스프링 부트와 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 로 해주는게 이해가 안갑니다. 왜 이렇게 연관관계를 설정해 줘야 하는건가요?
미해결
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; 혼자서 해결해보려다가 못찾고 있어서 질문 남겨드려요 ㅠㅠ
미해결
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)를 지우고 실행해봐도 똑같은 결과가 나오는데 이 코드는 왜 있는 건가요?
미해결
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; 오류내용
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
public class student { public int score; public int getScore() { return this.score; } } 위와 같은 코드가 있고 연관관계 매핑이 되어있어 현재 프록시 상태라고 가정했을 때 점수를 얻기 위해 student.score를 사용 하면 영속성 컨텍스트로부터 초기화를 받지 못하고, student.getScoret()를 하면 초기화를 받는 건가요 ? 만약 프로퍼티 접근을 사용했을 때 초기화를 받지 모한다면 studnet.score 안에는 무슨 값이 들어있게 되는 건가요 ?
미해결
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예 [질문 내용] 제가 이해한게 맞을까요? 일단 기본적으로 type을 LAZY 로 하는 이유는 조회할때 한 방에 다른 엔티티까지 쿼리가 나가고 그거에 연관된 엔티티까지 쿼리가 나가면 비효율 적이다. 그래서 LAZY 를 쓰는데 조회할때 다른 Entity 의 값도 가져오려면 LAZY 타입이니 쿼리가 많이 나가서 fetch JOIN 으로 한 쿼리로 연결 시킨다. 그러면 EAGER 바꾸면 될 것같지만, EAGER 는 예측할 수 없는 문제도 있고, 다른곳에서 조회할때는 또 다른 엔티티의 값이 필요가 없을 수도 있기 때문에 기본은 LAZY로 해두고 다른 엔티티의 값이 필요한 특수한 경우에만 fetch JOIN 을 한다.
미해결
실전! 코틀린과 스프링 부트로 도서관리 애플리케이션 개발하기 (Java 프로젝트 리팩토링)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 자바 스프링에서는 테스트용 생성자 메서드가 있어도, 매번 일일히 null을 넣어준다거나 하는 문제점들이 있어서 결국 Builder를 사용했었는데 코틀린에서는 롬복 Builder가 지원되지 않는다고 해서 엄청 고민 중이였습니다 근데 이번 강의 보니까 그냥 온전한 객체 만들어주는 팩터리 메서드 하나 만들어놓고 테스트용으로 필요한 인자 값들만 설정해주면 되는 거였군요 진짜 미쳤다.. 갓틀린.. 잘 배워갑니다..
해결됨
Slack 클론 코딩[실시간 채팅 with React]
`http://localhost:3095/ws-${workspace}` 위 주소로는 잘 되는데 `/api/ws-${workspace}` 로는 연결이 안됩니다. 웹소켓은 프록시 못쓰는건지, 못쓴다면 혹시 왜 안되는건지 이유를 여쭈워도 괜찮을까요?
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
24분 30초부터 연관관계 메서드에 관련해서 설명해주시는데 연관관계 메서드의 위치는 핵심적으로 컨트롤 하는 쪽에 있는 것이 좋다 이게 무슨 말인지 잘 이해가 되지 않습니다 ㅠㅠ
해결됨
Slack 클론 코딩[실시간 채팅 with React]
styles.tsx파일을 보면 & img {...} & > div {...} 이렇게 있던데 '>' 기호가 있고 없고의 차이점은 뭔가요?
