웹 게임을 만들며 배우는 React 대시보드

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

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

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

http://bitly.ws/yCFL

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

감사합니다.

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

많은 분들이 강좌 듣기만 누르시고 실제 수강은 하지 않는다는 사실을 발견, 충격에 빠졌습니다 ㅎㅎㅎ

그래서 혹시나 의지력 부족으로 강좌를 수강하고 계시지 않는 분들을 위해 강좌 타임어택 프로그램을 마련했습니다. 다른 분들과 함께 강좌를 듣고 매주 정해진 진도를 나가며 배운 걸 정리하는 프로그램입니다.

다음 링크에서 가입하기를 누르셔서 공지사항에 있는 설문조사로 참가하시면 됩니다. 슬랙 커뮤니티에서 질의응답, 고민상담, 취업 후기 등도 운영하고 있습니다.

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

제가 도와드릴테니 끝까지 한 번 공부해봅시다!

안녕하세요. 지금 강좌를 react18 버전 기준으로 업데이트 하고 있습니다.

대부분의 내용은 유효하나 문제가 있는 부분은 제가 수정해서 업로드하였습니다. 유튜브에서도 라이브로 리뉴얼하고 있는 것 보실 수 있습니다.

현재 1-1~6, 3-1, 3-8, 3-11, 5-7 리뉴얼되었습니다. 나머지 부분은 여전히 유효하니 계속 보셔도 됩니다.

추후 useLayoutEffect 부분 추가 예정입니다.

https://youtube.com/playlist?list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3

유튜브 구독자도 25000명이 다 되어가고, 인프런 수강생도 25000명 넘은 기념으로 유료 강좌로 출시하려 했던 JS 고급 강좌를 무료로 풀었습니다. 노드나 JS 강좌 들으시는 분들은 한 번씩 보시면 좋을 것 같습니다. 이 정도는 알아야 자바스크립트 프로그래머로 일하실 때 도움이 될 겁니다.

인간 JS 엔진 되기라는 컨셉입니다. 더 궁금하신 점 있으면 추가로 영상 올리도록 하겠습니다. 또는 복잡한 코드 순서 궁금하신 분들, 코드 문의도 받습니다.

제가 현장강의에서 시간당 최소 10만원씩 받던 강의였는데... 유튜브 컨텐츠가 너무 없어서 업로드했습니다. ㅠㅠ 컨텐츠 추천도 받고 있습니다. 시간당 10만원씩 지불하셨던 수강생분들께 죄송합니다... 

제로초 드림.

https://github.com/ZeroCho/react-webgame/tree/master/react-router

react-router 6 코드를 요청하신 수강생분이 계셔서 코드 업데이트 했습니다.

react-router@5와 많이 달라졌습니다. reach-router와 통합했고, remix라는 react 기반 프레임워크에 쓰기 위해 많이 변경한 것 같습니다.

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

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

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

devServer: {
  devMiddleware: { publicPath: '/dist' },
  static: { directory: path.resolve(__dirname) },
  hot: true
}

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

https://github.com/zerocho/react-webgame

웹게임 리액트 강좌 소스 코드 업데이트 중입니다! webpack과 hot reloading 부분 에러를 많이 말씀해주셔서 그 부분 깃헙 코드 먼저 수정해두었습니다.

리액트17, 웹팩5가 적용되고 react-hot-loader(Hot)은 제거되었습니다. webpack-dev-server도 webpack serve --env development로 바뀌었습니다.

https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC/dashboard

리뉴얼 강좌가 출시되었습니다. 무료 강좌를 들으신 분들은 다음 강좌로 이 강좌를 들으시면 좋습니다. 출시 기념 오픈 할인 중입니다~.

리액트를 배우고 나서 웹 서비스를 만들고 싶으신 분들이 많으실 것입니다.

막상 처음부터 만들기에는 폴더 구조 잡기가 어렵다, CRA같은 것은 너무 많은 것을 자동으로 해주어서 원리를 이해하기 어렵고, Next는 뭔가 자유도가 떨어진다고 생각하시는 분들도 많은 것 같습니다.

그래서 지금 현재 오픈 소스로 간단한 웹 서비스 보일러플레이트를 제작 중입니다.

https://github.com/reactGo/reactGo

여기서 redux(saga, thunk), mobx, typescript 버전 소스 코드를 제공하고 있습니다.

React 강좌 수강생분들께 도움이 되길 바라며, 도움이 되셨다면 star도 한 번 클릭 부탁드립니다!

안녕하세요. 리액트 무료 강좌 수강생 여러분.

추가적으로 React Router 무료 강좌를 준비했습니다.

유튜브 https://www.youtube.com/watch?v=veXqpfcis0A&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=64

로 오시면 됩니다.

구독 좋아요도 한 번씩 눌러주세요~~!