Giter VIP home page Giter VIP logo

react-nodebird-next13's Introduction

react-nodebird-next13

블로그 후기

https://yoonhaemin.com/tag/review/react-nodebird/

요구사항

  1. ✅ Next13 beta(app 디렉토리)으로 작성해서 결과물을 react-nodebird 강좌와 같게 만들것
  2. ✅ 타입스크립트 적용하기
  3. ✅ 강좌 내용처럼 서버사이드렌더링 되어야 함
  4. ✅ saga 대신 redux-toolkit 적용하기
  5. ✅ intersection-observer를 사용할 것 (메인 페이지, 검색페이지, user페이지에 설정되어있음)
  6. ✅ 보너스항목: antd@5나 다른 UI 라이브러리 최신 버전으로 더 보기 좋게 만들기 (MUI로 작업)
  7. ✅ 보너스항목: 데이터 로딩 시 react-query 적용하기
  8. 보너스항목: 기타 추가사항들
    1. 게시글 댓글 작성시 완료 snackbar 노출
    2. 어설프지만 모바일 대응 추가(반응형)

초기 세팅

back 폴더의 env설정 local에 맞는 값을 설정해야한다.

COOKIE_SECRET=""
DB_PASSWORD=""

db생성

npx sequelize db:create

백엔드 실행

npm install
npm run dev

프론트엔드 실행

yarn install
yarn dev

시연 영상

  • 회원가입, 로그인 게시글 작성, 댓글, 이름변경 시연
  • 추가적인 기능은 직접 테스트 해보시길 바랍니다.
NodeBird.-.Chrome.2023-03-25.00-06-28.mp4

노션 페이지

https://yoonhaemin.notion.site/1f98e509e37a4494af87d9c381aaac6b

react-nodebird-next13's People

Contributors

yoon-hae-min avatar

Stargazers

nemo avatar JinGyu Lee avatar Brandon Ha avatar MJ CHOI avatar 배범수 avatar YOUNSUN avatar jeonyul avatar minhos avatar Jaeyun Ha avatar JoosangKim avatar jihye Ryu avatar  avatar sjyoung428 avatar Jinho Choi avatar 남궁은 avatar yuchanLee avatar

Watchers

Hyunyoung Cho avatar  avatar

Forkers

registryhj tae-h

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.