js
-
Next.js 14버전 정리Next.js 2023. 11. 1. 16:18
Next.js 13 버전 이후로 호불호가 늘어나는 느낌이 강한 Next.js의 14 버전이 출시되었습니다. 14 버전은 13 버전 때처럼 엄청난 변화내용이라기보다는 13.5 버전의 뒤이은 13.6 버전에 가깝다는 느낌이 드는 업데이트였습니다. 1. Next.js 컴파일러: Turbocharged 이제부터 Next.js는 개발 환경에서 빠른 성능을 제공하기 위해 Rust 기반 컴파일러 'Turbopack'를 사용합니다. 이로 인해 개발 서버의 시작 속도가 최대 53.3% 향상되고 Fast Refresh를 통한 코드 업데이트 속도도 최대 94.7% 향상되었습니다. 이는 특히 큰 애플리케이션 및 모듈 그래프에서 빠른 성능 향상을 의미하며, 'next dev --turbo'를 사용하면 보다 빠르고 안정적인 성능..
-
Javascript ES9 문법정리JS & TS 2023. 10. 16. 15:40
ES9(ECMAScript 2018)은 특별히 새로운 기능이 많이 추가되지는 않았지만 지금도 항상 사용하는 내용들이 포함된 버전입니다. 1. 비동기 반복 (Asynchronous Iteration) ES9에서는 비동기 반복이 가능하도록 for-await-of 루프가 추가되었습니다. 이를 통해 비동기 데이터를 간편하게 반복할 수 있습니다. // 이전 const asyncData = [asyncFunc1(), asyncFunc2(), asyncFunc3()]; Promise.all(asyncData) .then(results => { for (const result of results) { console.log(result); } }); // ES9 const asyncData = [asyncFunc1(),..
-
Javascript ES8 문법정리JS & TS 2023. 10. 6. 13:43
2017년에 출시된 ECMAScript 8 (ES8)은 언어에 중요한 향상 및 추가 사항을 가져왔습니다. 이전 ES7일 때 변경사항이 적었던 것이 이것을 위해서라는 생각이 들 정도로 지금도 많이 사용하는 중요한 문법들이 추가된 버전이라고 생각합니다. 1. Async/Await ES8은 async 및 await 키워드를 도입하여 자바스크립트에서 비동기 프로그래밍을 혁신적으로 개선했습니다. 이러한 기능은 프로미스(Promises) 작업을 더 직관적으로 처리하며 코드를 더 깨끗하고 가독성 있게 만듭니다. // 이전 fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { console.log(data); })..
-
Javascript ES7 문법정리JS & TS 2023. 9. 28. 10:18
JavaScript는 계속해서 진화하고 성장하는 언어입니다. ECMAScript 표준에 따른 여러 개정판 중 하나인 ES7(또는 ECMAScript 2016)은 이전 ES6의 대규모 업데이트와 다음에 소개할 ES8에 대한 준비를 위해 잠시 쉬어간다는 느낌이 드는 업데이입니다. 그렇기 때문에 ES7에서 추가된 업데이트 사항은 크게 2가지입니다. Array.prototype.includes 제곱 연산자(**) 1. Array.prototype.includes() ES7에서 가장 주목할 만한 변경 중 하나는 Array.prototype.includes() 메서드의 도입입니다. 이 메서드는 배열 내에서 특정 요소가 존재하는지를 판단하는 데 사용됩니다. 이전에는 Array.prototype.indexOf() 메서..
-
JavaScript에서 바로 사용하는 Tip 4가지Tip 2023. 8. 1. 15:20
1. Includes를 사용해 || 대체하기. ||는 JS를 활용한 개발을 하다 보면 정말 많이 사용하게 되는 없어서는 안 될 중요한 요소이다. 하지만 많은 것을 비교하는 상황이 된다면 오히려 코드의 가독성을 해치는 요소가 된다. 그럴 때 이 방법을 사용한다면 조금 더 가독성 좋게 사용할 수 있다. // ...other codes if ( isFirstLoading || isSecondLoading || isThirdLoading || isFourthLoading || isFifthLoading ) return 로딩 중... ; if ( [ isFirstLoading, isSecondLoading, isThirdLoading, isFourthLoading, isFifthLoading, ].includes..
-
NodeJS 프로젝트 라이브러리 최신버전 자동으로 업데이트 하기Tip 2022. 11. 12. 18:11
npm update 명령어로도 package.json의 dependencies을 업데이트할 수 있습니다. 하지만 npm-check-updates를 사용하면 peer dependencies를 제외하고 의존성을 훼손하지 않는 한도 내에서 최신 버전으로 업데이트를 진행할 수 있습니다. 그림 이제 간단한 사용법을 알아보겠습니다. 1. 설치 npm install -g npm-check-updates 2. 확인 $ ncu Checking package.json [====================] 5/5 100% eslint 7.32.0 → 8.0.0 prettier ^2.7.1 → ^3.0.0 svelte ^3.48.0 → ^3.51.0 typescript >3.0.0 → >4.0.0 untildify
-
'Window & typeof globalThis' 형식에 '*' 속성이 없습니다. ts(2339) 해결하기Tip 2022. 2. 8. 11:36
typescript를 하다 보면 많이 겪게 되는 에러로 kakao map이나 cypress처럼 기존 window에 없는 객체 값에 접근하게 될 경우 발생하는 에러이다. 이 에러의 경우 무척 간단하게 해결이 가능하다. 일단 root폴더에 임의의 선언 파일을 생성한다. // window.d.ts declare global { interface Window { Cypress: unknown; } } 위와 같이 선언을 하면 Cypress에 접근할 때 에러가 나는 것을 방지할 수 있다. 위의 예시는 간략하게 한 것이고 만약 type을 알고 있다면 해당 type으로 작성해 주면 더 탄탄한 선언이 가능해진다.
-
JS 유용한 Promise활용Tip 2022. 2. 3. 19:19
ES2015에서 Promise.all, Promise.race가 나온 뒤, ES2020에서 Promise.allsettled가 나왔다. 그리고 Promise.any가 새로 나왔다. 위 4가지를 간단하게 비교해보려 한다. Promise.all([success(), fail()]) // Error Promise.race([fail(), delay(5000)]) // Error Promise.allsettled([success(), fail()]) // success, Error Promise.any([delay(5000), fail()]) // delay 간단하게 비교한다면 위와 같다. 먼저 가장 먼저 나온 all, race에 대해 말하자면, 1. Promise.all Promise.all은 아무리 많은 양..