[리액트 심화반] 5주차 개발일지

1. 배운 내용

firebase 호스팅 이용해서 프로젝트 배포하기

검색 엔진 최적화

pre-rendering

meta tag

core web vitals를 사용해 성능 체크 (+firebase analytics 연동)

React.memo 사용해보기

 

 

2. 새로 알게 된 내용

1) firebase 호스팅 이용해서 배포하기

- 파이어베이스 CLI 설치해서 로그인하고 프로젝트 연결해주기

- 우리가 사용하는 서비스 전부 선택 (space bar로 선택, enter 키로 적용)

- 프로젝트 선택할 때는 Use an existing project 선택

- 영상에서는 What do you want to use as your public directory? 에서 build로 해줘서 나도 build로 해주었는데 자료에는 public으로 기재.

- 덮어쓰지 않도록 했다고 적혀있어서 그렇게 진행했고 rules 파일은 vs 에서 관리할 수 있도록 모두 지정. 이때, gitignore도 같이 해주면 편함.

- 배포할 때는 yarn build && yarn firebase deploy 명령어 이용해서 배포

 

2) Pre-rendering

- 빌드할 때 미리 특정 페이지를 렌더링해서 html 파일을 만들어 둠. 이 강의에서는 react-snap을 이용.

 

3) Meta tag

- 웹 페이지의 제목이나 이미지, 간단한 설명을 검색 엔진에 알려주는 역할을 함. 이 강의에서는 react-helmet을 이용.

 

4) analytics 연결해서 리포트 보내기

// index.js
function sendToAnalytics(metric) {
  const _report = JSON.stringify(metric);

  analytics.logEvent("web_vital_report", _report);

  console.log({ _report });
}
reportWebVitals(sendToAnalytics);

 

5) 렌더링 횟수 줄이기

- 부모 컴포넌트가 바뀔 때마다 바뀔 게 없는 컴포넌트까지 다시 렌더링하는 걸 막아주는 방법 => 결과를 메모이제이션해두는 것 (React.memo())

 

6) 이후에 할 일

- 성능 최적화 : 사이트 로딩 속도 개선, api 중복 호출 방지, 오류가 나지 않도록 api 호출 전후처리 꼼꼼히 하기, 이미지 용량 줄이기, css로 image sprite하기

- 사용성 끌어올리기 : 오류가 나도 빈화면을 보지 않도록 에러 페이지 만들어주기, 오래걸리는 비동기 작업이 있다면 스피너를 띄워주기, 이미지 지연로딩, 벨리데이션 체크 미리하기

 

 

3. 느낀 점

사실 그동안 프로젝트하다가 힘들면 보고 시간 나면 보고 했었는데 특히 리액트 심화반의 경우 정말 내용이 많아서 한 주차의 강의를 보는 데에 많은 시간을 쏟을 수밖에 없었다. 특히 나는 하루에 다 몰아봤었기 때문에 ^^ ... 더욱 힘들었던 것 같다. 그래도 마지막까지 끌고 와서 결국 강의를 다 봤다는 것에 의의를 둔다. 지금 하고 있는 여러 프로젝트가 리액트 기반인 것들이 많아서 더 활용할 수 있을 것 같다. 그리고 마지막에 프로젝트가 이 수업이 끝나고 끝난 것이 아니라 이후에 할 일을 나열해주셔서 마지막이라는 기분 보다는 이제 시작이라는 기분이 들었다. 감사하다.