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

벌써 타임어택을 9번이나 진행했네요. 이번에는 타임어택 프로그램 10기 진행합니다! 10기는 4월 22일부터 시작합니다.

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

타임어택을 참여하신 분들의 완강률이 훨씬 높았습니다. 진짜 꼭 강의를 완강해야겠다고 다짐하셨다면 참여하시면 도움이 많이 될 것입니다!

• 참고로 강의는 인프런에서 저를 검색해서 구매하시기보다는 https://zerocho.com/lecture 의 링크 눌러서 구매해주시면 제가 내는 수수료가 많이 줄어듭니다. 부탁드려요 ㅎㅎ

   

완주하시면 강좌 쿠폰(35~60%)이나 만나서 식사권을 드리고 있습니다!

저도 현재 매 기수 적자를 보면서 진행하고 있습니다. 벌써 9기수째 적자... 그럼에도 진행하는 이유는 제 강좌가 실질적으로 여러분들한테 도움이 되기를 바라기 때문입니다. 강좌를 사놓기만 하고 안 들으시는 분이 많은데 정해진 진도와 함께 끝까지 들으시고 여러분의 개발 실력이 향상되었으면 해서 매번 진행 중입니다. 저는 제 강좌가 도움이 되었다는 말을 들을 때 가장 뿌듯하거든요. 타임어택에서 나오는 강좌 피드백을 바탕으로 강좌를 조금씩 수정하고도 있어 저에게도 도움이 되고요.

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

https://zerocho.com/slack

들어오시면 공지 채널에 10기 참여 설문 조사(구글 폼)가 있습니다. 작성하시면 됩니다. 링크도 따로 같이 올려드립니다.

https://forms.gle/Qu5XZ7uNoCyUnugp6

설문 조사를 작성하지 않으셨더라도 저한테 DM을 보내서 알려주시면 참가하실 수 있습니다.

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

감사합니다.

먼저 다들 새해 복 많이 받으세요~~

2024년 첫 강좌 타임어택 프로그램 9기 진행합니다!

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

• 참고로 강의는 인프런에서 저를 검색해서 구매하시기보다는 https://zerocho.com/lecture에 있는 링크 눌러서 구매해주시면 제가 내는 수수료가 많이 줄어듭니다. 부탁드려요 ㅎㅎ

   

완주하시면 강좌 쿠폰(35~60%)이나 만나서 식사권을 드리고 있습니다!

저도 현재 매 기수 적자를 보면서 진행하고 있습니다.그럼에도 진행하는 이유는 제 강좌가 실질적으로 여러분들한테 도움이 되기를 바라기 때문입니다. 강좌를 사놓기만 하고 안 들으시는 분이 많은데 정해진 진도와 함께 끝까지 들으시고 여러분의 개발 실력이 향상되었으면 해서 매번 진행 중입니다. 저는 제 강좌가 도움이 되었다는 말을 들을 때 가장 뿌듯하거든요. 타임어택에서 나오는 강좌 피드백을 바탕으로 강좌를 조금씩 수정하고도 있어 저에게도 도움이 되고요.

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

https://zerocho.com/slack

들어오시면 공지 채널에 9기 참여 설문 조사(구글 폼)가 있습니다. 작성하시면 됩니다. 링크도 따로 같이 올려드립니다.

https://forms.gle/2FEFKqdHqL4k7jEW9

설문 조사를 작성하지 않으셨더라도 저한테 DM을 보내서 알려주시면 참가하실 수 있습니다.

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

감사합니다.

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

제 타입스크립트 교과서(464p, 길벗)이 출간되어 이벤트와 함께 안내드립니다. Node.js 교과서, Let's Get IT 자바스크립트 프로그래밍에 이은 세 번째 책이네요.

타입스크립트 교과서는 제 인프런 강좌 타입스크립트 올인원을 강좌(Part1, Part2 합본)를 기반으로 한 책입니다. 많은 분들이 타입스크립트 문법은 익혔는데 남의 타입을 분석하지 못하거나 직접 작성할 때 막히는 모습을 보았습니다. 그래서 단순하게 타입스크립트 문법만 배우는 책이 아니라 유명 라이브러리 타입들을 분석해보고 직접 작성하는 연습도 해보는 등의 매우 실전적인 책을 집필하게 되었습니다. 최신 버전(5.1)을 사용하고 심혈을 기울여서 집필하였으니 많은 관심 부탁드립니다! 구매하신 분은 아래 이벤트도 참가하시어 스벅 기프티콘도 받아가세요!

예약 구매 링크

-교보문고 https://bit.ly/43Vjw4N
-Yes24 https://bit.ly/3qgKh5W
-알라딘 https://bit.ly/43SpymM

전원 '스타벅스 아메리카노 기프티콘' 증정하는 타입스크립트 교과서 구매 인증 이벤트도 함께 진행합니다! (이미 사신 분도 가능합니다!)
구매 인증 + 구매 채널에서 기대평 하나 작성해주시면 됩니다.
https://naver.me/GrNPPeXW
위 폼에 구매인증 관련 내용을 넣어주시면 됩니다!

감사합니다.
제로초(조현영) 드림.

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

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

완주하시면 강좌 쿠폰(35%)이나 만나서 식사권을 드리고 있습니다!

저도 현재 매 기수 적자를 보면서 진행하고 있습니다. 그럼에도 진행하는 이유는 제 강좌가 실질적으로 여러분들한테 도움이 되기를 바라기 때문입니다. 강좌를 사놓기만 하고 안 들으시는 분이 많은데 정해진 진도와 함께 끝까지 들으시고 여러분의 개발 실력이 향상되었으면 해서 매번 진행 중입니다. 저는 제 강좌가 도움이 되었다는 말을 들을 때 가장 뿌듯하거든요. 타임어택에서 나오는 강좌 피드백을 바탕으로 강좌를 조금씩 수정하고도 있어 저에게도 도움이 되고요.

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

https://zerocho.com/slack

들어오시면 공지 채널에 6기 참여 설문 조사(구글 폼)가 있습니다. 작성하시면 됩니다. 설문 조사를 작성하지 않으셨더라도 저한테 DM을 보내서 알려주시면 참가하실 수 있습니다.

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

감사합니다.

크롬에서 엔터를 칠 때 채팅이 두 번 가는 문제를 막으려면 ChatBox의 onKeydownChat 코드를 다음과 같이 수정하세요. 관련 링크입니다.

https://www.inflearn.com/questions/923570/dm%EC%9D%B4-%EB%91%90%EA%B0%9C%EC%94%A9-%EB%B3%B4%EB%82%B4%EC%A0%B8%EC%9A%94

https://velog.io/@o1_choi/isComposing

const onKeydownChat = useCallback((e) => {
  if (!e.nativeEvent.isComposing && e.key === 'Enter') {
    if (!e.shiftKey) {
      e.preventDefault();
      onSubmitForm(e);
    }
  }
}, [onSubmitForm]);

Chanhyung Lee님 감사합니다.

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

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

완주하시면 강좌 쿠폰이나 만나서 식사권을 드리고 있습니다!

저도 매 기수 적자를 보면서 진행하고 있습니다. 그래도 진행하는 이유는 제 강좌가 실질적으로 여러분들한테 도움이 되기를 바라기 때문입니다. 강좌를 사놓기만 하고 안 들으시는 분이 많은데 정해진 진도와 함께 끝까지 들으시고 여러분의 개발 실력이 향상되었으면 해서 매번 진행 중입니다. 저는 제 강좌가 도움이 되었다는 말을 들을 때 가장 뿌듯하거든요. 타임어택에서 나오는 강좌 피드백을 바탕으로 강좌를 조금씩 수정하고도 있어 저에게도 도움이 되고요.

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

https://zerocho.com/slack

들어오시면 공지 채널에 5기 참여 설문 조사(구글 폼)가 있습니다. 작성하시면 됩니다. 설문 조사를 작성하지 않으셨더라도 저한테 DM을 보내서 알려주시면 참가하실 수 있습니다.

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

감사합니다.

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

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

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

https://zerocho.com/slack

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

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

감사합니다.

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

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

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

http://bitly.ws/yCFL

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

감사합니다.

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

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

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

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

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

@utils/fetcher.ts에서

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

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

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

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

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

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

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

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

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

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

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

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

안녕하세요.

이제 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부분 수정했습니다.

현재 최신 버전은 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에서 타이핑이 강화되었습니다. 따라서

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

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 관련 경고들도 해결해두었습니다(사실 해결 안 해도 됩니다. 경고니까요)

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

제로초 드림.