개발

Github Action + NCP + Nginx로 간단 CI / CD 구성하기 요구사항 sara-mara 웹 사이트를 꾸준히 배포하고, 관리하기 위하여 CI / CD를 구축하기로 하였다. 우리 프로젝트의 경우 프런트와 백엔드 코드를 따로 관리하고 있기 때문에 나는 프런트 CI/CD를 맡아서 작업하기로 하였다. Github Action 활용하기 우선, 우리 프로젝트는 Naver Cloud Platform과 Nginx로 React를 배포하고 있었다. 그렇기 때문에 도커 + 젠킨스 조합 보다 Github Action을 활용하여 쉽게 배포할 수 있었다. deploy yml 파일을 만들어 main 브랜치에 푸쉬 됐을 때 Workflow가 실행되도록 코드를 작성하였다. 간단하게 설명하자면, main에서 푸시가 됐..

www와 비-www URL 중에서 선택하기 요구사항 sara-mara.com 프로젝트를 진행하면서 sara-mara.com 도메인은 작동하지만, www.sara-mara.com로 웹 사이트 접속 시 사이트가 작동하지 않는 것을 알았다. 물론 그 이유는, NCP Global DNS 서비스를 활용하면서 호스트 www를 등록하지 않았기 때문에 생겨난 문제지만 이 문제를 해결하면서 www URL을 사용할 것인지, 비-www URL을 사용할 것인지 고를 필요가 있었다. 왜 둘 중 하나만 사용해야 할까? 간단하게 말해서 하나의 도메인은 하나의 서버를 의미하기 때문이다. mozila에 따르면 표준 url을 선택한 경우에 서버에 일관성이 생긴다고 설명한다. 실제로 검색엔진은 www IRL와 non-www URL을 별개..

Sara-Mara 웹 사이트 성능 개선하기 요구사항 아래의 이미지에서 알 수 있듯이, 현재 Sara-Mara 사이트의 메인 페이지의 성능이 눈에 띄게 좋지 않고, 실제로 PageSpeed Insight로 페이지를 진단한 결과 성능에서 매우 안 좋은 지표를 확인할 수 있었다. 지표로 봤을 때 LCP가 10초 대로 이미지 렌더링에 많은 시간이 걸린다는 것을 알 수 있었고, 이는 이미지 크기와 형식을 최적화한다면 어느정도 성능 향상을 기대할 수 있을 것으로 예상했다. 코드 스플릿 이미지 파일의 최적화를 통해 성능을 계선할 수 있을 거라 생각했지만, 우선은 lazyloading을 통해 성능개선을 시도해 보았다. Lazy Loading? Lazy Loading 이란 동적 임포트를 통해 초기에는 처리되지 않은 상태..

1. 요구사항 앞서 1편에서는 새로운 개발자님이 합류하게 되어 코드를 쉽게 할 수 있도록, 폴더구조 변경, 코드 리펙토링과 같은 작업을 거쳤다. 새로 온 개발자님과 나 모두 꾸준히 사이트를 개선하고 관리할 생각이었기 때문에, 앞으로의 원활한 협업을 위해 추가 환경을 개선하기로 하였다. Storybook을 활용하여 코드리뷰를 하자 이 프로젝트에서 기획자, 디자이너님들과 원할한 협업을 해보기 위해 Storybook을 활용하고 있었다. 여기서 더 나아가, 기존에 develop에 푸시 됐을 때, 자동 배포되던 Storybook을 Pull Request시 배포되도록 한다면 코드리뷰에도 활용할 수 있으리라 생각했다. 이에 Storybook과 github action을 통해 나의 개발내용이 develop으로 푸시될 ..

1. 요구사항 사이드 프로젝트로 진행했던 사라 마라 웹사이트를 조금 더 고도화하기로 결정했고, 그에 따라 기존에는 나 혼자 하던 프런트엔드 개발을 한 명 더 추가해서 진행하기로 했다. 이 과정에서 기존에 작업된 내용물을 새로운 팀원과 설명해주어야 했고, 함께 작성하기 위한 몇 가지 규칙을 정하기로 하였다. 1. 리펙토링을 하자 1-1. 요구사항 새로운 개발자님이랑 처음으로 코드를 설명해 주기 위해 줌 미팅을 했지만, 생각보다 내 코드를 설명해 주는 것이 쉽지 않았다. 그 이유는, 첫 번째로 주석 처리가 부족하다. TDD를 염두에 두며 아주 작은 view 단위도 컴포넌트화 했지만, 주석이 부족했기 때문에 새로운 개발자가 재사용은커녕 코드를 이해하기도 어려웠다. 두 번째로, 폴더구조가 복잡하였다. 각각의 모..

디바이스 크기에 따라 width 값을 결정하는 Hook 요구사항 텍스트 버블 차트를 프로젝트에서 활용하며, 프로젝트 마감 기한이 짧았기 때문에 내가 직접 구현하기보다 다른 사람이 d3를 통해 제작한 텍스트 버블 라이브러리를 사용했다. 하지만, 다른 사람이 제작한 라이브러리라서 나의 프로젝트와 맞지 않는 점이 있었는데, float된 요소가 많은 우리 프로젝트에서는 어느 정도의 반응형이 필요했지만, 이 라이브러리는 width 값을 프로퍼티로 받아 내부에서 svg를 조정하기 때문에 css로 반응형을 제어할 수 없었다. 이를 제어하기 위해서는 디바이스 크기에 따라서 width값을 js로 조작할 필요가 있었다. 해결과정 // hooks. js export function useWindowSize() { const..

비사이드 프로젝트를 진행하면서 10일 동안 프론트 개발부터 배포까지 전반을 맡았다. 그중에서도 가장 걱정 됐던 부분이 배포였는데, 그 이유는 예전부터 배포는 어려운 것이라는 이미지가 강했고, 비사이드는 네이버 클라우드 플랫폼을 활용하여 배포하기 때문에,자료가 비교적 적을것이라고 생각했기 때문이다. 하지만, 백엔드 개발자 팀원이 미리 서버를 구성한 상태에서 프론트배포만 하는 것은 생각보다 간편했고, 무엇보다 NCP의 이용자 가이드로 손쉽게 배포할 수 있었다. Putty를 활용하여 서버(linux) 컴퓨터에 접속하기 우선, NCP에서 컴퓨터를 빌렸고 환경을 구성했다면 내 컴퓨터에서 빌린 컴퓨터를 조작할 수 있어야한다. 그것을 도와주는 프로그램은 여러개가 있겠지만, 나는 PuTTY를 이용했다. Node 설치하..

프로젝트를 본격적으로 진행하기 전 와이어프레임으로 UI를 제작하던 중 received `true` for a non-boolean attribute 이런 경고메시지가 나를 괴롭혔다 사실 경고메시지이고 내가 원하는 기능도 제대로 작동하였지만, 빨간색 글씨를 보고도 못 본 척하는 것은 너무 힘든 일이었기에 금방 해결될 거라 믿고 에러의 원인을 고민하였다. (해결하기까지 두시간이 걸렸다) 에러가 말하기를 primary는 non-boolean을 가지는 속성인데 false라는 불리언 값을 주었다고 한다. 하지만 나의 관련 코드를 보면 난 분명 propType으로 bool 타입으로 명시했으며, 설령 그렇지 않더라도 TypeScript가 아닌 JavaScript라면 이런 일로 에러메시지를 줄 만큼 친절하지도 않을 것..