언어/Javascript
-
[js/ts] 한글 마지막 단어의 받침 유무를 판단하여 조사 붙이기언어/Javascript 2024. 7. 25. 15:54
컴포넌트를 만들 때, props로 text를 넘겨주고는 한다.이 때, 한글은 text의 받침 유무에 따라 조사가 달라지는데,아래와 같이 코드를 작성하여 받침이 있으면 true 없으면 false를 리턴하도록 하여 조사를 붙여줄 수 있다. export const hasLastConsonantLetter = (text: string): boolean => { return (text.charCodeAt(text.length - 1) - "가".charCodeAt(0)) % 28 !== 0;};
-
[라이브러리] moment 자주 사용하는 기능 정리언어/Javascript 2023. 6. 16. 10:41
📌 날짜 형식 변경하기 moment().format() -> moment 객체를 원하는 날짜/시간 형태로 나타냄 -> string으로 리턴 📌 날짜/시간 추출하기 moment().hours() -> second/seconds, month/months, year/years 등등.. 사용가능 -> number 로 리턴 📌 Moment 객체의 처음 또는 마지막 날짜/시간 구하기 moment().startOf() 또는 moment().endOf() -> moment 객체의 처음 또는 마지막 날짜/시간을 구할 수 있음 -> moment 객체로 리턴 -> 사용 예시 moment("2023-06-16").startOf("month").format("DD"); // 30 moment().daysInMonth() -> ..
-
[javascript] 호이스팅에 대한 이해언어/Javascript 2022. 9. 9. 00:44
호이스팅이란? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당 하는 것을 뜻하고, 이 때 선언과 초기화를 분리하여, 선언만 코드의 최상단으로 옮겨집니다. 이는 소스코드 평가과정에서 선언한 변수와 함수를 실행 컨텍스트가 관리하는 환경에 등록하는 것으로 호이스팅이 된 선언들은 실행환경에서 변수나 함수를 만날 시에 실행 컨텍스트가 관리하는 환경에서 검색하여 참조됩니다. var는 호이스팅시 undefined로 변수를 초기화하고, let과 const는 변수를 초기화하지 않으며 이러한 이유로 var는 초기화 전에 실행하는 코드가 나타났을 때 undefined를 출력하고, let과 const는 예외가 발생하는 것입니다. 참고 https://developer.mozilla.org/ko/docs/Gloss..
-
[javascript] HTML 태그의 텍스트를 가져오는 2가지 방법언어/Javascript 2022. 8. 16. 02:15
1. innerText 또는 textContent 아래와 같은 HTML 태그가 있을 때 할일 1 할일 2 할일 3 클릭한 목록 아이템의 텍스트(할일 1, 할일 2 .. )를 가져와야 할 때, 아래와 같이 innerText를 통해 해당 텍스트를 가져오거나, textContent를 이용해서 가져올 수 있다. 할일 1 할일 2 할일 3 2. firstChild의 textContent 또는 nodeValue 1번의 방법 만으로는 해결이 되지 않는 문제가 있었다. 예를 들어 li 안에 다른 태그 요소가 있고, 그 태그에도 텍스트가 있을 때이다. 할일 1삭제 할일 2삭제 할일 3삭제 위 코드와 같이 각 li에 삭제라는 텍스트를 가진 버튼이 있을 때에 각 항목을 click을 하면 왼쪽과 같이 p태그에는 '할일 2삭제..
-
[Javascript] this 에 대해 알아보기언어/Javascript 2022. 7. 7. 16:54
이 글은 모던 자바스크립트의 Deep Dive에 나온 this를 공부하며 이해하기 위해 구성을 조금 편집하여 옮긴 내용입니다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 생성자 함수를 정의하는 시점에는 아직 인스턴스를 생성하기 이전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다. 따라서 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요하다. 이를 위해 자바스크립트는 this라는 특수한 식별자를 제공한다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변..
-
[Javascript] 이벤트 루프 - 런타임 개념언어/Javascript 2022. 6. 22. 18:21
Javascript의 런타임 모델은 이벤트 루프에 기반하고 있다 Stack (스택) - 선입후출 함수의 호출들은 '프레임' 스택을 형성 한다. '프레임'에는 함수의 인수와 지역변수가 포함되어 있다. function foo(b) { let a = 10 return a + b + 11 } function bar(x) { let y = 3 return foo(x * y) } const baz = bar(7) // 42를 baz에 할당 실행 순서 1. bar를 호출할 때, bar 함수의 프레임(A 프레임)이 생성된다. 2. bar가 foo를 호출할 때, foo 함수의 프레임(B 프레임)이 A 프레임의 위로 푸시 된다. 3. foo가 반환하면, B 프레임을 스택 밖으로 꺼낸다. 4. bar가 반환하면 A 프레임을..
-
[Regex] 정규표현식 - 문자 클래스언어/Javascript 2022. 6. 16. 22:24
정규표현식에서 문자 클래스를 사용하면 좀 더 깔끔한 정규표현식을 작성할 수 있다 위키 백과의 정규표현식에 보면 아래와 같이 클래스를 정의하고 있다. Javascript는 펄의 정규식과 비슷한 문법을 채택하고 있다고 한다 즉 아래의 클래스들을 기본으로 사용하는 것 \w , \W , \b , \d , \D , \s , \S 이 클래스들에 대한 설명의 위 표에서 볼 수 있다 그 중에서도 다른 클래스들은 그래도 조금 사용해 봤는데 \b 는 조금 낯설었고, 마침 mdn web docs에 예시가 있어서 테스트 해본 것을 가져왔다. const regexpWords = /\b\w+\b/g; const text = 'A quick fox'; console.log(text.match(regexpWords)); // out..
-
[Javascript] 문자열 함수언어/Javascript 2022. 6. 8. 22:53
문자열. 말 그대로 '문자의 나열'을 뜻한다 문자열에서 개개의 문자에 접근할 수 있는 방법 두가지 const str = "cat" console.log(str.charAt(1)); // output => "a" console.log(str[1]); // output => "a" toLowerCase : 영어를 모두 소문자로 변환해준다 ( ↔ toUpperCase : 대문자로 변환) const str = "ABCDabcd"; console.log(str.toLowerCase()); // output => "abcdabcd" startsWith와 endsWith : 문자열의 앞 또는 뒤에 내가 찾는 문자열이 있는지 여부를 알려준다 (boolean) const str = "abcdefghijklmnopqrst..