React Element Element는 컴포넌트의 구성요소이며 React App을 구성하는 가장 작은 단위로 화면에 표시할 내용을 기술합니다. DOM 노드 혹은 컴포넌트를 표현하는 JavaScript의 일반 불변 객체(Plain Immutable Object)에 해당합니다. React 라이브러리에 있는 React.createElement(…) ...

CRA (create-react-app) React 프로젝트를 개발하고 실행하기 위해서는 Babel, Webpack 등 많은 설정이 필요합니다. 이는 React 프로젝트를 시작하는데 큰 어려움으로 작용합니다. 따라서, 페이스북은 많은 사람들이 쉽고 빠르게 React를 시작할 수 있도록 create-react-app을 제공하기 시작했습니다. ...

JSX JSX는 React에서 사용하며 Javascript에서 XML을 추가해 확장한 문법입니다. React는 별도의 파일에 HTML 마크업 언어와 Javascript 로직 언어를 동시에 작성하여 컴포넌트 단위로 분리합니다. 이러한 형태는 공식적인 자바스크립트 문법이 아니므로 브라우저를 실행하기전에 Babel을 이용해 일반 자바스크립트 형태의 코...

React 탄생 배경 웹에서의 기능들이 많아지면서 사용자들과 상호작용하는 UI 역시 많아지게됩니다. 이에 개발자들은 세대별 기술의 한계를 느끼고 새로운 기술을 개발하게됩니다. 1세대 기본적인 HTML, CSS, Javascript로 DOM을 조작하며 이벤트를 발생시킵니다. 2세대 JQuery ...

Javascript에서의 Promise에 대해 알아보자. Promise Javascript에서 비동기 처리를 위해 콜백 페턴을 많이 사용합니다. 콜백 패턴은 코드가 길어짐에따라 콜백지옥 현상이 쉽게 나타나 가독성이 나쁘고 비동기 처리 중 발생하는 에러 처리가 힘든 문제점이 있습니다. 이러한 단점을 보안 하기 위해 ES6에서는 새로우 패턴인 ...

Javascript 에서의 async / await 에 대해 알아보자. async / await async / await는 Promise를 쉽게 사용할 수 있도록 도와주는 Promise의 Syntatic Sugar입니다. Syntatic Sugar : 가독성을 좋게 만드는 것 기본 문법 async function 함수명() { ...

Axios에 대해 알아보자. Axios 라이브러리 Axios는 공식문서에서는 ‘Promise based HTTP client for the browser and node.js‘라고 소개합니다. 즉, 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. React에서 OpenAPI를 이용한 통...

Fetch API Fetch API는 HTTP 요청과 응답 등을 Javascript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. XMLHttpRequest 모듈과 비교해서 Fetch는 Promise 기반으로 구성되어 있어 더 간편하게 사용할 수 있습니다. 기본 구조 fetch(url, options) .then((response...

Ajax에 대해 알아보자. Ajax (Asynchronous Javascript and XML) Ajax란 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나입니다. Javsscript의 라이브러리 중 하나로 XMLHttpRequest 객체*를 이용해 웹 페이지 전체를 다시 로딩하지 않고, 웹 페이지의 일부분만을 갱신할 수 있...

Javascript에서의 동기, 비동기에 대해 알아보자. 동기 처리 (Synchronous) 우선순위 작업이 끝날 때까지 기다리는동안 준비상태가 되어 다음 작업을 할 수 없는 특징을 말합니다. 즉, 직렬적으로 작업을 수행하기 때문에 요청과 동시에 그 응답이 요청을 요구한 자리에 바로 주어져야하므로 응답이 올 때 까지 기다려야 한다는 단점이 있...