-
ReactJS - #1 기초 및 실습React 2020. 12. 16. 14:04
#1 기초 및 실습
리액트를 왜쓰나.. ?
jsp 쓰고 jquery로 해도 상관없는데 그러면 퍼포먼스가 잘 안나와서 웹이 버벅거릴 수 있다
근데 이러면 사용자들이 어? 이 사이트 느리네? 안써야지 ..
빨리빨리 민족..
퍼포먼스가 좋다
리액트는 하나의 libraray
리엑트가 프레임워크처럼 보이는 이유는 여러개의 보조 모듈들이 생겨서 그렇게 보임
javascript란?
- 웹 페이지를 동적으로 제어하기 위해 고안된 스크립트 언어
(독립된 시스템에서 사용자가 직접 동작 시키는 프로그래밍 언어)
- 웹 브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어
- 대부분의 웹 브라우저가 javascript 엔진(인터프리터)
- 크로스플랫폼인 웹의 중요성의 확대와 함께 중요
- ECMAScript 를 준수하는 범용 스크립트 언어
- javascript 엔진 : V8, SpiderMonkey, JavascriptCore, Chakra
* 크로스 브라우징
웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말한다.
HTML, CSS, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로보여지고 작동되는 기법.
* ES6 의 문법들이 호환되지 않는 문제 때문에 babel 이 등장 ES6법을 호환되는 ES5문법으로 자동변환해서 실행하게 해줌
- 퍼포먼스의 차이
- 지원되는 ECMAScript의 차이
- 새로운 버전의 ECMAScript와 Javascript 엔진의 변화는 별개
- 브라우저별로 특정 버전의 ECMAScript 호환되는지 체크가 중요
- 바벨의 등장(Babel) : ES6 이상의 문법을 ES5 이하의 문법으로 변환
javascript 를 보통 객체지향적 언어라고 부른다.
(과거에는 class라는 개념이 없어서 객체지향적 언어라고 부르기 좀 애매했는데 이제 있음)
클래스(Class)
- 객체를 만들어 내기 위한 설계도
- 변수와 메서드의 집합체
객체(Object)
- 구현하고자 하는 대상
- 클래스의 인스턴스이자 모든 인스턴스를 포괄
인스턴스(Instance)
- 설계도를 바탕으로 구현된 구체적 실체
분류(Classification)
- 객체를 클래스로
- 객체들을 공통적인 속성을 공유하는 추상적인 개념으로 묶는 것
인스턴스화(Instantiation)
- 클래스를 인스턴스로
- 분류의 반대 개념
- 추상적인 개념으로 실재하는 객체를 생성
document.body = <body> 태그에 접근 document.getElementsByTagName('태그명') = 태그명으로 선택 document.getElementsByClassName('클래스명') = 클래스명으로 선택 document.getElementById('아이디') = 아이디명으로 선택 document.querySelector('선택자') = css 선택자로 선택 document.createElement('태그명') = 태그 생성 document.createTextNode('텍스트') = 자식노드에 텍스트 생성react에서는 나중에 hook을 쓰면 직접 태그 객체에 접근할 수 있기 때문에 위의 셀렉터를 사용할 수도 있고 사용 안할 수 도 있다.
유튜브 양재동 코드랩
www.youtube.com/watch?v=yj5CTSX-iD0&t=161s
'React' 카테고리의 다른 글
ReactJS - #3 기초 및 실습 (0) 2020.12.16 ReactJS - #2 기초 및 실습 (0) 2020.12.16 정적 타입 언어 와 동적 타입언어 (0) 2020.12.16 React - 주요개념 #5 State and Liftcycle (0) 2020.11.27 React - 주요 개념 #4 Components 와 Props (0) 2020.11.27