기본적으로 SPA(Single Page Application)을 기반으로 프로젝트를 만들어 가기 때문에 React로 프로젝트를 시작하게 되었다.
FrontEnd
React
React는 기본적으로 props의 상속관계를 가지고 있기 때문에 데이터의 상태관리를 해주기가 까다롭다고 판단된다. Render Props 그리고 고차 컴포넌트 패턴을 사용해야 하는 리엑트에서는 컴포넌트를 재구성해야 하며 코드를 추적하기 어려움을 준다.
Hook
이를 해결하기 위해 React에서는 Hook기술을 발표했고 우리는 프로젝트때 이를 사용해 보기로 했다. 기존의 리엑트의 단점 복잡한 컴포넌트에 대한 이해가 어렵고 Class가 코드의 재사용성과 코드 구성을 어렵게 만들어 내기 때문에 hook을 사용하게 되면 위와 같은 어려움들을 해결할 수 있다고 공식페이지에 나와있다. 이런 이유들에 대해 좀 더 깊게 생각해 볼 수 있는 기회라고 생각된다.
Redux
기본적으로 상속을 해야하는 리엑트는 고차 컴포넌트까지 갔을때 가장 상위에 있는 데이터를 가장 하위까지 내려주기 위해선 거쳐야 할 컴포넌트들이 많았다. 이를 해결하기 위해서 우리는 리덕스를 사용해 볼 예정이다. redux는 어디에서든 상태값을 받아오고 변경 할 수 있기 때문에 사용하기가 편하다. 그런 이유로 프로젝트에서는 redux도 사용해 볼 것이다. 하위 컴포넌트까지 내려가야하는 것들은 redux를 사용해서 관리 할 예정이다.
Typescript
typescript는 javascript의 superset이다. type을 표기 할 수 없는 javascript의 단점을 보완하기 위해서 개발되었다. 동적 타입 언어들은 많은 단점들을 가지고 있다. 우리가 어떤 타입으로 만들지에 대해 처음 변수를 지정해주는데 동적 타입은 일단 그 타입을 적고본다. 이런 상태로 개발을 하게 된다면 만들기는 쉬워도 고치거나 리펙토링을 할때는 언제 그 타입이 어떻게 쓰였는지를 추론해야된다. 컴퓨터로서 일하는 것이 아닌 그저 추론을 해야되는데 이는 생각보다 많이 시간이 소모되기 때문에 정적타입으로 프로그래밍을 진행하는데에 장점이 있다. 이 때문에 우리는 Typescript를 사용해서 프로젝트를 진행할 예정이다. 프론트엔드는 사용하지만 백엔드는 기존의 javascript를 이용할 생각이다.
Backend
Node
서버는 기본적으로 NodeJS를 사용할 것이다.
express
서버를 만드는 프레임워크중 express를 사용 할 것이다. 대중적이고 사용하기 편한것이 장점이다.
Sequelize
기본적으로 ORM(Object-Relation-Mapping)프레임워크를 기반으로 만들것이다. NodeJS에서 대중적으로 사용하고 있는 Sequelize로 DB와 서버를 연결시켜보겠다.
MySQL
DB는 My SQL을 사용해 만들어보겠다.
배포
aws
aws에서 배포를 진행해볼 것이다.
s3
S3 버켓을 이용해서 React build파일을 올릴 것이다. S3는 정적 웹 호스팅을 시켜주는 클라우드다.
CloudFront
CloudFront는 AWS에서 제공하는 CDN 서비스 이다. 캐싱을 통해 사용자에게 좀 더 빠른 전송 속도를 제공함을 목적으로 한다. CloudFront는 전 세계 이곳저곳에 Edge Server(Location)을 두고 Client에 가장 가까운 Edge Server를 찾아 Latency를 최소화시켜 빠른 데이터를 제공한다.
Certificate Manager
certificate Manager를 이용해서 ssl 인증서를 발급받고 cloudfront에서 입히도록 한다.
Route53
만들어진 Cloudfront를 등록된 도메인에 연결 시켜주는 서비스이다.
EC2
사용자가 가상 컴퓨터를 임대 받아 그 위에 자신만의 컴퓨터 애플리케이션들을 실행할 수 있게 한다. 이 컴퓨터에 서버를 배포한다.
Load Balancer
배포된 서버는 8080포트로 열릴 것이다. 이는 ipv4로만 접근이 가능한데 LoadBalancer를 이용해 해당 컴퓨터의 엔드포인트를 만들어 줄 것이다.
CloudFlare
서버의 SSL인증은 CloudFlare에서 진행 할 것이다. Load Balancer에서 만들어진 엔드포인트를 도메인과 연결시킨다. 그리고 나서 ssl같은 경우는 cloudflare에서 자동적으로 입력해준다.
이정도의 스텍을 가지고 프로젝트를 시작 할 예정이다.
