# ECMA

koreanddinghwan

아침마다 medium에서 메일이 오는데,,, 흥미로운 메일이 왔습니다 최근 프로젝트에서 모두 JS를 사용하는터라, 관심이 갈 수 밖에 없었는데, 읽으면 좋은 내용인 것 같아 공부할겸 번역해보려고합니다. ES2023에서 도입되는 기능은 다음과 같습니다. Array가 수정되면 복사본을 반환 Array와 TypedArray는 array를 수정하기위한 sort/splice같은 많은 방법이 있습니다. 원본배열을 변환하기 싫다면 아래와같이 할 수 있습니다. 복사된 배열을 반환하는 비슷한 메서드는 다음과 같은 것들이 있습니다. 위의 메서드들은 아래와같이 사용될 수 있습니다. Array Find La

iouiou50

문제상황 nest.js는 기본적으로 class-validator를 사용하지만, 중첩객체를 사용할 때에 번거로움에서의 문제가 있다. 위 예시는 chatgpt가 고맙게도 생성해 주었다. User라는 Dto클래스에서 Address라는 객체타입의 데이터를 표현해야 할 때 위 예시처럼 또 클래스를 선언하고 해야하는 개인적으로 아주 불편한 상황을 마주했다. 이를 해결하고자 원래 알고있던 입력검증 패키지였던 joi / zod / io-ts 중 nestjs-zod라이브러리를 찾았다. nestjs-zod 아래와 같이 사용하자 아주 기가막히다. openapi(swagger) 이 기똥찬친구는 class-validator처럼 swagger page도 작성해준다. 맨 뒤에 schema들 맨 마지막에 .describe('...') 메서드를 추가하자. 그리고 main.ts에가서 아래의 메서드를 추가해주자 이렇게하면 http://localhost:3000/swagge

wns450

올해 들어서 자바스크립트는 새로운 문법이 추가되었다. 노마드코더 영상으로 접하게 되었고 있는 내용들을 정리하는 것이 목적이다. 방향성은 예측 가능하고 버그를 줄이는 방향이다. 이는 유지 관리에 도움을 준다. mutation한 값들은 경우의 수를 늘리고 혼란을 야기한다. 먼저 reverse를 보면 을 하면 결과로 이 나온다. 왜냐하면 reverse는 mutation하여서 기존(원본)의 배열을 바꾸고, 참조 주소를 그대로 반환한다. 그래서 x랑 y와 이어지게 된다. 이러한 경우의 수가 생기게되면 앞에서 말했듯이 혼란을 야기하기 떄문에, 많은 프로그래밍 언어에서 뮤테이션을 금지하거나 권하지 않는다. 그래서 이러한 해결책으로 권장하는 방법은 원본의 복사본을 만들고 이를 수정하는 방식을 권장한다. (알고리즘에서도 원본을 수정하는 것보다 새로운 변수에 할당하는 것을 권장한다.) React에서도 상태를 변경하기보다는 새로

imim

발단: Chrome 브라우저 90.x 버전에서 at() 메서드 오류 발생 🔼 JavaScript built-in: at | Can I use 🔼 [at() | MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Strin

composite

Astro 2.0이 출시되었지만 한국에서는 뭐 언제나 그랬듯이 뻔하게 관심이 그다지... 없는 참 삭막한 프론트엔드 분위기라고 하고 싶지만 그러면 니네들 기분 상할 테니 이미 말해버렸지만 할수없지 에라 모르겠다. 윗글 뭐냐고? 미리보기용 글이다. 벨로그는 요약으로 낚시할 수 있어서 좋네. 일단 내가 내 홈페이지(http://comne.kr)를 Astro로 만들었다. 그리고 쌩 react나 vue로 만든 페이지와 내 홈페이지를 비교해 보았다. 쌩 react나 vue로 소스보기 하면 뭔 껍다구만 나오냐 하지만, Astro로 만든 홈페이지는 컨텐츠를 볼 수 있다. 그렇다고 react나 vue 개발자들, 굳이 멀리갈 필요도 없다. SSG를 지원하는 react 및 vue 기반 프레임워크를 써도 같은 효과를 누릴 수 있다. 그래. 이제 본론으로 가야지. 아일랜드 아키텍쳐에 대해 들은 사람만

composite

보통 우린 뭔가 자바스크립트 실행 상황을 알고싶을때, console.log 메소드를 실행하고 있다. 어자피 브라우저에서 어떤 객체를 넣든 객체 상황에 맞게 예쁘게 출력해주기 때문에 별 탈은 없다. 하지만 콘솔에 찍는 아주 유용한 메소드들이 존재하지만, 이를 모르는 이가 많다. 지금 내가 하고 있는 이 프로젝트에서도 그런 모습을 엿볼 수 있었는데, console.log 함수를 빈 함수로 치환하여 사용을 막은 코드가 있는데... 그것만 막았더라... 에휴... 할많하않. 어쨌든, 오늘은 MDN에서 일일이 찾는것보다 더 편하게 내가 알려주도록 하겠다. 프론트엔드 개발자들, 이거 필독 알제? consolelevel 왠만한 언어에 로깅 개념이나 프로젝트를 써봤다면 알 것이다. JS에서 제공하는 로그 레벨은 아래와 같다. `debug

bbatto5302

지난 포스팅에서는 2016 ~ 2019에 나온 새로운 메서드들에 대해서 알아봤다. 이어서 2020 ~ 2021에 나온 메서드, 새로운 개념에 대해 한번 알아보자 ⭐️ ES2020 💡 BigInt BigInt는 Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1 보다 큰 정수를 표현할 수 있는 내장 객체이다. BigInt는 정수 리터럴의 뒤에 n 을 붙이거나 (10n) 함수 BigInt()를 호출해 생성 할 수 있다. BigInt 와 Number 차이점 BigInt는 내장 Math객체의 메서드와 함께 사용할 수 없다. 연산에서 Number와 혼합해 사용할 수 없다. 따라서, 먼저 같은 자료형으로 변환해야 한다. BigInt에서 Number로 변환시 정확성을 잃을 수 있으니 주의하자 💡 Dynamic import ES 2020부

bbatto5302

ES6 이후로 프론트엔드는 다양한 변화를 겪어왔다고 한다. 하지만 도대체 어떤 변화가 있었기에 그런말이 나오는지에 대해 한번 알아보자 ! ⭐️ ES2016 💡 Array.prototype.includes() includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별한다. 반환값은 boolean 💡 지수 연산자 Math.pow() ⭐️ ES2017 ES2017에는 우리가 잘 알고 있는 async/await 등 많은 기능이 추가 되었다. 그래서 이를 제외하고 나머지 어떤 기능이 나왔는지에 대해 알아보자 💡 문자열 패딩 > String.prototye.padStart(), String.prototype.padEnd() padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. 채워 넣기는 대상 문자열의 시작(좌측) 부터

hiak

JavaScript의 ES란? ECMA 스크립트란 ECMA이라는 기관이 만든 Script 언어입니다. ECMA-262 규격에 의해 표준화된 자바스크립트를 의미하는 단어이다. ECMA라는 기관은 정보 통신 기술 및 전자 제품을 위한 국제 표준 기구로 JSON, C++, C# 등 여러 표준을 제정하고 있으며, ECMAScript의 언어 규격인 ECMA-262 역시 그 중 하나이다. 결론적으로 자바스크립트가 ECMAScript인 것은 아니고, ECMA규격을 따른다. > ES5/ES6 문법 차이 ES6, ES7 등 ES+숫자형시으로 표기하는 단어는, ECMAScript가 배포된 버전을 의미하며, 배포된 연도에 따라 ES6 = ECMA 2015 라고 표기 할 수 있다. ES6는 과거 프로그래밍 언어로써 부족한 점이 많았던 자바스크립트의 문제점을 해결하거나 보완 할 수 있는 해결책이 이 ES6 버전에서 대거 등장했다. 우리가 지금 얘기하는 모던 자바스크립트의 큰 틀

wngud4950

[ES6] Iterable, Iterator에 대하여 제너레이터(Generator)란? 일반적인 함수는 하나의 값을 반환하거나 반환하지 않는다. 제너레이터는 여러 개의 값을 필요에 따라 하나씩 반환(yield)할 수 있다. 제너레이터와 이터러블 객체를 함께 사용하면 데이터 스트림을 만들 수 있다. 제너레이터 함수는 일반 함수와 동작 방식이 다른데 제너레이터 함수를 호출하면 코드가 실행되지 않고, 대신 실행을 처리하는 특별 객체인 제너레이터 객체가 반환된다. yield, next 제너레이터는 yield라는 생소한 단어가 존재한다. 이는 제너레이터 함수의 실행을 일시적으로 정지시키며, 뒤에 오는 표현 식은 제너레이터의 caller에게 반환되는데 일반 함수의 return과 매우 유사하다

wngud4950

ES6부터 도입된 Iterable, Iterator 개념은 Javascript를 사용한다면 꼭 알아야할 개념이 되었다. 나도 단순히 반복할 수 있는 객체에 정의되어있는 규약이라고만 알고 있었는데 Array, Map, Set 뿐만 아니라 String도 Iterable이라고 한다. 이번 기회에 제대로 이해하기 위해 정리하게 되었다. Iterable & Iteration protocol이란? Iterable protocol은 for..of구조와 같이 어떠한 value들이 loop 되는 것과 같은 iteration 동작을 정의하거나 사용자 정의하는 것을 허용하는 것을 말한다. String,Array,Map, Set과 같은 특정한 타입들은 기본적으로 iteration 동작이 가능한 built-in iterables이다. Iterable하기 위해선 @@Iterator 메소드를 구현해야하는데 이 말인

wngud4950

ES2021 String.replaceAll() 기존에는 전역으로 string값을 수정하기 위해선 replace에 g(global) 옵션을 사용해야만 했는데 replaceAll로 간편하게 처리할 수 있게 되었다. Promise.any() Promise.any()는 iterable한 Promise들을 인자로 받아 첫 번째로 해결된 Promise가 생기면 바로 반환하는 메소드다. 모든 Promise가 reject 될 시에는 AggregateError가 발생한다.

wngud4950

ES2016 ~ 2017 정리에 이어서 2018 ~ 2020까지도 정리해보려고 한다. Dev.white님의 글이 잘 정리되어있어 참고하여 작성했다. ES2018 Rest / Spread Properties 기존에 배열에서 사용하던 rest/spread를 객체에서도 사용 가능하게 되었다. 배열에 있는 것은 적극적으로 썼지만 객체에서는 낯설게 느껴져 잘 쓰지 않았는데 이번 기회에 손에 익혀야겠다고 다시 다짐을! 복사 시 속성이 중복될 경우 가장 마지막에 들어온 속성으로 덮어씌워진다! Promise.finally() Promise 사용 시 then, catch 말고도 종료 시 사용가능한 finally

wngud4950

ES2015에서는 major 업데이트라 할만한 수 많은 기능 업데이트 되었지만 이후 연마다 올라온 ECMA 버전에서는 그렇게 많은 기능이 추가되지 않아서 최근에 나온 2022까지 한 번 정리 해보려고 한다. 이 중에 이미 쓰고 있는 것도 있지만 없는 것이 훨씬 더 많아 다시 공부하고 복습하는 장이 되지 않을까 싶다..! ES2016 Array Includes 배열에서 includes 메서드를 사용하여 요소의 포함여부를 검색할 수 있게 되었다. array.includes(searchElement, [fromIdex])로 사용 가능하며 불리언 값으로 리턴해준다. 참고로 index 자리에 -를 넣으면 배열의 길이에서 -하는 것부터 시작하니 참고하자 [Exponetiation Oper

composite

일단 나는 대용량 업로드, 다운로드, 읽기 업무를 뒤돌아보니 꽤 많이 했었다. 하지만 SI/SM 에서는 최신 기술 더럽게 배척하다 보니 지금같이 뛰어나게 해결 가능한 웹 기술들은... 아니 필요하다면서 최신 기술 못쓰게 브라우저 옛버전으로 박아버리는 클라쓰 어디 안가고. 하지만, 그렇다고 내가 가만히 있지는 않는다, 내가 순수 브라우저로 대용량 파일 처리하는 시리즈를 집필할 테니, 실무에 자스롤 고생하는 여러분들에게 도움이 되기 바란... 다나 뭐래나... 준비물 fetch() (또는 fetch 기능을 제공하는 라이브러리, ky 같은 것들) TextDecoderStream [TransformStream](https://developer.

dding_yull

ECMAscript (2016년 6버전 중요) 각 브라우저에서 ECMAscript의 문법을 통해 작성하면 동일하게 작동하게 만들 수 있는 하나의 규칙을 의미한다 각 브라우저마다 '엔진'을 통해 작동한다 그 '엔진'을 ECMAScript를 통해 규격문을 통해 각 엔진들이 구현되어 작동할 수 있도록 되어있다 이전 브라우저의 경우에는 문법지원이 안될 수 있으니 사이트에서 확인해보는 것을 추천한다 (ECMAScript사이트에서 확인 가능합니다) 때문에! 자바스크립트 엔진이 있는 곳이라면 어느곳에서든 작동할 수 있다는 자바스크립트의 특징이 있다 위키피디아 링크를 통해 더 자세한 사항에 대해 확인해보실 수 있습니다^^ https://ko.wikipedia.org/wi

blacktoast

promise란 es6에서 비동기 처리를 위한 패턴으로 promise 를 도입했다, 왜 생겼을까? 그 이유는 전통적인 콜백 패턴의 단점을 보완하기 위해서이다. 기존 콜백 패턴 위 와 같은 코드를 살펴보자. 해당 코드를 실행 했을때 log에 res값이 찍힐까? 그렇지 않다, 왜냐하면 onload가 비동기 적으로 실행이 되기 때문이다. 어떻게 실행되는지 순서를 살펴보자. get 함수가 실행되고 new XMLHttpRequest() 후 xhr로 open,send함수실행 xhr.onload로 이벤트 핸들러를 바인딩 하고 종료하게 된다. get함수에는 return값이 없어서 undefined값이 반환되고 그 값이 출력된다. 만약 return 'test' 같은 리턴값을 주면 그값이 로그에 찍힌다. 그렇다면 어떻게 xhr.response를 받을수 있을까? 콜백 함수를 넘기면 된다. 이렇게 하면 이제 서버로 부터 얻어온 값을 받을수 있지만, 만약

mh-yeo

ES6? >ECMAScript 2015 was the second major revision to JavaScript. ECMAScript 2015 is also known as ES6 and ECMAScript 6. This chapter describes the most important features of ES6. ES6란 2015년에 배포된 자바스크립트의 2번째 major 개정판 이다. 자바스크립트가 개정되면서 어떤점들이 바뀌었거나 추가되었는지 살펴보기전에 EMCA란 무엇인지 살펴보자 ECMA? >Ecma International (formally European Computer Manufacturers Association) is a non-profit organization that develops standards in computer hardware, communications, and programming languages. ECMA란 European

himprover

들어가며 > "모던 자바 스크립트를 하세요!😎", "모던 자바 스크립트는 필수 입니다!🤭" 자바 스크립트를 공부하고 사용하다보면 반드시 보게 되는 단어 '모던 자바스크립트' 이다. 그럼 아마 애써 무시하던 사람들은 속으로 이런 생각들을 하게 된다. > 아니 대체 모던 자바스크립트가 뭔데요..😂 이번에는 항상 귀에 맴돌던 모던 자바 스크립트를 알아보려 한다. 이제 당당히 "저 그거 뭔지 알아요!" 할 수 있는 사람이 되어보자. 모던 자바 스크립트란 (이런거 아님) ECMAScript? JavaScript? 본격적으로 모던 자바 스크립트에 대해 알아보기 전

grasshopperbears

이 글은 How to Read the ECMAScript Specification(Timothy Gu)을 번역한 것입니다. 원문은 다음 링크에서 찾아보실 수 있습니다. 번역이 완벽하지 않을 수 있습니다. 혹시 잘못된 부분이 있다면 댓글이나 이메일로 알려주세요! 분량이 많아 부분별로 나눠서 올릴 예정입니다 :) 이번 글은 2장 Runtime semantics 중 1절부터 3절에 해당하는 부분입니다. 2. 런타임 semantics 언어와 API의 런타임 semantics는 스펙에서 가장 큰 부분을 차지하며서 동시에 많은 사람들이 어려워하는 부분이기도 합니다. 전반적으로 스펙에서 이 부분들을 읽는 것은 꽤 간단합니다. 하지만 스펙에는 처음 시작한 사람(최소한 저에게는)이 읽기에는 꽤 별로인 표현들이 많습니다. 이제부터 이런 컨벤션 중 일부를 설명하고 평소 워크플로에서 이런 것들이 어떻게 작동하는지 설명해보도