View

(React with JavaScript, React-Router, antd, Styled-components)

• React-Router
  라우팅이란 주소에 따라 다른 뷰를 보여주는 것이다. 리액트 자체에는 라우팅 기능이 내장되어있지 않아서 여러 화면으로 구성된 웹 어플리케이션을 만들게 된다면 필수적으로 필요하다.
• Styled-components
  클래스명을 관리해야 하는 번거로움에서 벗어날 수 있다. 컴포넌트별로 스타일을 관리할 수 있어 직관적이고 수정 및 삭제가 편하다. 컴포넌트별로 관리되므로 우선순위나 상속으로 인해 예기치 못한 결과가 나올 가능성이 낮아진다. pure css보다는 속도면에서 불리하기 때문에 인터랙션이나 속도가 중요한 사이트라면 css가 나을 수 있다.

State Management

(Redux, Redux-Thunk, Immer, Redux-actions)

• Redux
  상태 공유를 위해 하위 컴포넌트로 props를 넘기는 방식을 취하고 있는 리액트에서 전역적으로 상태를 관리해주기 위한 도구이다.
• Redux-Thunk
  비동기 처리를 위해 미들웨어를 만들기 위한 라이브러리이다. 리듀서는 순수함수만 가능하여 API호출과 같은 비동기 처리를 위해서는 Redux-Thunk를 이용해 만든 미들웨어가 필요하다.
• Immer
  쉽게 불변성 관리가 가능하도록 도와줌. 스프레드 연산자 등을 통해 값 변경시마다 복사하는 과정을 간소화해줌. 불변성 관리가 중요한 이유는 리액트에서는 가상 돔과 실제 돔을 비교하고 변경된 것만 반영을 해주는데 불변성이 깨지면 최적화가 되지 않기 떄문이다.
• Redux-actions
  리덕스의 액션들을 관리하기 위한 유용한 createAction(액션 생성자 간소화) 과 handleActions(리듀서에서 switch문 대신 사용)
  switch문의 결점 - scope가 리듀서 함수로 설정되어있어서 서로 다른 case 에서 let 이나 const 를 통하여 변수를 선언하려고 하다보면 같은 이름이 중첩될시엔 에러가 발생
  참고자료 https://velopert.com/3358

Infrastructure

(AWS S3, Route 53, Amazon CloudFront)

• S3
  정적 호스팅
  단, HTTPS와 도메인 설정이 불가능
• Route 53
  사용자가 소유한 도메인을 연결해주는 DNS서비스
• CloudFront
  • S3에서 제공하지 않는 HTTPS 배포 가능
  • 전 세계에 있는 엣지 포인트를 이용해 캐싱처리를 하여 사용자가 가장 가까운 지역의 엣지 포인트로 접속하게 하여 더 빠른 속도를 제공하고
    (cf. S3를 이용해 직접 배포할 경우 S3 버킷을 설정한 지역의 저장소로 전세계 사용자가 요청을 보낸다. 따라서 먼 지역의 유저일 수록 속도가 느려질 것이다.)
  • S3보다 저렴한 비용
    참고자료 AWS - S3, CloudFront, Route53을 이용한 정적 호스팅
    ➕ https 배포를 위해서는 SSL 인증서가 필요하기 때문에 AWS Certification에서 인증서를 발급받아야함.

Build Tool

(Create React App)

Code Quality Tool

(Prettier)

Other Tools

(Git, Github, notion, Slack etc.)