hee-ya07 님의 블로그

1. 클래스 컴포넌트: v16.8 이전까지의 리액트 컴포넌트 구성 방식- 전체 코드더보기class Person { // 생성자 (Constructor) constructor(name, age) { this._name = name; // 내부적으로 사용하는 _name, _age this._age = age; } // Getter: name 속성의 값을 가져올 때 호출 get name() { return this._name; } // Setter: name 속성의 값을 설정할 때 호출 set name(newName) { if (newName.length > 0) { this._name = newName; } else { console.log("이름..

1. React 문법 : JSX: JSX (JavaScript XML, JavaScript Syntax eXtension): 마크업 언어와 로직을 따로 분리하지 않고 하나의 파일에 보이는 컴포넌트라는 느슨하게 연결된 유닛- Angular와 React더보기1. Angular의 경우 : 마크업 언어와 로직을 분리하여 개발2. React, Vue의 경우 : 컴포넌트라는 느슨하게 연결된 유닛으로 개발2-1. Vue: HTML + JS + CSS가 ".vue" 파일 내 존재 가능2-2. React : HTML or XML + JS + CSS가 ".jsx" 파일 내 존재 가능1.1 문법적 요소들1) .jsx는 무조건 하나의 요소로 반환되어야 함 -> 전체를 감싼 하나의 태그가 필요// Ex) 오늘의 할 일 빨래..

1. DOM 조작의 변화1.1 "직접" 조작 - Javascript: js를 통해 DOM을 변경하여 view에 영향: 각 WB에 맞는 코드를 작성해야 했음(각 WB의 JS엔진 구성에 따라 문법 수행이 다르기 때문)단점1) Hard to Manage : DOM 요소를 매번 선택 및 조작 -> 개발자의 어려움2) Repetitive : DOM 요소의 상태가 바뀔 때마다 이뤄지는 반복적인 Rendering -> 상호작용이 많을 경우 보기 불편1.2 "간편" 조작 - JQuery: JQuery는 Javascript 라이브러리로 이를 통해 DOM조작을 간편하게 할 수 있음JQuery를 통해 DOM 요소 선택, 조회 및 수정 가능But, 상태 변화에 따른 반복적인 Rendering은 아직도 단점으로 존재: 추가적으..

1. 문자열1.1 문자열 포멧팅(String Literal)1) 백틱 사용const user = { name: 'Hee', age: 10, favor: 'Game' }console.log(`제 이름은 ${user.name}이고, 나이는 ${user.age}이며, ${user.favor}를 좋아합니다.`) 2) 정규식... 나중에 돌아와서 하는걸로...자료구조1. Map: 유일 Key 및 Key-Value 집합: 자료구조를 위해 사용const initialized = new Map([ [1, 'first'], [2, 'second'], [3, 'third'], ['Aaron', { phone: '010-000-0000', address: 'Earth' }], ['Baron', { phone: '0..

1. Parameter 관련1.1 Rest Parameter: 함수 파라미터 펼치기function foo(first, ...rest) { // 1, 2, 3, 4 = ...rest console.log(rest) // [ 2, 3, 4 ] = rest console.log(...rest) // 2, 3, 4 = ...rest}foo(1, 2, 3, 4) // 2, 3, 4 = ...rest1.2 함수 기본 파라미터값(Default Parameters)function create({ name = 'Unnamed', age = 1, favor = undefined }) { return { name, age, favor ..

1. 얕은 복사 (Shallow Copy): 객체나 배열의 첫번째 수준 복사: 객체의 최상위 값만 복사, 내부 참조된 객체나 배열은 복사X → 원본과 동일한 참조  1.1 얕은 복사 예시1) 배열의 얕은 복사const arr = [1, 2, 3];const shallowCopy = arr.slice(); // 또는 [...arr]shallowCopy[0] = 100;console.log(arr); // [1, 2, 3] - 원본 배열은 변경되지 않음console.log(shallowCopy); // [100, 2, 3] - 복사본은 변경됨arr[0] = 90;console.log(arr); // [90, 2, 3] console.log(shallowCopy); // [100, 2, 3] 2) 객체의 얕은..

0. 비구조화 할당 (Destructuring Assignment): 배열이나 객체의 값을 변수에 쉽게 할당하기 위한 방법 1. 종류1.1 배열 비구조화 할당 (Array Destructuring)const arr = [1, 2, 3];// 비구조화 할당const [a, b, c] = arr; // 원하는 별칭으로 재할당 가능console.log(a); // 1console.log(b); // 2console.log(c); // 3-> 배열의 비구조화 할당에서는 순서가 중요1.2 객체 비구조화 할당 (Object Destructuring)const object = { name: 'Hee', age: 10, favor: 'Game' }const { name, age } = objectconsole.log(..

1. CallBack: 비동기 함수의 실행이 끝난 후, 그 결과를 처리하기 위해 전달되는 함수.: 함수(콜백)를 파라미터로 실행권과 함께 전달 ->함수 파라미터 + 실행권 이양: 의존성이 복잡하게 엮인 경우 Callback Hell 발생CallBack 자체로는 비동기 함수와 직접적인 관계 X비동기에서 CallBack이 자주 활용(비동기 작업 후, 후처리를 하기 위해)2. Promise: CallBack + Asynchronous = Promise: Producer-Consumer Pattern on Asynchronous 라고도 표현: CallBack의 한계를 극복하기 위해 등장 -> "객체": 비동기 처리 연산 후 , 해당 객체를 반환더보기promise = caller + susseces callbac..

1. 함수 작성 방법1.1 함수 선언 (Function Declaration)function greet() { console.log("Hello, World!");}greet(); // Hello, World!: function 키워드를 사용한 정의: 호이스팅에 의해 코드 실행 전 미리 호출 가능(함수 선선언 O)1.2 함수 표현식 (Function Expression)const greet = function() { console.log("Hello, World!");};greet(); // Hello, World!// 초기화 오류hoisting() // 변수 호이스팅 = ReferenceError: Cannot access 'hoisting' before initializationlet ..

1. JS 엔진의 동작 원리1.1 주요 구성 요소- 실행 요소 : 싱글 스레드(single-threaded)메모리 구성 Call Stack1) 함수의 순차적 적재 및 실행(LIFO)2) string, number, boolean, null, undefined의 원시 타입 데이터 저장3) 각 함수마다 함수의 실행환경인 실행 컨텍스트(Exeution Context)를 생성 Memory Heap1) 선언 및 할당된 변수 및 함수 저장2) 객체, 배열, 함수 등의 참조 타입 저장3) 렉시컬 환경(Lexical Environment, block-level)과     변수 환경(Variable Environment, Function-level )에 저장 - 이외에도 구성요소가 있음을 유의(Web API 등..)1...