javascript
-
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 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..
-
React에서 조건부 렌더링을 사용하는 5가지 방법Tip 2022. 12. 1. 16:19
React로 개발을 하다 보면 조건부 랜더링을 사용하는 경우가 무척 많이 있습니다. 물론 그 복잡도가 낮을 경우라면 간단하게 삼항 연산자로 처리하면 되지만 복잡해지는 경우도 많기 때문에 이 글에서는 조건부 랜더링을 처리하는 다양한 방법에 대해 소개해 보겠습니다. 1. && 사용하기 조건의 값이 0, false, undefiend가 아닌 경우 render 해 주며, 가장 짧고 간결하게 사용할 수 있습니다. const Test: React.FC = ({ anyProp }) => { ... return ( ... {anyProp && This is Show!!} ... } 2. Ternary operator True or False 형식에서 많이 사용하며 아마 React를 사용할 때 가장 많이 사용하는 방법입..