React

• render에서 map 쓰면 가독성 떨어지므로 useMemo를 사용해서 분리 후 사용 (렌더링 최소화)
  • memo (props없는 순수 컴포넌트에 많이 붙힘)
  • 계산 많이 하고 복잡하면 안하는게..
  • => deps가 별로 없으면 넣어서 wrapping, (변수가 하난데 계산할게 많을 때)
  • 4-5개 이상이면 x

const prevMovieList = React.useMemo(()=>{
  return prevMovies.map(() => <Movie movie={list}/> ),
  [prevMovies]
})

• useCallback, useMemo 등을 사용하면서 deps를 생각하면서 props를 최적화

  • 유지보수 등을 할 때 어떤 함수, deps 쓰는지 파악하며 코딩하기

• 삼항연산자도 render에서 x => 가독성 떨어짐

• props가 3, 4개 이상 들어가면 legacy가 되고 유지보수 어려워짐

• recoil-persist => 코드 복잡해짐 쓰지 말자

• 컴포넌트 만 대문자로 시작!!

• 폴더 정리 잘하기

  • Modal 컴포넌트가 있으면 안에 BookmarkModal 폴더를 나눠 분리

• 순수 컴포넌트가 아닌 로직이 들어간 컴포넌트는 간략하게 만들기

  • 로직을 다 넣던가 빼던가 하자

= state와 상관없는 함수는 밖으로 빼자 (getErrorMsg => utill에)

SEO => React-Helmet

• 리액트는 SPA 이다.

  • 각 검색로봇(크롤러)들이 리액트로 만들어진 사이트를 읽을 때 단 하나의 public/index.html 만을 읽는다.
  • 각 페이지의 정보를 읽지 못함.

• 페이지별 메타태그를 다르게 정의할 수 있다.

  • 페이지별 title이나 description을 설정 가능

react-virtualized

• 무한 스크롤 구현 시 페이지를 내릴수록 느려짐
• windowing 기법: 실제 보이지 않는 컴포넌트는 렌더링하지 않고 영역만 차지하게 한다.
  • 스크롤이 되면 그 위치에 있는 컴포넌트만 렌더링한다.
• 비슷한 라이브러리로 좀 더 경량화된 react-window 존재

UI/UX

• Pinterest, Dribbble

  • 수시로 들어가서 UI/UX design 익히기
  • B2C 비즈니스 모델을 위한 6가지 UX 디자인 방법

• @emotion SSR을 풀지원 (server side rendering에 바로 적용됨)

  • css-in-js 형식으로 스타일을 사용

CORS

• 웹사이트에서 다른 한 서버를 요청할 때 어디서 요청했는지 도메인을 받을 수 있다.
• 같은 회사에서의 요청만 (cors에 등록) 응답해줌
• 실제 cors 오류이거나 client 오류인데 cors 오류인 경우도 있어서 전체적으로 디버깅해야 한다.
• localhost:3000, dev 배포 등의 URL을 서버에서 등록해뒀는지 체킹해야 한다.

Netlify 배포하기

• Import from git: 자신의 깃허브 페이지와 연동

• 프로젝트 선택

• yarn/npm build

• deploy => warning도 안됨

• push하면 자동으로 build 해줌

• key가 없으면 => deploy setting에서 enviroment에 넣어준다. => retry deploy

• 새로고침했을때 404 => client-side routing(react) public/_redirects 만들어서 따라하기

• 주소 변경 => deploy setting => domain management => change site name

favicon

• favicon-generator 사이트에서 만들기
• index.html에 넣어주기 (link 복사 붙여넣기)
• public 폴더에 이미지 넣어주기

webfont

• styles/base/_fonts.scss
• 노토는 숫자가 구림
• 스포카한산스 굿
• 서브셋 파일을 사용해야 용량이 작음
• woff woff2만 사용

@import url(주소)
body,
button,
...{
  font-famliy에 추가
}

• google font - 무료 폰트 - 검색 => select this style 해서 골라
  • => link 복사 or import 복사 => font-family 변경
• 다운 받아서 assets에 넣어 관리 x; => 구글 폰트 서버가 다운될 경우 거의 없음

IE 사용자 쫓아내기

index.html
에 body 안에 다음 내용 추가

<!--[if IE]>
	<div id="ieGuide">
		<h1>Please get out of here. </h1>
	</div>
  <![endif]-->

google analytics로 배포한 페이지에 누가 방문한 분석 기록? 살펴볼 수 있다.

• 사용자 수, 위치, 방문한 페이지, 이벤트 등의 기록을 볼 수 있다.

• 예시

  • 체크버튼 클릭/해제 여부 ga볼 수 있게

  import { gaEvent } from 'hooks/useGa'
  
  const handlerChange = () => [
    gaEvent({ action: 'todo;, data: checked ? 'check' : 'uncheck' })
  }

  • 어떤 페이지 방문?

   useEffect(() => {
     gvPV(${pathname}${search}) // 페이지 뷰 올라가게
   })