728x90 Javascript9 npm 느린 건 알겠는데, 그럼 뭘 써야 할까? 프론트엔드 개발하면서 패키지 매니저 없이 개발하는 건 거의 불가능하다....가능은 하지만 굳이!Node.js 환경에서는 기본적으로 npm을 지원하고, 대부분의 라이브러리 가이드도 npm install로 시작하니까 나도 자연스럽게 npm만 써왔다. 그런데 어느 날부터인가 주변에서 이런 얘기를 듣기 시작했다.yarn이 더 빨라서 yarn 써요.pnpm도 좋던데요? 나도 yarn이 빠르다는 건 체감했지만, 도대체 왜 빠른 건지그리고 그렇다면 npm은 왜 느린 건지 궁금해졌다. 한 번은 정리하고 넘어가야 할 것 같아서 이번 기회에 npm, yarn, pnpm을 써보며 느낀 점과 각각의 장단점을 정리해봄npm이 느린 이유대표적으로 다음 세 가지가 있다.패키지를 순차적으로 설치함→ 설치할 때 병렬로 하지 않고 하나.. 2025. 4. 30. 스크롤 이벤트 최적화 하기 : 쓰로틀링(Throttling), Intersection Observer 구동방식 스크롤 이벤트 개선해보자!!거의 3년전에 만든 사이트라 문제점이 아주 많다! 현재 문제는 스크롤이 이동할때마다 함수를 호출하고 있어 호출이 수백, 수천번이 일어난다단지 세번 스크롤을 내린것 뿐인데…지금이야 간단한 로직으로 스크롤이벤트를 구성하고 있으니 괜찮았지만조금이라도 계산하는 로직을 넣는 순간 굉장히 버벅거릴 것그럼 어떻게 최적화를 하느냐 대표적인 이벤트 최적화 방식인 쓰로틀링(Throttling)과 디바운싱(Debouncing)현재는 스크롤이벤트를 처리하고 있으므로이벤트가 끝나고 실행되는 디바운싱보다는 일정 간격으로 호출을 제한하는 쓰로틀링이 더 적합하다 쓰로틀링 구현은 매우쉽다!lodash를 사용하지 않는다면 간단한 프로젝트에서는 자바스크립트로 구현하는 것을 추천lodash가 은근 사이즈가 크다 .. 2025. 2. 13. 기존 프로젝트에서 vite add시 발생하는 에러정리 기존 정적 리액트 프로젝트에 vite를 추가하려고 보니 오래된 프로젝트라 그런지 자잘한 오류들이 생김 1. node 에러vite@6.0.11: The engine "node" is incompatible with this module. Expected version "^18.0.0 || ^20.0.0 || >=22.0.0". Got "21.6.2" error Found incompatible module.node 최신버전으로 업데이트 필요 21.6.2는 왜 지원안해주는데요...ㅠ최신 버전인 23으로 업데이트 하니까 설치 잘됨 2. node-sass이건 vite관련은 아니긴하지만.. 더이상 node-sass 는 지원하지않음기존 node-sass 삭제 후 sass-embedded로 설치 3. index 못 .. 2025. 2. 3. Javascript - nullish coalescing operator( 널 병합 연산자 ) ?? : null 또는 undefined를 평가 하고 싶을 때 사용 || : falsy 값을 평가하고 싶을 때 사용 const foo = null ?? 'default string'; console.log(foo); // Expected output: "default string" // null값이므로 오른쪽 표현식을 리턴함 const baz = 0 ?? 42; console.log(baz); // Expected output: 0 // 0은 falsy값으로 null 이나 undefined와 다르기때문에 42가 출력되지않음 const height = 0; let div_height = height || 10; console.log(div_height) // output: 10 // 0은 falsy 값이기.. 2023. 1. 22. Javascript - Truthy & Falsy 자바스크립트는 타입이 굉장히 느슨한 언어이다. 그렇기 때문에 모든 값은 true , false로 형변환이 될 수 있는 값을 확인 할 수 있다 이것은 truty, falsy 값이라고 말한다. 빈 객체나 빈 배열을 종종 falsy값이라고 착각하는 경우가 있다. 빈 문자열은 falsy지만 빈 객체, 빈배열은 truthy 값이므로 주의하자 Truthy 값 true: Boolean 타입의 true {} : 빈객체 [] : 빈 배열 0과 -0을 제외한 숫자 (42, 3.14, -3.14...) 문자열("false") Infinity: 무한값 Date 객체 Truthy 값이 아닌 모든 값은 Falsy 값이다. Falsy 값 false: Boolean 타입의 false null undefined 0, -0, 0n : .. 2023. 1. 20. JWT - invalid expiresIn option for string payload jwt 토큰 만료 시간을 설정해줄 일이 생겨서 expiresIn 을 추가했더니 해당 에러가 갑자기 발생 invalid expiresIn option for string payload 다른 jwt는 유효시간이 잘만 되는데 왜 이번 코드는 안되나 검색해보니 payload 가 객체여야 한다는 것이였다. 기존 문제였던 코드는 담는 데이터가 1개 밖에 없어서 string 값으로 보냈던게 문제였다. const token = jwt.sign(content, SECRET_KEY, { expiresIn:'1h', issuer: 'hj' }) payload 부분을 객체로 바꾸니 바로 해결! const payload = { content } const token = jwt.sign(payload, SECRET_KEY, { .. 2022. 12. 22. 이전 1 2 다음 728x90 반응형
