meepin 이 문서는 최신 크로미움 베이스 브라우저의 렌더링 동작 방식을 이해하여 개발 및 퍼포먼스 최적화를 진행하는데 도움이 되기위해 작성되었습니다.
tagged css
이 챕터에서는 웹팩에서 CSS 로더를 설정하고 PostCSS와 SCSS 로더를 추가적으로 설정합니다.
이후 사용자의 기호에 따라 추가적인 컨벤션을 적용할 수 있습니다. EX ) airbnb eslint guide
- staged에 파일에 lint, format을 적용할 수 있도록 도와주는 패키지
- React components를 위한 Fast Refresh 웹팩 플러그인
Repo :https://git.hnine.com/rnd_dev/figma-scss-plugin
웹팩 머지는 단어 그대로 여러 개의 웹팩 설정 파일을 하나로 병합해주는 라이브러리입니다.
4.1 스타일 vs 컴포넌트 분리 체크리스트
많은 개발자들이 css next 또는 css modules을 사용하고 있습니다. 그러나 리액트에서 css modules을 classname 속성과 함께 사용하는것은 조금 어려울수도 있습니다. 근본적으로 css modules은 name mangling으로 구현되어있습니다.
displayFadeMenuHandler=> show 안에 이벤트와 메뉴 아이디를 넣어 호출함, 사용하는곳에 onClick으로 지정
이 문서에서 컴포넌트의 구성은 기본적으로 ( View Asset Component ) 패턴을 사용함.
글자 계층에 대해 정리한 글입니다.
컴포넌트 만들때 스타일링에 대해 정리한 글입니다.
📘 구축 프로젝트를 위한 컴포넌트 & 스타일 설계 전략서
접근 차단에 대해 정리한 글입니다.
storybook addon figma Embed Figma designs in a storybook panel. figma api demo This project contains demo apps using the Figma API. Figma.js A simple JS wrapper
RSA(Rivest Shamir Adleman) 암호화를 사용하여 보안 링크를 생성합니다. to : 수신자의 이메일 주소 privateKey : RSA 개인 키
웹 서버는 뭘 하는거임? 정적 컨텐츠를 HTTP 프로토콜로 제공하는 서버임
알아야하는 이유가 뭐임? 프론트엔드와 밀접하게 관련되어있는 브라우저의 내부를 알고있으면 개발하는데 도움이 됨
1. 협업 구조 개요 2. 협업 방식별 해결안 2 1. 퍼블리셔 독립 작업 방식 2 2. 퍼블리셔가 리액트 환경에서 작업 2 3. 하이브리드 방식 (추천) 3. 각 해결안의 문제점 분석 4. 가장 나은 방법 선정 5. 작업 영역 및 책임 분리 6. 협업 가이드라인 7. 퍼블리셔의 상태
AdBlocker Ultimate Adobe Acrobat Bitwarden crxMouse DeepL DIBE GigaBrain JSON LightHouse React Developer Tools SelectorsHub Tooltip Dictionary Volumn Master Wap
| 패키지 | RN/Expo 사용 | 이유/이슈 | 대체(Expo 호환) | 메모/이관 팁 | | | | | | | | @ebay/nice modal react | ❌ | React DOM 의존(웹 모달) | react native modal / react native paper(Dia
아래는 현재 구성(도커파일, docker compose, nginx.conf, deploy.sh 등)을 기준으로 전체 배포 플로우와 Next.js 배포 방식과의 차이점에 대해 상세하게 정리한 내용입니다.
@ https://www.joshwcomeau.com/css
디자이너가 디자인 토큰을 관리하지 않는 상태에서 개발자 주도로 토큰화를 시작하는 경우, 어떤 토큰을 언제, 어떻게, 어떤 수준까지 관리해야 하는지, 유지보수성과 협업 일관성을 확보하기 위한 전략적 판단 기준과 작성 가이드라인이 필요합니다. 특히 6년 이상 장기 프로젝트 또는 운영 시스템
목차 1. 좌표계란 무엇인가? 2. 웨이퍼맵에서 좌표계가 필요한 이유 3. 데이터 좌표계 (Data Coordinate System) 4. 웨이퍼 로컬 좌표계 (Wafer Local Coordinate System) 5. Three.js 월드 좌표계 (World Coordinate Sy
이 문서는 단일 <Wafermap3D/ 컴포넌트로 모든 내부 파싱과 처리를 담당하는 3D 웨이퍼맵 시스템의 구현 청사진입니다. 상호작용(interaction)과 데이터 관리(data management), 최적화는 우선 배제하고 핵심 렌더링 기능에 집중합니다.
1. [echarts.init] 1. 차트 인스턴스 생성 2. 내부 [ZRender] 초기화 후 반환 3. [charts gl] 확장 [echarts.registerPostInit()] 콜백 [LayerGL], [ZRTextureAtlasSurface] 생성 GL 전용 레이어, 텍스처
프로젝트 개요 wafermap poc는 반도체 웨이퍼의 결함 정보를 시각화하는 React 기반 프로젝트입니다. KLARF(KLA Tencor's defect reporting file format) 포맷의 데이터를 입력받아 ECharts 기반의 인터랙티브한 2D 웨이퍼맵을 생성합니다.
Three.js를 사용한 완전히 새로운 3D 웨이퍼맵 시각화 시스템을 설계합니다. 기존 2D 웨이퍼맵과는 독립적으로 개발되며, 3차원 웨이퍼 데이터를 전용으로 처리하는 Shot Mode와 Focus Spot Mode를 지원하는 고성능 3D 시각화 솔루션입니다.