분류 전체보기

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/ Access to fetch at ‘https://example.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy. 프로젝트를 할 때마다, 이러한 에러들이 콘솔에 찍히는 경험이 있습니다. 웹 개발자라면 당연히 만나는 에러지만 만날 때마다 썩 좋은 경험은 아닙니다. 이번에야 말로 CORS..

이전 글을 통해서 사라 마라 서비스의 문제점과 이를 해결할 수 있는, 아토믹 디자인에 대해 공부할 수 있었습니다. 이번에는 직접 사라마라 서비스의 전체적인 코드를 리팩터링 하면서, 아토믹 디자인 패턴을 도입하였습니다. 1. 컴포넌트를 다섯단계로 구분하기 아토믹컴포넌트를 도입하면서, 가장 먼저 한 것은 저만의 컴포넌트 기준을 가지는 것이었습니다. 앞서 아토믹 디자인 패턴을 도입하면서 대부분에 사람들이 기준 그대로 따랐을 때, molecules와 organisms의 모호성 때문의 고민하는 것을 보았기 때문에, 저는 이 부분을 명확히 하고자 했습니다. 저의 기준은 다음과 같습니다. 1. atoms - 더 이상 분해가 되지 않는 컴포넌트 (ex. Text, Input, Button, Label) atoms는 아..

사라마라 프로젝트를 진행하면서 Container-Presentational과 비슷한(?) 패턴을 사용했습니다. "비슷한"이라는 의미는 컴포넌트의 설계와 정의가 명확하지 않다는 의미였습니다. 이는 프로젝트를 진행하면서도 새로운 팀원이 들어왔을 때, 프로젝트와 설계방법에 대해 전달하기도 힘들었으며, 새로운 컴포넌트를 제작할 때 기존의 설계방식을 따르기 어렵게 만들었습니다. 사라마라 프로젝트의 문제점 낮은 컴포넌트 재사용성 비슷해 보이는 컴포넌트더라도 사용하는 기능이 달랐기 때문에 재사용하기 힘들었습니다. 재사용성을 고려하며 컴포넌트를 설계하려고 노력했지만, 기능과 디자인이 결합된 컴포넌트를 재사용하기에는 쉽지 않았습니다. 특히, 사라마라 프로젝트에서 버튼의 label은 로고로 대체한 경우가 많았는데 이때, ..

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

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