기록저장소

Elements의 정의와 생김새 Elements : 리액트 앱을 구성하는 가장 작은 블록들 (Elements are the smallest building blocks of React apps.) Descriptor : 화면에 나타나는 내용을 기술하는 자바스크립트 객체 React Elements의 생김새 : 자바스크립트 객체(불변성) 형태로 존재 //JS 객체 { type: 'button',//DOM 노드 props: {//속성 className: 'bg-green', children: { type: 'b', props: { children : 'Hello, element!' } } } } //랜더링 결과 Hello, element! //React 컴포넌트 element, JS 객체형태 { type: B..

JSX의 정의와 역할 JSX : A syntax extension to JavaScript, JS 확장 문법, JavaScript + XML/HTML const element = Hello, world! JSX의 역할 : html -> JS React.createElement( type, [props], [..children] ) //JSX 사용 class Hello extend React.Component { render(){ return Hello {this.props.toWhat}; } } ReactDOM.render( document.getElementById('root'); ); //JSX 사용x class Hello extend React.Component { render(){ return R..

리액트는 무엇인가? UI 라이브러리 : AngularJS, React, Vue.js 라이브러리 : 자주 사용되는 기능들을 정리해 모아놓은것 리액트의 장점과 단점 리액트의 장점 1. 빠른 업데이트(Virtual DOM) & 랜더링 속도 2. Component-Based : 레고조립하듯 컴포넌트들을 모아서 개발 -> 재사용성 3. 재사용성(Reusability) : 계속해서 사용이 가능한 성질 -> 개발기간 단축, 유지보수 용이 4. Meta 5. 활발한 지식공유 & 커뮤니티 6. React Native를 활용하여 모바일 어플리케이션 구축 가능 리액트의 단점 1. 방대한 학습량 : Virtual DOM, JSX, Component, State, Props.., 지속적인 업데이트 2. 높은 상태관리 복잡도 :..

HTML과 CSS HTML(Hyper Text Markup Language) : 웹사이트의 뼈대를 구성하기위해 사용하는 마크업 언어 / Tag //실제로 웹사이트에서 보이는 콘텐츠 SPA(Single Page Application) : 하나의 페이지만 존재하는 웹사이트, 어플리케이션 CSS(Cascading Style Sheets) : 웹사이트의 디자인 요소 JavaScript 소개 및 자료형 JavaScript(ECMAScript) : 웹사이트의 동적요소, 주로 웹사이트에서만 사용되어왔으나 최근에는 ReactNV나 Electron에서도 사용됨, 프로그램이 실행되는 런타임에 코드가 실행됨(script 언어의 특징) 자료형(Data Type) //Number type let n1 = 1234; let n2..

19강. 이벤트 state props 그리고 render 함수 class App extends Component{ constructor(props){ super(props); this.state = { // //읽기, 클릭 구분을 위한 mode mode:'welcome', subject:{title:"WEB", sub:"World wide Web!"}, welcome:{title:"welcome", desc:"Hello, React!"}, // contents:[ {id:1, title:'HTML', desc: 'HTML is ..'}, {id:2, title:'CSS', desc: 'CSS is ..'}, {id:3, title:'JS', desc: 'JS is ..'} ] } } //↑ props o..

13강. props class Subject extends Component{ render(){ return( {this.props.title} {this.props.sub} ); } } class App extends Component{ render(){ return( ); } } 14강. React Developer Tools 개발자 도구에서 리액트 컴포넌트 확인 가능, 임시 수정 가능 15강. Component 파일로 분리하기 //TOC.js 생성 //error. 'Component' is not defined 해결 //react에서 {component} 노드 로딩 import React, { Component } from 'react'; class TOC extends Component{ rend..

7강. JS 코딩하는 법 //index.html //index.js const root = ReactDom.createRoot(document.getElementById('root')); root.render(

4강. npm을 이용해서 create-react-app 설치 1. npm을 이용하여 create-react-app 설치하기 1) node.js 설치 : https://nodejs.org/ko/ 2) cmd 창 열기 : window+R -> cmd *cmd : 컴퓨터를 명령어를 이용하여 제어하는 프로그램 npm -v//npm 버전확인 3) 설치하기 npm install -g create-react-app sudo npm install create-react-app//권한이 없을 경우 3-1) npm 또는 node의 버전 업그레이드를 요구할 때 npm install -g npm@8.15.1//npm 버전 업그레이드 node버전 업그레이드 : https://nodejs.org/ko/ 에서 최신버전 재다운로드 ..