bloomCode

함수 선언문 또는 함수 표현식으로 정의한 함수는 일반적인 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다.생성자 함수로서 호출한다는 것은 new연산자와 함께 호출하여 객체를 생성하는 것을 의미한다.함수는 객체이므로 일반 객체와 동일하게 동작할 수 있다.함수 객체는 일반 객체가 가지고 있는 내부 슬롯과 내부 메서드를 모두 가지고 있기 때문이다. 함수는 객체이지만 일반 객체와는 다르다. 일반 객체는 호출 할 수 없지만 함수는 호출할 수 있다.함수 객체는 일반 객체가 가지고 있는 내부 슬롯과 내부 메서드는 물론 함수로서 동작하기 위해 함수 개체만을 위한 [[Eviorment]]. [[FormalParameters]] 등의 내부 슬롯과 [[Call]], [[Construct]] 같은 내부 메..

생성자 함수란 new연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라 한다. 객체 리터럴에 의한 객체 생성 방식은 직관적이고 간편하다. 하지만 객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성한다. 따라서 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율 적이다. 객체는 프로퍼티를 통해 객체 고유의 상태를 표현한다. 그리고 메서드를 통해 상태 데이터인 프로퍼티를 참조하고 조작하는 동작을 표현한다. 따라서 프로퍼티는 객체마다 프로퍼티 값이 다를 수 있지만 메서드는 내용이 동일한 경우가 일반적이다. 객체 리터럴에 의해 객체를 생성하는 경우 프로퍼티 구조가 동일함에도 불구하고 매번..

블록요소 (block element) 블록 요소는 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함 할 수 있습니다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다. 그리고 블록 요소 다음에는 줄바꿈이 이루어집니다. 인라인 요소 (inline element) 인라인 요소는 항상 블록 요소 안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수 있습니다. 그리고 기본적으로 콘텐츠가 끝나는 지점까지를 넓이로 가지게 됩니다. 그래서 임의로 width, height로 변형을 줄 수가 없습니다. 인라인 요소는 line-height로 줄의 높낮이를 조절..

React에서 State는 component 안에서 관리되는 것이다. 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다. 자식 컴포넌트들 간의 데이터를 주고받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고받는다. 그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다. 상태를 관리하는 상위 컴포넌트에서 계속 내려받아야 한다. => Props drilling 이슈 상태 관리 도구 종류 React Context Redux MobX Redux의 기본 개념 1. 스토어는 하나의 공간이다 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다. 2. 상태는 읽기 전용이다 리액트에서는 setState 메서드를 활용해야만 상태 변경이 가능하다. 리덕스에서도 ..

Componet 리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용합니다. 쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있고, 레고 블록으로 집을 쌓게 된 경우 하나의 블록이 '컴포넌트'라고 할 수 있습니다. 컴포넌트는 새로운 컴포넌트를 생성할 수 도 있고, MVC의 뷰를 독립적으로 구성하여 재사용할 수 있습니다. 리액트의 중요한 핵심인 '컴포넌트'에는 함수 컴포넌트, 클래스 컴포넌트 2가지가 있습니다. • 컴포넌트 구성 요소 1) property(props) - 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터입니다. 프로퍼티값은 자식 컴포넌트에서 수정할 수 없습니다. 2) state - 컴포넌트의 상태를 저장하고 수정 가능한 데이터입니다. 3) context - ..

함수의 목적 매핑(mapping): 입력값에 기반하여 결과값을 리턴한다. 컴퓨터 세계에서는 "입력 값을 출력 값에 매핑한다"라고 말한다. 프러시저(procedure, 절차): 함수는 일련의 과정을 수행하기 위해 실행된다. 이 일련의 과정을 우리는 프로시저라고 부른다. 또한, 이러한 스타일로 프로그래밍하는 것을 절차형 프로그래밍(procedural programming)이라고 한다. I/O(입출력): 스크린, 저장소, 시스템 로그나 네트워크 등과 대화하기 위해 함수를 사용할 수도 있다. 1) 입력한 값을 가공한 결과값이 필요할 때 2) 이 결과값으로 여러 과정을 거쳐야 할 때 3) 다른 시스템과 정보를 주고받기 위해 사용한다. 순수 함수와 비순수 함수 순수 함수는 동일한 인수가 전달되면 언제나 동일한 값을..

useRef로 특정 DOM 선택하기 JavaScript 를 사용할 때에는, 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. 리액트에서도 DOM 을 직접 선택해야 하는 상황이 발생할 때도 있습니다. 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야 된다던지, 또는 포커스를 설정해 줘야 된다던지 등 정말 다양한 상황이 있을 수 있다. 추가적으로 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM 에다 적용하기 때문에 DOM..

자바스크립트 개발을 하다 보면 모듈을 불러오는 문법 두 가지 require와 import 가 있고 둘 다 외부의 파일이나 라이브러리의 코드를 불러온다는 같은 목적을 가지고 있지만, 전혀 다른 문법 구조를 지니고 있다. require 은 NodeJS에서 사용되고 있는 CommonJS 키워드이고 Ruby 언어 스타일과 비슷하다고 한다. import ES6(ES2015)에서 새롭게 도입된 키워드로서 Java나 Python 언어 방식과 비슷하다고 한다. CommonJS는 JavaScript를 브라우저에서뿐만 아니라, 서버사이드 애플리케이션이나 데스크톱 애플리케이션에서도 사용하려고 조직한 자발적 워킹 그룹이다. 이 그룹은 JavaScript를 범용적으로 사용하기 위해 필요한 '명세(Specification)'를 ..

브라우저 저장소 웹 스토리지(Web Storage) : 웹 데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소. 쿠키(Cookie) : 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장 웹 스토리지 ( Web Storage) 웹 스토리지는 HTML5에 추가된 클라이언트 기반 키-밸류 저장소이며, 웹 스토리지는 로컬 스토리지 ( Local Storage ) 와 세션 스토리지 ( Session Storage )로 나눌 수 있습니다. 로컬 스토리지와 세션 스토리지의 차이점은 영구성과 범위에 있어서 크게 차이가 납니다. 먼저, 로컬 스토리지 ( Local Storage )는 브라우저를 종료해도 데이터를 보관(영구성)합니다. 또한, 도메인만 같으면 전역적으로 데이터..

this란? this란 JavaScript 예약어다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성된다. this는 코드 어디서든 참조할 수 있다. 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다. 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다. 함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다..