IT/web42 [JS] forEach, "사이드 이펙트(side effect)"가 있을 때만 사용하자 용어 정리side-effect (부작용)함수가 실행 중에 외부 상태를 변경하는 행위 (예: 콘솔 출력, 변수 수정, API 호출 등) pure function (순수 함수)입력 → 출력만 존재하고 외부 상태에 영향을 주지 않는 함수 (ex. map, filter 등에서 쓰는 콜백) 예제// 사이드 이펙트를 map에서 쓰는 경우 (비추)callbacks .filter(cb => typeof cb === 'function') .map(cb => cb()); // 이 코드는 cb()가 어떤 부작용(API 호출, 로그 등)을 일으키는 상황인데, map은 원래 "값을 변환해서 새 배열을 만드는" 용도이기 때문에 이 부작용이 코드 흐름 속에서 잘 드러나지 않고 가독성이 떨어진다는 뜻이에요. 위의 예제를 fo.. 2025. 7. 4. [요약정리] 접근성 작업을 도와주는 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. 이전 1 2 3 4 ··· 7 다음
