IT/web43 JSON.parse(JSON.stringify(obj)) 의미 개발하다 보면 아래와 같은 코드들이 보인다.const tmp: Channel[] = JSON.parse(JSON.stringify(channels)) 이 의미를 알 지 못한다면, 왜 불필요한 작업을 진행하는지 이해 할 수 없다.stringify와 parse는 연산 속도도 느린데... 이 패턴은 객체를 깊은 복사를 하기 위해 사용하는 방법이 과정을 거치면 원본 객체의 참조와 완전히 끊어진 새로운 객체가 만들어 진다. 얕은 복사(shallow copy)const copy = [...array] 나 const copy = {...obj} 처럼 spread나 Object.assigin을 쓰면 1단계 깊이까지 복사되고, 그 안에 있는 개체나 배열은 여전히 원본과 같은 참조를 가진다.const a = [{x: 1}.. 2025. 8. 15. [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. 이전 1 2 3 4 ··· 8 다음
