173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Slack 클론 코딩[실시간 채팅 with React]
이렇게 요청 보냈는데 500 에러가나네요.. back 파일이 잘못된걸까요 axios . post ( 'http://localhost:3095/api/users' , { email , nickname , password , }) . then (( response ) => { console . log ( response ); }) . catch (( error ) => { console . log ( error . response ); })
해결됨
Slack 클론 코딩[실시간 채팅 with React]
먼저 좋은 강의 감사드립니다 제로초님! 도움 많이 되고 있습니다. 여기서 위 그림과 같이 console을 찍어서 useParams를 통해 받아온 channel이 잘 들어오는지 확인을 하려했는데.. workspace는 잘 들어오는 반면 channel은 undefined로 나옵니다. 그래서 InviteChannelModal에서 SWR로 요청을 보낼 때 콘솔에 에러가 발생하구요! 제 생각에는 아래 그림과 같이 '일반'으로 라고 콘솔에 떠야할 것 같은데.. 이유를 잘 모르겠습니다.
해결됨
Slack 클론 코딩[실시간 채팅 with React]
https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault - 위의 링크에서 e.preventDefault() 함수가, 이벤트가 취소 가능한 경우 이벤트의 전파를 막지 않고 이벤트를 취소한다고 되어 있는데, 설명중에서 SPA에서 e.preventDefault() 사용해야한다고 하셨는데 이유가 궁금합니다.
미해결
Slack 클론 코딩[실시간 채팅 with React]
현재 시점으로 npm i @types/socket.io-client하면 3.0.0 버전으로 설치가되어 2버전과 맞지 않아 에러가 나옵니다. 저 같은 경우는 제로초님의 깃헙에 올라와있는 json을 보고 1.4.35 버전으로 명시하여 설치하여 문제를 해결하였습니다. 혹시 문제 있으신 분 확인해보세요. npm i -D @types/socket.io-client@1.4.35
미해결
Slack 클론 코딩[실시간 채팅 with React]
제가 이 강의를 듣고 이해한게 맞는지 궁금해서 질문올립니다! dedupingInterval을 사용하지 않으면 swr이 재요청 하는 기준이 다른 텝을 갔다가 오는 경우 재요청을 보내게 되고 dedupingInterval 옵션을 추가하게 되면 그 시간안에는 탭을 갔다와도 재요청을 보내지 않고 캐시해서 그대로 데이터를 사용하다가 그 시간이 끝나면 다시 재요청을 보내는 것이 맞는지 궁금합니다!
미해결
Slack 클론 코딩[실시간 채팅 with React]
타입스크립트에서 함수컴포넌트를 만들때 const Test: React.FC = () => {} 이런식으로 작성하는것을 많이 보았는데 const Test = () => {} 이런식으로 React.FC을 생략해주는것이 좋은방식인가요???
미해결
Slack 클론 코딩[실시간 채팅 with React]
저번에 mutate를 이용해서 서버에서 가져오는 데이터를 바로 data에 집어 넣는 식으로 했었는데, 그걸 유지했더니 리다이렉트 할때 에러가 나는 군요. .then((response) => { mutate(response.data) }) 리다이렉트를 할 때 워크스페이스 페이지가 열림과 동시에 user를 가져와야 에러가 안 생기는데, mutate를 쓰면 워크스페이스 페이지가 열릴 때 서버에 요청을 안보내네요... 그래서 실습 코드 뒤져보다가 revalidate를 쓴 걸 보고 revalidate를 쓰도록 코드를 수정했더니 workspace 들어가자마자 user 요청을 보내네요. 아직 알쏭달쏭 합니다. swr은 로컬 스토리지를 쓸때 디버깅을 하기가 어려운 것 같아요.
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 zerocho님. 이번 강의에서 [프론트엔드 세팅하기] 챕터 관련해서 질문드립니다. 강의 후반부에서 babel이 image, css 파일 등을 js파일로 변환한다고 하셨는데 그게 아니라 webpack의 loader(style-loader, file-loader) 가 js파일로 번들링 해주는거 아닌가요? 혹시 제가 모르는 부분이 있나해서 이렇게 문의드립니다. 혹시 참고할만한 문서가 있다면 같이 주시면 도움 될 것 같습니다:) 감사합니다.
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 선생님! 강의에서 사용한 socket.io에 대해 문득 궁금한 점이 들어 질문 남기게 되었습니다. 기존에 Websocket API 등장 이전에는 Ajax 통신 등으로 실시간 정보를 받아오기 위해 매번 요청을 보내야 했고, 그 과정에서 좀 더 효율성을 위해 Long Polling 또는 Streaming 방식 등이 등장했다고 이해했습니다. 반면 Websocket 의 경우 한 번 연결을 맺으면 그 연결을 유지하기 때문에 실시간 정보를 다루기 편하고 클라이언트와 서버간 양방향 통신 역시 용이하다고 소개된 것 같습니다, 이때 클라이언트와 서버 간의 통신은 등록한 이벤트 핸들러(?)를 통해 해당 이벤트가 감지되면 데이터를 내보내주는 등의 반응을 한다라고 이해했습니다. 여기서 드는 간단한 의문은 1) 클라이언트의 HTTP 요청 -> 서버가 수신 -> 서버에서 데이터 처리 -> 클라이언트에게 HTTP 응답 -> 연결 해제 2) 클라이언트에서 socket 연결 요청 -> 서버와 연결 -> 클라이언트에서 이벤트 발생 -> 서버가 감지 -> 서버에서 데이터 처리 후 전달 -> 다음 이벤트 대기... 와 같은 과정으로 이해가 되는데 HTTP요청이나 이벤트 발생 시 모두 서버에서 데이터를 처리해서 보내주는 로직은 동일한 것 같은데, 서버에서 매번 HTTP 요청을 받아 응답을 보내주는 것 보다 이벤트 핸들러(사실 이벤트가 맞는지는 확실히 모르겠습니다) 방식으로 처리하는 것이 효율이 더 좋은건가요? 글을 작성하다 보니 내용이 좀 두서가 없는 것 같은데 질문의 요지는, 클라이언트에서 서버로 요청을 보내고 이에 서버가 데이터를 보내주는 것은 둘 모두 동일한 로직인 듯 한데 이 요청이 HTTP 요청인가 아닌가에 따라 서버에 걸리는 부하의 차이가 꽤 큰 것 인지 궁금합니다. 번외) 아 그리고 선생님이 사용하시는 에디터에서 주로 함수의 인자에 음영처리되어 자동으로 데이터 타입이 표시가 되던데, 이는 Webstorm 에디터만의 기능인가요? 아니면 VSCode에서도 이를 적용할 수 있는 Extension이 있을까요? 감사합니다.
미해결
Slack 클론 코딩[실시간 채팅 with React]
커스텀 훅 useInput에서 Dispatch<SetStateAction<T>>에 관한 설명을 어디서 찾아볼수 있을까요?
