코딩 기록기

React 에서 컴포넌트 렌더링을 수행하는 조건은 ? state(상태) 변경이 있을 때 리액트는 state 변경이 감지되면 재렌더링 한다 새로운 props가 들어올 떄 부모 컴포넌트로부터 새props가 들어오면 자식 컴포넌트는 재렌더링 된다. 기존 props가 업데이트 됐을 때 부모 컴포넌트로부터 받은 props 값을 받은 자식 컴포넌트도 재렌더링 된다 부모 컴포넌트가 재렌더링 될 때 부모 컴포넌트가 업데이트 되어 재렌더링 되면 자식 컴포넌트도 재렌더링 된다. 렌더링 성능 최적화 방법 state 선언 위치 렌더링 수행 조건으로 state 값의 변화가 있는데 state가 변경이 되면 그 state가 선언된 컴포넌트와 하위 컴포넌트들이 모두 리렌더링 된다. 그렇다면 state 선언 위치를 잘 설정해 주는 것..

Front-end 프레임워크 1. 프레임워크란? 애플리케이션 구조에 대한 가이드라인과 기반 코드를 제공하는 개발 툴 2. Front-end 프레임워크 사용자와 만나는 화면단인 Front-end 개발을 목적으로 하는 프레임워크 최근에는 웹이 복잡해지며 SPA 개발을 위한 프레임워크가 각광 받고 있다. JavaScript 프레임워크의 등장 모바일 / 웹의 발달로 화면에서 표현해야 하는 Front-end의 개발이 복잡해지며 JS를 이용한 프론트엔드 구성이 주목 받고 있다. 웹 규모가 커지며 JS 파일이 많아져 관리가 어려워졌고, 이를 관리하는 프론트엔드 프레임워크가 등장 React / Angular / Vue.js 비교 가장 먼저 발표된 프레임 워크는 Angular. 이후 React, Vue.js 순서로 개발..

JSX란 무엇인가? JSX를 리액트에서 무조건 사용해야하는것은 아니지만, JSX를 통해 얻는 이점이 많아 대부분의 개발자가 사용한다. 그렇다면 JSX란 무엇일까? JSX는 JavaScript XML의 줄임말로 XML 형태로 작성되며, 아래 문법은 JavaScript에 XML을 확장한 JSX의 문법이다. const element = Hello, World!; 그밖에 JSX의 특징은 아래와 같다. ▪ JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. ▪ 브라우저에서 실행되기 전에 바벨을 통해 일반적인 자바스크립트 코드로 변환된다. ▪ 공식적인 자바스크립트 문법은 아니다. ▪ JSX 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있다. JSX 변환 예제 J..

1. 동적인 언어이며 객체 지향 언어이다 JavaScript는 Prototype기반 객체 지향 언어이다 Class기반 객체 지향과 Prototype기반 객체 지향 존재한다 Class와 Prototype의 차이 Class 기반 언어는 객체의 형식이 정의된 class라는 개념을 가지고 객체를 찍어낸다 Prototype 기반 언어는 class라는 개념이 없고 객체 prototype의 위임 과정을 통해 상속이 된다 따라서 객체끼리의 chaining을 통해 동적으로 표현된다 프로토 타입이란 ? 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍이라고 할 수 있는데, 객체지향 프로그래밍의 특징 중 상속을 구현하기 위해 사용되는 개념이며 프로토타입 객체를 이용하여 객체를 만든다. 프로토타입 객체는 한 객체의 부모 역..

Promise Promise는 자바스크립트에서 비동기 처리에 사용되는 객체이다. 내용은 실행 되었지만 결과를 아직 반환하지 않은 객체라고 이해해도 좋다. Promise 에는 3가지 상태가 있는데 Pending (대기) Fulfilled (이행) Rejected (실패) 비동기 처리가 완료 되지 않았다면 Pending, 완료 되었다면 Fulfilled, 실패하거나 오류가 발생하였다면 Rejected 상태를 갖는다. Promise 사용 예시 const condition = true; const promise = new Promise((resolve, reject) => { if (condition) { resolve('resolved'); } else { reject('rejected'); } }); pro..

1. 이벤트 버블링(Event Bubbling) 이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다. 버블링 예제 코드를 보자. DIV1 DIV2 DIV3 const divs = document.querySelectorAll("div"); const clickEvent = (e) => { console.log(e.currentTarget.className); }; divs.forEach((div) => { div.addEventListener("click", clickEvent); }); div를 클릭하면 해당하는 클래스의 이름이 콘솔로 출력되는 코드이다. 자..

자바스크립트의 변수 선언은 var로만 가능했으나, ES6(ES2015)부터 let과 const가 추가 되었다. 옛날의 var가 최신의 let(변수), const(상수)로 분리되었다고 생각할 수 있으나, 내부 사정은 상당히 다르다. (참고로 여전히 var도 함께 사용이 가능하다) var, let, const 차이점 중복선언 가능 여부 재할당 가능 여부 변수 스코프 유효범위 변수 호이스팅 방식 1. 중복선언 1. var : 중복 선언이 가능하다. // 첫번째 변수 선언+초기화 var a = 10; console.log(a); // 10 // 두번째 변수 선언+초기화 var a = 20; console.log(a); // 20 // 세번째 변수 선언(초기화X) var a; console.log(a); // 2..

JavaScript의 유용한 배열 메소드 정리 📌 1. push & unshift let arr = [1, 2, 3]; console.log(arr.push('push!')); // [1, 2, 3, 'push!'] console.log(arr); // console.log(arr.unshift('unshift!')); // 5 console.log(arr); // ['unshift!', 1, 2, 3, 'push!'] push 배열 끝에 요소를 추가시킨다. unshift 배열 앞에 요소를 추가시킨다. 배열의 length를 반환한다. 기존 배열을 변경한다. 📌 2. pop & shift let arr = ['unshift!', 1, 2, 3, 'push!']; console.log(arr.pop()); ..

React에서 구성 요소가 데이터를 받거나 처리하고 보내기 위해 사용된다. props 먼저 props("properties"의 줄임말)로 state 와의 간단한 차이는 변할수 없다는 것이다. 컴포넌트는 상속하는 부모 컴포넌트로 부터 props 를 받고 이 props 는 상속받는 컴포넌트 내에서 수정이 불가능하다. 리액트에서 부모 > 자식 일방향성 상속이라는 특징때문이다 . 블변의 데이터(읽기전용) 부모로부터 전달된다 초깃값과 자료형의 유효성 검사가 가능 state 컴포넌트 상태를 나타내며 , props 와 반대로 변할수 있다 . 컴포넌트의 내부에서 선언되기 때문에 이러한 state 는 외부에 공개하지 않고 컴포넌트가 스스로 관리한다. 상태에 따라 변화하는것 직접 변경 가능 state 가 변경되면 컴포넌트..

Promise는 무엇인가? JavaScript(React)에서 Promise는 비동기 처리에 활용되는 객체입니다. 여기서 비동기 처리란 line by line 순차적으로 특정 코드의 실행을 끝까지 기다리지 않고 다음 코드를 선제적으로 처리하는 것을 의미합니다. Promise의 역할 Promise는 주로 웹 서비스 구현 시 원활한 데이터 통신을 위해 활용됩니다. 더욱 구체적으로 말씀드리자면, 서버에 데이터를 요청했을 때, 데이터가 모두 받아오기 전에 웹에 출력하려고 할 때 발생하는 오류를 방지하기 위해 활용됩니다. 즉, Promise 객체는 A, B, C 로직이 있을 때, A 로직이 모두 완료될 때까지 B, C 로직을 대기시키지 않고 실행시키는 데 주로 활용됩니다. Promise의 상태(State) Pro..