< HwanLog />

자바스크립트에서 this는 매우 특이하면서도 유연한 키워드입니다. 코드 내에서 this를 사용하면, 실행 중인 컨텍스트에 따라 참조하는 값이 동적으로 결정됩니다. 이를 제대로 이해하고 활용하기 위해서는 this가 어떻게 동작하는지를 이해하는 것이 중요합니다. 자바스크립트 this는 특정 상황마다 언제 호출되었는지, 어떻게 호출 되었는지에 따라서 매번 달라지게 됩니다. 보통 5가지 경우로 나누어 지게 되면서 아래 예제를 보면서 확인해 보겠습니다. 1. 기본 바인딩 첫 번째로 this의 기본 바인딩 입니다. 전역상태에서 this를 호출하거나 일반 함수 내에서 this를 호출하면 해당 this는 전역 객체를 가리키게 됩니다. function Hello() { console.log(this); } 위에 예제는 ..

이 글은 디스코드 봇을 만든 후기입니다. 계기 어느날 디스코드를 하는 도중 타이머 기능이 필요했는데 타이머 기능 정도는 직접 만들 수 있지 않을까?라는 생각을 하게 되어서 만들게 되었습니다. 또한 타이머 기능 외에 다른 기능을 만들면 재밌겠다 생각이 들어서 만들게 되었습니다. 일단 디스코드를 만드는 방법은 python을 사용한다던지, 자바스크립트를 사용한다던지 여러가지 방법이 있어서 본인에게 편한 언어를 사용할 수 있습니다. 저는 자바스크립트를 채택했습니다. 후기 이번에 직접 디스코드 봇을 만들어 보니까 직접 명령어를 통해서 상호작용 가능한 봇을 만든다는 점이 재밌었습니다. 그래서 추후에 필요한 기능이 있을 경우 다른 봇을 추가하기 보다는 직접 만들어서 커스텀해서 넣으면 뿌듯하기도 하고 내가 원하는 방향..

📌 문제 현상 캘린더의 체크인 체크아웃 두 번 클릭을 해야 하는데 한 번만 클릭해도 캘린더가 닫히는 현상이 발생 결론 : 이 현상은 이벤트 버블링 때문에 발생한 현상인데 이 것은 e.stopPropagation() 를 사용해서 해결했습니다. 💘 과정 https://fe-developers.kakaoent.com/2022/220908-react-event-and-browser-event/ React 이벤트와 브라우저 이벤트 카카오엔터테인먼트 FE 기술블로그 fe-developers.kakaoent.com 사실 이 문제를 만나기 전에 버스에서 커리 어리라는 어플을 통해서 카카오 프론트 엔드 블로그에서 이벤트 캡처링 , 버블링 현상에 관한 글을 읽었습니다. 근데 다음날 캘린더를 짜는데 캘린더가 클릭 시 바로 ..

자바스크립트 Scope 이해하기 자바스크립트 스코프는 총에서 쓰는 스코프와 개념이 비슷합니다. 즉 자신이 보이는 유효 범위를 나타내 주는 개념입니다! 코드로 예시를 보여드리겠습니다. Example function add(x, y) { console.log(x, y); return x + y; } add(2, 5); console.log(x, y); // x is not defined 위 예시를 보면 함수 매개변수는 블록 안에서만 접근이 가능합니다. 즉 매개변수 유효 범위 (스코프)는 함수 몸체 내에서만 접근이 가능합니다! 유요한 스코프 바깥에서 매개변숭에 접근하면 선언되지 않았다고 y 가기 전에 x에서 바로 not defined 오류가 뜹니다. 변수는 자신의 선언된 위치에 따라서 유효범위가 결정된다! v..

자바스크립트 비동기 이해하기 ! 비동기란 무엇인가 ?? 비동기적 코드란 코드가 실행된 후 그 결괏값을 기다려주지 않고 곧바로 밑에 코드를 실행한다. 사람이 비동기적 코드를 보면 결과를 예상하기 어려워 진다. function example1() { console.log('안녕! 1'); setTimeout(function () { console.log('안녕! 2'); }, 1000); console.log('안녕! 3'); } example1(); 위 코드 결과를 보면 안녕! 1 , 안녕! 2, 안녕! 3 순서로 코드가 실행되는게 아니다. 안녕 1 , 안녕 3 , 안녕 2 순으로 찍힌다. 왜냐하면 코드를 쭉 실행하면서 두번째 코드를 실행시켜 놓고 코드는 곧 바로 밑에 코드를 실행 시키기 때문에 결과가 다..

Intro 자바스크립트를 공부하다 보면 한번씩 만나거나 mdn 문서를 보더라도 자주 만나는 개념이다 ! array 에 대해서만 mdn 에서 보더라도 prototype이 찍혀있다 ! 객체지향 프로그래밍 프로토 타입에 들어가기 앞서서 객체지향 프로그래밍에 대한 개념에 대해 정리를 하면 좋은데 , 객체의 집합으로 프로그램을 표현하는 프로그래밍 패러다임 이다. 객체는 각각 속성(프로퍼티)을 가지고 있기 때문에 다른 객체와 구별 해서 인식 할 수 있다. 예를 들어 홍길동 이란 사람은 키가 180 이며 몸무게가 78kg 서울 롯데 시그니엘 아파트 3001호 산다. 라고 하면 이 홍길동이란 사람의 속성을 이용해서 다른 사람들과 구별 할 수 있는 것 입니다. 즉 객체지향 프로그래밍은 객체의 상태를 나타내는 데이터와 ,..

얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) 오늘은 자바스크립트 깊은 복사와 얕은 복사에 대해서 알아보고자 합니다. 복사면 복사지 어째서 얕은 복사 , 깊은 복사지? 이제 이 이유에 대해서 알려면 자바스크립트 객체가 어떻게 저장되는지 따져봐야 하는데 , 자바스크립트 객체는 힙 메모리라는 공간에 저장되게 됩니다. 변수는 컬스택 메모리라는 공간에 저장되는데 , 변수에 접근하면 변수에 값이 있는 게 아니라 힙 메모리 주소를 참조하게 됩니다. 말로는 이해가 잘 안 될 수도 있으니 코드로 보겠습니다. 얕은 복사 const Hwanobj = { name: 'HwanMin', age: 19, }; console.log(Hwanobj); // { name: 'HwanMin', age: 19 } ..

최근에 알고리즘 문제를 풀다가 다른 사람 풀이를 봤는데 Set을 이용해서 문제를 쉽게 풀었길래 이참에 Set 개념에 대해서 공부를 해보고자 정리해 보려고 포스팅하게 되었습니다. 공부는 mdn 사이트를 참조해서 공부했습니다. 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set Set JavaScript 에서 Set은 Array와 비슷하게 데이터를 모아서 볼 수 있는 역할을 합니다. 하지만 다른 점은 Set은 Array와 다르게 중복된 값이 들어갈 수 없습니다. Example let a = []; a.push(1); a.push(2); a.push(1); let b = new Set(); b.add(1);..

JavaScript 배열 API 자바스크립트 사용하면서 다른 언어와 다르게 배열 API가 많이 있습니다. 다양하게 사용은 해왔지만 정확하게 하나하나 이해하지는 못해서 한번 정리해 보고자 합니다. 1. map map은 콜백함수를 받아서 그 결괏값(return)에 부합하는 새로운 배열을 반환해 줍니다. numbers = [1, 2, 3, 4, 5]; const result = numbers.map((number) => { return number + 1; }); console.log(result); // [2,3,4,5,6] console.log(numbers); // [1,2,3,4,5] 위 결과값을 확인해보면 result라는 변수에 새로운 map에 맞는 새로운 배열이 들어가 있고 기존 numbers라는 ..

구조 분해 할당 React를 공부하다 보면 굉장히 많이 만나는 개념인데 한번 공부하면서 정리해보고자 합니다. 객체 , 배열에 사용됩니다. 배열 let arr = ["One", "Two"]; let [first, second] = arr; console.log(first); console.log(second); first = "One" , second = "Two" 가 할당됩니다. 배열 값 버리기 let arr = ["One", "Two", "Three"]; let [first, , Three] = arr; console.log(first); console.log(Three); , , 를 사용하면 "Two"가 생략되고 그 뒤에 Three가 받아와 집니다. .entries() 이용한 key value 출력 ..