강의를 들으며 정리했습니다.혹시 틀린내용이 있다면 댓글로 알려주세요!

react,next 00. 강의소개 - 프로젝트 구조와 프론트,백엔드구조

React로 NodeBird SNS만들기

프론트

유저가 보는 화면을 꾸려준다.

• React,Next

• Redux

• Redux-saga

• Styled Components

백엔드

게시글 작성, 동영상 작성 및 댓글작성 기타등등.

• Express

• MySQL

• ORM(시퀄라이즈)

• 패스포트

• muter(S3)

• Socket.IO

• 이미지 압축(람다)

왜 프론트와 백엔드를 분리하나?

노마드코더에서 유튜브클론 강의를 들을때 express와 템플릿엔진을 써서 한 폴더의 프로젝트에서 작업을했던 기억이있다.
하지만 리액트까지 학습을진행했을때 client폴더와 server폴더로 프론트와 백엔드를 분리시키기 시작했다.

• 스케일링 이슈
  • 프론트 서버와 백엔드 서버가 분리되어있다면, 프론트서버 요청이 많은경우 프론트서버만 증설, 백엔드 서버의 요청이 많은경우 백엔드서버만 증설하면된다. 하지만 모놀리틱 구성이라면? 프론트서버와 백엔드 서버의 요청을 하나의 서버에서 처리하기때문에 선택지가 없다.
• 요청(req)이 많을경우 불필요한 메모리나 컴퓨터 자원소모를 절감할 수 있다.
  
  • Ex) 화면을 그려주는 요청이 많아졌다. 이 경우 프론트서버만 늘리면 될것을 프론트와 백엔드가 통합되있으면 백엔드도 같이 늘어나서 자원의 소모가 극심해진다.

단점

프론트와 백엔드 서버가 두개로 나뉨에 따라 발생하는 문제들

• 서버간의 통신에서 발생하는 문제(http 및 https)

• CORS 이슈 및 여러 보안적인 측면에서 문제가 발생한다.

왜 Next를 사용하나?

리액트에서도 할 수 있지만, 직접 구현을 해줘야한다는 단점이 있다.

• 서버사이드렌더링 지원

  • 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐츠를 이용 가능
  • 검색엔진최적화(SEO) 가능
    
    

• 코드 스플리팅 지원

  • 전체 500개 페이지중에서 필요한 페이지만 불러오는 기술

React vs Next !?

자세한 답변

• SEO가 필요하다면 Next!

• 그렇지 않다면 React!