전체 글

✨ 들어가기 웹 프론트엔드 개발자라면 한 번씩 겪어보았을 에러가 바로 CORS 에러이다. 그만큼 정확하게 원리를 이해하고 있어야 문제 상황을 빠르게 해결할 수 있기에 해당 개념을 살펴보고자 한다. ✅ SOP 은 무엇인가? Same Origin Poclicy 로 같은 출처에서만 리소스 공유를 허용하는 정책이다. 🤔 같은 출처는 무엇인데? URL의 Protocol, Host, Port 가 모두 동일한 출처이다. 출처라는 것은 Protocol + Host + Port 까지 모두 합친 URL로 이해할 수 있다. 예를 들면, https://with-picme.com:8080/home?nickname=happhee#sop Protocol 👉 https Host 👉 with-picme.com Port 👉 8080 P..

✨ 들어가기 앞선 포스팅에서 PWA 기술에 대해 살펴보았다. 해당 기술에 대한 장점을 살려 지속적인 사용자 유입을 위해 Pic.me 서비스에 도입을 하게 되었다. 사실 chrome으로 구현하는 것은 이미 PWA에 대한 API가 대부분 제한되어 있지 않기에 단순히 service-worker를 등록해주기만 하면 구현이 가능했다. 하지만, 나 역시도 그렇고 대부분의 사람들이 아이폰을 사용하고 있었기에 우리는 safari 환경에서 이를 구현할 수 있게 만들어야 했다. 하지만 Push 알림에 대한 제한사항이 많아서 어려움을 겪었고, 해당 과정에서 알게 된 Safari + PWA 과정을 포스팅 해보고자 한다. ✅ Push 알림 구조 우선 Push 알림 구조에 대해 파악해보자. 클라이언트가 데이터를 요청하지 않아도 ..

✨ 들어가기 리액트로 Pic.me를 개발하면서 가로 & 세로 무한스크롤을 개발해야 하는 뷰가 생성되었다. 리액트에서 무한 스크롤을 구현하는 방법은 2가지가 있다. scroll event를 감지 Intersection Observer API 라이브러리 사용 우선 직접 scroll event를 감지하는 것은 해당 이벤트가 발생할 때마다 scrollHeight와 scrollTop + offsetHeight를 비교하면서 페이지의 끝에 도달했는지를 계산해야 한다. 하지만, 말에서도 알 수 있듯이 scroll 이벤트가 발생할 때마다 와 같은 과한 이벤트는 성능저하를 야기할 가능성이 높다. 때문에 나는 Intersection Observer API 를 통해 무한스크롤을 구현하기로 했다. 더불어 이를 활용한 라이브러리..