IT/web41 [요약정리] 접근성 작업을 도와주는 ESLint plugin 개발기 / if(kakaoAI)2024 아래의 영상을 보고 정리한 글입니다.https://www.youtube.com/watch?v=Mfe7cw7JMiU접근성을 eslint plugin을 커스텀해서 해결함. - 예) inline 요소 안에 block 요소가 있으면 에러 노출 eslint로 인하여 접근성을 위한 property를 외우지 않아도 되어 편리. 2025. 2. 19. [요약정리] 웹 성능 게이트 키퍼: 웹 성능 모니터링 서비스, '파루스' 의 기술과 활용 / if(kakaoAI)2024 아래의 영상을 읽고 요약한 글입니다.https://www.youtube.com/watch?v=RLkT2EoaSVIlighthouse 연동에서 성능 측정. 서버의 상태에 따라 결과가 상이. - 표준편차가 너무 큰폭인 경우가 많음 - 실질적인 테스트가 어려움 - 우리 서비스에 도움이 되는 지표를 새롭게 정의 - 특정기간 평균과 편차를 보면 좋겠다. - 실제 성능은 개선되었지만 점수가 더 낮아지는 현상 2025. 2. 19. [요약정리] 서비스 UX는 내가 직접 지킨다: 웹 이미지 뷰어 '포커스' 개발 및 적용기 / if(kakaoAI)2024 아래의 영상을 요약한 글입니다 .https://www.youtube.com/watch?v=bW9zbcaDfjw웹뷰어 만들기 - Svelte -> library 경량화를 위해 (작은 번들링) - Typescript - Anime.js -> Animation 일관되지 않는 UI/UX - 서비스별 다른 사용자 경험- 같은 카카오 서비스라고 인지하기 어려움 핵심기능 - 뷰어 - 슬라이더 - 확대 / 축소 - 이미지 목록 사용자 중심의 핵심기능 - 이미지 목록 -> 그리드 - 한손 사용성 피드백 (UX 용어)사용자가 수행한 행도엥 대해 시스템이 즉각적으로 반응하거나 결과를 전달하는 일련의 메시지나 신호 Gravity 효과액션의 반대 방향으로 끌어당기는 효과더 이상 액션할 수 없다는 점 예측 2025. 2. 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. 이전 1 2 3 4 ··· 7 다음
