본문 바로가기

전체 글

Flutter Impeller, skia Engine 에 관해서 Flutter Impeller Flutter의 Impeller 렌더링 엔진은 Flutter 3.10 버전에서 iOS 용으로 기본 엔진으로 도입되었고, Android용으로는 Vulkan( 오버헤드가 적은 크로스 플랫폼 3D 그래픽스 및 컴퓨팅 API)을 지원하는 자이에서 사용할 수 있는 미리보기 버전이 Flutter 3.16에 도입되었습니다. Flutter Impeller란? Impeller는 Flutter의 "초기 버벅거림 발생" 문제를 해결하기 위해 처음부터 설계된 새로운 렌더링 엔진입니다. 기존 Skia 엔진과 달리 Impeller는 빌드 프로세스 중에 셰이더를 사전 컴파일하므로 가끔 문제를 일으킬 수 있는 런타임이 필요하지 않습니다.  그래서 더 좋아진 효과로는예측 가능한 성능 : 사전 구축된 리소.. 더보기
Lotto 미션 과제중 css Loading 문제 (webpack) 오늘의 교훈 - 부끄러울줄 알아야 한다. 내게 있었던일 Next-step에서 Lotto 미션을 진행하고 있었습니다. html, css, js를 이용해서 Lotto를 생성하고 결과를 알려주는 사이트를 만드는 것이었습니다. 실행과정은 다음과 같습니다. npm installnpm run start-step-web  어떤 구조로 되어 있을까요 package.json에 scripts를 통해서  "start-step-web": "webpack serve --open --config step-web.config.js"다음과 같은 명령어를 수행합니다. 저는 이부분을 잘 이해를 못했던거 같은데요. 그래서 문제의 원인을 재대로파악하지 못하고 시간을 허비했던거 같습니다.  그래서 이부분에 대해서 어떤 의미를 가지고 있.. 더보기
react-hook-form 컴포넌트 의존성 관리하기 회사에서 하고 있던 작업에서 회원가입 관련 내용이 있었습니다. react-hook-form을 이용해서 만들었습니다. 만들고 나서 흥미로운 블로그 글을 읽었고, 그 내용을 바탕으로 저의 코드를 고쳐봤습니다. 항상 코드를 개발하면서, 재사용 가능하도록 만들어야지, 유지보수를 쉽게 할 수 있도록 설계해야지 하면서 그러기 위한 특별한 무엇가가 없었습니다. 사실 방법을 몰랐다해도 될정도 였습니다. 그래서 이글에서는 어떻게 컴포넌트를 만들면 좋을지에 대해 고민했던 내용을 담아봤습니다. "의존성" 이번 개발을 하면서 "의존성"이라는 키워드에 집중했습니다. 여러 글을 보면서 항상 중요하게 나오는 키워드인데요. "의존성"은 말 그대로 다른것에 의존한다 뜻입니다. 그렇다면 좋은 컴포넌트를 만들기 위해서는 "의존성"을 어떻.. 더보기
CRA(Craco)에서 Vite 전환기 -2 Vite 설치하기 - 공식문서 확인 Vite를 설치하고 구성하는 과정은 Vite의 공식 문서에 자세히 설명되어 있습니다. Vite 설치는 간단하지만, 몇 가지 주의할 점이 있으며, 이는 Vite의 특징적인 방식과 관련이 있습니다. Vite 설치 과정 및 주의사항 그리고 설치 중 발생한 문제에 대해 공유하려고 합니다. 설치 시 주의사항 및 Vite만의 특징: ESNext 변환: Vite는 최신 JavaScript 문법을 사용하며, esnext를 대상으로 코드를 변환합니다. 네이티브 ES Module: Vite는 네이티브 ES 모듈을 기반으로 작동하므로, 브라우저에서 직접 모듈을 로드할 수 있습니다. 동적 임포트 및 import.meta 사용: Vite는 네이티브 ESM 동적 임포트를 지원하며, import.. 더보기
CRA(Craco)에서 Vite로 전환기 - 1 안녕하세요! 오늘은 제가 CRA(Craco)에서 Vite로 전환하게 된 경험에 대해 나누어 보려고 합니다. 제가 처음에 CRA(Create React App)와 Craco(Create React App Configuration Override)를 선택한 이유는, 프로젝트 준비 기간이 짧았기 때문에 빠르게 시작할 수 있는 환경이 필요했기 때문입니다. CRA는 React 프로젝트의 초기 단계에 필요한 다양한 라이브러리, Webpack, ESLint 설정 등을 이미 포함하고 있는 보일러플레이트로, ES6 이상의 문법과 CSS 후처리 등의 개발 환경을 자동으로 설정해 주어 매우 편리합니다. 그러나 Craco를 사용하면서 몇 가지 단점을 경험했습니다. 특히 프로그램의 실행 속도가 느려서 개발 효율이 많이 떨어지는.. 더보기
TanStack query InfiniteQuery 사용 중 발생한 캐싱 문제 안녕하세요 TanStack query에 InfiniteQuery를 사용하면서 발생한 문제에 대해 정리해보려고합니다. 더좋은 의견과 방법이 있으면 댓글 부탁드립니다 :) 발생한 문제 저희 갤러리에는 무한 스크롤기능과 함께 Filter 기능이 존재합니다. Filter는 체크박스를 이용한 Filter와 SelectBox를 이용한 Filter 2가지가 존재하고 Context API를 통해서 상태관리를 했고 상태변화가 있을때 Query-params로 Filter 처리를 서버요청에 할 수 있도록 했습니다. 그리고 갤러리 Item 마다 좋아요를 누를 수 있는 button이 존재합니다. button의 상태는 useState로 관리하고 페이지가 렌더링 될때 부모 컴포넌트로 부터 초기 데이터를 받고 클릭 이벤트가 발생하면.. 더보기
husky + lint-staged가 필요한 이유 (prettier + eslint) 오늘의 문제 - github Merge 중에 발생한 문제 다음과 같이 수정사항을 업데이트하고 merge를 했는데 Vecel에서 문제가 발생했다고 경고창이 떴다. group/management/managementClient.tsx 파일에서 Table에 대한 issue가 있었다. 이번 수정사항이 Table에 관련된 내용이었는데, 이거에 대한 issue를 commit전에 체크하지 못했기 때문에 merge 하는 과정에서 다음과 같은 이슈가 생겼다. 어떻게 문제를 해결할 수 있을까? Git commit 이나 push 전에 코드를 확인하고 문제가 있으면 이전 행위를 막을 수 있는 무언가가 있으면 좋지 않을까 생각을 했고, 해당내용을 구글링을 통해서 해결할 수 있는 방안을 모색했다. Git에는 Git hook이라는 .. 더보기
recoil -> Tanstack-query 무한 스크롤 구현 안녕하세요. 오늘은 recoil을 이용한 무한스크롤 방식에서 Tanstack-query를 이용한 무한스크롤 방식으로 변경한 이유와 방법에 대해 공유하려고합니다. 부족한 내용이지만 기록을 해보겠습니다. Recoil에서 사용한 무한스크롤 방법 Recoil에서 사용한 무한스크롤방법은 다음과 같습니다. 1. 데이터 패칭 - 한번에 관련된 모든 데이터를 불러온다. 2. recoil 캐싱 - 불러온 데이터를 recoil을 이용해서 캐싱처리한다. (SelectorFamily) 3. selector를 이용해서 데이터 slice - 무한스크롤은 fetching Event가 발생할때마다 새로운 데이터를 보여주는 방식이다. 그래서 한번에 받아온 데이터를 한번에 보여주는 것이 아닌, slice를 이용해서 일정부분씩 보여주는 .. 더보기

티스토리툴바