39,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
라이브러리 여부 or 검색법
저는 강의를 듣기 전 커스텀 스크롤, dayjs이라는게 있는지 몰라서 라이브러리를 사용하지 못했었는데 , 어떻게 각 기능마다 딱맞는 라이브러리들을 어떻게 찾으시는지 궁금합니다 ! 주변에 많은 인프라로 이런 라이브러리를 접하게 되시는건지 , 구글에 검색하셔서 접하시는건지 궁금합니다 ! 그리고 moment에서 dayjs로 흐름이 넘어가는 것 같은데 이런 정보드는 어떻게 알 수 있는지 궁금합니다 !
- 미해결Slack 클론 코딩[실시간 채팅 with React]
return 함수 질문
return () => { disconnect(); }; 이부분을 왜 return disconnect(); 라고 하지 않고 함수안으로 감싸는지 궁금합니다 ! javascript 보면 이런씩으로 함수안에 감싸져있는 경우가 종종 있던데 어떻게 검색해서 공부해야할지 궁금합니다 ! 감사합니다
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npm i 명령어로 package.json파일의 dependencies와 devdependencies의 목록 설치하기
다른사람이 만들어둔 package.json파일을 내 로컬로 복사해와서 npm i명령어로 설치할때, dependencies와 devdependencies의 목록의 모든 파일이 설치되는지 궁금합니다. 예를 들어 package.json 파일안에 아래처럼 두 라이브러리가 각각 dependencies와 devdependencies의 목록에 기재돼어 있으면 npm i 로 설치시 aaa/a와 bbb/b라이브러리 둘다 설치되는건가요? "dependencies": { "@aaa/a": "^11.1.2" } "devDependencies": { "@bbb/b": "^7.12.10" }
- 미해결Slack 클론 코딩[실시간 채팅 with React]
Mysql에러
이전에 노드버드강좌를 수강하여 mysql은 설치되어 있는 상태이고, 노드버드에서 사용했던 mysql 인스턴스가 있는 상태입니다.sleact클론 후 back폴더에서 npm i 한 후 , npx sequelize db:create 한 상태에서 나는 에러 인데, 맞는비번을 적어줬는데도 계속 에러가납니다. 비번변경도 시도했으나 안돼는 상태입니다. Mysql 워크밴치에 아래같이 인스턴스가 있는 상태입니다. 더블클릭해서 예전에 설정해둔 비번을 치면 비번이 맞지 않는다고하여 어떻게 해야할지 모르겠습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
user data 내 workspace 값 오류
안녕하세요 제로초님! 저는 sleact backend 강좌를 먼저 수강한 뒤 제가 만든 server로 현재 frontend 강좌를 수강 중입니다 현 강의 내용 중 Workspaces 태그로 user data 내 Wokrspaces 값을 받아 처리하는 중 해당 값이 빈값이어서 오류가 발생합니다. 이제와서 보니 /api/users 요청을 통해 받은 값 중 Workspaces 값이 빈 값으로 들어오고 있었네요... DB 테이블엔 정상적으로 workspace 가 존재하고, 나머지 user data(id, email, nickname)은 정상적으로 응답합니다. 백엔드 코드 문제 같은데 어디에 질문을 드려야 할지 애매해서 우선 여기에 작성합니다 ㅠ 백엔드 코드 내 user controller 의 api/users 처리 부분은 @ApiCookieAuth('connect.sid') @ApiOperation({ summary: '내 정보 조회' }) @Get() async getUsers(@User() user: Users) { return user || false; } 이처럼 문제가 없어보이고, entities/Users 나 다른 부분을 찾아봐도 이게 어디서 꼬이는건지 감을 못잡겠어서 조언을 받고자 질문 드립니다... 제가 현재까지 작성한 코드 깃헙 주소는 https://github.com/ljg0230/slack_clone 입니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
forwardRef<Scrollbars, Props> 질문드립니다.
forwardRef 질문드립니다. forwardRef<Scrollbars, Props>(({ chatSections, setSize, isReachingEnd }, scrollRef) 이 이부분에서 타입 순서는 Scrollbars, Props 순서인데 오른쪽의 props는 Props, Scrollbars 순서인 것 같은데 타입 지정할 때 순서는 상관 없는지 여쭙고 싶습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
typesciprt error
현 강의를 시청하는 중 "layout/workspace" 의 useSWR를 사용할때 제너릭을 <IUser | false> 로 지정해 준 후 기존에 적혀있는 userData에서 아래와 같은 타입에러가 나기 시작했습니다. Property 'email' does not exist on type 'false | IUser'. Property 'email' does not exist on type 'false'. 깃헙 코드와 비교해보았지만 다른점은 없었고, 어떤부분이 문제가되어 이러한 오류가 발생하는 걸까요? 해당 오류 때문에 제너릭을 지우고 아래 Workspaces.map((ws) => ...) 부분의 ws : IWorkspace 로 타입지정을 해주면 이상없이 동작하기는 합니다. 구글링을 해보아도 현재버전 타입스크립트 이슈가 따로 있지는 않은것 같고, 어디 실수한 부분이 있을까요? import { IUser } from '../../DataTypes'; const { data: userData, mutate } = useSWR<IUser | false>('http://localhost:3095/api/users', fetcher);//..// <span onClick={onClickUserProfile}> <ProfileImg src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} /> {showUserMenu && ( <Menu style={{ right: 0, top: 38 }} show={showUserMenu} onCloseModal={onClickUserProfile}> <img src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} /> <div> <span id={'profile-name'}>{userData.nickname}</span> <span id={'profile-active'}>Active</span> </div> <LogOutButton onClick={onLogout}>Logout</LogOutButton> </Menu> )}</span> {userData?.Workspaces.map((ws) => { return ( <Link key={ws.id} to={`/workspaces/${123}/channel/일반`}> <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton> </Link> );})}
- 미해결Slack 클론 코딩[실시간 채팅 with React]
제로초님! Worksapce/channel 에서 새로고침 시, data가 undefined가 되는 문제 질문드립니다~!
안녕하세요 제로초님! 그라바타 적용하다가 data.email 이 새로고침 시에 오류가 나서 질문 드립니다.!!! 먼저, 오류나 경고 메시지들 보고 라우터 문제인가 싶어서 (라우터 v6 사용 중입니다. ) 라우터 관련해서만 구글링 하다가, data.email가 아닌 data만 사용하면 새로고침 시에도 문제 없다는 걸 알았는데요.. data를 콘솔로 찍어보니 두번 출력이 되면서, 첫번째는 undefined로 나오고 두번째는 정상으로 나오는데data가 undefinde일 때 랜더링이 되서 그런 건가?? 하는 생각이 들긴했는데 이게 왜 저렇게 되는 건지 navigate로 페이지 이동되면서 저렇게 되는 건지 data가 언디파인드 인데도 login으로 페이지도 안넘어가는 상황입니다 에러 원인에 대한 판단이 잘 안서서 해결을 못하고 있습니다ㅠㅠ 혹시 해결 방향을 잡아주실 수 있을까요??? < 컴포넌트에서 data.email이 사용될 때 새로고침 > < data만 사용할 때 새로고침 > 제 코드 입니다! import axios from "axios"; import React, { FC, useCallback, useEffect } from "react"; import { useNavigate } from "react-router"; import useSWR from "swr"; import fetcher from "@src/utils/fetcher"; import { Channels, Chats, Header, MenuScroll, ProfileImg, RightMenu, WorkspaceName, Workspaces, WorkspaceWrapper, } from "./style"; import gravatar from "gravatar"; const Workspace: FC = ({ children }) => { const { data, error, mutate } = useSWR( "http://localhost:3095/api/users", fetcher, { dedupingInterval: 100000, loadingTimeout: 900000, } ); const onLogout = useCallback(() => { axios .post("http://localhost:3095/api/users/logout", null, { withCredentials: true, }) .then(() => mutate(false, false)); }, []); const navigate = useNavigate(); if (!data || data === undefined) { navigate("/login"); } console.log("@@@data", data); return ( <> <Header> <RightMenu> <span> {/* <ProfileImg src={gravatar.url(data, { s: "28px", d: "retro" })} alt={data} ></ProfileImg> */} </span> </RightMenu> </Header> <button onClick={onLogout}>로그아웃</button> <WorkspaceWrapper> <Workspaces>test</Workspaces> <Channels> <WorkspaceName>Clone</WorkspaceName> <MenuScroll>MenuScroll</MenuScroll> </Channels> <Chats>Chats</Chats> </WorkspaceWrapper> {children} </> ); }; export default Workspace;
- 미해결Slack 클론 코딩[실시간 채팅 with React]
react-router-dom 문제....
자꾸 이와 같은 에러 가뜹니다. react-router-dom에 Switch와 Redirect을 export없다고 합니다....
- 미해결Slack 클론 코딩[실시간 채팅 with React]
회원가입, 로그인 질문있습니다
안녕하세요, 제로초님 회원가입과 로그인은 잘 되는데, 제가 DB를 잘못건드렸는지 회원가입을 한 계정으로 로그인을 하려니err.response.data 값으로 "비밀번호가 틀렸습니다"라고 나옵니다. 앞서 나온 계정 그대로 다시 회원가입을 하면 이미 있는 계정이라고 하는데 이런 경우엔 DB를 삭제하고 다시 해야 하나요??
- 미해결Slack 클론 코딩[실시간 채팅 with React]
(공유) useSWR data가 안 들어가거나 또는 채널이동 안되시는 분들은 봐주세요.
저와 같은 실수를 하실까봐 해결했던 방법 공유하겠습니다. import 부분만 제외한 나머지 다른 부분들은 코드를 똑같이 적었다고 생각했지만 서버에서 false와 data를 받는 건 잘 됐으나, 로그인이 되질 않아 이상하다고 생각하여 data에 대한 log를 찍어봤습니다. 계속 undefined가 나오길래, fetcher 함수에 이상함을 감지하고 쳐다본 결과, // data가 안들어가지는 이유 코드 import axios from 'axios'; const fetcher = (url: string) => axios .get(url, { withCredentials: true, }) .then((res) => {res.data}); export default fetcher; .then((res)=> {res.data}); 이렇게 하면 데이터가 아예 들어가질 않더군요...;; 습관이란게 무섭네요ㅎㅎ 위 코드를 밑에 처럼 바꾸시면 data가 잘 들어가지고 channel로 잘 이동되실겁니다. import axios from 'axios'; const fetcher = (url: string) => axios .get(url, { withCredentials: true, }) .then((res) => res.data); export default fetcher; 혹시 저와 같은 실수를 하시는 분이 계실수도 있으실 것 같아서 시간을 줄여드리고자 공유하도록 하겠습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
useInput을 사용했을 때, 해당 값을 지우는 방법이 궁금합니다.
안녕하십니까. 선생님께서 만드신 useInput Custom Hooks를 팀 프로젝트에서 사용하던 중에 질문이 있어 글을 올립니다. const [name, onChangeName] = useInput('')의 형태로 useInput 선언을 해줬습니다. 이 name과 password는 form 안에 들어가있습니다. 여기서 저는 form을 제출했을 때 이 name과 password의 값을 없애고 싶습니다. 그러니까 setName(''), setPassword('')을 하고 싶다는 것입니다. 헌데 이미 onChange={onChangeName}으로 걸어버려 어떻게 해야할 지 모르겠습니다. 아래에 제가 사용하려고 한 코드 일부를 첨부합니다. 감사합니다. import React, { useState } from 'react'; import useInput from "../../Hooks/useInput"; const AddMenu = () => { let pwd = '1234'; const [disabled, setDisabled] = useState(false); const [name, onChangeName] = useInput(""); const [password, onChangePassword] = useInput(""); const onSubmitForm = async (e) => { setDisabled(true); e.preventDefault(); await new Promise((r) => setTimeout(r, 1000)); if (pwd === password) { alert("등록되었습니다"); setDisabled(false); setShowPopupMenu(false); // 이 부분에 name과 password input 값을 초기화해주고 싶습니다. } else { alert("비밀번호가 일치하지 않습니다"); setDisabled(false); } } <FormWrap onSubmit={onSubmitForm}> <Input type="text" onChange={onChangeName} placeholder="상품명" /> <Input type="password" onChange={onChangePassword} placeholder="관리자 비밀번호" /> </FormWrap> } const Input = styled.input` width: 183px; height: 32px; margin-bottom: 5px; background-color: #dedef7; box-shadow: inset 0px 3px 3px #aaa; `; const FormWrap = styled.form` margin-top: 15px; text-align: center; `; useInput.js입니다. import { useCallback, useState } from "react"; const useInput = (initialData) => { const [value, setValue] = useState(initialData); const handler = useCallback((e) => { setValue(e.target.value); }, []); return [value, handler, setValue]; }; export default useInput;
- 미해결Slack 클론 코딩[실시간 채팅 with React]
폴더들에 대한 설명 부탁드립니다!
안녕하세요 제로초님, 저는 백지상태에서 세팅하는줄 알았는데, gitclone을 하니 이미 완성된 폴더들이 많더라구요 정해주신 세팅만 해두고, 컴포넌트 폴더나 코드는 하나하나 따라가면서 완성해나가고싶은데, 제가 임의로 폴더파서 작업하면되나요? front 폴더, front-js 폴더,front-rq 폴더는 무엇인가요? 열어보니까 다 완성되어있는 코드라서요 또 alecture를 열어보니 다 완성되어있던데, 강의 중에 alecture에서 작업하신 최종결과물인가요? 감사합니다
- 미해결Slack 클론 코딩[실시간 채팅 with React]
Failed to compile.
실행시 아래와 같은 오류가 발생합니다. 아무리 구글링해봐도 안보이네요. [에러내용]
- 미해결Slack 클론 코딩[실시간 채팅 with React]
useParams undefined 문제
useParams로 workspace 파라미터를 가져오려고 했는데 undefined가 떠서 SWR로 get 요청 시 undefined가 들어가 오류가 나는 상황입니다. const Workspace: VFC = () => { const { workspace } = useParams<{ workspace: string; }>(); console.log(workspace, 'workspace'); <Switch> <Route path="/workspace/:workspace/channel/:channel" component={Channel} /> <Route path="/workspace/:workspace/dm/:id" component={DirectMessage} /> </Switch> workspace 컴포넌트 내부에서 라우팅할 때 주소값도 잘 설정했고 실제로 주소에도 잘 나오는데 useParams에서 왜 파라미터 값을 가져오지 못할까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
혹시 react-router v6버전으로 마이그레이션 계획은 있으신가요?
react-router가 6버전 업데이트가 되어서 강의 들으면서 v6으로 한번 해볼까 하는데 혹시 호환성에 문제가 있어서 적용하지 않으신건지 궁금합니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
워크스페이스에 redirect 추가시 무한 루프 현상 문의드립니다.
강의 잘 듣던 중 워크스페이스에서 로그아웃 부분에 대한 질의 드립니다. 로그인 페이지에서 로그인 응답을 받고 워크스페이스로 넘어가는 부분까지 잘 따라하였고, data가 false일때 로그인 페이지로 이동하는 if문 추가시 2번째 사진과 같이 무한루프가 도는 현상이 발생하고 있습니다. 어느부분을 봐야하는지 조언 부탁드립니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
상태관리 질문
제로초 선생님 강의 아주 잘 듣고 있습니다 감사합니다 강의 완강하고 연습삼아 코딩을 해보려 하는데 서버 상태값은 react-query나 swr을 사용하려 하고 로컬에서 전역으로 사용하는 상태값은 리덕스 툴킷을 사용해보려 하는데 현업에서 2개를 같이 사용하는 경우도 있나요? 리덕스툴킷을 사용하면 RTK-query를 쓰는게 더 나을까요? 아니면 RTK를 아예 안쓰고 react-query로 로컬 상태값 까지 한번에 관리하는게 좋은 선택일까요? 좋은 강의 항상 감사드립니다
- 미해결Slack 클론 코딩[실시간 채팅 with React]
?gender={gender}&size={size} gender와 size button을 클릭해서 입력 받기
제로초님 안녕하세요 다름이 아니라 제가 신발 상세 페이지를 만들고 있는데, 신발 상세 페이지에서 신발 상세 목록 api 를 아래와 같이 useQuery (React-query) 라이브러리를 사용하여 api 를 받아오고 있습니다. 제가 지금은 http://api.제로초짱짱.com/product/brand/${id}?size=270&gender=men 이런 식으로 받아와서 270 신발 사이즈에 해당하는 상세 목록? (해당 신발 사이즈 몇 켤레 남았는지.. 남자 사이즈인지 여자 사이즈인지 구문이 잘 안가고) 제가 하고 싶은 것은 일단 상세 페이지에 들어오면 일단 성별과 size를 먼저 입력 하도록 받게 한 다음에 api 를 http://api.제로초짱짱.com/product/brand/${id}?size=${size}&gender=${gender} 이런 식으로 수정하고 남자 여자 사이즈에 따라 상세 목록을 달리 보여주도록 만들어 주고 싶습니다. 뭐 회원가입을 유도 한다음 로그인을 해서 로그인 회원정보에 따라 보여 줄 수도 있지만 저는 회원가입 뿐만 아니라 구글에서 검색 해서 들어온 사용자분들도 쉽게 볼 수 있도록 특정 사이즈에 따라 상세 정보, 특징들을 달리 보여주고 싶습니다. ${size} 랑 ${gender} 이것을 button 을 만든 뒤 -> button 을 클릭해서(특정 size 클릭, 성별 클릭) 한 다음 그 size 랑 성별에 따라 정보들을 달리 보여주고 싶습니다. 어떻게 만들어야 할 지 감이 잘 안잡히네요ㅠ ㅠㅠ 항상 정말 감사합니다 유튜브 라이브 하시면 꼭 후원 해드리겠습니다. const fetchDetail = async () => { const res = await fetch(`http://api.제로초짱짱.com/product/brand/${id}?size=270&gender=men`, { headers: { Authorization: `Bearer ${token}`, }, withCredentials: true }); return res.json(); } const { data: ProductDetail, status, error, isFetching } = useQuery('productDetail', fetchDetail, { notifyOnChangeProps: ['data'], staleTime: 100000000, }) console.log(ProductDetail);
- 미해결Slack 클론 코딩[실시간 채팅 with React]
공부하다가 현업에서는 어떻게 하는지 궁금해서 질문남깁니다
제로초 선생님 노드버드 강의부터 잘 듣고 있는 수강생입니다 노드버드 강의에서는 next.js를 사용하고 sleact 강의에서는 next.js를 사용안하는데 질문입니다 1. 현업에서 요즘 트렌드가 next.js는 안쓰고 react-router-dom으로만 사용하나요? 2. 리덕스는 점점 사용을 안하나요? 리덕스를 swr, react-query로 완전히 대체 가능한가요? 좋은 강의 올려주셔서 감사합니다