1. React란 무엇인가? 리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 생성하기 위해 사용된다. 리액트는 싱글 페이지 애플리케이션(Single Page Application, SPA)이나 모바일 애플리케이션 개발에 사용될 수 있다. 2. JSX란? JSX란 JavaScript eXtension의 약자로 자바스크립트의 확장 버전이다. JSX는 HTML 태그를 자바스크립 코드 내부에 작성할 수 있는 버전이다. 3. JSX에 표현식 포함하기 App.js function App2(){ const name = 'yonghwan kim'; const element = Hello, {name}; return ( {element} ); } expor..

1.1 리액트(React) 설치 과정 Node JS 최신버전 설치 Node JS를 설치하면 NPM(Node Package Manager)가 같이 설치된다. NPM은 React 개발에 필요한 다양한 모듈들을 다운받아 설치할 수 있다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Visual Studio Code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optim..

본 글은 인사이드 자바스크립트 도서의 내용을 복습하기 위해 작성된 글입니다. 4.3 함수의 다양한 형태 콜백 함수(CallBack Function) 즉시 실행 함수(Immediate Function) 내부 함수(Inner Function) 함수를 리턴하는 함수 4.3.1 콜백 함수(CallBack Function) 콜백함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수를 말한다. 또한, 특정 함수의 인자로 넘겨서, 코드 내부에서 호출되는 함수 또한 콜백 함수가 될 수 있다. 대표적인 콜백 함수의 사용 예가 자바스크립트에서의 이벤트 핸들러 처리이다. 자바스크립트의 이벤트 처리와 콜백 함수 ..

본 글은 인사이드 자바스크립트 도서의 내용을 복습하기 위해 작성된 글입니다. 4.2 함수 객체 : 함수도 객체다 4.2.1 자바스크립트에서는 함수도 객체다 자바스크립트에서는 함수도 객체다. 즉, 함수의 기본 기능인 코드 실행뿐만 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있다는 것이다. add() 함수도 객체처럼 프로퍼티를 가질 수 있다. // add() 함수도 객체처럼 프로퍼티를 가질 수 있다. // 함수 선언 방식으로 add() 함수 정의 function add(x,y){ return x+y; } // add() 함수 객체에 result, status 프로퍼티 추가 add.result = add(2,3); add.status = "OK"; console.log(add.result); /..

본 글은 인사이드 자바스크립트 도서의 내용을 복습하기 위해 작성된 글입니다. 4.1 함수 정의 함수 생성 방법 함수 선언문(function statement) 함수 표현식(function expression) Function() 생성자 함수 4.1.1 함수 리터럴 자바스크립트에서는 함수도 일반 객체처럼 값으로 취급한다. 따라서 객체 리터럴 방식처럼 자바스크립트에서는 함수 티러럴을 이용해 함수를 생성할 수 있다. 함수 리터럴을 통한 add() 함수 정의 function add(x,y){ return x+y; } function 키워드 : 자바스크립트 함수 리터럴은 function 키워드로 시작 함수명 : 함수의 이름, 함수명은 선택 사항이다. 함수명이 없는 함수를 익명 함수라 한다. 매개변수 리스트 : 함..

본 글은 인사이드 자바스크립트 도서의 내용을 복습하기 위해서 작성된 글입니다. 3.7 연산자 자바스크립트 연산자의 대부분은 다른 언어와 유사하다. 자바스크립트에서 주의해야 할 연산자는 대표적으로 아래와 같다. + 연산자 typeof 연산자 ==(동등) 연산자, ===(일치) 연산자 !! 연산자 3.7.1 + 연산자 + 연산자는 더하기 연산과 문자열 연결 연산을 수행한다. 아래 예제와 같이 두 연산자가 모두 숫자일 경우에만 더하기 연산이 수행되고 나머지는 문자열 연결 연산이 이루어진다. let add1 = 1+2; let add2 = "my" + "string"; let add3 = 1 + "string"; let add4 = "string" + 2; console.log(add1); // 3 consol..