[프리온보딩] 220517 강의 메모 02 (코드 예시)

코드 예시

Netlify로 배포하기

Netlify: Develop & deploy the best web experiences in record time

Netlify: Develop & deploy the best web experiences in record time

특징 & 장점

• 깃허브 계정 연동해서 자기 레포를 자동화로 쉽게 배포를 할 수 있다
• 포트폴리오용으로 간단하게 배포하기 정말 최적임
• warning 도 error 로 판단하므로 왠만한 노란줄은 다 지워주자
• 푸시할 때마다 자동으로 빌드를 해준다
• console.log 같은 건 넷리파이 설정을 건드려서 에러로 처리하지 않도록 설정할 수 있다
• 단 넷리파이는 레포지토리만 보기 때문에, API Key같은 것을 레포지토리에 올리지 않으므로 인식하지 못한다 ⇒ 환경변수 따로 설정 가능
• 주소도 커스텀 도메인 등을 사용해서 짧게 작성할 수 있다 (중복은 안됨)

1. 깃허브 계정 연동하기 + 프로젝트 설정

• 깃허브, 깃랩 등 연동된 계정으로 이미 올려둔 프로젝트를 불러올 수 있다

• 배포하고자 하는 프로젝트의 레포지토리를 선택하고, 어떤 브랜치를 배포할 지 설정한다
• 빌드 커맨드와 빌드 디렉토리 등도 설정해줄 수 있다
• 예제는 yarn을 사용했기 때문에 빌드 커맨드가 yarn build이지만, npm build도 무방하다

2. deploy

• 프로젝트 설정이 완료되면 자동으로 deploy를 진행한다
• yarn 설치, 패키지 설치, 빌드 등 모든 과정을 자동으로 해주기 때문에 편-안하다
• deploy가 오래 걸리기 때문에 그 사이에 게임도 (ㅋㅋ) 할 수 있도록 되어있다
• deploy 중에 오류가 발생하면 에러 로그도 보여주며, 기본 배포모드에서는 경고도 오류로 취급하므로 예외 설정을 하거나 경고도 다 지워주자
• 수정사항을 다 수정하고 지정한 레포지토리에 변경사항을 푸시하면 알아서 재 빌드를 시도하므로 굉장히 편리하다

3. 환경변수 설정하기

• 보통 통신을 위한 API 키 같은 것은 .env 파일에 저장하고, 이것은 웹에 따로 push하지 않기 때문에 (.gitignore 설정됨) 배포 후 페이지 작동 시 오류가 발생한다
• 따라서 넷리파이에서 따로 환경변수 설정을 해 주어야 한다
• 설정 (settings) ⇒ Build & deploy ⇒ Environment 메뉴에서 Edit Variables로 환경변수를 추가해주자
• 그냥 .env 파일에 저장하듯 key-value 쌍으로 추가하고 저장하면 된다
• 환경변수를 수정하고도 페이지가 제대로 동작하지 않을 경우 deploy를 다시 한번 해 보자

4. url 이동 후 새로고침이 동작하지 않을 경우

• 리액트 프로젝트 배포는 대개 Client-side Routing으로, 라우트된 경로에 따라 서로 다른 JS 파일을 이용하여 동작을 수행한다
• CRA 특성상 배포한 페이지의 루트 경로 외의 다른 경로에서 새로고침을 할 경우 에러가 발생할 수 있다
• create-react-app.dev/docs/deployment/ 의 Netlify 가이드를 참고하자

/*  /index.html  200

• public 폴더 안에 _redirects 파일을 추가하고 가이드에 나와있는 내용을 추가하자

기타

파비콘 제너레이터

Favicon & App Icon Generator

Favicon & App Icon Generator

• 같은 이미지 파일을 크기별로 만들어주므로 다양한 브라우저 / 모바일 환경에 대응할 수 있다
• 문자열이나 이모지도 파비콘으로 만들어준다 (ㅋㅋㅋ)
• 파비콘 제너레이터에서 반환해주는 html 태그 뭉치를 head 태그 안에 그대로 복사해서 넣어주고, 사이즈별로 반환되는 사진을 public 폴더에 넣어주자

index.html 수정하기?

const root = ReactDOM.render(document.getElementbyId('root') as HTMLElement);
// getElementById 인자 바꿔줘야함
root.render(
    <React.StrictMode>
        // 라우터, 리액트 쿼리, 리덕스 프로바이드, 리코일 루트 등
    </React.StrictMode>
);

• 최상위 태그인 root는 id를 수정해도 상관은 없지만, 대신 최상위 index.tsx 파일 내에서 createRoot 시의 아이디도 바꿔주어야 한다
• 리액트는 여기서 지정한 root 태그에 모든 컴포넌트들을 렌더링하기 때문에, index.html에서 저 태그를 지워버리는 순간 페이지에 아무것도 나오지 않을 것
• 그것만 조심하면 다른 부분은 수정해도 상관 없다

폰트 바꾸기

@import url('폰트주소');

• fonts.google.com : 가져다 사용해도 되는 무료 폰트들이 많다
  • 두께나 타입 등 원하는 폰트를 선택하면 우측에 복사할 수 있는 코드를 제공하므로, 이걸 그냥 가져다 사용하면 된다
  • 코드만으로도 폰트를 쉽게 불러올 수 있기 때문에 굳이 다운받아서 asset에 넣고 뭐하고 할 필요가 없음
  • 구글 서버가 터질까봐 백업용으로 넣었다 하면… 구글 서버가 다운될 일은 거의 없기 때문에…
  • 한 도메인에서 파일을 다운받을 수 있는 개수제한이 있기 때문에 다른 도메인에서 폰트를 제공하는 것이 낫다
• 스타일시트 상단에 제공된 코드 (라이브러리 import와 비슷) 을 넣고, font-family로 폰트를 지정하면 특정 컴포넌트의 폰트를 바꿀 수 있다
• 웹에서 오리지널 폰트를 사용하면 용량이 굉장히 커서 문제가 발생하므로, 서브셋 폰트를 사용하여 용량이 더 가벼운 파일을 불러오도록 하는 것이 좋다
  • 서브셋은 한글 전부 들어가있는 것이 아니라 사용할 만한 폰트만 들어가있음
• otf, ttf 파일 이제 안 써도 된다
  • 윈도우 익스플로러 시절에는 otf, ttf를 썼었지만 지금은 woff, woff2만 쓰면 된다
  • 최신 대부분의 브라우저는 woff2를 지원하므로 이걸 쓰면 된다 (인터넷 익스플로러는 어차피 안 쓰니까)

인터넷 익스플로러

• 만악의 근원, 얘 때문에 예외처리할 코드가 배로 늘어난다
• 다른 브라우저는 1로 작업할걸 인터넷 익스플로러는 2 ~ 3 정도를 작업해야 하는 정도
• 인터넷 익스플로러 대응을 하는 서비스도 많이 없어졌을 뿐더러, 인터넷 익스플로러 대응을 요구하는 회사가 있다면 그건 거의… 폭력 급이다

<!--[if IE]>
    <div id="ieGuide">
        <h1>IE 출입금지</h1>
    </div>
<![endif]-->

• 인터넷 익스플로러 예외처리를 하고 싶다면 index.html의 body 태그 내에 위 코드를 붙여넣어주자
  • if문 안쪽에는 IE로 접근했을 때 출력하고 싶은 내용물을 넣으면 된다
  • 리액트 자체가 IE10부터 지원하므로, IE9 이하 버전은 리액트 자바스크립트 파싱이 아예 먹히지 않는다
  • 단 이 코드는 html 파일에 그대로 넣어주었으므로 IE9 이하부터는 위의 내용물만 보이게 됨

구글 애널리틱스

Redirecting...

Redirecting...

• 프로젝트 사이트에 들어온 사람들이 궁금하다면? 구글 애널리틱스로 방문자 통계를 볼 수 있다
• 관리자 계정을 생성하고, 데이터 스트림 설정의 웹사이트 URL에 내 배포 페이지 링크를 달아둔다
• 관리 페이지에서 제공되는 태그를 index.html의 head 태그 안에 넣어주면, collect 라는 이름의 네트워크 응답이 페이지의 정보를 수집하기 시작한다
  • head 태그에 넣으나 body 태그에 넣으나 비슷한데, head 태그에 넣으면 조금 더 빨리, 확실하게 로딩된다는 차이가 있음
• 방문자들이 어떤 경로로 들어왔는지, 어느 페이지에 몇 분 머물렀는지, 어떤 동작을 수행했는지 등을 볼 수 있다
• ga-4-react 라이브러리를 설치하면 특정 컴포넌트별로 이벤트도 걸 수 있고, 개발 / 배포 별로 ID를 다르게 설정하여 서로 다른 통계를 볼 수도 있다