리액트 심화반 - 5주차 개발일지(SEO, 웹 성능 지표)

GD프로젝트 리액트 심화반

마지막 주 차가 시작되었다.

새롭게 배운 내용과 마지막 결과물 그리고 느낀 점을 서술하겠다.

 

 

목차

1. 새롭게 배운 내용(SEO, 웹 성능 지표)

2. 마지막 결과물 및 추가 기능

3. 느낀 점

 

 

 

 

---

1. 새롭게 배운 내용

---

 

 

 

1. SEO

SEO(Search Engin Optimization : 검색엔진 최적화)는

네이버나 구글 검색 엔진에 뭔가를 검색했을 때, 내가 만든 사이트가 검색 결과에 더 잘 나타나도록 하기 위한 작업이다.

 

검색 엔진은 우리가 입력한 검색어를 가지고 그 검색어와 일치하는 웹사이트를 찾게 된다.

웹사이트를 찾는 방식은 웹사이트의 html 파일이나 메타 태그들을 한 번 훑어보는 방식이다.

그래서 웹 개발자들은 내용물에 특정한 인덱스를 만들어서 검색 엔진이 내 사이트를 잘 가져갈 수 있도록 해야 한다.

 

그런데 React는 보통 SPA(Single Page Application) 방식이라 html 파일이 딱 1개뿐이다.

랜더링이 되기 전까지는 js가 실행되지 않고 index.html 이거 하나뿐인데 검색엔진은 웹사이트를 찾을 때 js 실행하지 않기 때문에 아쉽게도 React로 만든 웹사이트는 검색 엔진이 찾기 힘들다.

 

그래서 React에서 검색엔진 최적화를 하려면 meta-data나 pre-rendering, Server Side Redering을 사용하곤 한다.

 

또한 SEO는 웹사이트의 좋은 지표로 사용되진 않는다.

검색에 많이 노출된다고 그 사이트가 훌륭하게 설계된 사이트가 아니라는 것이다.

관리자 사이트나 회원만 내용을 볼 수 있는 사이트라면 굳이 검색에 노출될 필요가 없다.

사이트의 목적에 따라 설정하면 된다.

 

 

 

2. 웹 성능 지표

 

 

react를 create-react-app 명령어를 통해 만들었다면 index.js 파일은 이렇게 나올 것이다.

그런데 맨 밑에 보면 주석과 함께 reportWebVitals()함수가 있다.

주석을 보면 웹 성능을 확인할 수 있는 도구라고 한다.

 

더 자세히 확인하기 위해 index.js파일과 같은 폴더에 위치한 reportWebVitals.js 파일을 확인해보자 

 

 

그러면 이런 코드가 나온다.

웹 성능 측정하는 지표에는 CLS, FID, FCP, LCP, TTFB

5가지가 있다. 

 

 

CLS : cumulative layout shift 광고나 콘텐츠 위치 등 사용자가 불편한지에 대한 성능을 체크

FID : first input delay 웹페이지의 반응성에 대한 지표 이벤트가 시작했을 때 걸리는 시간을 체크

FCP : first contentful paint 브라우저가 화면에 그려지기 시작한 시점을 체크. 그냥 흰 화면일 때는 체크되지 않는다.

LCP : largest contnetful paint 웹페이지에서 커다란 컴포넌트를 표시하는데 걸리는 시간을 체크(큰 사진이나 도표 등이 해당되고 이 커다랗다는 지표는 상대적인 개념이다. 웹페이지에 h1태그와 p태그밖에 없다면 p태그가 기준이 될 수도 있다.)

TTFB : tiem to first byte 웹페이지에서 가장 첫 번째 바이트를 가지고 오는 데까지 걸리는 시간을 체크

 

//index.js 
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(  
    <App />, 
    document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function 
// to log results (for example: reportWebVitals(console.log)) 
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 

reportWebVitals(console.log);

 

웹 성능 지표를 확인하는 방법은  

reportWebVitals 안에 확인하고 싶은 수단을 인자로 주면 된다.

 

 

 

그럼 5가지 지표가 나온다.

조건에 충족되지 않는 지표는 나오지 않는다.

(광고가 없거나 큰 게시물이 없거나)

 

 

 

---

2. 마지막 결과물 및 추가 기능

---

 

 

 

마지막 결과물

 

결과물 보러 가기 [클릭]

 

코드 보러 가기 [클릭]

 

 

강의에 들었던 거 외에도 내가 추가한 기능이 두 개 있다.

 

구현한 기능 : 회원가입 시 프로필 랜덤 설정 및

좋아요 기능

 

그리고 기타 회원가입 유효성 엄격 체크 및 몇몇 UI 개편

  

이렇게 추가한 이후 친구들에게 내가 만든 앱을 보여주었는데 생각 외로 반응이 좋아서 뿌듯하다.

 

 

 

사용된 firebase 기능들은 다음과 같다.

 

 

 

사용된 모듈도 꽤 많이 되는 것 같다.

 

 

 

---

3. 느낀 점

---

 

 

 

1달 동안 리액트 기초반, 심화반을 들으면서 느껴지는 것은 다음과 같다.

 

 

1. 돌아가는 코드를 만드는 것도 중요하지만 최적화 또한 필수이다.

 

 아무리 기능이 다양하더라도 성능이 떨어지면 사용자는 불편해서 사용하지 않는다.

웹사이트를 최적화하는 방법은 여러 가지이다.

로딩 속도를 줄이기 위해 서버에서 필요한 데이터만 요청하거나, 데이터를 중복으로 요청하지 않는 방법

또한 자주 사용되는 서버의 데이터는 세션이나 쿠키에 넣는 것도 좋은 방법일 수 있다.

 

또한 속도뿐만이 아니라 UI 효과를 주어서 사용자의 불편함을 해소할 수도 있다.

오래 걸리는 비동기 작업은 스피너를 띄워주는 방법

 

또한 작게 사용되는 이미지 크기도 최대한 작게 한다.

크기가 작을수록 용량도 적으므로 로딩 속도를 더 빠르게 해 준다.

 

 

프로필 사진 크기는 클 필요가 없어 파워포인트안에서 사진들을 줄인 후 firebase스토리지에 넣었다.

 

 

2. 최대한 사용자 입장에서 생각해야 한다.

 

 

 나는 당연하다고 생각된 것들이 사용자 입장에서는 아닐 수 있다.

특히 이번 프로젝트를 통해 내가 간과하고 있다는 것들이 많았다.

 

 

그래서 내린 결론은

 

 

내가 만든 사이트를 6,7살 아이들한테도 쉽게 사용할 수 있게 만든다고 

생각하면서 코딩하는 것이 좋다.

 

 

 

 한 달 동안 많은 걸 가르쳐주신 스파르타 코딩 클럽 임민영 튜터님

감사드립니다.

덕분에 이렇게 재밌는 나만의 웹사이트를 만들어 친구들이랑 재미있게 놀 수 있던 것 같습니다 :)