grace's dev_note

iOS와 iPadOS 13.4부터 시작된 Intelligent Tracking Prevention(ITP)에 대해서 먼저 알아봅시다. 웹사이트는 자체 도메인이 아닌 다른 도메인에서 이미지 및 스크립트 리소스를 가져올 수 있는데 이를 Cross origin, Cross-Site loading 이라고 한다. 그러나 이런 로딩은 사이트 간 추적을 가능하게 만듭니다. example-products.com과 example-recipies.com이 있다. 두 사이트 모두 example-tracker.com에서 리소스를 로드하고 example-tracker.com에 사용자의 쿠키가 저장되어 있는 경우 example-tracker.com에서 두 사이트의 정보를 추적할 수 있는데, 이를 교차 사이트 추적이라고 하며 ex..

Recoil은 업데이트된 state 부분만 리렌더를 해줍니다. Setting //app.tsx 파일 import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( //RecoilRoot로 모든 컴포넌트를 묶어주세요 ); } 사용 Recoil에서는 Atom으로 state의 일부를 보여줍니다. 컴포넌트들은 자신이 필요한 Atom을 참조하고 있습니다. 따라서 자신이 참조하고 있는 Atom에 변화가 있으면 해당 atom을 참조하는 모든 컴포넌트에 리렌더링이 일어납니다. // Atom const textState = atom({ key: 'textState..

mediaQuery Emotion에서 미디어 쿼리를 사용하는 것은 일반 css에서 사용하는 것과 같습니다. const Wrapper = styled.div` font-size: 100px; @media (min-width: 420px) { font-size: 50px; } `; 재사용 가능한 미디어 쿼리 미디어 쿼리는 반응형 앱을 만드는 데 유용할 수 있지만 반복해서 작성해주면 각 스타일마다 다르게 적용될 수도 있고 비효율적입니다. 사용할 때마다 다시 작성하는 대신 상수로 옮겨 사용하고 싶을 때마다 참조할 수 있습니다. const breakpoints = [576, 768, 992, 1200]; const mq = breakpoints.map((bp) => `@media (min-width: ${bp}p..

프로젝트를 하다 보면 상태에 대한 부분들이 전부 URL 값 파라미터에 반영되어야하는 경우가 있다. 이렇게 해야하는 이유는 모든 사용자의 동작들이 URL로 반영이 되어야지만 내가 보고 있는 페이지 그대로 누군가에게 URL을 공유할때 받는사람도 똑같은 페이지의 똑같은 화면을 볼수 있게 된다 뒤로가기를 눌렀을때 바로 이전 동작으로 되돌릴 수 있다 웹에서 앱 으로 넘어갔을때 앱에서도 똑같은 페이지를 볼수 있게 해야한다 이러한 동작을 도와주는 것이 nextjs 에서 제공하는 shallow routing이다. router.push(format({ pathname, query: { ...query, place: query?.place ?? (place || '부산'), active2: 'true..