Loading...

Sleact

개인프로젝트

사용 언어 및 라이브러리

Front:

NextJSReactJSTypescriptreact-queryRedux-Sagareact-slickemotionsocket

배포여부:

X

Git:

https://github.com/cy3589/sleact-react-query

summary

NextJS를 기반으로 만든 슬랙의 클론코딩 입니다

Learned

  • React-Query를 프로젝트에 적용해보며 비슷한 구조임에도 짧아지는 코드량을 경험하였습니다.

  • Socket.io를 이용한 실시간 통신과 데이터페칭을 구현하며 웹소켓의 동작 흐름을 간략히 알게되었습니다.

  • 일반적인 게시글과 달리 역으로 동작해야하는 채팅의 무한스크롤을 구현하며 React-Query의 역방향 데이터 업데이트 방법을 알게되었습니다.

  • Emotion에 Type을 적용하여 정확한 type과 prop을 적용한 Emotion 사용법을 알게 되었습니다.

Images

/sleact/sleact-thumbnail.png
/sleact/sleact-image0.png
/sleact/sleact-image1.png
/sleact/sleact-image2.png
/sleact/sleact-image3.png
/sleact/sleact-image4.png
/sleact/sleact-image5.png

본 페이지는 상업적 목적이 아닌

개인 포트폴리오 공개용이며

코드는 깃허브에 모두 공개되어 있습니다.

NextJS Typescript react-query @chakra-ui 로 제작되었습니다.