[Wecode 76일차] SEO

1.SEO 

검색엔진 최적화, 웹사이트를 만들때 사용자로 하여금 검색이 잘 되게 노출하는 것이 중요하다. 프론트엔드 개발자의 중요한 임무중 하나이다. 검색엔진 최적화 효과를 보려면, 변경시작한 시점을 기준으로 성과가 나타날때까지 보통 4개월에서 1년 정도 소요된다.

 

 핵심은 2가지.

 1.  잘노출되게 한다.

    1)  우리사이트 주소가 여기저기서 링크되고 있어야 한다.

    2) 헤더에 페이지 정보(title, 주소, description)를 잘 작성한다.

  

 

 

참고로 CRA는 SEO가 좋지 않다. 왜?? index.html이 하나뿐이어서, 이 부분을 보완하기위해서 gatsby.js가 나온 것이다.

CRA를 사용하려면 react-helmet을 설치하고 import해서 아래와 같이 필요한 페이지에 helmet  태그로 감싸서 넣어주면 된다.

<helmet>
	<meta>
    <title>
    <link>
</helmet>

 

CRA를 사용하지 않을 경우 다이나믹 랜더링 등 라이브러리를 사용하면 된다.

* 크롤러와 사이트간의 약속 : root 폴더에 robots.txt를 만들어준다(크롤러가 접근을 하던지 못하게 하던지 설정)

sitemap.xml를 만들어서 넣어준다.

 

 

2. 사이트를 컴퓨터가 이해할 수 있도록 만든다.

   1) sementic tag 

   2) 페이지 이동시 검색되길 바란다면 무조건 a태그 쓸것.

   3) <hn> 태그 잘 활용하기 => 중요하다생각하는거 h태그쓰고 글씨크기는 css로 조절

   4) 이미지 태그 alt, 사진이름부터 잘짓기, 태그위에 figure 추가 

   5) caption 태그 활용해서 table 설명쓰기.

 

2. 컴포넌트 공통 로직관리

   1. HOC  : 데이터까지 넘기기 위해서, 사용함. 단순 children은 단순 랜더링만 함.  *리액트 공홈참고

   2. render props :   공통컴포넌트 내부속성으로 render = {실제 컴포넌트 } 넣어서 사용.

   

3. 랜더 함수 호출 최소화

      1) PureComponent, React.Memo 생활화한다.

         (1) pureComponent  부모의 props가 변하지 않으면 랜더링 안됨. 이거 없었으면, 라이프싸이클에서 막아야함.  (클래스형)

         (2) react.memo는 함수형 컴포넌트에서 사용. 

              => 성능이 중요한 프로젝트가 아니면 가독성이 먼저임. js는 속도향상에 거의 영향을 미치지 않는다.

 

  4. 일단 함수형 컴포넌트로 만들고 보자.

      클래스 컴포넌트 결국 클래스고 넘포넌트 하나하나마다 인스턴스다. 

 

5. 웹팩을 사용하는 이유

라이브러리간 의존성 순서때문에 사용한다. 개발자가 직접관리하기엔 너무 복잡하고 번거로워지기 때문에, 웹팩에서 자동으로 대신해준다.