본문 바로가기

분류 전체보기305

[firebase > firestore database] 검색 기능 구현하기 기본적으로 firestore는 문자열 안에 포함되어 있는 단어 검색을 제공하지 않는다. 그래서 RDB에서 흔히 어떤 단어가 포함되어 있는지 질의하는게 당연한건데,, 지원하지 않는다. 그래서 약간의 꼼수로 어느정도 가능하게 할 수 있지만, 100% 커버되는건 아니다.검색이 중요하다만 타사 솔루션 Algolia 또는 Elastic을 사용해야 한다. 꼼수 방법 1문자열 첫단어를 검색하는 방법 (중간에 있는 문자는 찾을 수 없다.)**`\uf8ff`를 넣는 이유는 유니코드 범위에서 상당히 뒷자리에 위치하고 있어서 우리가 사용하는 어떤 문자열이 들어와도 검색이 가능하게끔 한다.const q = query( hashtagRef, where('__name__', '>=', value), where('__name.. 2024. 11. 17.
디자인 시스템의 깨진 약속들 아래의 글을 보고 핵심과 나의 생각을 정리합니다.디자인 시스템의 깨진 약속들(The broken promises of design systems) 디자인 시스템의 깨진 약속들(The broken promises of design systems)매년 Figma에서 개최하는 Config에서 올해(2024)의 Config 영상 중 하나가 좋았어서(해당 영상) 이를 글로 정리하고자 해요.minnimalism.medium.com이 글을 보면 대략 디자인시스템을 적용 후 안좋은 의견들이 많다.- “느리고, 제한적이다. 그들이 없길 바란다…”- “더 나은 디자인을 위한 해결책이 디자인 시스템이라고 하는 리뷰는 아직 경험해보지 못했습니다.”- “창의력을 저하시킨다. 혁신적인 디자인을 하기에는 너무 경직되어 있다” 속도.. 2024. 11. 16.
[web] tree-shaking 요약 webpack 기준 tree-shaking 적용 방법1. bundle 시 commonjs로 transpile이 되면 안됨 .babelrchttps://babeljs.io/docs/babel-preset-env#modules> Setting this to false will preserve ES modules.{ "presets": [ ["env", { "modules": false }] ], "plugins": [ ["transform-react-jsx", {"pragma": "h"}], "emotion" ]} 2. 필요한 함수만 import// asisimport * as utils from "../../utils/utils";// tobeimport { simpl.. 2024. 10. 27.
[web] 사용되지 않는 자바스크립트 및 CSS 찾기 아래의 글을 요약했습니다.https://developer.chrome.com/docs/devtools/coverage?hl=ko 적용 범위: 사용되지 않는 자바스크립트 및 CSS 찾기  |  Chrome DevTools  |  Chrome for DevelopersChrome DevTools에서 사용되지 않는 자바스크립트 및 CSS 코드를 찾고 분석하는 방법developer.chrome.com너무 쉽습니다. 몇년전에도 해당 기능을 알았지만 까맣게 잊고 있었네요. 오!! 이런것이 있어? 하면서 놀랬지만 이 글을 쓰는 시점에서는 '아.. 알고 있었는데..' 사용방법크롬 > 개발자 도구 > 범위 > 리프레스 버튼 > 녹화 중지*범위가 없으면 더보기(삼점)버튼 눌러서 범위 선택 테스트 2024. 10. 23.
[web] 렌더링 차단 CSS 아래의 글을 정리한 포스팅입니다. https://web.dev/articles/critical-rendering-path/render-blocking-css?hl=ko 렌더링 차단 CSS  |  Articles  |  web.dev기본적으로 CSS는 렌더링 차단 리소스로 취급됩니다. 렌더링이 차단되지 않도록 방지하는 방법을 알아보세요.web.devCSS는 렌더링 차단 리소스로 취급그렇지 않으면 아래의 이미지처럼 보였다가 스타일이 입혀서 노출되어서 스타일이 적용되기 전까지 페이지를 정상적으로 이용할 수 없는 상황이 발생할 수 있음그래서 불필요한 스타일은 제거하여 다운로드를 최대한 빠르게 해야 합니다. 렌더링 차단 리소스렌더링 트리 생성 하려면 CSSOM과 DOM을 읽어들어야 합니다. CSSOM은 CSS를 .. 2024. 10. 23.
[web] 렌더링 트리 생성, 레이아웃 및 페인트 아래의 글을 정리한 포스팅https://web.dev/articles/critical-rendering-path/render-tree-construction?hl=ko 렌더링 트리 생성, 레이아웃 및 페인트  |  Articles  |  web.dev주요 렌더링 경로에서 중요한 한 가지 단계는 렌더링 트리를 생성하고, 레이아웃 작업을 실행하여 이 트리에서 페이지를 생성하고, 결과 페이지의 픽셀을 화면에 칠하는 것입니다.web.dev요약 렌더링 트리 생성하려면 DOM 트리와 CSSOM 트리를 결합하여 생성 (화면에 보여질 것들만 추려서, 스타일도 마찬가지)레이아웃은 렌더링 트리에 속한 노드들이 어디에 위치할 지 결정페인트는 렌더링 트리와 레이아웃의 값들을 이용해서 화면에 노출  렌더링 트리 CSSOM 트리.. 2024. 10. 22.

티스토리툴바