25%
29,700원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
useRef
useState를 이용해서 onChange 될때마다 Input 값을 각 State에 업데이트 해주는 방식과 useRef를 사용해서 onChange를 사용하지 않고, onSubmit 될때 한번에 State를 업데이트 해주는 방식 중 어떤 것이 더 효율적인가요..?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
질문있습니다.
emotion으로 한 styled component에 있는 값을 바꿀 수 있나요?예를들어,index.tsx파일에서 아래와 같이 style.tsx파일에 있는 내용에 접근해서 z-index값을 바꿀 수 있나요? export const Aside = styled.div` z-index: 0; `;
- 미해결Slack 클론 코딩[실시간 채팅 with React]
질문있습니다.
useInput에서는 hadler를 리턴해주는데 구조분해 할당으로 useInput에 return 값을 받을 경우 hadler를 hadler가 아닌 다른 이름의 함수인onChangeEmail 이라는 이름으로 받을 수 있는건가요 ? 궁금합니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
useCallback 사용 시점
최근에 기업 과제를 진행 했었는데 무분별한 useCallback 사용은 안 좋다고 하더라구요 여기서 무분별한 useCallback의 안 좋은점이 뭐가 있는지 알려주실 수 있으신가요 ?!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
프리티어를 설정했는데 자동으로 코드 정렬이 먹히지 않습니다 ㅠㅠ
(사진)
- 미해결Slack 클론 코딩[실시간 채팅 with React]
이건 무슨 오류인가요 ㅠㅠㅠ
(사진)
- 미해결Slack 클론 코딩[실시간 채팅 with React]
styles.tsx 모듈이 아니라고 에러가 납니다.
그강의에서 한것 빠짐없이 따라 온거같은데 저렇게 에러가 떠서 css를 받아 오지 못합니다. 찾아봐도 어떻게 해야될지 몰라 질문드립니다
- 미해결Slack 클론 코딩[실시간 채팅 with React]
질문있습니다.
useEffect(() => { function a(){ … } } return ( <button id=“btn1” onClick={a}></button> ) 이런식으로 useEffect안에 선언한 함수를 가져와서 사용하고 싶은데 방법이 있을까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
이게 무슨 에러인가요 ㅠㅠ
(사진)
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
질문있습니다.
안녕하세요 강사님 질문1. channel 컴포넌트의 const isReachingEnd = isEmpty || (chatData && chatData[chatData.length - 1]?.length < 20) || false; 여기서 console.log('chatData?.[chatData.length - 1]?.length:', chatData?.[chatData.length - 1]?.length); 이렇게 콘솔로 찍어보면 chatData?.[chatData.length - 1]?.length 가 첫번째 배열객체 개수가 20개 두번째 배열객체의 갯수가 2개로 나옵니다. 즉 따로따로 나오고 둘을 합쳤다는 코드가 없어서 각각 20개를 넘지 않는데 어떻게 isReachingEnd가 20개를 넘어 true가 되는건지 궁금합니다! 직접실행해보면 true가 되지만 왜 그렇게 되는지 궁금합니다. 둘을 더해주는 코드가 없는데 말이죠.. 질문2. 개발자 콘솔 application에 있는 쿠키는 서버에서 쿠키를 만들어준게 표시된건가요 아니면 서버에서 프론트로 쿠키를 보내어 프론트 브라우저에 있는 쿠키를 나타낸것인지 궁금합니다! 질문 3. <Chats> <Switch> <Route path="/workspace/:workspace/channel/:channel" component={Channel} /> <Route path="/workspace/:workspace/dm/:id" component={DirectMessage} /> </Switch> </Chats> 이 코드에서는 channel 이나 DirecMessage컴포넌트에 해당 주소로 들어갔을 경우 저 컴포넌트로 이동시킨다는 의미로 이해했는데 제가 이해한게 맞는지 궁금합니다..
- 미해결Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 현영님! form 파일 전송 관련해서 질문드려도될까요
삭제된 글입니다
- 미해결Slack 클론 코딩[실시간 채팅 with React]
swr을 사용하면서 로직 분리에 대해 질문 있습니다!
안녕하세요 강의 잘 들었습니다! 해당 강의에선 swr을 사용하면서 로직 처리같은 것을 해당 컴포넌트 함수 내부에서 주로 처리를 한다고 느꼈습니다. 큰 프로젝트 같은 경우에는 분리가 필요할까요? 필요하다면 swr을 이용하면서 어떤 구조로 처리하면 좋은지 궁금합니다!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
질문있어요
open API로 다른 사이트를 만들고 있는데 빈 객체가 reply옵니다. 그런데 postman에서는 데이터가 잘 와요. 이런 경우는 어떻게 고쳐야할까요? 서비스키를 재발급 해봐도 안되고 밑에처럼 fetch를 사용해봤는데도 안됩니다. 그러나 그 전에 또 다른 open API를 사용해서 axios 형태로 똑같이 보냈는데 그 데이터는 잘 넘어와요.
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
질문.
안녕하세요. 강사님 const { data: userData, error, revalidate, mutate } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, // 2초 }); 질문1. userData가 data의 변수에 담기는것인지 궁금합니다. 콘솔로그에 userData찍어보니 userData에는 값이 있고 Data를 찍으면 에러가 납니다. 보통 자바스크립 변수설정이랑 위치가 바뀐것 같은데 헷갈리네요. swr에서는 변수설정 위치를 바꿔주어야 하는것인가요?. const { workspace } = useParams<{ workspace: string }>(); 질문2. userParams의 worspace가 slect인데 이게 어떤경로로 통해서 데이터가 들어오는 건지 헷갈립니다! const Menu: FC<Props> = ({ children}) => { const stopPropagation = useCallback((e) => { e.stopPropagation(); }, []); 질문3. Menu컴포넌트에서 {children} props로 받으아와서 레이아웃을 짤 수 있잖아요? 이것도 리액트네이티브에 똑같이 적용 될 수 있는것인가요? 질문4. swr에는 mutate에서 true를 시켜줄경우 옵티미스틱 ui가 가능하다고 하셨잖아요? (좋아요 기능 서버점검은 나중에) 이러한 개념이 리덕스 사가에도 적용되는것이 있는지 궁금합니다. 검색해봐도 비슷한게 뭔지 잘 모르겠습니다!
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
질문있습니다!
안녕하세요. 개발자 콘솔 network에 관하여 질문있습니다. Request Headers는 제가 백엔드에 요청을 한 headers라는것은 알겠는데요! Response Headers는 약간 좀 헷갈리네요.. 인터넷 브라우저에서 제가 어떤 요청을(ex axiosPost (api/users/login')) 보내는 동시에 개발자콘솔에 network에서 loing에 보면 Request Headers와 Response Headers가 같이 있잖아요? Response Headers는 이게 백앤드에 통신이 갔다가 백앤드로부터 저에게 온(response) headers인가요?.. 반응오는 속도가 제가 요청 보낸 속도랑 거의 동시여서 헷갈리네요...
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
질문있습니다.
안녕하세요 제로초님 본 강의 8분 10초에서 나와있는 것처럼 프론트엔드의 프록시를 주석처리하고 cors문제를 해결하려고 했습니다. 로그인에 이렇게 url을 입력하고 로그인 요청을 보냈는데 . . 이렇게 에러가 뜹니다. withCredentials을 true로 활성화 해줘도 같은에러가 발생합니다. 뭐가 잘못된것일 까요?...
- 미해결Slack 클론 코딩[실시간 채팅 with React]
프로젝트에 관한 질문있습니다!
일단 첫 웹 게임 및 노드버드 때부터 항상 강의를 지켜보던 제로초님 팬 입니다! 덕에 실무 프로젝트도 거뜬히 만들게 되었는데요. 근대 어느덧 벌써 2년정도 시간이 지났고, 노드버드 리뉴얼 강의도 나오고, 타입스크립트 강의 등등이 나왔더군요. 기본 자바스크립트 및 상태관리를 위해 redux 와 ssr을 위해 next 셋팅을 고인물 처럼 사용하다 보니, 이번기회에 타입스크립트로 전환해야겠다 싶어서 sleact 강의를 듣고 있습니다. 여기서 질문! 상태관리로 사용되는 SWR 이 전체적인 강의 흐름상, 전부를 대체하지 못하는 것 같은 느낌입니다. 그러다보니, zustend 나 recoil 을 추가로 구성하여 사용하는 것 같은데, 1. swr 과 recoil, redux, zustend 등 상태관리 라이브러리의 차이점이 무엇인가요. > 추후 강의내용중 swr 만 들었을때는 설명을 제가 지나치고 들은건지, 잘 모르겠어서 질문 드렸습니다. 2. 위 나열된 recoil 등 상태관리 라이브러리가 아직까지 next 와 연결이 어려운 상태인가요..? (좋다고 덥석 혼자 구성했다가, next 와 연동이 힘들다는 글을 본것 같습니다.) 3. 제로초님의 강의 중 필요한 부분만 모두 짬뽕으로 섞어서 구성하려고 합니다! next (ssr) , 타입스크립트, swr 등. 기본 능력치가 있을때, 노드버드 리뉴얼 버전 건너뛰고 sleact 강의로 충분하겠죠..? (스스로 학습 보다 선 제로초님의 강의가 훨씬 이해가 잘되고 시간 절약이 되어서.. 질문드립니다..) 구버전에서 리뉴얼 버전의 차이가 next 버전업과 swr 추가 등의 차이인것 같은데, 건너띄어도 괜찮겠죠...? (구 노드버드 지식과 현 sleact 강의로 대체 가능하겠죠..?)
- 미해결Slack 클론 코딩[실시간 채팅 with React]
한글입력시 채팅이 두개씩 가는 오류
DM을 보내면 이모티콘과 영문은 한번씩 가지만 한글로 보낼 경우 2개씩 중복해서 보내집니다 무엇이 잘못된 걸까요? import ChatBox from '@components/ChatBox'; import ChatList from '@components/ChatList'; import { Container, Header } from '@pages/Channel/styles'; import { IDM } from '@typings/db'; import fetcher from '@utils/fetcher'; import React, { useCallback } from 'react'; import gravatar from 'gravatar'; import { useParams } from 'react-router'; import useSWR from 'swr'; import useInput from '@hooks/useInput'; import axios from 'axios'; 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 [chat, onChangeChat, setChat] = useInput(''); const { data: chatData, mutate: mutateChat, revalidate, } = useSWR<IDM[]>(`/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=1`, fetcher); 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, chatData], ); if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nickname} /> </Header> <ChatList chatData={chatData} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); }; export default DirectMessage;
- 미해결Slack 클론 코딩[실시간 채팅 with React]
cors에러...
안녕하세요~ 수업 중에 친절히 알려주셔서 잘 따라하고있었는데 뭘 건드렸는지 아래와 같이 cors를 접했습니다. 로그인 post요청은 잘 가는데 useSWR로 보낸 users는 cors가 뜨네요.. 설정은 server에서 cors :true 되어 http://localhost:3095/api/users로 요청을 보내고있는 상태입니다. login은 요청이 되는데 users만 안되는 이유가 뭘까요 ? ㅠ어느 부분을 확인하면 좋을지...
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
한번의 호출조차 아깝고 여러번의 호출이 두려운경우
안녕하세요. 항상 잘 듣고 있어요 감사합니다. 저는 강의중에 말씀하신 한번의 호출조차 아깝고 그 호출조차 제어하는게 좋다고 생각이 들어서 swr에 정의되어있는 mutate를 주로 사용할 거 같은데요. 이런경우 저는 shouldrevalidate는 true로서 하고 thenable 안에 mutate를 사용해서 쓸 생각입니다. 이렇게 사용한다고 가정할 때 1. swr을 잘못사용해 발생할 무분별한 호출도 걱정안해도 되고 2. deduping Interval의 간격을 고민할 필요도 없고 3. 필요할 때만 호출을 제어할수 있다는 생각이 드는데, 너무 장점만 생각이 들어서요. 물론 낙관적ui의 실패를 생각한다면 사용자를 속이는 행위가 될 수도 있지만 실패가 거의 발생하지 않는다고 가정한다면 특별히 다른 문제점이 생각이 들지 않는데, 혹시 주의할부분이 있을까요??