TIL: 2023-04-10

⚙️ 오늘 학습한 내용

`gh-pages` 라이브러리로 github pages에서 SPA 배포하기

 

🐹 오늘의 기분

하루가 후루룩 지나갔다. 스터디하고 과제하고 하다보니 어느새 저녁.. 원티드 강의까지 듣고 나니 어느새 밤이 되었다. 과제는 배포까지 끝내서 이제 요구사항 점검하고 리팩토링할 부분을 찾고 고쳐나가야 한다. 칸반보드로 이슈 관리하니까 한 눈에 보여서 너무 편했다. 요구사항 쪼개서 이슈에 올려놓은 투두 하나씩 지워나갈때의 쾌감,, 짱이다 👍

 

🗝 키워드

`gh-pages`

 

🗣 스스로에게 설명

`gh-pages` 라이브러리로 github pages에서 SPA 배포하기

github pages로 SPA를 배포하니 다른 경로에 들어갔을 때 404 에러를 뱉어냈다.

이건 전에도 한 번 겪었던 문제인데, 기록을 안 해놨더니 또 까먹음 ..ㅎ 

GitHub - gitname/react-gh-pages: Deploying a React App (created using create-react-app) to GitHub Pages

`gh-pages` 기본 사용법은 리드미에 아주 잘 설명되어 있어서 이거 보고 따라하면 된다. 

 

`gh-pages`로 배포할 때 커밋 메시지는 'Updates'가 기본으로 적용된다.

이 커밋 메시지를 따로 설정하고 싶다면 아래처럼 하면 된다. 

npm run deploy -- -m "Deploy React app to GitHub Pages"

 

Songlog

SPA 배포는 이 글이 가장 깔끔하게 잘 정리되어 있어서 좋았다.

라우팅 원리 같은 걸 더 깊게 이해하고 있으면 좋을 것 같다. 

 

`gh-pages`로 배포하면 배포용 브랜치를 따로 파줘서 거기에 푸쉬가 될 때마다 자동으로 배포를 해준다는 점에서 편리함을 느꼈다.

(예전엔 `gh-pages` 라이브러리 사용 이유도 모르고 그냥 블로그에 나와있는대로 무작정 썼었다..)

 

`<input type="checkbox" />` 크기 키우기

투두 리스트를 만들다가 글자는 큰데 체크박스는 너무 작아서 방법을 찾아보다 `zoom` 속성이 있다는 것을 알게 되었다. 

[CSS] checkbox 사이즈 조절(네모 크기 늘리기)

mdn을 찾아보니 `zoom` 속성은 non-standard라 모든 유저에게 적용되지 않을 수 있다고 한다.

따라서 기존에 적용했던 `zoom` 속성은 제거하고 `transform: scale(1.5)`로 변경했다.

 

🔍 공부가 더 필요한 부분

`transform` 속성