Slack 클론 코딩 01 [React, Typescript]

React와 Typescript를 이용하여 슬랙 클론 코딩을 할 예정입니다.
아래와 같은 목표가 있습니다.

- React(+typescript) 웹 개발

- CRA 없이 초기 세팅

- SWR 사용

- Emotion(스타일드 컴포넌트)

- Socket.io 실시간 채팅

(+GraphQL)

오늘은 프로젝트 초기 설정을 하였습니다.

// 프로젝트 시작
npm init
// react install
npm i react react-dom
// typescript install
npm i typescript
// typescript와 react 연동
npm i @types/react @types/react-dom
// 편한 코딩을 위해 eslint, prettier 설치 및 연동
npm i -D eslint
npm i -D prettier eslint-plugin-prettier eslint-config-prettier
//babel과 webpack 설정
npm i webpack
npx webpack

index.html의 중요성

html를 브라우저가 인식하는것이 프론트의 시작!
SPA에서 index.html은 중요한 역할을 합니다. 최적화할 때 여러 방법들이 있지만 index.html을 효율적으로 사용하는 것이 중요합니다. 사용자 경험의 핵심적인 부분들은 index.html에 몰아넣고 사용자 경험에 덜 중요한 것들은 자바스크립트로 처리하면 좋습니다. [구글에서 권장!]