묻고 답해요
148만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Slack 클론 코딩[실시간 채팅 with React]
[06:26 부분] 정규표현식으로 문자열 변환하기 부분 질문할게요
정규식으로 닉네임 찾는 부분에서요 match.match(/@\[(.+?)]\((\d+?)\)/)! 여기 이부분에서느낌표(!)를 왜 붙여준건가요? str.match(정규표현식) 이런 형태로 작성하는 건줄 알았는데 느낌표가 붙여있어서 궁금해서 질문올립니다.
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
웹팩 한가지 질문이 있습니다.
안녕하세요! 웹팩설정에서 질문이있습니다. 알거같다가도 헷갈려서 질문드려요! "webpack.config.ts 파일 내에서 const require 방식이 아닌 Import를 사용가능한 이유"가 어느부분때문인가요? tsconfig.json 에서 module을 esnext로 최신으로 쓰겠다고 설정했으므로 tsconfig를 웹팩이 먼저 읽어서, 웹팩 파일내부에서도 commonjs방식이아닌 import 방식이 가능한것이라고 이해하면 맞을지 궁금합니다. 그런데 이렇게 이해하면 tsconfig-for-webpack-config 파일에서는 또 module을 commonJs 로 해주기때문에 조금 헷갈립니다,,
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
배운 내용을 토대로 swr을 이용하여 프로젝트를 하고 있는데요!
const {data, error, revalidate}=useSWR(주소, fetcher) -> 주소: fetcher 함수 실행을 요청할 주소 fetcher: 어떤 기능을 수행할 지 정의해 둔 함수 요청이 성공되면, revalidate 함수가 실행된 뒤, data로 응답을 받아와서 응용할 수 있다. 이렇게 이해했는 데 맞을까요? 그리고, fetcher는 하나가 아니라 여러가지를 만들어도 괜찮을까요? get을 할 수 있는 fetcher, post를 할 수 있는 fetcher 등 나눠서 사용할 수 있을까요? 그리고 프로젝트를 함께 진행하고 있는 친구가 회원가입을 하기 위해 post를 해줬고, 성공 시 response로 관련 데이터를 보내주는데 /api/user에 굳이 userData를 넣어서 또 get으로 받아볼 수 있도록 해야 하냐고 물어보던데 당연히 필요한 거 아닌가..? 라는 생각이 들지만 명확한 근거를 모르겠어서 질문드립니다.
-
미해결따라하며 배우는 NestJS
socket관련 질문!
안녕하세요! 먼저 강의 잘 들었습니다 강의보고 따라해보니 CRUD 프로그램 개발에는 조금이나마 이해가 됩니다 그런데 socket을 이용하여 tcp 통신을 해야하는 프로젝트를 진행중인데 nest.js 공식 문서를 보니 @SubscribeMessage('event_name') 을 이용하여 데이터를 받고 emit을 이용하여 event_name으로 주는 환경이더라고요?? 현재 서버를 nest.js 기반으로 개발하고 개발해 놓은 클라이언트(c++작성)에서 tcp 통신을 하기 위해서는 c++ 클라이언트에서도 socket.io를 활용하여 event_name 을 통하여 통신을 해야하는 것인가요? 아니면 event_name 없이 단순 tcp 통신을 통해 binary 데이터를 주고 받을 수 있는 서버 nest.js 환경이 있을까요?? 제가 socket.io에 대해 이해한 내용이 맞는건지도 잘 모르겠지만 답변 부탁드리겠습니다!
-
미해결Slack 클론 코딩[실시간 채팅 with React]
인피니티 스크롤 시 데이터 일부를 가져오지 못하는 문제
채팅방에서 새로운 데이터를 입력한 후, 스크롤을 위로 올려 다음 페이지를 로드하면 다음 페이지 값의 일부가 사라져서 출력되는 것 같습니다. 사진에서 5를 새로 입력했습니다. 그리고 나서 위에 닿을 때까지 천천히 스크롤하여 새로운 페이지를 불러오면 8 다음에 있어야 할 9를 불러오지 못했습니다. 테스트는 강좌 깃헙의 front 폴더와 back 폴더에 있는 코드로 진행 했습니다. 버그인 것인지, 페이지를 불러오는 과정에서 문제가 생긴건지 궁금합니다ㅠㅠ..
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
웹소켓 관련 개념질문입니다.
안녕하세요. 현재 "DM채팅하기" 강의를 진행하기 전에도 시크릿모드로 두개를 띄워서 해보면 지금도 채팅 통신이 가능한데 이상태에선 계속 서버로 보냈다가 다시 가져오고 그런 상태이기 때문에 소켓통신으로 바꾸려고 socket.on 을 추가하는 것인가요? 그러니까 useEffect(()=>socket?.on('dm', onMessage) 이부분을 하는 이유가 http프로토콜을 소켓 프로토콜로 바꾸는 개념인가요? 동작 방식이 좀 헷갈리네요.. 제가 이해한 부분이 맞을까요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
(공유) 리액트 v6부터는 route가 바뀌어서 중첩라우터 이렇게 적용하셔야합니다
App 파트에서 workspace다음 와일드카드/* 를 표시해주셔야 합니다 workspace 안에서는 path에 /workspace/:workspace를 쓰면 App에서 workspace/:workspace/* 가 있어서 두개가 중복되기때문에 바로 /channel/:channel 로 path를 작성하시면 됩니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
onCreateWorkspace Submit 무반응
안녕하세요! 지금까지는 문제 없이 잘 진행하고 있었으나 계속 찾아보고, alecture 폴더 내에 있는 소스코드와 비교를 해보아도 어떤 코드가 문제인지 모르겠어서 질문 글을 남기게 되었습니다. 해당 섹션 마지막에서 액시오스 코드를 작성하고 백엔드에 워크 스페이스를 생성하도록 요청하는 부분이 있는데요, const onCreateWorkspace = useCallback((e) => { console.log('ok'); e.preventDefault(); console.log(newWorkspace); if (!newWorkspace || !newWorkspace.trim()) return; console.log('b'); if (!newUrl || !newUrl.trim()) return; console.log('c'); axios.post('/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }, ).then((response) => { revalidate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }).catch((error) => { console.dir(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, []); 워크스페이스 이름과, 워크스페이스 url 을 넣고 생성하기 버튼을 누르면 반응이 없어서 위 코드처럼 console.log 를 찍어서 확인해보니 newWorkspace 에 아무런 값이 담기지가 않고 있습니다. 해당 소스코드 및 라인 : https://github.com/Kuass/sleact/blob/master/setting/ts/layouts/Workspace/index.tsx#L32 입니다. onCreateWorkspace = useCallback 에 event 객체도 콘솔에 찍어서 보았으나 값은 정상적으로 있는데.. 왜 이럴까요 강사님 ㅠㅠ..
-
미해결Slack 클론 코딩[실시간 채팅 with React]
react-router-dom 문제....
자꾸 이와 같은 에러 가뜹니다. react-router-dom에 Switch와 Redirect을 export없다고 합니다....
-
미해결Slack 클론 코딩[실시간 채팅 with React]
npm run dev 시 에러가 나는데 해결이 안됩니다..
이것저것 다 시도해보아도 계속 이 에러가 납니다.. 노드 버전의 문제일까요? 현재 12.20 버전쓰고있습니다 ㅠㅠ
-
미해결Slack 클론 코딩[실시간 채팅 with React]
배포 관련 질문입니다
헉 제로초님 저는 서버 강의는 안듣고 클라이언트만 듣고 배포하고 싶거든요 포폴로 사용하려고요 클라이언트만 따로 배포 할 방법은 없을까요?...
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
sleact 폴더 안에 파일이 다 들어있습니다.
깃에서 클론받아서 강의를 진행하고 있는데 front 뿐만 아니라 sleact 폴더에도 전부 만들어져 있는데 어떤식으로 진행해야하나요 초반 셋팅 부분 빼고는 다 삭제 후 만들면 되겟죠..?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
swr 설정 살펴보기 > revalidate 문제
swr 최신버전에서 revalidate가 삭제 된 것 같아서 질문드립니다! 제로초님의 강의를 듣고, 제가 이해한 것은, 기본 swr설정으로 사용을 하면, 지속적으로 데이터를 요청하게 되는데, swr에서 revalidate를 설정해주고, onSubmit의 post의 then에 reavalidate함수를 넣어주면, 그 함수가 실행 되었을 때부터 swr이 작동한다고 이해했는데 그게 맞을지 여쭤보고 싶습니다. swr 공식문서를 읽어보긴 했는데 확실히 이해가 되지 않아서요.. 조건부로 실행시키기 위해서, useSWR()에서 조건을 주어, 조건에 따라 false일 때 url의 위치에 null 안에 조건을 넣어주는 방식으로 공식 문서에 적혀있는데, 이렇게 되면 useState로 조건을 하나 만들어주어야 할까요? 해당 방법이 맞는지와 올바른 코드 예시가 있다면 알려주시면 감사하겠습니다!! ㅠ
-
미해결Slack 클론 코딩[실시간 채팅 with React]
setShowCreateChannelModal props의 타입 질문
강의에서, setShowCreateChannelModal props의 타입을 (flag:boolean)=>void;라고 지정하셨는데, setState의 경우 기본적으로는 Dispatch<setStateAction<S>> 이런식이었던 것 같은데 이렇게 안쓰고 그냥 저렇게 쓸 수 있는 건가요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
GET .../members error
이전에 비슷한 문제를 겪은 글이 있었는데 해결되지 않아서 글을 작성하게 되었습니다. InviteChannelModal 컴포넌트에서 보내는 GET 요청 const { revalidate: revalidateMembers } = useSWR( userData ? `/api/workspaces/${workspace}/channels/${channel}/members` : null, fetcher, ); 위 코드의 실행되는 결과로 다음과 같은 에러가 발생합니다. const { workspace, channel } = useParams(); InviteChannelModal 컴포넌트에서 콘솔에 workspace와 channel을 찍어보니 channel이 undefined 값으로 나오는데 useParams를 사용하면 현재 URL에서 라우터에서 지정한 콜론 뒤의 키에 해당하는 값을 반환하는 것으로 알고 있습니다. 로그인 후 "http://localhost:3090/workspace/sleact/channel/일반" 주소로 이동하기에 channel 값이 일반으로 출력되기를 예상합니다만.. Workspace layouts 에서 라우터 설정을 했음에도 매칭되는 channel 값을 받아오지 못하기에 원인을 알 수 없어 여쭤봅니다. <Switch> <Route path="/workspace/:workspace/channel/:channel" component={Channel} /> <Route path="/workspace/:workspace/dm/:id" component={DirectMessage} /> </Switch>
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 궁금한점이요!!
안녕하세요 저는 웹팩 소스는 복붙하고 패키지를 직접 하나씩 설치해보았는데 빌드나 실행시 에러가 나서 webpack-dev-server 가 4.0.0 인걸 지우고 @ 3.11.2로 다시설치하니까 되더라고요. 원래 이렇게 버전하나때문에 에러가 잘 발생하나요? 그리고 setting/ts 그대로 빌드해보면 저는 이건 에러는 아니고 경고지만 이런 세가지 경고 들이 뜨는데 원래 이런건가요?? 상관없는건가요?
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
InviteChannelModal 에 관해서 여쭤볼게 있습니다!
먼저 좋은 강의 감사드립니다 제로초님! 도움 많이 되고 있습니다. 여기서 위 그림과 같이 console을 찍어서 useParams를 통해 받아온 channel이 잘 들어오는지 확인을 하려했는데.. workspace는 잘 들어오는 반면 channel은 undefined로 나옵니다. 그래서 InviteChannelModal에서 SWR로 요청을 보낼 때 콘솔에 에러가 발생하구요!제 생각에는 아래 그림과 같이 '일반'으로 라고 콘솔에 떠야할 것 같은데.. 이유를 잘 모르겠습니다.
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
SPA에서 e.preventDefault()를 사용해야하는 이유가 뭔가요?
https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault - 위의 링크에서 e.preventDefault() 함수가, 이벤트가 취소 가능한 경우 이벤트의 전파를 막지 않고 이벤트를 취소한다고 되어 있는데, 설명중에서 SPA에서 e.preventDefault() 사용해야한다고 하셨는데 이유가 궁금합니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
socket.io-client typescript 모듈 에러 관련
현재 시점으로 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에 관련해서 질문드립니다!
제가 이 강의를 듣고 이해한게 맞는지 궁금해서 질문올립니다! dedupingInterval을 사용하지 않으면 swr이 재요청 하는 기준이 다른 텝을 갔다가 오는 경우 재요청을 보내게 되고 dedupingInterval 옵션을 추가하게 되면 그 시간안에는 탭을 갔다와도 재요청을 보내지 않고 캐시해서 그대로 데이터를 사용하다가 그 시간이 끝나면 다시 재요청을 보내는 것이 맞는지 궁금합니다!