1주차 기술공유

Web02

React의 한계점
- SEO(Search Engine Optimization, 검색 엔진 최적화)는 HTML을 기준으로 이루어지므로 Javascript는 SEO에 영향을 주지 않았다.(요즘 검색 엔진 최적화 봇은 많이 바뀌어서 Javascript 코드를 참고한다.)
- 그러므로 React로 작성된 홈페이지는 최상위 루트 HTML 파일(index.html)을 제외하면 나머지 HTML 코드는 Javascript 코드에 의해 나중에 추가되므로 SEO 관점에서 좋지 않다.
Next.js의 장점
- 폴더 구조로도 경로(Route)를 설정할 수 있다.
- SSR(Server-Side Rendering, 서버 사이드 렌더링)과 마찬가지로 렌더링 된 HTML 파일을 보내므로 SEO 관점에서 좋다.
- https://ko.reactjs.org/docs/react-dom-server.html ^— 이걸로 Next.js 없이 구현이 가능할듯

컴포넌트 간 결합

atom

하나의 HTMl 태그에 대응

molecules

하나의 기능만 담당

organisms

사용자에게 의미 있는 단위

template

와이어 프레임?

page

template에 데이터 주입

하나의 페이지를 잘게 잘게 쪼개서 작은 하나의 컴포넌트로 나누는 디자인 패턴.
- Atoms, molecules(하나의 기능), organism(재사용성이 줄어든다), template(어떻게 배치할 것인가를 생각하는 레이아웃(wireframe)), page(템플릿을 조합해서 만드는 최종 페이지)
문제점
- molecules와 organisms의 경계가 모호하다.
- 스타일링이 모호하다.
  - 스타일링을 props로 전달
  - css 자체를 전달
  - 사용할 시점에서 style을 확장
  - 스타일의 override
장점
- Atom의 필수적인 부분만 atom 지정
- Molecule과 Organism을 확장하여 사용하기 용이
- 초기비용 많지만 나중엔 속도가 빨라짐
리액트에서의 컴포넌트

재사용성을 위해 컴포넌트 분리가 중요

Atomic Design == 파일개수 많아지는건 어쩔 수 없음