분류 전체보기 (104) 썸네일형 리스트형 [Node.js] Node.js 설치하기 https://nodejs.org/en 을 방문합니다. [Download Node.js(LTS)] 버튼을 눌러 다운로드를 실행합니다.자신의 운영체제에와 원하는 버전을 받을 경우는 다음의 주소에서 선택해서 받습니다.https://nodejs.org/en/download/package-manager Node.js — Download Node.js®Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 다운받은 파일을 실행해서 설치를 진행 합니다. npm모듈중 몇몇 모듈들은 C/C++로 컴파일되야하는 것들이 있습니다. 그래서 Python과 Visual Studio Build Tools가 만약 필요하다면 자동으로 설.. [Node.js] Node.js란? https://nodejs.org/en 홈페이지의 설명을 보면 다음과 같습니다.Run JavaScript EverywhereNode.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.변역하면 어디서나 JavaScript 실행Node.js®는 개발자가 서버, 웹 앱, 명령줄 도구 및 스크립트를 만들 수 있는 무료 오픈 소스 크로스 플랫폼 JavaScript 런타임 환경입니다. Node.js는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(Runtime Enviro.. [React Exam 13] create-react-app를 이용한 Application 작성하기 1단계 : node.js를 설치합니다.https://101developer.tistory.com/16 Node.js 설치하기https://nodejs.org/en 을 방문합니다. [Download Node.js(LTS)] 버튼을 눌러 다운로드를 실행합니다.자신의 운영체제에와 원하는 버전을 받을 경우는 다음의 주소에서 선택해서 받습니다.https://nodejs.org/e101developer.tistory.com 2단계 :create-react-app를 설치합니다.npm버전 확인하기C:\>npm -vnpm 최신버전으로 업데이트 하기C:\> npm install -g npm@latest create-react-app 설치하기 C:\> npm install -g create-react-app전역에 설치.. [React Exam 12] HTML로 시작해보는 React 보너스(박스오피스 보기) 다음은 완성된 전체 코드 입니다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465!DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>React 예제 013/title> script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>/script> scri.. [React Exam 11] HTML로 시작해보는 React 보너스(천자문 보기 2) 다음은 완성된 전체 코드 입니다.123456789101112131415161718192021222324252627282930313233343536373839404142434445464748!DOCTYPE html>html lang="ko"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>React 예제 012/title> script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>/script> script src="https://unpkg.com/react-do.. [React Exam 10] HTML로 시작해보는 React 보너스(천자문 보기) 다음은 완성된 전체 코드 입니다.123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263!DOCTYPE html>html lang="ko"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>React 예제 011/title> script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>/script> script s.. [React Exam 09] HTML로 시작해보는 React Component 속성 다음 함수는 컴포넌트의 속성 값을 받는 "props"라는 매개 변수를 가집니다.전달되는 모든 속성을 객체로 받습니다. 속성이 key가 되고 값이 value가 됩니다. // 함수로 컴포넌트 만들기 function Welcome1(props) { console.log(JSON.stringify(props)); return {props.name}({props.age}세)님 반갑습니다.; } 콘솔 창에 전달된 데이터가 다음과 같이 표시됩니다.{"name":"한사람","age":18} 클래스 컴포넌트에서는 "this.props"로 전달이 됩니다. // ES6의 클래스로 컴포넌트 만들기 class Welcome2 .. [React Exam 08] HTML로 시작해보는 React Component 리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트(Component)'라는 단위를 사용합니다. 컴포넌트(Component) 는 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있습니다. 다시 말하면 UI를 구성할때 부품을 조립하듯이 완성할 수 있도록하는 것이 '컴포넌트(Component)' 입니다. 레고 블록으로 무언가를 만든다고 할때 하나의 블록이 '컴포넌트'라고 할 수 있습니다. UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩 하므로서 재사용성을 증가 시키고 이미 만들어진 컴포넌트들을 이용하여 새로운 컴포넌트를 쉽게 만들 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를.. 이전 1 ··· 9 10 11 12 13 다음
