25%
29,700원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결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]
eslint 패키지들 설치 후 문제
영상에서 언급해주신 5개 패키지 후에 코드에서 eslint가 꼬였는지 이러한 오류창이 뜹니다. 코드 동작에는 이상이 없는데 원인을 잘 모르겠네요
- 미해결Slack 클론 코딩[실시간 채팅 with React]
API와 library의 차이
autosize 같은 패키지는 library라고 부르는게 맞다고 생각되는데요. API와 library를 구분하는 쉬운 방법이 있을까요? 항상 헷갈려서 여쭤봅니다. 또 영상을 보다보면 아래 코드에서 setChat을 초기화해주지 않으면 submit이 안되는데요. 이유가 있을까요? const onSubmitForm = useCallback((e) => { e.preventDefault(); setChat(''); }, []);
- 미해결Slack 클론 코딩[실시간 채팅 with React]
styles.tsx 파일 위치 관련
안녕하세요. Modal을 보면 styles를 signup의 styles를 가지고 와서 사용을 하는것을 볼 수 있는데요. 이걸 따로 workspace나 createChannel에서 빼는것만 뺴와서 styles.tsx를 같은 폴더 내에 만들어서 쓰는게 유지보수에도 그렇고 좋지 않을까 싶어서 여쭤봅니다. 아니면 파일을 괜히 하나 더 만들어서 번들링시 용량이 커지기 때문에 그렇지 하지 않는걸까요? 의도가 궁금하여 여쭤봅니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
cra와 직접 웹팩을 설정하는 것의 성능 차이
cra와 제로초님이 강의 초반에 알려주신 직접 웹팩을 설정하는 것 간에 유의미한 성능차이가 있나요? 구체적으로 어떤 부분이 다른지 궁금합니다. 실무에서는 직접 웹팩을 설정하는 경우가 많다고 들었는데 그만한 가치가 있어서 하는 것인지도 궁금합니다!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
질문있습니다.
안녕하세요 제로초님. 강의와는 무관하지만 잘 안되어 질문을 올립니다. styled-components로 스타일링을 하고 있으며, 카드리스트안에 어떤아이콘을 hover했을때 툴팁을 보여주게 하고 onMouseLeave 했을때는 안보여지게 하는 스타일을 하고 싶은데 잘 안되어 질문을 올립니다. 전제조건은 카드리스트의 갯수가 1개가 아니라 여러개입니다.(슬랙같은 채팅처럼) 제가 한 방법으로는 const [display, setDisplay] = useState({ save: 'none', share: 'none', more: 'none' }); state로 관리 할려고(카드리스트에 아이콘이 3개 있습니다.) 하는데 하나의 카드리스트의 아이콘에 hover시에 다른 카드리스트에도 아이콘이 보여지는 현상이 있습니다(state를 하나로 관리하다 보니 다른 카드리스트에도 보여지네요,.....) 혹시 이럴경우에는 어떤방법이 좋을까요? 코드의 일부를 첨부합니다. // 아이콘영역 마크업<button> <img src="/dummy" onMouseEnter={onMouseHoverHandler('save')} onMouseLeave={onMouseLeaveHandler('save')} /> <Tooltip display={save}>Save</Tooltip></button> // hover시 실행되는 부분const onMouseHoverHandler = (text: string) => (e: any) => { setDisplay({ ...display, [text]: 'block', });}; // stateconst [display, setDisplay] = useState({ save: 'none', share: 'none', more: 'none' });const { save, share, more } = display;
- 미해결Slack 클론 코딩[실시간 채팅 with React]
useCallback 관련
안녕하세요. useCallback 관련해서 갑자기 궁금한점이 생겨 질문 드립니다. useCallback을 함수에 감싸고 props로 내리면 함수를 기억해서 재 성성을 하지 않는다고 이해하였습니다. onChange 함수를 예로들면 input에 입력이 들어올때마다 함수를 실행시키게되고 state에 새로운 값을 업데이트를 할텐데요. useCallback을 사용하였을때 새로이 함수는 생성되지 않으나 기존 함수는 계속해서 state를 업데이트를 해야되기 때문에 input이 들어올때마다 계속해서 실행된다 되지만 deps가 빈배열일 경우에는 화면에는 업데이트를 하지 않는다라고 이해하면 될까요? 깔끔하게 이해가 안되네요. 다시 한 번 밑에 이해한데로 적어보겠습니다. 1. 부모 (props:useCallback함수) --> 자식(props)로 갈 데이터가 전달 됨 2. 자식에서 함수가 실행 될 경우 자식 컴포넌트는 렌더가 되며 부모의 state 값을 업데이트 시켜줌 3. 부모가 렌더링이 다시 될 경우 useCallback으로 감싸진 함수는 재렌더링이 일어나지 않음 결국 useCallback은 부모에서 렌더링이 일어날 경우 useCallback로 감싸진 부분을 재렌더링이 일어나지 않도록 하기 위한 목적이다. 제가 이해한 것이 맞을까요? 막 쓰다보니.. 좀 길어졌는데 확인 부탁드리겠습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
typescript prettier 관련
안녕하세요. 제로초님 무료강의에서 뵙고 여기서 또 보니 반갑습니다! 다름이 아니라 설정 후 모두 정상 동작하는 것을 확인하였습니다. 궁금한점이 .html 파일이 경우 save 하였을 경우 prettier에 따라 자동정렬이 잘 되는것을 확인하였습니다. 그러나 .tsx파일 같은 경우는 저장을 해도 prettier이 적용되지 않는데요. 추 후 추가 설정을 하여 설정이 되는건데 설레발 치는게 아닌지 싶긴한데 세미콜론이나 따옴표 및 정렬이 자동으로 되지 않아 여쭤봅니다. 항상 좋은 강의 감사드립니다
- 미해결Slack 클론 코딩[실시간 채팅 with React]
질문
settings폴더에 웹팩 데브서버까지 세팅되어 있다고 하셔서 여기부터 세팅 시작하고있는데 prettier, eslint나 몇가지는 settings 폴더에 설정이 안되어있는건가요??
- 미해결Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님 프론트 세팅부분에 대해 문의드립니다.
삭제된 글입니다
- 미해결Slack 클론 코딩[실시간 채팅 with React]
프리티어와 린트가 먹히질 않습니다. 그리고 웹팩 돌린후 dist 폴더가 생성되지 않습니다.(깃 주소첨부)
1. 이상하게 프리티어랑 린트가 먹히질 않는 것 같습니다.. vscode쓰는데 설정파일 같이 첨부드립니다.. (setting.json) { "workbench.colorTheme": "Atom One Dark", "workbench.iconTheme": "material-icon-theme", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.alwaysShowStatus": true, "eslint.workingDirectories": [ {"mode": "auto"} ], "eslint.validate": [ "javascript", "typescript" ], "explorer.confirmDelete": false, "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe", "terminal.integrated.shellArgs.windows": [ "--login" ], } 2. 그리고 웹팩 번들링 작업후 /dist 폴더가 생성이 안되는데 에러는 딱히 안나는것 같은데 이유를 잘 모르겠습니다. https://github.com/SeokSuMin/slaectSumin/tree/master
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
mutate 질문
안녕하세요 제로초님. 리스트 순서 변경을 Mutate로 하려고 하는데요. Mutate ( 변경된 리스트, false ) 이렇게 해도 화면에서 바로 변경이 안됩니다. Mutate ( false, false ) 이런식으로 데이터를 그냥 false로 넣으면 리스트 map을 쓰고있어서 화면에서는 바로 에러가 뜨는데요. 왜 순서가 변경된 제대로된 값을 넣을 때는 아무 반응이 없는지 알길이 없네요 ㅠㅠ const { data, mutate } = userSWR(~~) console.log로 저기 data를 찍어봐도 변경이 잘되어 있는데 화면에 반영만 안됩니다. 무조건 리벨리데이션을 해야 바뀌네요. 어떤 부분을 놓쳤을까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
제로초님
제로초님 안녕 하세요 조금 헷갈리는게 있어서 질문을 남기데 되었습니다. 백엔드 socket을 봤을떄 const io = SocketIO(server, { path: "/socket.io", }); 이 있는데 예전 제로초님 node.js강좌에서 socket.io를 처음에 봤었을때 프론트에서 커넥션을 할때 서버쪽 path와 같아야 해서 path를 같이 보내줬던 기억이 있는데 이번 강좌에서는 sockets[workspace] = io.connect(`${backUrl}/ws-${workspace}`, { transports: ['websocket'], }); path는 생략이 되었더라구여 이부분에서 이제 없어도 되는지 하여 질문을 남기게 되었습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
제로초님~
제로초님 백엔드는 언제쯤 출시 예정인 가요?!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
제로초님~
제로초님 안녕 하세요 아이콘이 안나와서 그런데 혹시 뭐 받아야 하는게 있을까요?!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
reset.css
안녕하세요 로초님 emotion으로 reset.css적용할려고 하니 잘 안되서 질문을 올립니다. 하단방법처럼 적용을 해봤습니다. import { css } from '@emotion/react'; const Reset = css` ol, ul { list-style: none; } ` export default Reset; import React from 'react';import loadable from '@loadable/component';import { Switch, Route, Redirect } from 'react-router-dom';import { Global } from '@emotion/react';import reset from '@utils/Reset';const Home = loadable(() => import('@layouts/Home/Home'));const App = () => { return ( <div> <Switch> <Route exact path={'/'} component={Home} /> </Switch> <Global styles={reset} /> </div> );};
- 미해결Slack 클론 코딩[실시간 채팅 with React]
슬랙 클론 코딩 관련 백엔드 강좌는 언제쯤 하는지요?
제로초님의 강의를 열심히 듣고 있습니다. 다름이 아니라 문득 프론트만큼 백엔드도 소켓설정이 중요할거 같은데요.. 슬랙 클론 코딩 관련 백엔드 강좌는 언제쯤 하는지요? 만약 계획이 없으시면 백엔드파트에서 소켓설정은 어떻게 파악해야 하는지요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npm i 만 해도 되는건가요?
/d/sleact/alecture (master) 에 이미 package.json 만들어져 있는데 npm i 만 해도 되나요? 프론트 폴더도 마찬가지죠?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
강의에 나온 workspacemembers 테이블 ChannelMembers 테이블 명칭에 관한 질문.
아 그리구 강의에서 나온 다대다 테이블 명칭에서 아래와 같이 데이터베이스 테이블 명칭이 WorkspaceMember 다대다 모델이름은 workspacemembers 라는 소문자로만 이루어진 명칭이고 ChannelMember 는 through 만 사용해서 데이터베이스에서 확인하면 ChannelMembers 로 나오는데요. 이게 테이블 명칭이 ChannelMembers 가 맞는지 아니면 다른 옵션으로 channelmembers 라고 맞추어주어야 하는지도 궁금합니다!! db.User.belongsToMany(db.Channel, { through: "ChannelMembers" }); db.Channel.belongsToMany(db.User, { through: "ChannelMembers", as: "Members",}); class WorkspaceMember extends Model { { modelName: "WorkspaceMember", tableName: "workspacemembers", charset: "utf8", collate: "utf8_general_ci", // 한글 저장 sequelize,} db.User.belongsToMany(db.Workspace, { through: db.WorkspaceMember, as: "Workspaces",});
- 미해결Slack 클론 코딩[실시간 채팅 with React]
사용자 차단 로직 구성에 대한 질문
안녕하세요. 정말 좋은 강의와 소스코드 공개 정말 감사드립니다. 강의의 내용보다 더 나간 내용이긴 하지만 혹시나 가능하시다면 하여 질문드립니다. user1, user2 가 있을 때 user1 이 user2 를 사용자 차단할 경우 게시글 같은 것이 있을 경우 user1 에게도 user2 의 게시물이 안보여야하고 user2 에게도 user1 의 게시물이 안보여야 하고 DM 의 경우에도 (channelchat 과 같은 단톡은 일단 고려하지 않음) user1 이 user2 를 차단하였으므로 user1 의 사용자가 표시되는 리스트에 user2 가 안보여야하고 user2 의 사용자가 표시되는 리스트에도 user1 이 보이지 않아야하며 DM 도 user1 이 user2 에게 보낼 수 없고 user2 가 user1 에게도 보낼 수 없고 user1 과 user2 의 DM 이 있다손 치면 그것들이 차단을 했으니 상호간에 삭제되어야하고 (paranoid 방식일지라도) 하는 시나리오가 있을 경우 해당 block 이라는 user vs user 의 다대다 관계를 어떻게 구성하는 것이 좋을지 문의드립니다. https://stackoverflow.com/questions/54605069/how-should-i-design-a-user-blocking-system Table User id (pk) | user_name 1 | a 2 | b 3 | c Table Post id (pk) | user_id (fk) 1 | 1 2 | 3 3 | 2 4 | 2 Table Block id (pk) | blocker_id (fk) | blocked_id (fk) 1 | 1 | 2 2 | 2 | 1 select * from User join Block on User.id = Block.blocker_id or User.id = Block.blocked_id select * from Post p where p.user_id = @current_user_id and not exists (select id from Block where Block.blocker_id = p.user_id or Block.blocked_id = p.user_id) 이런식으로 SQL 을 짜면 된다고 stackoverflow 에서 나와 있는데요 User 의 associate 부분에 이렇게 구성하면 될까요? static associate(db) { db.User.belongsToMany(db.User, {through: "Block"}); }