My Boundary As Much As I Experienced

숫자에 세 자리 마다 쉼표를 찍어야 할때가 있다.이럴 때 원래 string으로 만들고, .reverse()하여 세 자리마다 슬라이스해서 ','으로 join()으로 붙이는 함수를 만들어서 썼었는데그냥 toLocaleString()을 하거나 정규표현식을 쓰는게 더 간편하다는 것을 깨달았다. toLocaleString 사용const number = 1234567.89;const formattedNumber = number.toLocaleString();console.log(formattedNumber); // "1,234,567.89"// 옵션 없이 사용 (기본 설정)console.log(number.toLocaleString()); // "1,234,567.89"// 소수점 이하 자릿수 지정console.l..

Date 객체는 여러 가지 방법으로 생성할 수 있으며 활용 방법을 알아두면 두고두고 쓸 때가 많다.대충 필요할 때 구글링해서 해결하고 있었는데 한 번 정리해서 장기기억으로 남겨두려고 한다.몰랐던 사용법도 꽤 되는데.. 재밌네  - 현재 날짜와 시간으로 생성:현재의 날짜와 시간을 가진 Date 객체를 생성.let now = new Date();    - 특정 날짜와 시간으로 생성:지정된 날짜와 시간 문자열을 기반으로 Date 객체를 생성.let specificDate = new Date('2024-06-15T12:00:00');   - 연도, 월, 일, 시, 분, 초, 밀리초로 생성:월은 0부터 시작하므로 5는 6월을 의미한다.let detailedDate = new Date(2024, 5, 15, 12,..

오늘 알게 됐는데, { [Date.now()]: { text: "" } } 처럼 Date.Now()같이 동적인 값을 객체의 key로 설정하고 싶을 때 대괄호로 묶는다. TypeScript에서 객체의 타입 지정해줄 때 { [key]: value }같은 형식으로 하는게 TypeScript 문법인 줄 알았는데 ES6 문법이었다🫢 사용 사례1. Date.now()처럼 겹칠 수 없는 id값을 동적으로 key값으로 부여할 때 const addToDo = (text: string) => { const item = { [Date.now()]: text }; setToDo({...toDo, item}); } 사용 사례2. 인덱스 같은 부분을 지속적으로 증가시켜 key로 할당할 때 const prefix = 'prop';..

들어가기 전 토막 상식 보통 클래스 안의 정보들은 프로퍼티가 아니라 필드라고 한다. 계속 프로퍼티라 부르고 있었는데 클래스 문법 복습하면서 다시 알게 되었다. _가 붙는 필드는 무엇인가? class Counter { constructor() { this._count = 0; // _count는 내부적으로 사용되는 프로퍼티 } increment() { this._count++; } getCount() { return this._count; } } const counter = new Counter(); counter.increment(); console.log(counter.getCount()); // 외부에서는 getCount를 통해서만 _count에 접근할 수 있음 JavaScript 클래스 문법에서 _..

*본 내용은 모던 자바스크립트 딥다이브의 class부분을 요약정리한 내용입니다. * (*텍스트)는 제가 주석을 단 부분입니다. 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어다. 비록 다른 객체지향 언어와의 차이점에 대한 논쟁이 있긴 하지만 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. var person = (function(){ // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person...

자바스크립트의 Set 자료구조는 한 마디로 '중복을 허용하지 않는 배열'이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일 값 중복 가능하다. 불가능하다. 요소 순서에 의미가 있다. (index) 있다. 없다. 인덱스로 요소에 접근 가능하다. 가능하다. 불가능하다. 아래는 Set 객체의 기본적인 사용법(생성, 추가, 삭제, 특정 인자 존재 여부 체크, 사이즈 체크 방법)들이다. Set 객체의 생성 아래와 같이 생성자의 인자로 아무 것도 넘기지 않으면 빈 세트가 만들어진다. const set = new Set(); // Set(0) {size: 0} 또한 아래와 같이 배열을 인수로 넘기면 배열에 담긴 값으로 세트가 만들어진다. const numSet = new S..

1. 전통적 방식의 routing (WEB 1.0) 1990년, 아날로그의 책처럼 일련의 순서대로 된 것이 아닌 가상의 공간에서 텍스트에 새로운 문서에 대한 링크가 존재하는 개념의 하이퍼텍스트가 탄생하였다. 그러나 이때의 web은 읽기 전용의 공간이며 뉴스나 간단한 홍보글, 카탈로그 등을 올리는 정도의 역할만 하였다. 정보 제공자와 사용자가 완전히 분리되어 있었고, 사용자가 정보를 생성하는 것은 불가능했다. 전통적 방식의 routing link tag(Service 등)을 클릭하면 href 어트리뷰트 값인 리소스 경로가 URL의 path에 추가되어 주소창에 나타나고 해당 리소스를 서버에 요청한다. Home Service About Home This is main page 이때 서버는 html로 화면을 표..

자바스크립트 파싱에 의한 DOM 생성이 중단되는 문제를 근본적으로 해결하기 위해 HTML5부터 script 태그에 async와 defer 어트리뷰트가 추가되었다. async와 defer 어트리뷰트는 다음과 같이 src 어트리뷰트를 통해 외부 자바스크립트 파일을 로드하는 경우에만 사용할 수 있다. 즉, src 어트리뷰트가 없는 인라인 자바스크립트에는 사용할 수 없다. async와 defer 어트리뷰트를 사용하면 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 하지만 자바스크립트의 실행 시점에 차이가 있다. async 어트리뷰트 html파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 단, 자바스크립트의 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 ..

ES6에서 도입된 스프레드 문법 ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. // ...[1,2,3]은 [1,2,3]을 개별 요소로 분리한다. (-> 1, 2, 3) console.log(...[1,2,3]) // 문자열은 이터러블이다. console.log(..."hello") // h e l l o // Map과 Set은 이터러블이다. console.log(... new Map([[ "a", 2 ], [ "b" , 2 ]])); // [ "a", 2 ], [ "b" , 2 ] console.log(... new Map([1,2,3]); // 1 2 3 // 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다. console.log(... {a: ..