React Props, State State State React에서 State는 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값 props는 위로부터 전달받은 값 state 는 내부에서 변화하는 값 Props 또는 State에 적합한 것은? 실제 생활에서 pops와 state를 나눈다면? 이름 : props - 변하지 않음 성별 : props - 변하지않음 나이 : state - 1년마다 변함 현재 사는 곳 : state - 이사할 때마다 변함 취업 여부 : state - 취업 퇴사 ㅎ 결혼/연래 여부 : state - 결혼 이혼 등 변함 Toggle Switch State : On / OFF 여부 --> code로 { isOn : true} , {isOn : false} state가 변한다 Co..

1. SPA란? SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 왔습니다. 리액트 같은 라이브러리 혹은 프레임워크를 시용하면 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트해 줍니다. 만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있습니다. SPA의 경우 서버에서 사용자에게 제공하는 페이지는 한 종류이지만 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 ..

React Intro 브라우저를 열고 사이트에 들어가면 보여지는 것 (UI: User Interface) 과 할 수 있는 것 (UX: User Experience) 이 굉장히 많다. 이러한 이유로 요새는 웹 페이지(Web Page)라는 단어보다 웹 애플리케이션이(Web Application)라는 단어가 많이 사용되기도 한다. React의 3가지 특징에 대해서 이해하고, 설명할 수 있다. JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다. React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다. create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다. 리액트는 VDOM을 더블 버퍼링 형태로 관리합니다. DOM에 마운트된 current..

동기식 (Synchronous) 먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 다 끝나면 새로운 작업을 시작하는 방식이다. 위 그림 Synchronous와 같이 작업이 직렬로 배치되어 실행되며 작업 실행의 순서가 확실히 정해져 있는 것을 동기식 처리라 부른다. 비동기식 (Asynchronous) 동기식 방식과는 다르게 먼저 시작된 작업의 완료 여부와는 상관없이 새로운 작업을 시작하는 방식이다. 위 그림 Asynchronous와 같이 작업이 병렬로 배치되어 실행되며 작업의 순서가 확실하지 않아 나중에 시작된 작업이 먼저 끝나는 경우도 발생한다. 이와 같은 방식을 비동기식 처리라 부른다. 자바스크립트는 기본적으로 비동기적으로 동작을 한다. 개발하다 보면 비동기식으로 동작하는 부..

## 프로토타입 체인 - 바스크립트는 특정 객체의 프로퍼티나 메소드에 접근시 객체 자신의 것뿐 아니라 __proto__가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 접근할 수 있다. - 즉, 특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 __proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것이 바로 프로토타입 체인이다. - 모든 프로토타입 체이닝의 종점은 Object.prototype이다. - 하위 객체는 상위 객체의 프로퍼티나 메소드를 상속받는 것이 아니라 공유한다. - 해당 객체에 없는 프로퍼티나 메소드를 접근할 때 프로토타입 체이닝이 일어난다. > 자바스..

Java, C++과 같은 클래스 기반 객체지향 프로그래밍 언어와 달리 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어이다. 따라서 자바스크립트의 동작 원리를 이해하기 위해서는 프로토타입의 개념을 잘 이해하고 있어야 한다. 클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성한다. 하지만 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이(Class-less)도 (ECMAScript 6에서 클래스가 추가되었다) 객체를 생성할 수 있다. 자바스크립트의 객체 생성 방법 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용..

객체지향 프로그래밍 객체지향 프로그래밍 객체지향 프로그래밍이 등장 하기 전에는 절차 지향 프로그래밍이 있었습니다. 모든것을 절차로 생각하고 기껏해야 함수로 이동하는게 끝이였으나 지금은 객체지향 프로그래밍의 등장으로 하나의 모델이 되는 청사진을 만들고 객체를 만드는 프로그래밍 패턴으로 바뀌었습니다. 객체지향 프로그래밍의 개념 4가지 ☝️ 캡슐화(Encapsulation) 데이터와 기능을 하나의 단위로 묶는것! 은닉 이라는 특성을 가지고 구현은 숨기고 동작을 노출시키며 느슨한 결합에 유리하며 언제든 구현을 수정할수 있다.🧐 캡슐화는 데이터와 속성을 따로 정의하는게 아니라 하나의 객체안에서 묶는것이다. 속성과 매서드들이 하나로 결합되는것! 추상화(Abstraciton) 통의 속성이나 기능을 묶어 이름을 붙이는..

클래스와 인스턴스🔥 매서드 호출은 객체.매서드()과 같이 객체 내에 매서드를 호출하는 방법! 이때 매서드 호출방식을 사용할때에는 화살표 함수를 사용하지 않는다! counter 예시 [code] ES5버전 문법의 경우 일반 함수와 동일하게 작성하되, 인스턴스 생성시 ✨‘new‘ ****키워드를 사용 일반 함수와 구분을 위해서 첫문자를 대문자로 사용 👏클래스 : 속성의 정의 ES5 문법 예시 ES6 문법예시 👏클래스 : 매소드의 정의 ES5 문법 예시 ES6 문법예시 👉‘new‘ 키워드로 생성된 인스턴스의 this는 인스턴스자체를 의미 // ES5 function Car(brand, name, color){ this.brand = brand this.name = name this.color = color }..