Thumbnail
BEST 개발 · 프로그래밍 프론트엔드

Slack 클론 코딩[실시간 채팅 with React]

(4.8) 72개의 수강평 ∙  2195명의 수강생
조현영
클론코딩 React TypeScript Webpack Babel

39,600원

지식공유자: 조현영
총 46개 수업 (11시간 1분)
수강기한: 무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
강의소개 커리큘럼 수강평72 수강전 문의 커뮤니티 새소식
조현영 프로필
강좌 타임어택 프로그램 4기 진행합니다!
조현영 23일 전

강좌 타임어택 프로그램 4기 진행합니다!

강좌는 구매했는데 매번 끝까지 못 보시는 분들을 위한 프로그램입니다. 무료로 참가하실 수도 있으며 의지력이 많이 부족한 분들을 위해 따로 보증금 제도도 운영하고 있습니다. 이전 기수 분들이나 같은 기수 분들의 정리 노트를 보면서 공부하실 수도 있고, 저나 다른 분들에게 질문을 할 수도 있습니다.

슬랙에서 진행하기 때문에 슬랙 방 참가해주셔야 합니다. 아래 슬랙 링크로 들어오세요.

https://zerocho.com/slack

들어오시면 공지 채널에 4기 참여 설문 조사(구글 폼)가 있습니다. 작성하시면 됩니다.

타임어택 프로그램에 참여하지 않으시더라도 슬랙 방에 참여하시면 정보 공유도 하고 고민 상담도 하고 여러 모로 도움되실 거에요. 벌써 1500분 정도 들어계십니다!

감사합니다.

조현영 프로필
타임어택 3기 모집 안내
조현영 2달 전

안녕하세요. 돌아온 타임어택 시간입니다. 타임어택 프로그램 3기 진행합니다!

강좌는 신청했는데 매번 끝까지 못 보시는 분들을 위한 프로그램입니다. 무료로 참가하실 수도 있으며 의지력이 많이 부족한 분들을 위해 보증금 제도도 운영하고 있습니다. 다른 분들의 정리 노트를 보면서 공부하실 수도 있고, 저나 다른 분들에게 질문을 할 수도 있습니다.

슬랙에서 진행하기 때문에 슬랙 방 참가해주셔야 합니다. 아래 슬랙 링크로 들어오세요.

http://bitly.ws/yCFL

들어오시면 공지 채널에 3기 참여 설문 조사(구글 폼)가 있습니다. 작성하시면 됩니다.

감사합니다.

조현영 프로필
강좌 타임어택 2기 모집
조현영 4달 전

https://join.slack.com/t/zerochoschool/shared_invite/zt-1jc8v4gdz-~BgE2zxq_zC3wSG80YuOeg

안녕하세요. 강좌 타임어택 2기를 모집합니다. 11월 21부터 시작합니다. 11월 20일까지 공지에 있는 설문조사 참여하시면 됩니다.

강좌 타임어택은 다른 사람들과 함께 정해진 기간동안 공부를 하고, 간단한 요약/질문을 올리는 것으로 진도를 체크하는 프로그램입니다. 의지력이 약해서 못 들으셨던 분들 참여해보세요!(자율보증금도 있어서 더 의지력을 높일 수 있습니다)

원래 오늘부터 유튜브 라이브(노드교과서 강좌 리뉴얼) 다시 하려 했는데 코로나에 걸려 일주일 뒤로 미룹니다. ㅜㅜ

조현영 프로필
fetcher 문법 관련
조현영 5달 전

너무나도 많은 분들이 실수를 하고 계셔서 안내 드립니다. 한 달에 두 세번은 이 질문이 동일하게 올라옵니다.

@utils/fetcher.ts에서

(...) => ( axios.get(...) ) 대신

(...) => { axios.get(...) }

하시는 분들이 많은데요. 이 둘은 천지차이입니다. 완전 다른 결과가 나옵니다.

결론적으로 ( axios.get(...) ) 하셔야 합니다.

이게 { return axios.get(...) }과 문법적으로 동일합니다.

return을 붙이시든지 { } 대신 ( ) 로 감싸세요.

이유를 모르시겠다면 빨리 화살표 함수 문법 다시 공부하세요.

조현영 프로필
강좌 타임어택 1기를 모집합니다!
조현영 6달 전

안녕하세요. 제로초입니다.

강의를 구매하고 쟁여놓기만 하시거나, 강의는 샀는데 막상 혼자 들으려니 심심해서 의지가 생기지 않는 분들이 계신 것 같아 하나의 프로그램을 마련해보았습니다.

 

이름하여.... 강좌 타임어택! 제가 정해준 시간 안에 정해준 사람들과 강좌를 끝마치시면 됩니다. 서로 막히는 것 물어보셔도 되고요. 

https://join.slack.com/t/zerochoschool/shared_invite/zt-1gmqvylzl-lRZwbG0r4__GTVBCNUa41A

슬랙 채널에 들어오시면 참여 설문조사가 있습니다. 슬랙 채널 기반으로 진행할 예정이라 슬랙 채널은 가입해주셔야 합니다.

조현영 프로필
ts + webpack 세팅 간소화 안내
조현영 6달 전

안녕하세요.

이제 cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack같은 복잡한 명령어로 실행하지 않으셔도 됩니다.

tsconfig-for-webpack.json도 tsconfig.json에 하나로 합쳐졌습니다. 이 파일은 지우시고 tsconfig.json에 ts-node 속성 추가하시면 됩니다.

{
  "compilerOptions": {
    ...
  },
  "ts-node": {
    "compilerOptions": {
      "module": "commonjs",
      "moduleResolution": "Node",
      "target": "es5",
      "esModuleInterop": true
    }
  }
}

그러면 실행 명령어가 npx webpack으로 줄어듭니다. 최종적인 명령어는

"dev": "webpack serve --env development",
"build": "cross-env NODE_ENV=production webpack",

가 됩니다.

아, 추가로 ts-node는 10버전, webpack-dev-server도 4버전 쓰셔야 에러가 없습니다.

위 변경 사항은 setting/ts 폴더에 다 적용되어 있으니 여기서부터 시작하세요! 영상도 1-3부분 수정했습니다.

다른 댓글 보기(2)
조현영 프로필
react-router 6버전 관련 참고사항
조현영 2021.12.25

현재 최신 버전은 6버전인데 강좌에서 쓰인 react-router@5와 많이 달라졌습니다. reach-router와 통합했고, remix라는 react 기반 프레임워크에 쓰기 위해 많이 변경한 것 같습니다.

5버전 그대로 쓰셔도 문제가 없으나 업그레이드 하실 분은 아래를 참고하세요.

Switch, render, exact, children, component, useHistory, useRouteMatch 등이 전부 사라졌습니다.

Routes, element, useNavigate 등으로 대체되었습니다.

한 가지 주목할 만한 차이점은 더 이상 class 문법을 지원하지 않는 것입니다. 살짝 꼼수를 써야 class에서 사용할 수 있습니다(아직도 class 쓰는 분이 계신지를 모르겠지만요...)

추가로 현 강좌에 대해서는 다음과 같이 하셔야 합니다. 공유해주신 유동규님 감사합니다.

https://www.inflearn.com/questions/417079

https://youtu.be/6zVxMeMmSbs 유튜브 영상입니다. 메리 크리스마스~!

조현영 프로필
axios@0.23에 대한 수정사항(+swr-devtools 업데이트 사항)
조현영 2021.10.22

axios@0.23에서 타이핑이 강화되었습니다. 따라서

import axios from 'axios';

const fetcher = <Data>(url: string) =>
axios.get<Data>(url, { withCredentials: true }).then((response) => response.data);

export default fetcher;

이렇게 해야만 fetcher 부분 관련한 에러가 발생하지 않습니다. <Data>라는 제너릭을 넣는 부분이 추가되었는데요.
이 부분이 있어야 Promise<unknown>이 Promise<Data>가 되어 에러가 발생하지 않습니다.

 

또한 SWR devtools 도 사용 방법이 바뀌어서(swr 1버전 사용자분들만 해당)

{process.env.NODE_ENV === 'production' ? (
  <App />
) : (
  <SWRDevtools>
    <App />
  </SWRDevtools>
)}

이렇게 넣으셔야 합니다.
깃헙 front 폴더에 소스 올려두었습니다.
https://github.com/ZeroCho/sleact/tree/master/front
조현영 프로필
SWR@1버전, socket.io@4 버전 반영 코드
조현영 2021.09.19

https://github.com/ZeroCho/sleact/commit/c9cc3b542fe848c5d367022ea5967b300b048ed8

안녕하세요. 수강생 여러분, 제로초입니다.

연휴가 너무 길어서 노는 것도 지겨워져 코딩 중입니다.

SWR 1버전이 출시된지 좀 되었지만, SWR-devtools가 1버전을 지원하지 못해서 코드를 업데이트하지 못하고 있었습니다.

다행히 이제 지원하게 되어서 소스 코드 업데이트를 하게 되었습니다. 추가로 socket.io 4버전도 반영해보았습니다.

일단 가장 큰 차이점은

SWR에서 revalidate가 사라진 겁니다. mutate로 바꾸시면 됩니다(애초에 서버에 재검사한다는 것은 똑같았습니다, 다만 mutate(값, false)하는 경우에만 서버에 재검증을 안 받았던 것이죠)

그 외에도 많은 차이점이 있습니다만 그건 https://swr.vercel.app/blog/swr-v1 링크를 읽어보세요. 프론트엔드는 업데이트가 잦으므로 각 라이브러리 공식문서, 깃헙 CHANGELOG, Release 문서, 블로그 등을 찾아 읽는 습관을 들이셔야 합니다.

SWR 데브툴즈 연결 코드, Socket.io@4 버전에서 바뀐 코드도 반영해두었습니다. 추가로 eslint deps 관련 경고들도 해결해두었습니다(사실 해결 안 해도 됩니다. 경고니까요)

 

또 중요한 버전 업데이트가 있다면 코드 올려드리도록 하겠습니다. 즐거운 추석되세요~!

제로초 드림.

다른 댓글 보기(1)
조현영 프로필
swr 1버전 출시 관련
조현영 2021.08.29

제 수업에서는 swr 0.5 버전을 사용하는데 1버전이 나와서 사용 방법이 조금 달라졌습니다.

swr@0.5를 설치하시면 됩니다. swr@1을 반영한 코드도 곧 업로드하겠습니다.

변경사항은 https://swr.vercel.app/ko/blog/swr-v1

참고하시면 됩니다.

다른 댓글 보기(2)
조현영 프로필
webpack-dev-server@4 관련
조현영 2021.08.27 
devServer: {
  devMiddleware: { publicPath: '/dist' },
  static: { directory: path.resolve(__dirname) },
  hot: true
}

4버전에서는 devServer 옵션이 위와 같이 바뀌었습니다. 깃헙 코드 참고하세요.

https://github.com/zerocho/sleact

조현영 프로필
백엔드 강좌가 곧 공개됩니다.
조현영 2021.06.08

Nest+TypeORM 강좌가 곧 인프런에 올라갈 예정입니다. 이번주나 다음주 정도로 예상합니다.

실제 서비스를 배포해서 sleact.nodebird.com에 올려두었습니다.

조현영 프로필
슬랙 클론 코딩 IE 대응방법 알려드립니다.
조현영 2021.05.04

IE 대응 관련 질문을 주신 분이 계셔서

https://github.com/ZeroCho/sleact/tree/master/front

여기에 소스 코드 올려두었습니다.

또는

https://github.com/ZeroCho/sleact/commit/48701cebb15a924ae2fb621c07f937d9104fab92

여기서 변경점을 체크하세요.

참고로

react-custom-scrollbars를 사용하면 npm i 나 npm update할 때마다 오류나므로 react-custom-scrollbars-2 쓰시면 됩니다.

다른 댓글 보기(1)