React SNS 1-1. 프로젝트 구조와 배우는 것들

- 에디터

• Visual Studio Code

- 프런트 서버

• React, Next
• Redux
• Redux-saga
• Styled Components

- 백앤드 서버

• Express
• Database(MySQL)
• ORM (시퀄라이즈)
• 패스포트
• multer(S3)
• Socket.IO
• 이미지 압축(람다)

프런트 서버와 백앤드 서버의 분리 이유

 

-장점

서로의 역할이 다르기 때문에 내가 사용하는 웹 서비스 요청이 프런트 서버의 요청이 많아질 경우

프런트 서버를 늘리면 되고, 데이터 처리가 많은 서비스 일 경우 백앤드 서버를 늘려주면 된다.

이러한 방법을 스케일링이라고 합니다.

 

-단점

CORS 이슈 

복잡도가 증가합니다.

서로 주소가 달라 데이터를 주고받기가 어려우며 보안적인 문제도 있습니다.

그렇기 때문에 이 부분의 처리하는 방법도 고민해야 합니다. 

 

왜 Next 인가 ? 

 

웹사이트의 성능 컨텐츠 도 중요하지만 검색 최적화를 위해 리 엑트에서 제공하는 기술이 서버사이드 랜더링 기술인데 

리엑트 페이지가 랜더링 할 때 boot들도 콘텐츠를 쉽게 볼 수 있도록 랜더링 합니다.

이러한 서버사이드 랜더링을 React, Angular, Vue 보다는 비교적 쉽게 해 주기 때문에 Next를 사용합니다. 

그리고 코드 스플리팅(사용한 페이지만 불러오는)기술이 있다 만약 리 엑트로 100개 이상의 페이지를 제작하였을 경우 싱글 페이지 애플리케이션의 단점이 처음에 모든 페이지를 불러온다 하지만 실제 고객이 사용하는 페이지는 10개만 사용할 수 있다. 이러면 나머지 페이지의 리소스 낭비가 되기 때문에 코드 스플리팅 기술을 사용합니다. 

코드 스플리팅, 서버사이드 랜더링을 이슈를 보완 해주는 Next 사용을 권장합니다.

 

 

-일단 저는 React 기초를 먼저 배우고 시작하는게 아니고 제로초 님의 프로젝트 강좌에서 나오는 내용만을 정리했기 때문에 다소 설명이 부족할 수 있습니다. 

그래서 나중에 자세하게 알아보기위해 강의내용중 필요한 키워드를 설정해 놨습니다.

 

 

Keyword : #SEO(search engine optimization) , #서버사이드 랜더링, #코드 스플리팅, #CORS,#싱글페이지애플리케이션

 

출처 : 제로초 님의 유튜브 강의를 보며 프로젝트를 진행하고 정리한 내용을 포스팅하였습니다. 좋은 강의 감사합니다^^

ZeroCho TV