차이점 : GPT씨 1. 문법적 차이 ES6 클래스: 클래스 선언은 class 키워드를 사용하여 정의됩니다. 클래스 내부에서 메서드는 화살표 함수가 아니라 일반 함수로 정의됩니다. 클래스는 클래스 몸체 안에 있는 메서드들을 포함하며, 클래스는 constructor 메서드를 통해 초기화됩니다. // ES6 클래스문법 class Person { constructor(name, age){ this.name = name; this.age = age; } introduce() { console.log(`Hello, My name is ${this.name} and I'm ${this.age} years old.`) } } const person = new Person('kim', 100); console.log(..
JavaScript 모듈 시스템은 코드를 여러 파일로 분할하여 관리하고 재사용할 수 있는 기능을 제공합니다. 모듈 시스템을 사용하면 코드의 구조화와 유지 보수가 용이해지며, 복잡한 애플리케이션의 개발 및 확장이 용이해집니다 ESM(ES module) 방식 - 일반적으로 프론트엔드 1. 자주 쓰는 코드(함수)를 module.js 파일에 작성한다. 2. 함수 이름 앞에 export를 작성한다. 3. 해당 함수를 사용할 js파일에 import를 한다. 4. 함수를 사용한다. //module.js 모듈파일 export function 진짜자주씀(a, b, c){ return (a + b + c) / 2; } export function 조금쓰는편(a, b){ return a * b; } // app.js, 모듈..
이벤트 버블링(Event Bubbling) - 버블이 폭발해서 올라간다 생각하자 이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 최상위 요소까지 올라가는 과정을 의미합니다. 즉, 이벤트 버블링 단계에서 이벤트는 발생한 요소로부터 상위 요소로 이동합니다. 이벤트 버블링은 일반적으로 이벤트 리스너의 세 번째 인수로 false를 전달하여 활성화됩니다. // 이곳이 실행된다 여기는 리스트, 이벤트핸들러 // 여기 클릭시 이벤트 캡처링(Event Capturing) - 위에서 포착해서 사로잡는다 생각하자 이벤트 캡처링은 이벤트가 최상위 요소에서 시작하여 실제 대상 요소에 도달할 때까지 내려가는 과정을 의미합니다. 즉, 이벤트 캡처링 단계에서 이벤트는 최상위 요소에서 시작하여 하위 요소로 이동합니다. 이벤트 캡처..
GPT 소환 localStorage와 sessionStorage는 웹 브라우저에서 클라이언트 측 웹 애플리케이션에서 데이터를 저장하는 데 사용되는 웹 스토리지 메커니즘입니다. 이 두 가지는 목적과 수명에 따라 차이가 있습니다 데이터 수명: localStorage: 데이터는 브라우저를 닫아도 영구적으로 보존됩니다. 사용자가 명시적으로 지우거나 데이터를 저장한 웹 사이트가 데이터를 삭제할 때까지 데이터가 유지됩니다. sessionStorage: 데이터는 세션(session)이 유지되는 동안에만 유지됩니다. 브라우저 창이나 탭이 열려 있는 동안에는 데이터가 유지되지만, 브라우저 창이나 탭을 닫으면 데이터가 삭제됩니다. 공유 여부: localStorage: 동일한 도메인 내의 모든 창과 탭에서 공유됩니다. 즉,..
자바스크립트의 프로토타입 기반 상속을 왜 활용하는가? [[Prototype]] GPT상 코드 재사용성: 프로토타입 기반 상속을 사용하면 부모 객체의 속성과 메서드를 자식 객체에서 재사용할 수 있습니다. 이는 코드의 중복을 줄이고 유지보수를 쉽게 만듭니다. 동적인 구조: 자바스크립트의 프로토타입 기반 상속은 클래스 기반 상속보다 동적인 구조를 제공합니다. 객체의 프로토타입은 런타임에 동적으로 변경할 수 있으며, 이를 통해 객체의 동작을 유연하게 조정할 수 있습니다. 가볍고 유연한 객체 생성: 프로토타입 기반 상속은 클래스 기반 상속보다 더 가볍고 유연한 객체 생성을 가능하게 합니다. 객체를 생성하는 데 별도의 클래스 정의가 필요하지 않으며, 필요에 따라 동적으로 프로토타입을 변경할 수 있습니다. let a..
왜 메모리 관리, 성능최적화를 해야할까? 웹사이트를 사용하는 유저에게 답답함을 해소시켜 사용자 이탈을 막기 위함이다. A. 메모리 관리 -- 가비지 컬렉터(Garbage Collecter)에 대한 이해 자바스크립트는 가비지 컬렉터를 사용하여 사용하지 않는 메모리를 자동으로 확보한다. 가비지 컬렉터는 사용하지 않는 객체를 식별하고 제거한다. 메모리 누수의 일반적인 원인 1. 순환참조 순환 참조는 두 개 이상의 객체가 서로를 참조하여 가비지 컬렉터가 끊을 수 없는 순환을 생성할 때 발생 변수나 객체를 더 이상 사용하지 않을 때는 null 또는 undefined로 설정하여 해당 값에 대한 참조를 제거하고 가비지 컬렉터를 통해 메모리를 회수할 수 있다. let person1 = {}; let person2 = ..
1. 랜더링이란? Rendering 사전적으로는 '표현', 기본적으로 시각적인 결과물을 생성하는 과정을 나타낸다. 웹개발에서 랜더링이라 함은 HTML, CSS, JavaScript를 사용하여 웹페이지를 생성하고 브라우저에 표시하는 과정을 의미한다. 이 과정에서 클라이언트 사이드 / 서버 사이드 랜더링이 나뉘게 된다. 2. 클라이언트 사이드 랜더링은 무엇인가? Client-Side Rendering, CSR은 브라우저에서 JavaScript를 사용하여 동적으로 웹 페이지를 생성하는 방식이다. 초기 HTML은 비어 있거나 간단한 마크업만 포함하고, 페이지가 로드된 후에 JavaScript가 실행되어 페이지를 동적으로 구성하고 랜더링 한다. 3. 서버사이드 랜더링은 무엇인가? 서버에서 HTML코드를 생성하고 ..
fetch()는 정말 많이 사용하는 메서드이다. fetch() 메서드를 통해 웹브라우저에서 제공하는 비동기 네트워크 통신(대표적으로 AJAX)을 할 수 있다. * AJAX(Asynchronous Javascript and XML) : 페이지 새로고침없이 동적으로 데이터 로드 및 업데이트 가능 기본적으로 fetch()메서드는 Promise를 반환하기 때문에, 비동기적으로 데이터를 가져올 수 있다. GPT에게 fetch()에 대해 물어봤다. fetch()의 주요 특징과 사용법은 다음과 같다. HTTP 요청: fetch() 메서드를 사용하여 GET, POST, PUT, DELETE 등 다양한 HTTP 요청을 보낼 수 있습니다. Promise 반환: fetch() 메서드는 네트워크 요청에 대한 응답을 처리하기 ..
- Total
- Today
- Yesterday
- 대괄호표기법
- react
- Props
- unexpected character
- 동등비교연산자
- .then()
- 태스크큐
- 문자열
- 에이블스쿨2일차
- 프로토타입 체이닝
- 미들웨어위치
- promise
- cors위치
- unique "key" prop.
- 객체리터럴
- 배열내특정요소찾기
- 머리아프다..
- .finally()
- 비동기
- JSX
- 조대곤교수님
- 함수형코딩
- 상속
- null과 undefined
- 리액트 이미지경로
- 객체속성 추가 삭제
- universal rendering
- 전역변수
- 함수
- .catch()
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |