컴포넌트 정의NOTE!컴포넌트: 스스로 상태를 관리하는 캡슐화된 코드 조각으로, 하나의 JSX를 반환하는 함수이다. 컴포넌트는 기본적으로 함수이기 때문에, 자신만의 고유한 로직이 들어갈 수 있다. 그리고 컴포넌트는 스스로 상태를 가질 수 있으며 상태가 변하면 자동으로 반영된다.`import`와 `export` 문법을 사용하여 컴포넌트를 모듈 방식으로 분리하고 관리한다.import Hello from './components/Hello';import World from './components/World';export default function App() { return ( );} 컴포넌트의 이름은 반드시 PascalCase로 작성해야 한다. 즉, 컴포넌트의 이름..

JSX 개념NOTE!JSX는 Javascript를 확장한 문법이다.JSX는 HTML처럼 보이지만 JavaScript 값이다. 따라서 내부적으로 JavaScript를 사용할 수 있다.const element = Hello, World!`React`는 기본적으로 JSX를 이용하여 화면을 렌더링한다.JSX의 특징 JSX는 HTML이 아니기에 JSX에서 사용되는 태그의 속성 이름은 HTML과는 약간 다르다.`class` → `className``for` → `htmlFor``onclick` → `onClick`그리고 다음과 같이 반드시 태그를 명시적으로 닫아줘야 하고, 하나의 부모 태그로 감싸져 있어야 한다.function App() { return ( Hello, World! ..

Node.js `Node.js`는 브라우저 밖에서도 JavaScript를 실행할 수 있도록 하는 런타임 환경이다. 오픈 소스 JavaScript 엔진인 크롬 V8을 기반으로 동작한다. Single Thread의 non-blocking I/O 이벤트 기반 비동기 방식이다. 이는 코드가 실행될 때, 작업이 오래 걸리는 코드를 만나면 해당 코드의 실행이 끝나기를 기다리지 않고 넘어가고 시간이 지나 해당 코드 실행이 완료되면 그때 결과를 따로 받아서 처리한다는 것이다.NOTE!기존에는 브라우저에서만 JavaScript를 사용할 수 있었으나, `Node.js`를 통해서 로컬 PC에서도 사용할 수 있게 되었다.NPM(Node Package Manager)`Node.js`와 떨어질 수 없는 것이 바로 NPM인데, 이..

React가 무엇인가? `React`는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 특별히 `React`는 SPA 라이브러리(Single Page Application)이다. 이때 `React`는 프레임워크가 아닌 "라이브러리"에 속하는데 프레임워크와 라이브러리의 차이는 다음과 같다.프레임워크(Framework): 개발을 위한 기본 틀, 뼈대라이브러리(Library): 개발에 필요한 도구 또는 그 집합 `React`는 라우팅과 같은 프레임워크로서 갖춰야 할 기본적인 요소들을 모두 갖추고 있지는 않기에 프레임워크에 속하지 않고 라이브러리에 속한다.React를 배워야 하는 이유 그렇다면 `React`를 배워야 하는 이유는 무엇일까? 대표적으로 2가지의 장점 때문이다.트렌드이다: Rea..

일급 객체 다음의 조건을 만족시키는 객체를 "일급 객체"라고 한다. 함수는 다음의 조건을 모두 만족하기에 일급 객체이다. 무명의 리터럴로 생성 가능하다. 변수나 자료구조 등에 저장할 수 있다. 함수의 매개변수에 전달 가능하다. 함수의 반환값으로 사용할 수 있다. 함수는 일급 객체이기에 함수의 매개변수에 함수를 전달할 수 있고, 반환값으로 사용 가능하다. 이것이 일급 객체로서 함수가 가지는 가장 큰 특징이다. 함수 객체는 호출이 가능하며, 일반 객체에는 없는 함수 고유의 프로퍼티를 소유한다. 함수 객체의 프로퍼티 함수 또한 객체이기에 프로퍼티를 가질 수 있는데, 함수만이 가지는 특별한 프로퍼티가 존재한다. arguments, caller, length, name, prototype 프로퍼티들이다. 함수 객..

객체 생성 방법은 여러 가지가 있다. 이번에는 객체 리터럴로 생성하는 방법이 아닌, 생성자 함수를 사용하여 객체를 생성하는 방식에 대해 알아보도록 하겠다.이때, 생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 함수를 말한다. 생성자 함수에 생성된 객체를 인스턴스라고 한다. (빌트인)생성자 함수의 종류로는 Object, String, Number, Boolean, Function, Array, Date, RegExp, Promise 등이 있다.Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체가 생성되고, 빈 객체를 생성한 이후에는 프로퍼티와 메서드를 추가할 수 있다.// 빈 객체 생성const person = new Object();// 프로퍼티 추가pe..

내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위한 의사 프로퍼티와 의사 메서드로 [[ ... ]] 방식으로 이중 대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드이다. 내부 슬롯과 내부 메서드는 개발자가 직접 접근하거나 호출할 수는 없다. 다만 일부 내부 슬롯과 내부 메서드에 한해 간접적으로 접근할 수 있다. 프로퍼티 어트리뷰트 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태(프로퍼티 값, 값의 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부)를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 즉, 프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 슬롯(프로퍼티의 상태를 나타낸다)이다. 프로퍼티 어트리뷰트는 다음과 같다. [[..