25%
29,700원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
react toastify가 화면에 나타나지 않음
선생님 강의 내용중에 error message를 화면에 표시하는 react toastify를 소개해 주셨는데요. 저는 화면에 나타나지 않는것 같습니다. 혹시 선생님은 화면에 나타나나요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
회원 가입시, 비밀번호가 없어도 가입되는 문제
{email: "omg21@naver.com", nickname: "ves", password: ""} 위와 같이 password에 아무것도 적지 않아도 가입이 되는데, 백엔드 부분을 살펴보면 패스워드는 필수 입력으로 되어 있습니다. 혹시 무엇을 제가 놓치고 있을까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
Samesite Issue는 어떻게 해결하나요?
swr로 로그인 정보 받아오는 부분을 진행중입니다. withCredentials 옵션을 true로 주어도 계속 쿠키가 생성이 안되는게 이상해서 확인해 봤더니 Samesite Issue라는게 발생했더라구요.. 찾아보니까 브라우저의 보안 정책상 쿠키 공유를 기본적으로 금지해 놓은 것이고 쿠키에 Samesite 속성을 none으로 설정해서 해결하라는데 어떻게 해야 할 지 잘 모르겠습니다..
- 미해결Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님
안녕하세요 제로초님 git clone 하였을때 동영상과는 alecture에 다르게 파일이 다 있는 것을 확인했는데.. 따라 치거나 직접 설정해보는 것을 원하면 setting의 ts폴더에서 다 지우고 다시 설정을 해보라는 말씀이신가요? 아니면 alecture에서 다 지우고 다시 설정을 해봐도 되는건지.. 그리고 따라치지 않고 강의 이해하는것만 원하면 그냥 동영상 강의 따라서 보면서 이해만 해도 되는건가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
초기 세팅 에러
``` { "name": "sleact-ts-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "cross-env TS_NODE_PROJECT=\\\"tsconfig-for-webpack-config.json\\\" webpack serve --env development", "build": "cross-env TS_NODE_PROJECT=\\\"tsconfig-for-webpack-config.json\\\" NODE_ENV=production webpack" }, "author": "ZeroCho", "license": "MIT", "dependencies": { "@babel/register": "^7.14.5", "@types/react": "^17.0.2", "@types/react-dom": "^17.0.1", "axios": "^0.21.1", "core-js": "^3.15.1", "cross-env": "^7.0.3", "react": "^17.0.1", "react-dom": "^17.0.1", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "typescript": "^4.2.2" }, "devDependencies": { "@babel/core": "^7.13.8", "@babel/preset-env": "^7.13.8", "@babel/preset-react": "^7.12.13", "@babel/preset-typescript": "^7.13.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0", "@types/fork-ts-checker-webpack-plugin": "^0.4.5", "@types/node": "^14.14.31", "@types/react-router-dom": "^5.1.7", "@types/webpack": "^5.28.0", "@types/webpack-dev-server": "^3.11.1", "babel-loader": "^8.2.2", "css-loader": "^5.1.0", "eslint": "^7.20.0", "eslint-config-prettier": "^8.1.0", "eslint-plugin-prettier": "^3.3.1", "fork-ts-checker-webpack-plugin": "^6.1.0", "prettier": "^2.2.1", "react-refresh": "^0.10.0", "style-loader": "^3.0.0", "ts-node": "^10.0.0", "webpack": "^5.24.2", "webpack-cli": "^4.5.0", "webpack-dev-server": "^3.11.2" } } ``` package.json 입니다. setting/ts를 그대로 가져왔습니다. npm run dev를 했더니 이런 에러가 떠서 @babel/register를 설치하였습니다. 다시 npm run dev로 실행하니 이런 에러가 발생하였습니다. 어떻게 해결해야 하나요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
웹팩 설정 깃허브 업로드
수강중에, 외적으로 궁금한게 생겨서 여쭤봅니다! 보통 프로젝트 진행시, 웹팩 설정을 깃허브에 업로드 하나요? 아니면 깃이그노어 하나요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npx sequelize db:create 에러
npm i 하고 back 폴더에서 하니까 에러가 납니다,,
- 미해결Slack 클론 코딩[실시간 채팅 with React]
react-query swr
react-query와 swr 중에 어떤걸 더 선호하시나요? 둘중 어떤걸 사용할까 고민될때 결정하는 기준이 있으신가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
MySQL 비밀번호는 어디서 알아봐야 될까요?
안녕하세요 제로초님 .env 설정할때 자신의 MySQL 비밀번호로 사용하라고 말씀해주셨는데 MySQL 사용해본적이 없어서.. Node js 책보고 따라하면 될까요? N
- 미해결Slack 클론 코딩[실시간 채팅 with React]
에러가 뜹니다
제로초님 코드 똑같이 따라 쳤는데 이런 에러가 계속 뜨네요..
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npm run dev,,,,,
setting 파일을 가져와서 작업해도 이런결과가 나왔어서동영상을 보고 찬찬히 따라 해봤는데도 이렇게 나옵니다....뭐가 문제인가요 ㅠㅠvscode 끄고 다시 켜보기도 하고 다했는데도 이러네요..
- 미해결Slack 클론 코딩[실시간 채팅 with React]
초기설정문제 ㅠㅠ
영상을 따라하다 안되서 settings의 ts에 있는걸 그대로 가져와서 npm i 한후 npm run dev를 하니까 저렇게 계속 뜹니다 ㅠㅠ 어떻게 해결해야하나요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
webpack 질문
안녕하세요 ~ 신규강의두개 올라왔길레 구매하고 듣고있습니다. 궁금한게 webpack 관련해서 nodebird때는 next 를 사용해서 next.config.js 에 webpack을 넣은거 같은데 설정방법이 줄수만봐도 차이가 좀많이 나는거 같습니다. 이 셋팅차이도 react와 next 의 차이라고 봐도될까요? nodebird할때는 20줄정도였던게 이셋팅은 js로 봐도 80줄이 넘어가네요 더궁금한게 있긴한데 현재는 제대로 알지를 못해서 질문들 못드리겠네용...
- 미해결Slack 클론 코딩[실시간 채팅 with React]
이전 질문에서 IE 11 지원 후 핫리로드가 안된다는 질문했던 사람입니다.
웹팩쪽 세팅쪽이 문제가 있을것같다며 코드를 보여달라고하여 답글을 달았지만 못보신것 같아서 새로 글 썼습니다. https://github.com/bokjk/chkReactIE11 IE 세팅부분만 정리하여 github에 올려놨습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
이미지 파일 넣기
png파일을 간단하게 ---------------------import header_logo from '@images/headImg.jpeg'; <Header> <img src={header_logo}/></Header> --------------------- 이런식으로 해보았는데 잘 안되어서 images폴더 따로 만들고 그 안에 types 폴더에 images.d.ts파일을 만들었습니다. 그 안에 내용으로 declare module '*.jpg';declare module '*.jpeg';declare module '*.png';이런식으로 채워 넣고 tsconfig.json에 { "compilerOptions": { ... "typeRoots" : ["node_modules/@types", "@images/types"], ... },} 이렇게 해놓았습니다. 그런데 이런 오류가 떴습니다.. 무엇을 추가해야 이미지 업로드를 할 수 있을까요..
- 미해결Slack 클론 코딩[실시간 채팅 with React]
수업 방향 어떻게 따라가면 좋을까요?
안녕하세요. 개발 배우면서 검색 하다 제로초님 블로그는 많이 봤는데 강의는 처음입니다.ㅎㅎ 다름 아니라, 수업을 들으면서 어느순간 코드 대부분이 작성되어있는 식으로 진행이 되는데.. github도 참고해보려 했으나 완성된 버전이더라고요. 강의 화면에서 보여주는 코드들은 화면 내 일부만 보이다보니 어떻게 따라가야 될지? 어떤 식으로 진행하면 좋을지? 제로초님의 의견을 여쭤봅니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
질문드립니다.
제로초님 sleact깃헙 api문서엔 채널에 이미지 올리는건 따로 없던데 백엔드를 DM쪽만 설정해두신건가요??
- 미해결Slack 클론 코딩[실시간 채팅 with React]
강사님 이 강의 좀 어려운점들이 있어요
존경하는 조현영 강사님 이 강의 좀 어려운점들이 있어일단 다운 받은 소스랑 강의 진도랑 달라서 좀 헷갈려요 예를 들면 회원 가입 페이지의 submit 에 로그를 찍으시는데 이미 다 되어 있어서 주석 처리를 하고 로그를 찍었어요 이렇게 하는게 맞는걸까라는 불안감이 ㅋㅋ; const onSubmit = useCallback( (e) => { e.preventDefault(); console.log(email, nickname, password, passwordCheck); // if (!nickname || !nickname.trim()) { // return; // } // if (!mismatchError) { // setSignUpError(false); // setSignUpSuccess(false); // axios // .post('/api/users', { email, nickname, password }) // .then(() => { // setSignUpSuccess(true); // }) // .catch((error) => { // setSignUpError(error.response?.data?.statusCode === 403); // }); // } }, [email, nickname, password, mismatchError], ); 2. 타입 스크립트 공포증 2번째줄 ㄷㄷ 이게 무슨뜻인가요 제네릭인가 그거 맞죠? 타입 설정 같은데 배열 같기도 하고 type ReturnTypes<T> = [T, (e: ChangeEvent<HTMLInputElement>) => void, Dispatch<SetStateAction<T>>]; => void dispatch는 뭔가요?void, Dispatch<SetStateAction<T> 타입 이름이 너무 긴것도 무섭 ㅋㅋ;ex)ChangeEvent<HTMLInputElement> import { Dispatch, SetStateAction, useCallback, useState, ChangeEvent } from 'react'; type ReturnTypes<T> = [T, (e: ChangeEvent<HTMLInputElement>) => void, Dispatch<SetStateAction<T>>]; const useInput = <T>(initialData: T): ReturnTypes<T> => { const [value, setValue] = useState(initialData); const handler = useCallback((e: ChangeEvent<HTMLInputElement>) => { setValue((e.target.value as unknown) as T); }, []); return [value, handler, setValue]; }; export default useInput; 이강의 빨리 듣고 nest js 강의 듣고 싶은데 노드 버드 강의보다 어려운거 같아요 ㅋㅋ; 전 걍 따라치는데 이강의는 미리 알아야될게 생각보다 많아요 ㅋㅋ; 보충 강의라도 .. 가 아니라 타입 스크립트를 잘알고 오는게 맞겠죠?? 기초가 부족해서 그런것 같긴 한데 강의 난이도가 생각보다 너무 어렵게 느껴져요 ㅋㅋ;;
- 미해결Slack 클론 코딩[실시간 채팅 with React]
블로그 정리 관련
안녕하세요 제로초님! 다름이 아니라.. 풍족한 강의 내용을 더 오래오래 기억하고 담아두기 위해 따로 강의 노트를 정리 중인데요... 간략하게나마 요약한 내용을 제 개인 블로그에 포스팅 해도 괜찮을까요? 코드는 전체가 아닌 일부분만 발췌하여 남길 예정입니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
loadable import error
import { Switch, Route, Redirect } from 'react-router-dom' // import Login from '@pages/Login' // import SignUp from '@pages/SignUp' const Login = loadable(() => import('@pages/Login')) // next dynamic import ? const SignUp = loadable(() => import('@pages/SignUp')) No overload matches this call.Overload 1 of 3, '(loadFn: (props: unknown) => Promise<DefaultComponent<unknown>>, options?: OptionsWithoutResolver<unknown> | undefined): LoadableComponent<unknown>', gave the following error.Type 'Promise<typeof import("/Users/ohyunseok/Documents/PROJECT/Slacku/react-frontend/pages/Login/index")>' is not assignable to type 'Promise<DefaultComponent<unknown>>'.Type 'typeof import("/Users/ohyunseok/Documents/PROJECT/Slacku/react-frontend/pages/Login/index")' is not assignable to type 'DefaultComponent<unknown>'.Property 'default' is missing in type 'typeof import("/Users/ohyunseok/Documents/PROJECT/Slacku/react-frontend/pages/Login/index")' but required in type 'DefaultImportedComponent<unknown>'.Overload 2 of 3, '(loadFn: (props: any) => Promise<ComponentClass<any, any> | { default: ComponentClass<any, any>; }>, options?: Options<any, ComponentClass<any, any>> | undefined): LoadableClassComponent<...>', gave the following error.Type 'Promise<typeof import("/Users/ohyunseok/Documents/PROJECT/Slacku/react-frontend/pages/Login/index")>' is not assignable to type 'Promise<ComponentClass<any, any> | { default: ComponentClass<any, any>; }>'.Type 'typeof import("/Users/ohyunseok/Documents/PROJECT/Slacku/react-frontend/pages/Login/index")' is not assignable to type 'ComponentClass<any, any> | { default: ComponentClass<any, any>; }'.Property 'default' is missing in type 'typeof import("/Users/ohyunseok/Documents/PROJECT/Slacku/react-frontend/pages/Login/index")' but required in type '{ default: ComponentClass<any, any>; }'.ts(2769) index.d.ts(11, 5): 'default' is declared here. index.d.ts(85, 13): The expected type comes from the return type of this signature. import error가 나는 이유가 뭔가요? 제로초님? 에러를 찾아냈습니다. 변경전 import React from 'react' export const Login = () => { return <div> 로그인 </div> } 변경후, import React from 'react' const Login = () => { return <div> 로그인 </div> } export default Login; default 를 설정안해서 설명부탁드려도 될까요?