잇!(IT) 블로그

- index.html - 위의 코드에서 가 React 애플리케이션을 렌더링할 컨테이너 역할을 한다. 1. JavaScript 파일 작성 : React 애플리케이션의 JavaScript 파일을 작성한다. 이 파일은 React 컴포넌트를 정의하고, 이 컴포넌트를 'ReactDOM'을 사용하여 'index.html' 파일의 컨테이너에 렌더링 하는 역할을 한다. 2. 'ReactDOM.render' 또는 'ReactDOM.createRoot' 사용 : 'ReactDOM'은 React 엘리먼트를 'index.html' 파일의 컨테이너에 렌더링하는 메서드를 제공한다. React18부터는 'createRoot' 메서드를 사용하여 렌더링을 시작할 수도 있다. - 임의의 js 파일 import React from 'r..

- JSX - JSX는 JavaScript 파일 내에 HTML과 유사한 마크업을 작성할 수 있게 해주는 JavaScript용 구문 확장이다. - JSX의 규칙 1. 단일 루트 요소를 반환한다. Hedy Lamarr's Todos ... - 최상위 태그로 를 사용하였고 를 사용해도 된다. Hedy Lamarr's Todos ... - 빈 태그를 조각이라고 한다. HTML 트리에 흔적을 남기지 않고 항목을 그룹화 할 수 있다. 2. 모든 태그는 닫아야 한다. - 자체 닫는 태그인 같은 경우 와 같이 닫는다. 3. CamelCase를 사용한다. - 이름에는 대시를 포함하거나 class와 같은 예약어를 쓸 수 없다. - class는 예약어이므로 React에서는 해당 DOM 속성의 className 이름을 따서 ..

- React.js 1. 반복적인 코드를 줄 일 수 있다. - 컴포넌트와 방식을 사용하기 때문에 중복된 코드로 인한 산탄총 수술을 할 필요가 없어진다. - 즉, React는 Component 기반의 UI 라이브러리이다. 2. 선언형 프로그래밍으로 목적을 바로 나타낸다. - 프로그래밍 방식에는 명령형 프로그래밍 (대표적으로 jQuery)가 있고, 선언형 프로그래밍에는 (React)가 있다. - 선언형 플로그래밍은 목적을 바로 나타내기 때문에 코드의 목적이 간결하고 확실해진다. 3. V irtual DOM - DOM (Document Object Model)은 태그, 아이템이 코드에 추가 될 때마다 브라우저가 웹 페이지를 보여주기 위해 동작하는 흐름이 계속해서 반복적으로 일어난다. - React는 Virtu..

- Node.js - JS는 JS 엔진 위에서 동작하게 된다. 대표적으로 Chrome의 V8 JS 엔진이 대표적인 JS 엔진이다. - JS는 웹브라우저 안에서만 동작하고 html 문서 안에서 동작하게 된다. - Chrome의 V8 엔진을 브라우저가 아닌 어디서든 사용할 수 있도록 시작한 프로젝트가 Node.js이다. - 즉, Node.js JS의 실행 환경이고 JS엔진이며 어디서든 JS를 사용할 수 있도록 도와준다. + JS로 Web Server를 생성하는 것이 가능해졌다. - 결론적으로 React는 JS 파일을 쉽게 만들어내는 기술이다. React는 Node.js를 기반으로 실행된다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime bui..

- 동기 & 비동기 - 동기 - Javascript는 코드가 작성된 순서대로 작업을 처리한다. - 이전 작업이 진행 중 일 때는 다음 작업을 수행하지 않고 기다린다. - 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. - 비동기 - 싱글 쓰레드 방식을 이용하면서, 동기적 작업의 단점을 극복하기 위해 여러 개의 작업을 동시에 실행 시킨다. - 즉, 먼저 작성된 코드의 결과를 기다리지 않고, 다음 코드를 바로 실행한다. function taskA(a,b, cb) { // console.log("A 작업 끝"); setTimeout(() => { const res = a + b; cb(res); }, 3000); } function taskB(a, cb){ setTimeout(() =..

- 함수 // 콜백 함수 사용 function checkMood(mood, goodCallback, badCallback) { // 함수 파라미터로 함수를 사용할 수 있다. if(mood === "good"){ // 기분 좋을 때 하는 동작 goodCallback(); } else { // 기분 안 좋을 때 하는 동작 badCallback(); } } function cry() { console.log("ACTION :: CRY"); } function sing() { console.log("ACTION :: SING"); } function dance() { console.log("ACTION :: DANCE"); } checkMood("sad", sing, cry); let person = { nam..