IT191 [react] react 17 new jax transform react 17부터 jax transfrom 방식이 바뀌어서 react import 없이 사용 가능. new jax tranfrom으로 바꾼다면, - import React 없이 코딩 가능 - bundle size가 살짝 감소 - 추후 react 배울 때 몇가지 개념들을 몰라도 된다. old jax transfrom 한계점 - JSX가 React.createElement로 컴파일 되기 때문에 React가 scope안에 항상 있어야 함. - React.createElement 떄문에 몇몇의 성능 향상과 간결성을 해결 못함 our codeimport React from 'react';function App() { return Hello World;} old transformimport React f.. 2024. 11. 21. [react] text-overflow: ellipsis 활성 여부 react code에서 확인하는 방법 개발하다보면, 문구 줄임 여부에 따라 '더보기' 버튼을 노출를 결정할 때 있다. 이때 CSS에서 계산된 값을 JS에서 확인해야 하므로 어떻게 확인할 수 있는지 알아보자 샘플코드const ref = useRef(null)const isEllipsis = ref.current.clientWidth >= ref.current.scrollWidthreturn ( hello world {isEllipsis && 더보기} ) 개념scrollWidth보이는것과 상관없이 컨텐츠가 가지고 있는 영역 clientWidth보이는 부분에서 컨첸츠가 가지고 있는 영역 2024. 11. 20. [redis] 싱글 쓰레드 철학 철학메모리에 데이터를 저장하기 때문에 디스크에 비해 빠른 성능 제공메모리에 데이터를 저장한다는건 IO 바운드 작업이 없기 때문에 빠른 성능이 가능데이터를 주기적으로 스냅샷을 찍어 디스크에 저장하고 모든 쓰기 작업을 로그에 남겨 데이터 복구 가능 (완전한 영속성을 보장하진 않고 백업 개념) 싱글 쓰레드 선택 이유멀티 쓰레드에서 발생하는 락 문제 최소화클러스터링을 통해 여러 인스턴스를 생성하기에 싱글 쓰레드로도 충분한 성능멀티 쓰레드에서 발생하는 Context Switching이 없음 최적화싱글 쓰레드이기 때문에 CPU 클럭 수에 따라 좌우됨 빠른이유memory에서 데이터를 관리하기 때문에 IO 작업이 거의 없음 (100% 없지 않을거 같음) - 디스크에 쓰려면 하드웨어의 물리적 한계 (데이터가 어디 있는지.. 2024. 11. 18. Server Driven UI 개념앱이 페이지를 그리는데 필요한 정보를 API를 통해 얻어서 페이지를 렌더링 이점 - 앱 배포 시 심사를 걸쳐야 하기 때문에 배포가 원하는 시점에 되기 힘들지만, 서버만 배포하면 되기 때문에 유연하게 대응 가능 - A/B 테스트를 클라이언트 변경 없이 가능 - 하나의 서버에서 여러 플렛폼의 클라이언트 또는 서로 룩이 비슷한 서비스의 클라이언트를 대응해야 할때 용이 의견아래의 글에서는 graphql를 추천하지만, rest로도 충분히 가능하다고 봄서버에서 타입을 가져오는 방법이 graphql 뿐만 아니라 swagger doc으로도 충분함하위호환성 부분도 graphql, rest 상관없이 서버가 뭘 내려주던 클라이언트에서 어차피 예외처리할 때 같이 다뤄지기 때문에 상관 없음 https://devblog... 2024. 11. 18. [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. 이전 1 2 3 4 5 ··· 32 다음
