전체 글

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을 별개..

Proxy 객체 Proxy 객체란? Proxy는 Proxy 서버로 더 익숙하지만, JavaScript에서는 객체로도 사용되는 개념이다. 의미는 실제 Proxy 서버와 비슷하게 한 객체에 대한 기본 작업을 가로채고 재정의하는 프락시를 만드는 객체이다 이는 주로, 속성 액세스를 기록하고 입력의 유효성 검사, 형식 지정 등에 활용할 수 있다. 프락시 객체는 두 개의 매개변수를 사용하여 생성할 수 있다. target : 프락시할 원본 객체 handler : 가로채는 작업과 가로채는 작업을 재정의하는 방법을 정의하는 객체 -> 프록시 객체의 target 동작을 가로채서 정의할 동작들이 정해져 있는 함수 const target = { message1: "hello", message2: "everyone" }; co..

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으로 푸시될 ..