묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨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 그대로 빌드해보면 저는 이건 에러는 아니고 경고지만 이런 세가지 경고 들이 뜨는데 원래 이런건가요?? 상관없는건가요?
-
미해결페이스북 클론 - full stack 웹 개발
채팅구현
채팅 구현을 어떻게해야되는지 모르겠습니다. 새터미널창 열어서 하나는 runserver 0:80하고, 하나는 redis-server 하는거 맞나요??? 이렇게 했을땐, 채팅이 구현이 안되네요 ㅠㅠ 도와주세요! 워크스페이스 주소: https://goor.me/mVRM9
-
미해결하울의 안드로이드 인스타그램 클론 만들기
UserFragment.kt 에서 activity 오류
첫번째 동그라미 activity는 저번강의에서 !! 넣었는데 오류뜨길래 지우니까 제대로 실행되어 했는데 밑에 activity 이번강의에서는 계속 오류 뜨고 프로필 사진이 안나옵니다 해결방법이 있을까요 .. ? 이렇게 오류 뜹니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 클론코딩 강의 어떤것을 먼저 들을지 궁금해서 여쭈어보려고 합니다.
안녕하세요 제로초님 클론코딩 강의 두가지 모두 끊어서 듣고 있는 학생입니다. 두 클론코딩 강의 모두 리액트 무료강좌가 선수강의로 알고 있습니다. 다만 두 클론코딩 강의중 노드버드는 리액트 위주의 풀스택 강의인것 같고 슬랙은 리액트+TS에 백엔드는 Typeorm + nest.js강의로 알고 있어서 개인적으로 두 클론코딩 강의중에 어떤것을 먼저 듣는게 좋을지 여쭈어보고 싶습니다. 그리고 추가적으로 공부방법에 관련해서 여쭈어보고 싶습니다. 제로초님 강의를 전부 천천히 다 듣는거는 강의 양이 많아서 무리라고 생각이 들어서.. 지금 책으로 빠르게 리액트 개념에 대해서 전반적으로 훑어보고 클론코딩을 하면서 모르는 개념에 대해서 책을 찾아보고 제로초님 강의를 찾아가면서 들으려고 하는데 괜찮은 공부방법인지 여쭈어보고 싶습니다. (제로초님 웹 게임 강의만 듣자니 무언가 포트폴리오로 남는것이 없고 시간만 오래 걸리는것 같아서 여쭈어보려고 합니다.) 아니면 시간이 오래걸리더라도 웹 게임 강의를 들으면서 천천히 진도를 나가는게 맞을까요?
-
미해결애플 웹사이트 인터랙션 클론!
main-add.js 코드 오류 있습니다. 이거 보고 수정하세요
main-add.js 내용 적용했는데 section-2 부분의 messageC부분이 section3까지 넘어가서 뭔가 이상하다고 생각했습니다. 실제로, 강의 영상에 나온 것이랑 값이 차이나서 수정한 부분 올립니다. sceneInfo의 section2부분의 value만 변경해주시면 됩니다. values: { messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }], messageB_translateY_in: [30, 0, { start: 0.5, end: 0.55 }], messageC_translateY_in: [30, 0, { start: 0.72, end: 0.77 }], messageA_opacity_in: [0, 1, { start: 0.15, end: 0.2 }], messageB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }], messageC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }], messageA_translateY_out: [0, -20, { start: 0.3, end: 0.35 }], messageB_translateY_out: [0, -20, { start: 0.58, end: 0.63 }], messageC_translateY_out: [0, -20, { start: 0.85, end: 0.9 }], messageA_opacity_out: [1, 0, { start: 0.3, end: 0.35 }], messageB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }], messageC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], pinB_scaleY: [0.5, 1, { start: 0.5, end: 0.55 }], pinC_scaleY: [0.5, 1, { start: 0.72, end: 0.77 }], pinB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }], pinC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }], pinB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }], pinC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], },
-
미해결BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론
actions 함수 관련 질문
질좋은 강의 무료로 올려주심에 만세 3창 드립니다. 다름이 아니라요 선생님 트위터 새 모션을 설정하는 함수에서 위 사진 상으로 4번째 줄 가운데 ('[data-index = "2"].bird')에서 대괄호와 .bird를 붙이면 이렇게 오류가 나는데 대괄호와 .bird를 띄우면 잘 작동합니다... 자바스크립트를 공부한지 얼마 되지 않아 왜 저런 차이가 있는지 궁금합니다
-
미해결Flutter + Firebase로 넷플릭스 UI 클론 코딩하기 [무작정 플러터]
({this.movies}); 에서 movies가 에러나는 이유를 모르겠습니다 ㅠㅠ
이게 에러나서 그런지 movies; images; likes; _currentKeyword; 얘네도 다 에러나네요.. 아시는분 댓글좀요 !! List<Movie> movies; List<Widget> images; List<String> keywords; List<bool> likes; int _currentPage = 0; String _currentKeyword;
-
해결됨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
-
미해결하울의 안드로이드 인스타그램 클론 만들기
3강 SHA - 1키를 넣는 방법 sputnik7565님의 SHA1 보충 설명입니다
사용 설정을 한 후 빨간색으로 표시한 '프로젝트 설정'으로 갑니다. 이런 화면이 보이실 텐데 좀 더 내려 보시면 붉은색 부분이 비어져 있을 것입니다. 이쪽에 붙여 넣기를 하시면 됩니다.