react
-
Javascript ES12 문법정리JS & TS 2023. 12. 1. 16:49
1. Numeric Separators ES12에서는 숫자 구분자를 도입하여 숫자 리터럴 간에 밑줄(_)을 삽입하여 가독성을 향상할 수 있습니다. 이 기능은 코드 내에서 큰 숫자 값을 더 읽기 쉽게 만들어줍니다. 숫자 구분자 도입으로 코드 가독성이 크게 향상되며, 특히 많은 숫자 상수나 값을 다룰 때 유용합니다. // before const billion = 1000000000; const trillion = 1000000000000; // ES12 const billion = 1_000_000_000; const trillion = 1_000_000_000_000; 2. Logical Assignment Operators ES12에서는 논리 할당 연산자(||=, &&=,??=)를 도입하여 논리 연산과 ..
-
Javascript ES11 문법정리JS & TS 2023. 11. 24. 17:35
ES11이라고도 알려진 ECMAScript 2020은 JavaScript 언어에 몇 가지 새로운 기능과 개선 사항을 도입했습니다. 개인적으로 정말 좋아하는 기능들이 생긴 버전이라 기억에 남고 지금도 자주 사용하는 기능들이 많은 버전입니다. 1. Optional Chaining Operator (?.) 선택적 연결 연산자(?.)는 각 수준의 존재를 명시적으로 확인할 필요 없이 객체의 중첩 속성에 액세스 하는 간결한 방법을 제공합니다. 널('null' 또는 '정의되지 않음') 값이 발견되면 평가가 중단됩니다. // 이전 if (object && object.property && object.property.nestedProperty) { const value = object.property.nestedPro..
-
Javascript ES10 문법정리JS & TS 2023. 11. 8. 16:48
ECMAScript 2019 (ES10)은 개인적으로 정말 많이 사용하는 flatMap이나 trimStart, trimEnd와 같은 내용이 업데이트된 버전입니다. IE를 제외하고 대부분의 브라우저가 지원하기 때문에 지금도 쉽게 사용해 볼 수 있습니다. 1. Array.flat() 및 Array.flatMap() 이전: 중첩된 배열을 결합하고 펼치는 것은 종종 사용자 정의 함수나 루프가 필요했습니다. 이후: flat() 및 flatMap()을 사용하면 이 작업을 간단하게 수행할 수 있습니다. // 이전 const nestedArray = [1, [2, [3, 4], 5]]; const flattenedArray = [].concat.apply([], nestedArray); // flattenedArray..
-
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() 메서..
-
KeystoneJS로 간단하게 Admin페이지와 Headless CMS 만들기Tip 2023. 9. 6. 18:09
KeystoneJS는 GraphQL을 기반으로 하는 CMS(Content Management System) 프레임워크입니다. React, Node.js, GraphQL을 기반으로 하며, GraphQL API를 통해 데이터를 관리하고, 웹사이트와 모바일 앱을 개발할 수 있습니다. 1. KeystoneJS의 주요 특징 GraphQL 기반의 API: KeystoneJS는 GraphQL을 기반으로 하는 API를 제공합니다. GraphQL은 구조화된 데이터를 효율적으로 조회할 수 있는 API 표준입니다. React 기반의 UI: KeystoneJS는 React를 기반으로 하는 UI를 제공합니다. React는 빠르고 유연한 UI 프레임워크입니다. Node.js 기반의 백엔드: KeystoneJS는 Node.js를 ..