치춘짱베리굿나이스
[프리온보딩] 220517 강의 메모 02 (코드 예시) 본문
코드 예시
Netlify로 배포하기
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
파일을 추가하고 가이드에 나와있는 내용을 추가하자
기타
파비콘 제너레이터
- 같은 이미지 파일을 크기별로 만들어주므로 다양한 브라우저 / 모바일 환경에 대응할 수 있다
- 문자열이나 이모지도 파비콘으로 만들어준다 (ㅋㅋㅋ)
- 파비콘 제너레이터에서 반환해주는 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 이하부터는 위의 내용물만 보이게 됨
구글 애널리틱스
- 프로젝트 사이트에 들어온 사람들이 궁금하다면? 구글 애널리틱스로 방문자 통계를 볼 수 있다
- 관리자 계정을 생성하고, 데이터 스트림 설정의 웹사이트 URL에 내 배포 페이지 링크를 달아둔다
- 관리 페이지에서 제공되는 태그를
index.html
의head
태그 안에 넣어주면, collect 라는 이름의 네트워크 응답이 페이지의 정보를 수집하기 시작한다head
태그에 넣으나body
태그에 넣으나 비슷한데,head
태그에 넣으면 조금 더 빨리, 확실하게 로딩된다는 차이가 있음
- 방문자들이 어떤 경로로 들어왔는지, 어느 페이지에 몇 분 머물렀는지, 어떤 동작을 수행했는지 등을 볼 수 있다
ga-4-react
라이브러리를 설치하면 특정 컴포넌트별로 이벤트도 걸 수 있고, 개발 / 배포 별로 ID를 다르게 설정하여 서로 다른 통계를 볼 수도 있다
'프로젝트 > 원티드 프리온보딩' 카테고리의 다른 글
[프리온보딩] 220524 그룹과제 #3 (0) | 2022.05.25 |
---|---|
[프리온보딩] 220523 그룹과제 #3 (0) | 2022.05.24 |
[프리온보딩] 220521 그룹과제 #2 종료 + 그룹과제 #3 (0) | 2022.05.23 |
[프리온보딩] 220522 강의 메모 (코드리뷰 및 코드 예시) (0) | 2022.05.23 |
[프리온보딩] 220521 그룹과제 #2 (0) | 2022.05.22 |
Comments