특정 텍스트 clipboard에 복사하기 : 사파리 환경은 또 다르다고

게임 이벤트 쿠폰을 입력하거나, 어떤 이벤트의 추천인을 입력하는 등의 다양한 이벤트가 있다.이때, 쿠폰 번호나 추천인 아이디 같은 특정 텍스를 버튼 하나만 눌러서 복사가 되도록 하는 기능이 있다.보기엔 간단해 보이는 이 기능을 실제로 어떻게 구현하는지 알아보자.  라떼는 execCommand였다 이거야기존에는 document.execCommand('copy')를 이용해서 특정 텍스트를 클립보드에 복사했다.여기서 볼 수 있는 execCommand 메서드는 선택된 요소에 대한 다양한 행동을 할 수 있게 해주는 메서드다.그래서 해당 메서드는 웹 에디터를 구현할 때 많이 쓰였다.해당 메서드에서 사용할 수 있는 여러 옵션 중 copy라는 옵션은 선택한 텍스트를 클립보드로 복사하게 해주는 옵션이다. function..

• format_list_bulleted Stack/JS
• · 2024. 12. 2.
• textsms

데이터 타입 | null과 undefined : 코어 자바스크립트 씹뜯맛즐 하기

지난 데이터 타입 포스팅에서 모든 것을 끝내려고 했지만 분량 조절 실패로두 번에 나눠서 데이터 타입을 맛보고 있다.과식하지 않고 적당히 나눠서 배부르게 맛보자.  null과 undefined지난 포스팅에서 null과 undefined도 기본형 데이터에 포함되는 것을 봤다.그렇다면 변하지 않는 값을 가지고 있다는 건 알겠는데,null과 undefined는 자바스크립트에서 '없다'라는 의미를 갖는다.둘 다 없는데 뭐가 차이가 있다는 걸까? 그걸 한번 알아보자. 아기들은 숨바꼭질 할 때 자신의 눈만 가리면 숨었다고 생각한다.부모의 입장에서 바라보면 분명 있는데 없다고 여긴다.부모가 우리 개발자라고 하면 아기가 변수라고 하면없다고 여기는 건 null, 정말 없는 건 undefined라고 할 수 있겠다. 조금 더..

• format_list_bulleted Stack/JS
• · 2024. 11. 21.
• textsms

데이터 타입 | 기본형과 참조형 : 코어 자바스크립트 씹뜯맛즐 하기

코어 자바스크립트를 씹뜯맛즐해 보는 시간이다.이미 널리고 널린 게 해당 책에 대한 정리 글이지만, 그걸 읽는다고 내 것이 되는 게 아니니나는 나만의 언어로, 방식으로 이해하며 정리하는 방법을 택했다.  데이터 타입의 종류기본형 : 숫자 (number), 문자 (string), 불리언 (boolean), null, undefined 등참조형 : 객체 (+ Map, WeakMap, Set, WeakSet), 배열, 함수, 날짜, 정규 표현식 등 자바스크립트의 데이터 타입은 위와 같이 분류할 수 있다.여기서 기본형과 참조형은 할당이나 연산 시 복제되는지, 아니면 참조되는지를 가지고 나누게 된다.엄밀하게 따지면 기본형과 참조형 모두 복제를 하지만, 복제하는 대상이 다르다. 위의 기준이 무슨 말인지 명확하게 이해..

• format_list_bulleted Stack/JS
• · 2024. 11. 20.
• textsms

This : 이거라며.. 왜 다르냐고

이번에 다뤄볼 주제는 악명 높은 This다.실제로도 자바스크립트 관련 면접 질문에서 This와 관련해 문제 형식으로 종종 나왔던 것을 볼 수 있는데,이게 대충 생각하면 딱 틀리기 좋은 주제라서 한번 정리해 보고자 한다.  초면은 아닌 거 같고, 누구시더라?This는 사실 내 글에서 처음 등장한 개념은 아니다.실행 컨텍스트에서 실행 컨텍스트의 구조를 설명할 때 잠깐 등장했다. (실행 컨텍스트 읽고 오기) 위의 사진은 내 글에서 발췌한 내용인데, 여기 실행컨텍스트의 구조 중3번째에 있는 ThisBinding이 this 식별자가 바라보고 있는 대상 객체를 의미한다고 적혀있다.여기서 바인딩은 식별자와 값을 연결하는 과정을 뜻하는데,ThisBinding을 좀 더 쉽게 설명하면,this라는 친구한테 '너가 가리켜야..

• format_list_bulleted Stack/JS
• · 2024. 11. 15.
• textsms

클로저 (Closure) : 자바스크립트의 네크로멘서

자바스크립트의 함수는 호출 이후 내부 로직을 다 실행하고 나면 다시 호출되기 전까지 작동하지 않는다.실행 컨텍스트 편에서도 봤듯, 콜 스택에 쌓이고 실행되면 제거되기에 다시 호출한다고 해도함수 내부의 로직을 동일하게 실행하고 다시 사라지게 된다. function sum (addNum) { let result = 0; result = result + addNum; console.log(result);}sum(5) // 5sum(7) // 7sum(10) // 10예를 들어 위와 같은 코드에서, sum이라는 함수를 3번 호출하면 그대로 5,7,10이 반환된다.왜냐하면 sum 함수 내부에..

• format_list_bulleted Stack/JS
• · 2024. 11. 11.
• textsms

호이스팅 (Hoisting) : 변수, 함수 끌어~ 올려!

자바스크립트 단골 면접 질문에 도달했다.변수 선언 방식과 스코프에 대한건 이 개념을 정리하기 위한 빌드업이었다..!빌드업의 결과물인 호이스팅에 대해서 이번에 제대로 정리해 보자.  호이스팅이란?[ 호이스팅 ]인터프리터가 코드를 실행하기 전 함수, 변수, 클래스 또는 임포트의 선언문을해당 범위의 맨 위로 이동시키는 과정을 말한다.- MDN - 위는 MDN에서 작성한 호이스팅의 정의다.여기서 말하는 인터프리터는 프로그래밍 언어를 번역하는 방식 중 하나인데,대표적으로는 인터프리터와 컴파일러가 있다. 먼저 컴파일러 방식은 전체 문서를 읽고 해당 문서를 한 번에 번역하는 방식이라고 할 수 있겠고,인터프리터 방식은 전체 문서를 한 줄씩 읽어 내려가면서 번역을 하는 방식이라 할 수 있겠다.이 두 가지 방식 중 Jav..

• format_list_bulleted Stack/JS
• · 2024. 11. 9.
• textsms

실행 컨텍스트 : 자 이게 너가 사용할 수 있는 친구들이야

const a = 1;function sum () { return a + 3;}console.log(sum());여기 간단한 덧셈을 통해 결과를 출력하는 코드가 있다고 하자.이 코드의 출력값은 얼마일까? 인간의 관점으로 본다면 sum이라는 함수에 a라는 변수는 윗줄에서 선언되었고,1이라는 값이 할당되었기에 3을 더해 4라는 결과값을 출력한다고 바로 생각할 수 있다. 그러나 자바스크립트 엔진은 코드를 인간처럼 직관적으로 코드를 해석할 수 없기에실행에 필요한 다양한 정보가 있어야 하는데 그 정보들을 가진 객체를 실행 컨텍스트라고 한다.  실행 컨텍스트실행할 코드에 제공할 환경 정보들을 모아놓은 객체로,자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 실행 컨텍스트에 대해 코어 자바스..

• format_list_bulleted Stack/JS
• · 2024. 11. 8.
• textsms

Scope : 변수, 너에게 닿을 수 있는 그 범위

자바스크립트에서 변수를 선언하고 값을 할당하고 여러 기능을 구현할 때,값이 할당된 변수에 접근해 해당 값을 활용하곤 하는데이 때, 스코프(scope) 라는 개념이 적용된다. 중요한 개념 중 하나이니 쓱 정리해 보고 가자.  스코프란?스코프를 구글에 검색하면 총에 사용하는 조준경이 가장 먼저 나온다.억지 같긴 하지만 조준경과 자바스크립트의 스코프의 공통점을 찾아보자면 범위라는 점이 있다. 조준경은 넓은 범위에서 타겟이 있는 위치의 범위를 좁히는 역할로 사용하는 장비라면자바스크립트의 스코프는 어떠한 변수에 접근할 때, 그 변수에 접근할 수 있는 범위를 의미한다.범위라는 개념만 보면 조준경과 자바스크립트의 스코프는 대충 비슷한 개념이다. 그렇다면 왜 이 범위가 중요한 개념이라고 하는 걸까?var age = 1..

• format_list_bulleted Stack/JS
• · 2024. 11. 2.
• textsms

var, let, const : 자바스크립트 변수 선언 3대장

자바스크립트를 배울 때 가장 먼저 접하게 되는 개념이 변수라는 개념이다.변수는 말 그대로 '변할 수 있는 수'를 의미하는데자바스크립트에서는 해당 변수에 다양한 값을 할당할 수 있고,이러한 변수를 이용해서 다양한 기능도 구현할 수 있다. 자바스크립트에서 변수는 기본 중에 기본이 되는 개념인데,이러한 변수를 선언할 때 3가지 방법이 있는데, 방법마다 명확한 차이가 존재하기에 이 점을 정리해 보고자 한다. 변수 선언 및 할당 방식var a = 1;let b = 2;const c = "text";변수는 선언 키워드를 작성하고 그 옆에 변수 이름을 작성한 뒤,변수에 담을 값을 입력하는 방식으로 변수를 선언하고 값을 할당한다. 변수에는 어떠한 값이든 담길 수 있다.현재 예시에서는 숫자와 문자를 할당했는데, 함수, ..

• format_list_bulleted Stack/JS
• · 2024. 10. 31.
• textsms