grace's dev_note

기본적으로 vite는 여타 정적 파일 서버와 크게 다르지 않습니다. 다만, vite는 네이티브 ESM 말고도 기존 번들러에서 제공하던 기능을 대부분 지원하다는 차이점이 있습니다. NPM을 이용한 디펜던시 import 그리고 사전 번들링 다음 코드는 네이티브 ES에서 정상적으로 실행되지 않습니다. import { someMethod } from 'my-dep' 모듈의 위치를 찾을 수 없기 때문인데, vite는 다음을 기준으로 모듈을 가져오기 때문에 위 코드 역시 정상적으로 실행됩니다. Vite를 통해 ESM 스타일로 사전에 번들링된 CommonJS 및 UMD(CommonJS와 AMD 스타일의 모듈을 둘 다 지원하는 형태) 모듈. 이 과정은 Esbuild를 통해 이루어지며, 자바스크립트 기반의 다른 번들러보..

들어가기 전에 Vite는 프랑스어로 빠르다를 의미합니다. 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다. 개발시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공합니다(HMR 같은). 번들링 시 Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적 리소스들을 배포할 수 있게 하며, 미리 정의된 설정을 제공합니다. vite는 기본적으로 최적화된 설정을 제공하지만, Plugin API 또는 Javascript API를 사용할 수 있습니다. 물론, 타입스크립트도 지원합니다. 지원하는 브라우저 기본적으로 네이티브 ES 모듈, 네이티브 ESM의 동적 Import, 그리고 import.met..

이런 문제점이 있었어요 브라우저에서 ESM을 지원하기 전까지는, 자바스크립트 모듈화를 네이티브 레벨에서 진행할 수 없었습니다. 따라서 개발자들은 번들링이라는 우회적인 방법을 사용했습니다(Webpack 같은). 하지만 애플리케이션이 점점 더 발전함에 따라 처리해야 하는 자바스크립트 모듈의 개수도 극적으로 증가하고 있습니다. 심지어 대규모 프로젝트에서는 수천 개의 모듈이 존재합니다. 이러한 상황에서 자바스크립트 기반의 도구는 성능 병목 현상이 발생되었고, 종종 개발 서버를 가동하는 데 비합리적으로 오랜 시간을 기다려야 한다거나 HMR을 사용하더라도 변경된 파일이 적용될 때까지 수 초 이상 소요되곤 했습니다. 이와 같은 느린 피드백 루프는 개발자의 생산성에 큰 영향을 줄 수 있습니다. 💡HMR 브라우저를 새로..

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..

The linked library 'libPods-xxx.a' is missing one or more architectures required by this target: arm64. Build Settings > Architectures로 이동하여 arm64를 추가해주고 다시 빌드하면 해결 가능 arm 64가 아니고 x86_64일 경우에도 같은 방식으로 추가해주면 된다. 출처: https://success206.tistory.com/156 [CaffeLatte의 Programming]

React에는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구가 있습니다. 바로 StrictMode입니다. 개발 모드에서 앱 내의 잠재적인 버그를 알아내기 위해서 컴포넌트를 두 번 렌더해줍니다. 당연하게도, 개발 모드에서만 활성되기 때문에 프로덕션 빌드(배포)에는 영향을 끼치지 않습니다. React나 Next.js 앱을 시작하면 next.config.js 파일이 있는 것을 확인할 수 있습니다. 해당 파일에 들어가보면 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, } module.exports = nextConfig 이렇게 작성되어 있는 것을 확인할 수 있는데요. 여기에서 stric..

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

내 경우에는 react native simulator 실행 시 default 로 iPhone 13 으로 실행이 되었다. 디자이너님께서는 default device가 iPhone 11 Pro가 되길 원하셔서 simulator 변경 방법에 대해서 알아봤다. 터미널을 실행시켜주고 프로젝트 폴더 내에서 xcrun simctl list devices위 명령어를 실행하면 사용 가능한 simulator list를 확인할 수 있다. 내가 원하는 device가 실행 가능한지 먼저 확인해준다. 이제 아래의 명령어를 통해 사용하고 싶은 slmulator로 react native를 실행한다. npx react-native run-ios --simulator="iPhone 11 Pro"이렇게 해주면 같은 프로젝트를 다른 디바이..