Frontend/JavaScript (7) 썸네일형 리스트형 [JS] 클래스 자바스크립트 클래스(class) JavaScript는 원래 객체지향 언어처럼 생겼지만, 클래스(class) 개념이 없었지만 ES6(2015) 이후로 클래스 문법이 추가됨 클래스란?클래스는 객체를 만들기 위한 설계도 또는 템플릿 (붕어빵 틀에 비유)예를 들어, 사람이란 개념을 객체로 표현한다고 해보면,모든 사람은 이름, 나이 같은 속성과 말하기, 걷기 같은 행동을 가질 수 있음이 공통 속성과 행동을 정의하는 것이 바로 클래스붕어빵에 비유한다면, 붕어빵 틀에 재료들을 다르게 넣어서 특성이 다른 붕어빵 여러개를 만들 수 있음기본 클래스 선언class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() .. [JS] 프로토타입 1. 프로토타입이란?JavaScript에서 객체는 다른 객체를 상속받을 수 있습니다.이 상속 구조를 가능하게 하는 것이 바로 프로토타입입니다.const animal = { eats: true};const rabbit = { jumps: true};rabbit.__proto__ = animal;console.log(rabbit.eats); // true (animal로부터 상속됨)위 코드에서 rabbit은 animal을 프로토타입으로 설정했기 때문에, rabbit.eats를 조회할 수 있습니다.이처럼 객체 간에 연결되어 있는 구조를 프로토타입 체인이라고 합니다.2. __proto__와 prototype의 차이__proto__모든 객체가 내부적으로 가지고 있는 숨겨진 링크로, 자신의 부모 객체(프로토타입.. [JS] 이벤트루프 자바스크립트 이벤트 루프(Event Loop) 완전 정복이벤트루프는 자바스크립트의 비동기 처리 메커니즘을 이해하는 데 핵심이 되는 개념이다.1. 자바스크립트는 왜 이벤트 루프가 필요할까?자바스크립트는 싱글 스레드(single-thread) 언어즉, 한 번에 하나의 작업만 실행할 수 있다.그렇다면 다음과 같은 상황에서는 어떻게 될까?while (true) { // 무한 루프}console.log('이 코드는 절대 실행되지 않아요.');이처럼 하나의 작업이 블로킹(blocking)되면 다른 코드가 실행되지 않는 문제가 생김이를 해결하기 위해 자바스크립트는 비동기 처리를 도입했고, 그 핵심이 바로 이벤트 루프2. 이벤트 루프의 구조자바스크립트의 실행 환경(예: 브라우저, Node.js)은 다음과 같은 구조를.. [JS] 클로저 자바스크립트 클로저(Closure), 제대로 이해해보자클로저는 처음 접하면 좀 헷갈릴 수도 있지만, 개념만 제대로 잡으면 생각보다 간단한 개념이다.1. 클로저 정의내부 함수가 외부 함수의 변수에 접근할 수 있는 현상외부 함수의 렉시컬환경이 가비지 컬렉팅되지 않는 현상어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상클로저를 함수라고 표현하는 문장도 많은데, 사실 클로저는 함수라기보다는 현상에 가까움 2. 예제로 보기function outer() { const name = '길동'; function inner() { console.log(`안녕, ${name}`); } return inner;}con.. [JS] 실행컨텍스트 1. 실행 컨텍스트(Execution Context): 자바스크립트 코드가 실행되는 환경/문맥(Context)실행 컨텍스트는 자바스크립트 엔진이 코드를 해석하고 실행하기 위해 필요한 정보들을 담고 있는 객체: 이걸 무슨 말인지 구체적으로 풀어보면..자바스크립트 엔진이 코드를 실행하려면, 그 코드가 무엇을 참조해야 하고, 어떤 값을 사용해야 하며, 누가 호출했고, this가 뭔지, 이런 정보들을 전부 기억하고 있어야함 그래서 엔진은 코드를 실행하기 전에,“지금 이 함수 안에서 어떤 변수들이 있지?”“외부에서 참조할 수 있는 건 뭐지?”“this는 뭘 가리키지?”이런 걸 담아두는 일종의 정보 묶음을 만들어 놓는데, 이게 바로 실행 컨텍스트실행 컨텍스트 = 함수의 작업 가방함수를 호출하면 자바스크립트는 그 함.. [자바스크립트 A to Z] 1_html에 스크립트 추가하기 (+ async, defer) 이번챕터 핵심: html에 자바스크립트 추가해보기 html에 css 적용하는 방식과 마찬가지로, html에 js 적용하는 두가지 방식이 있음 1. html 내부에 설정하는 방식2. 외부파일을 가져오는 방식 첫 번째 방식부터 보자. 1. 기본 사용법HTML 파일 내에 직접 JavaScript 코드를 작성바디태그 안의 끝에다가 스크립트 태그 추가 안녕하세요! 2. 외부 JavaScript 파일 사용script.js 파일 생성HTML 파일에서 외부 스크립트 불러오기 안녕하세요! 2) 특징: HTML 파싱이 모두 끝난 후 js의 파싱이 시작된다. (이게 단점이 될 수도 있는 거임) preventDefault 와 stopPropagation 차이점 (+ 이벤트 버블링, 캡쳐링) preventDefault()기본동작 취소예를 들어 버튼의 submit 은 기본적으로 값을 전송하고, 새로고침 하는 기능을 한다.이때 e.preventDefault() 를 사용하면 submit의 전송과 새로고침을 막는다.또 다른 예로, 기본적으로 실행되는 a 태그의 링크이동을 막는다. stopPropagation()이벤트 전파 중지 (기본동작을 막지는 않음)버블링과 캡쳐링을 막는 역할을 한다 👩🏻💻 버블링, 캡쳐링이 뭔지 알아보자버블링설정없이 기본적으로 버블링으로 동작자식 요소를 누르면 한단계씩 타고 올라가서 자신을 감싸고 있는 최상위 부모요소에 걸린 이벤트까지 실행되는 것 아래 예제코드의 경우 inner를 클릭하면 Inner => Middle => Outer 순으로 alert이 실행된다. [자식.. 이전 1 다음
