[TIL] 2022/01/11 Tue - react-masonry-css 적용, Github Action 자동배포

 

 

 

 

Today I Learned

 

 

📌 짤방 페이지 Masonry 레이아웃 적용 완료

 

결국 무한스크롤 했을 때의 이미지 순서가 뒤바뀌는 문제를 해결하지 못한 채

문명의 이기를 이기지 못하고 react-masonry-css 라이브러리를 사용했다.

 

 

신기하게도 이전에 CSS로 했던 방법과 원리는 비슷한데 각 페이지마다의 이미지 순서가 유지되었다.

 

 

📌 명예의 밈짤 반응형

 

원래 height를 고정으로 해놨는데 모바일 기종이 se일 때 영역을 너무 많이 차지해서 넓이에 따라 높이도 유연하게 바뀌도록 해야 했다.

명예의 밈짤 레이아웃은 grid를 이용했기 때문에 grid 아이템의 높이는 minmax로 수정했다.

 

 

 

📌 Github Action 으로 클라이언트 자동 배포하기

 

자동배포를 생각해두고는 있었는데 지난 주 중간발표에서 멘토님들이 아키텍쳐를 보시더니

클라이언트단도 자동배포를 적용할 수 있다는 피드백을 주셨다.

 

그래서 디자인 수정과 기능 추가 문제로 시간이 뜨는 김에 적용해보았다.

 

처음에는 테스트 배포가 가능한 AWS의 Amplify console을 사용하고 싶었다.

그러나 Amplify console을 사용하려면 https 적용이 필수적인데,

PWA를 보류한 우리팀으로서는 https 로 전환하는 데 리소스를 들이고 싶지는 않았다.

 

그래서 처음에 다른 팀원분이 말씀해주신 Github Action에 대해서 알아보니

Amplify console과 동일하게 push -> build -> 호스팅까지 처리해주되 http는 유지할 수 있어서 이걸로 적용해보았다.

 

이미 S3 버킷에는 프로젝트 생성 후 정적 웹 호스팅이 되어 있어서

IAM에서 액세스 키를 발급 받은 후 yml 파일만 작성하면 됐다.

 

나는 Github Action Workflow를 적용하면서 총 세 단계에서 에러를 만났는데,

 

1. checkout 단계에서의 브랜치 버전 문제

2. build 단계에서의 code 1 에러 문제

3. deploy 단계에서의 path 문제를 겪었다.

 

1, 3번은 비교적 빠르게 해결했는데 2번 build 단계에서의 에러를 해결하는 데 시간을 많이 썼다.

허무하게도 너무나 간단한 이유 때문이었고, yml에 9글자만 추가로 작성해줌으로써 해결되었다.

 

Github Action 적용에 대한 건 별도의 포스팅으로 다룰 예정이라 TIL에서는 이정도만 써야겠다.