[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요. React Nodebird 강좌가 최신 버전 라이브러리에서도 돌아가는지 테스트해보았습니다.

https://github.com/ZeroCho/react-nodebird/tree/master/intersection

리액트 18, 넥스트 12에서 테스트한 결과 잘 돌아갑니다. 다만 수정사항도 있었습니다.

• faker -> @faker-js/faker, babel-eslint -> @babel/eslint-parser 등이 수정되었고,
• react-slick 때문에 slick-carousel 라이브러리가 추가되었습니다 (_app.js에 css를 import합니다)
• antd Menu가 children에서 items props으로 변경되었습니다.
• intersection observer 적용이 안 되신다는 분들이 많아서 div에 height: 10을 추가했습니다.

뭔가 적고 보니 게임 패치노트 같네요. 생각보다 계속 잘 돌아가서 리뉴얼은 내년에나 할 것 같습니다. redux-saga 대신 redux-toolkit을 쓸 예정입니다.

참고로 실전에서는 getServerSideProps를 최소화하시는 게 좋습니다. 이를 위해서는 유저 정보를 SSR하지 마시고 CSR해야 합니다. getStaticProps나 getStaticPath를 써야 서버쪽에서 컴포넌트 캐싱이 가능합니다. 유저 정보는 개인마다 다 다르기때문에 캐싱이 불가능하거든요. 다음 리뉴얼 때는 getStaticPath와 getStaticProps만 써서 Incremental Rendering을 보여드릴까 생각 중입니다.

주기적으로 강좌 라이브러리를 최신화하고 있으니 intersection 폴더를 보시면 됩니다.

감사합니다.