software engineering/javascript

해당 글 15건

[Knip] Find unused files, dependencies and exports in JavaScript and TypeScript projects

2024. 2. 3. 15:58

커리어리에 Knip을 소개 해주신 분이 있어서 한 번 사용해봤는데 꽤 유용하다. 제목 그대로 자바스크립트와 타입스크립트에서 사용하지 않는 파일, Dependencies, exports를 찾아준다. 공식 홈페이지를 가보면 아주 단순하고 사용법도 너무 간단해서 Typescript 대표 오픈소스인 Vscode를 clone해서 사용해봤습니다. 1. 설치 yarn add -D knip 2. 스크립트 제공 { "scripts": { ..., "knip": "knip" } } 3. 실행 결과 Unused files Unused files (3953) .eslintplugin/code-amd-node-module.ts .eslintplugin/code-declare-service-brand.ts .eslintplugi..
software engineering/javascript

JavaScript 개발자를 위한 객체 속성 삭제 전략: undefined vs delete

2024. 1. 1. 16:04

자바스크립트에서 객체의 속성을 삭제하는 방법으로는 delete 연산자를 사용하거나 속성 값을 null 또는 undefined로 설정하는 방법이 있습니다. 그러나 이 두 가지 방법 간에는 성능 차이가 있습니다. TL;DR 보편적인 시나리오에서는 속성을 null 또는 undefined로 설정하는 것이 간편하며 성능 차이가 미미합니다. delete는 특정한 속성 제거나 열거 동작과 관련이 있을 때 선택합니다. 성능 고려 사항: 메모리 할당 해제: 객체 속성을 null 또는 undefined로 설정하면 해당 속성이 즉시 사용 중이 아닌 것으로 표시되지만, 메모리는 즉시 해제되지 않습니다. 일반적으로 JavaScript 엔진은 사용하지 않는 메모리를 식별하고 회수하기 위해 가비지 컬렉션을 사용합니다. 가비지 컬렉..
software engineering/javascript

using, satisfies in typescript

2023. 10. 30. 21:25

1. satisfies 잠깐! 4.9에 나온 satisfies는 사용하고 계신가요? 객체 타입을 검사할 때 생각보다 typescript가 똑똑하게 검사하지 않아서 4.9에 새로 등장했습니다. Typescript에서 설명하기 위한 예시로 palette라는 객체를 예로 들었습니다. // RGB tuple이나 string을 허용하고 있습니다. const palette = { red: [255, 0, 0], green: "#00ff00", bleu: [0, 0, 255] // blue에 오타가 있습니다. }; // 배열의 첫 번째 값을 가져오고 싶지만 string일수도 있어서 허용되지 않습니다. const redComponent = palette.red.at(0); // 배열일 수 있어서 이 또한 허용되지 않습..
software engineering/javascript

forEach is BAD!

2023. 10. 3. 16:56

async/await를 사용할 경우 forEach 사용을 피하는게 좋습니다 두가지 이상 함수에 await이 걸려있다면 루프를 실제로 2번 돕니다 대안으로 for, for-of, Promise.allSettled(arr.map()), reduce(()⇒, Promise.resolve())가 있습니다. arr.forEach(async (value) => { const added = await add(value) console.log('added', added) const subtracted = await subtract(value) console.log('subtracted', subtracted) } // result: added x nth -> subtracted x nth // added -> adde..
software engineering/javascript

void 언제 쓸까?

2023. 8. 27. 13:54

Pull Request 리뷰 중 void 를 사용한 코드가 발견되어 궁금해짐 🤔 JavaScript에서 void 연산자는 표현식을 평가하고 undefined를 반환하는 데 사용됩니다. 주로 주변 코드에 영향을 미치지 않도록 하거나 의도하지 않은 동작을 유발하지 않도록 하는 경우에 사용됩니다. 1. 네비게이션 방지: 클릭 시 JavaScript 함수 호출과 같은 작업을 수행하려면서 클릭이 새 페이지로 이동하거나 현재 페이지를 다시 로드하지 않도록 하려는 경우. void 연산자를 사용하여 브라우저가 페이지를 이동하지 않도록 할 수 있습니다:클릭하세요 2. 의도하지 않은 반환 값 방지: 때로는 반환 값을 가진 함수가 있을 수 있지만 부작용만 실행하고 반환 값이 필요하지 않은 경우가 있습니다. void 연산자를..
software engineering/javascript

What's difference || and ?? in javascript?

2023. 8. 27. 13:49

Logical - || (falsy) falsy 일 때만 오른쪽 값을 채택 nullish coalescing operator - ?? (undefined/null) null/undefined 일 때만 오른쪽을 채택 > 0 || 1 1 > 0 ?? 1 0 > null || 1 1 > null ?? 1 1 > "" || 1 1 > "" ?? 1 '' > undefined || 1 1 > undefined ?? 1 1 > NaN || 1 1 > NaN ?? 1 NaN https://medium.com/nerd-for-tech/the-difference-between-and-operators-in-javascript-nodejs-3696b0ce02ff The difference between || and ?? ..
software engineering/javascript

Warning: Received `true` for a non-boolean attribute in styled-components

2023. 8. 27. 13:29

Problem import styled from 'styled-components'; export interface TextDivProps { color?: string; size?: number; weight?: number; nowrap?: boolean; } export const TextDiv = styled.div` color: ${({ color }) => (color ? color : 'black')}; font-size: ${({ size }) => (size ? size : 14)}px; font-weight: ${({ weight }) => (weight ? weight : 400)}; white-space: ${({ nowrap }) => (nowrap ? 'nowrap' : 'nor..
software engineering/javascript

dependencies, devDependencies, peerDependencies

2023. 8. 1. 23:02

dependencies 프로덕션 환경 및 서비스 런타임에 사용되는 일반적인 종속성을 가진 라이브러리가 위치한다. 서비스 로직과 관련된 라이브러리, Lodash, React, 상태 관리 라이브러리(Recoil, Redux 등)이 있다. npm install 라이브러리 devDependencies 개발과정 혹은 테스트과정에서만 필요한 패키지 라이브러리의 예시로는 webpack, testing libraries, 타입 관련 라이브러리(typescript, @types/*), eslint, storybook 등이 있다. npm install --save-dev 라이브러리 npm install -D 라이브러리 peerDependencies 사용 중인 라이브러리에서 다른 라이브러리의 특정 버전에 종속성을 갖는 경우..
software engineering/javascript

함수형 자바스크립트 1

2023. 5. 20. 18:42

개요 이전에 함수형 프로그래밍에 대한 얕은 이해 만 갖고 있고 Closure, Currying, Compose 을 포함해서 함수형 패러다임에 개념에 대해 더 깊이 알고자 합니다. 또한 함수형 패러다임에서 Ramda.js 와 RxJS 를 어떻게 활용하는지 궁금증을 해결하고자 합니다. 사내 도서관에서 "FUNCTIONAL JAVASCRIPT 함수형 프로그래밍 모던 웹 개발에 충실한 실전 함수형 프로그래밍 안내서"라는 책을 찾았고, 이 책을 통해 함수형 프로그래밍에 대한 내용을 학습하고 정리하여 공유하고자 합니다 포스트 계획 포스트 계획: "FUNCTIONAL JAVASCRIPT 함수형 프로그래밍 모던 웹 개발에 충실한 실전 함수형 프로그래밍 안내서" 도서 내용을 학습하고 개념적인 내용을 정리하여 첫 번째 ..
software engineering/javascript