프론트엔드 개발

react-native - 애니메이션과 스레드 이해

React Native의 주요 스레드는 3가지입니다.JS 스레드React 앱이 있고, API 호출과 터치 이벤트가 일어나는 곳네이티브 지원 뷰에 대한 업데이트는 일괄 처리되어 프레임 마감일전에 이벤트 루프의 각 반복이 끝날 때 네이티브 코드에 전달됨너무 무거운 컴포넌트를 리렌더링 할 때 100ms 보다 오래걸리면 JS로 제어되는 애니메이션은 정지된 것 처럼 보일 수 있음보통 Navigator 전환 과정에서 발생함. 전환은 JS 스레드에 의해 제어되기 때문.JS 스레드가 바쁘면 네이티브 터치가 동작하지 않을 수 있음.메인 스레드(네이티브 스레드)UI 렌더링 담당애니메이션 프레임이 실행되는 스레드기본적으로 모든 애니메이션은 메인 스레드에서 실행되는 거고, JS 스레드에서는 동적인 값을 통해 애니메이션을 제어..

react-native - expo sdk52 11/13 출시

주요 업데이트 내용 (2024년 11월 13일 출시)1. New Architecture 도입모든 새로운 프로젝트에서 New Architecture가 기본적으로 활성화됨newArchEnabled: true가 app.json에 기본 설정됨기존 프로젝트는 선택적으로 적용 가능SDK 53부터는 기본 활성화될 예정이며, 2025년에는 기존 아키텍처 지원 중단 예정2. 주요 라이브러리 업데이트React Native 0.76 버전 포함iOS 최소 지원 버전이 13.4에서 15.1로 상향Android minSdkVersion 23에서 24로, compileSdkVersion 34에서 35로 상향3. 새로운 라이브러리 출시expo-video: expo-av를 대체하는 안정화된 비디오 라이브러리expo-audio: 새로운..

react-native 에서 tailwind 문법으로 스타일 적용하기 (twrnc 라이브러리)

https://www.npmjs.com/package/twrnchttps://github.com/jaredh159/tailwind-react-native-classnames twrncsimple, expressive API for tailwindcss + react-native. Latest version: 4.6.0, last published: 6 days ago. Start using twrnc in your project by running `npm i twrnc`. There are 47 other projects in the npm registry using twrnc.www.npmjs.comreact-native 에서 tailwind css 문법으로 스타일링 가능매우 빠름: 이 벤치마크 에 ..

VoidZero - 자바스크립트를 위한 차세대 툴체인 소개

VoidZero - 자바스크립트 개발의 새로운 혁신개요Vue.js의 창시자 Evan You가 자바스크립트 생태계에 새로운 혁신을 가져올 VoidZero Inc.를 설립했습니다. Accel이 주도한 시드 투자를 통해 460만 달러를 유치했으며, 자바스크립트를 위한 차세대 통합 개발 툴체인을 구축하는 것을 목표로 하고 있습니다.VoidZero가 해결하려는 문제현재 자바스크립트 생태계가 직면한 가장 큰 문제는 파편화입니다수많은 서드파티 의존성 관리다양한 도구들의 호환성 문제중복된 작업으로 인한 성능 저하복잡한 설정과 구성 관리개발자들은 이러한 문제들을 근본적으로 해결하기 위해 VoidZero가 탄생했습니다.핵심 특징1. 통합된 개발 환경모든 개발 작업에서 동일한 AST 사용구문 분석, 변환, 린팅, 포매팅, ..

tsconfig의 moduleResolution 란?

일하면서 메모 차원에서 남기는 게시글입니다.tsconfig.json에서 moduleResolution 옵션은 TypeScript가 모듈을 어떻게 해석할지를 정의하는 설정입니다. 이는 TypeScript가 import나 require로 모듈을 가져올 때, 해당 모듈을 어디서 찾고 어떤 방식으로 해석할지 결정하는 중요한 부분입니다.1. 기본 설명moduleResolution은 TypeScript 컴파일러가 모듈 경로를 찾는 방식(모듈 해석 전략)을 결정합니다. TypeScript는 두 가지 기본적인 모듈 해석 전략을 제공합니다:node: Node.js의 모듈 해석 방식과 동일한 방식입니다. node_modules 디렉토리를 탐색하며, .js, .jsx, .ts, .tsx, .json 확장자를 가진 파일을 찾..

Apollo Client 와 Relay 를 비교해보자

프론트엔드에서 GrpahQL 를 다루기 위한 대표적인 라이브러리로는 Apollo Client와 Relay 가 있습니다.그 중에 저희는 Apollo Client 를 사용하고 있는데요. 처음에 Apollo 와 Relay 중 어느것을 하는가 비교했었을때 Next.js 와 SSR 기능과의 통합성을 좀 중점적으로 보았습니다.왜냐하면 그 전까지 React 로 CSR 만 사용하다가 이번 프로젝트에 Next.js 를 처음 도입하게된 것이었고. 고객 유입을 위한 SEO 가 중요하여 SSR를 적극 사용할 것으로 기대했기 때문입니다. Relay 는 SSR을 공식적으로 지원하지 않기에 별도로 복잡한 설정을 해주어야 하고. 성능 최적화. 캐시 자동관리 등에 중점적이어서 대규모 서비스에 적합하다는 말이 있었고.Apollo Cli..

[프로젝트 기록] Next.js 의 SSG 는 너무 느려서 못써먹겠다.

프로젝트 기록입니다. 배경 지식 23년도에서 24년 넘어가던 때에 저희 회사에서 모든 부동산 자산에 대한 어떤 정보를 제공하기 위한 페이지를 기획했었습니다.저는 이것이 마케팅 비용이 없이도 효과적으로 검색 유입을 늘릴 수 있는 수단으로 생각하여 SEO에 신경써서 개발하였고.이런 것들을 이미 염두하여 Next.js 로 개발하고 있었기 때문에 SSR, SSG 를 적극 검토했었습니다. 자산의 종류는 토지(땅만), 토지건물(땅과 건물. 그러나 동,호는 없음), 집합건물(동,호가 존재) 이렇게 3종류가 있습니다.각 자산은 고유 번호인 pnu 를 붙여서 관리하고 있고. 집합건물은 pnu + 각 동에 대해 dongBpk, 각 동의 호에 대해 hoBpk 를 가집니다. 사실 SSR 를 쓰면 정말로 뭘 할 것도 없이 간단..

리액트 렌더링 최적화를 위한 useDeferredValue 는 debounce 의 완전한 대체제가 아니다.

리액트 18 버전에서 추가된 기능입니다. useDeferredValue 는 말그대로 "지연된 값을 사용" 하는 훅 입니다. 이 훅에 대해서 오해가 있었는데요. 값을 지연한다고 하기에 debounce 의 대체제 라고 생각했습니다. 그래서 너무나 당연히 이렇게 쓰면 API 요청이 지연되어서 들어간다고 생각 했었으나, 실상은 그렇지 않았습니다. const [input, setInput] = useState(''); const deferredInput = useDeferredValue(input); useEffect(() => { if (deferredInput) { fetchData(deferredInput); } }, [deferredInput]); 그렇습니다... 지연된 값을 가지고 매우 무거운 렌더링 작..

tailwind 레이어가 뭔데? postcss.config 는 뭐지?

tailwind 빌드 시점에 HTML 파일에서 tailwind css 클래스를 찾아서 이를 바탕으로 ccs 정적 파일을 구성합니다. 브라우저 렌더링 과정에 직접 개입하지 않으므로, 런타임에 비용이 들지 않습니다. 전통적인 인라인 스타일과의 차이가 있다면, 미디어 쿼리를 사용할 수가 있게 되고 사전 정의된 디자인 시스템에서 스타일을 선택할 수 있다는 것, 마우스오버, 포커스 등의 상태에도 대응 가능하다는 점입니다. 숫자로 보기: Atomic CSS를 사용한 1년 반 - John Polacek 아니요, 유틸리티 클래스는 인라인 스타일과 동일하지 않습니다( Algolia의 Sarah Dayan 작성). GitHub의 유틸리티 클래스 사용에 대한 Diana Mounter의 팟캐스트 인터뷰 레이어 @tailwin..

Next.js 의 ServerSide 에서 Apollo Client Cache 데이터가 모든 사용자 간에 공유되는 이슈

마이페이지에 다른 사람의 정보가 보이는 문제가 발생했습니다!!! 회사에서 개발 중인 사이트의 마이페이지는 사용자의 정보를 Next.js getServerSideProps 에서 Apollo Client Query 로 가져온 다음에 캐시 데이터를 클라이언트 Apollo Client 인스턴스의 캐시와 병합시키고, 그 캐시 데이터를 클라이언트 단에서 뽑아서 화면에 보여주는 방식으로 개발 했었는데요. 이것은 rehydreate 를 하는 여러 방법 중에 보편적으로 알려진 방식입니다. 대부분 Next.js + Apollo 궁시렁 검색하면 이렇게 나올겁니다. ClientSide 에서 useQuery 사용시 _app.tsx 에서 pageProps 를 useApollo hook에 전달 useApollo 에서 initia..