Heaeun

코드리뷰, TDD, 함께 자라기를 지향하는 프론트엔드 개발자입니다

2021-12-1-TIL

한것 알고리즘 학습 네이버 특별 세션 참여 DOM, DOM 조작방법, DOM 조작을 이용한 유효성 검사 학습 번들링과 웹팩 학습 YouTube IFrame Player API 사용법 학습 및 실습 느낀것 항상 컴포넌트를 만들면서 재사용하기 쉽고 확장이 쉽다는 것은 무엇을 의미하는지? 에 대해 생각하면서 컴포넌트를 만든다면 좋은 컴포넌트를 만들 수 있을 것…

스코프

스코프? 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위인 스코프가 결정 됩니다 이러한 스코프는 자바스크립트 엔진이 식별자를 검색하는 규칙이라고도 말할 수 있습니다 이러한 규칙이 있기때문에 우리는, 서로 다른 스코프에서 같은 변수명을 사용할 수 있습니다 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효란 …

for문의 변수 선언문에서 var를 사용했을때 발생하는 문제, 그리고 해결방법

프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)에 참여하면서 공부한 내용을 정리합니다. 이번 글에서는 for문의 변수 선언문에서 var를 사용했을때 발생하는 문제, 그리고 해결방법에 대해 정리하겠습니다 for문의 변수 선언문에서 var를 사용했을때 발생하는 문제 위의 코드는 아래처럼 동작합니다. 는 를 가지기 때문에 로 선언한 는 전역변…

this - 일반함수 호출

일반 함수 호출에서 this 일반 함수로 호출하면 함수 내부의 this에는 기본적으로 전역객체가 바인딩된다 메서드 내에서 정의한 중첩 함수도 일반 함수로 호출되면 중첩 함수 내부의 this에는 전역객체가 바인딩된다. setTimeout의 콜백함수 내부의 this 콜백 함수가 일반 함수로 호출된다면 콜백 함수의 내부의 this에는 전역객체가 바인딩된다(자…

this - 메서드 호출

메서드 내부의 this 메서드 내부의 this에는 가 바인딩된다 예시코드 메서드 내부의 this에는 메서드를 호출한 객체가 바인딩된다 위의 코드에서 this는 이다. 에는 이라는 프로퍼티가 없으므로 은 undefined를 반환한다 해결방법 type을 가지고 있는 food2 객체를 사용한다

new 연산자를 통해 함수를 호출했는지 확인하는 방법

, 로 new 연산자를 통해 함수를 호출했는지 확인이 가능합니다 new.target new.target new.target 속성(property)은 함수 또는 생성자가 new 연산자를 사용하여 호출됐는지를 감지할 수 있습니다. new 연산자로 인스턴스화된 생성자 및 함수에서, new.target은 생성자 또는 함수 참조를 반환합니다. 일반 함수 호출에서…

IIFE

즉시실행함수() 위와같은 것을 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)이라고 하며, 함수를 정의함과 동시에 실행합니다 사용방법 즉시 실행 함수는 반드시 그룹 연산자 로 감싸야 합니다. 만약 아래처럼 그룹 연산자로 감싸지 않고 실행하면 에러가 발생합니다 에러 발생 ! 👉🏻 에러가 발생하는 이유…

생성자함수

프로그래머스에서 진행하는 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS 에 참여하게 되었습니다. 자바스크립트 기본기를 탄탄하게 다져보도록 하겠습니다 🔥🔥🔥 생성자 함수 생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라 한다. 샘플 코드 위의 코드는 아래와 …

2021-05-12

나의 하루를 되돌아보고 더 나은 사람이 되기 위해 til 작성을 다시 시작합니다 🤟🏻 ✔️ 한 일 대표님께서 오늘부터 아침마다 유익한 영상을 올려주신답니다. 시청 후 감상평을 작성했습니다. 매일 아침마다 유익한 영상을 보고 감상평까지 쓴다니 너무 좋네요 ☺️ 매일 아침 레벨업 ⤴ ‼️ 🍿오늘의 영상 업무일지 작성을 시작했습니다. 오늘 할 일을 나열하고 작업 …

React 컴포넌트 특정 영역 외 클릭 감지

탭 영역과 드롭 다운 영역 외를 클릭하면 드롭다운 메뉴가 사라지는 것을 구현하고자 합니다. 먼저 첫번째로 위의 탭 영역에 를 사용해 참조를 걸어줍니다. 두번째로 안에서 에 이벤트 리스너를 생성합니다. 로 생성된 객체의 에는 라는 메서드가 있는데 이 메서드에 현재 클릭한 엘리먼트를 인자로 넘기게 되면 참조중인 엘리먼트에 속해 있을 경우는 …