chez Manon

JSX JavaScript eXtension javascript의 확장문법. javascript에서 html과 같은 문법을 사용. JSX ? React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 markup언어를 리터럴로 입력한는 것으로 보이는데, 빌드시 Babel에 의해 javascript로 변환된다. Hello World! //babel이 javascript로 변환 "use strict"; React.createElement("div", null, React.createElement("b", null,"Hello"), "World!"); ✔️ JSX에서는 하나의 root 레벨 요소가 있어야한다. ? 자바스크립트는 하나 이상을 return 할 수 없기때문에 JSX 규칙 (Babe..

React 🔻 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리 ✔️ 사용이유? UI를 자동으로 업데이트 해줌 ( 가상 돔 virtual Dom을 통해 UI를 빠르게 업데이트) virtual Dom : 이전 UI상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산 ( 불필요한 UI업데이트 줌, 성능향상) ✔️ 작업환경 Node. js : js가 브라우저 밖에서도 동작하게 하는 환경 npm : 다양한 패키지를 설치하고 버전을 관리할 수 있음 React Native : 웹> 앱 / 안드로이드 & ios동시에 가능 React VS React.DOM react : component를 생성하고 관리 react.DOM : component를 가져와 DOM에 rendering하는 librar..

EVENT : 웹 페이지에서 일어날 수 있는 대부분의 일들 addeventlistener 🔻 event 표현 방식 1. on~ 2. addEventListener window.addEventListener("resize", EventHandler.ChangeWindow); window.onresize = EventHandler.ChangeWindow; const EventHandler = { ChangeWindow() { title.innerHTML = "window change"; title.style.color = colors[2]; } ✔️ onclick 프로퍼티에 함수를 할당 : 여러개 이벤트 핸들러 다룰수 없다는 단점 //event handling 이벤트 핸들링 (이벤트 발생시 어떤 동작하도록 ..

DOM Document Object Model : 웹페이지의 html을 계층화시켜서 트리구조로 만든 객체 모델 DOM을 활용하면 js로 html태그를 객체처럼 자유롭게 다뤄서 무엇이든 수정가능하고 새로운 콘텐츠 생성가능하다. Node 각 객체는 node라고 표현한다. head (parent node 부모노드) - meta, title (child node) head - body (sibling node 형제노드) > DOM 이동 시 활용 가능한 프로퍼티 Interactive javascript 인터랙티브 사람들로부터 입력을 받는 것 인터랙티브 컴퓨터 시스템은 사용자가 데이터나 명령을 입력할 수 있도록 한 프로그램. 사용자와의 상호작용은 대개 텍스트 기반 또는 그래픽 사용자 인터페이스 둘 모두가 사용 ✔..

변수 = 값 함수 = 명령들 (코드의 집합) 변수는 값을 저장하는 것이라고하면, 함수는 다양한 명령들을 저장하는 것, 특정작업을 수행하는 코드의 집합이라고 할 수 있다. 함수가 필요한 이유? > 재사용성 : 하나의 일을 하는 코드 조각을 정의된 블록안에 저장하고, 같은코드를 여러번 타이핑하기보다는 하나의 짧은 명령을 사용하여 언제든지 그 코드를 호출할 수 있게 하여 효율적인 장점이 있음. > 가독성 : 내부에 작성한 코드들의 포괄적 의미를 포함하여 함수명을 잘 지어놨다면, 함수이름만으로 함수의 기능과 동작을 유추하여 한번에 드러낼 수 있고, 해당 기능이 필요시에 함수를 호출함으로써 불필요한 소스는 줄어들고 체계적이고 가독성있는 소스구성 가능. //함수 선언 function 함수이름 (parameter 매..

Array 배열 : 순서매기고싶은 것, 묶음만들고 싶은것 [ ] 대괄호로 묶어줌 : 객체와 다르게 인덱스라는 순서를 가지는 특징 let array = ['java','javascript','python']; //index == propertyName console.log(배열이름[index]); > 배열안에 있는 값은 element (요소) > 대괄호안에 각 요소들이 순서매겨짐, 이 숫자값이 index (객체의 property name역할) > 요소에 접근 = indexing(인덱싱) [ ] 대괄호안에 순서 적어줌 (0부터 시작) */ 배열만드는 메소드 */ let arr = new Array(); //ex 4개의 공간을 가진 배열생성 let arr = new Array(4); 배열 활용 > 배열의 갯수..

Object { key : value , property name 주의사항 1. 첫 글자는 반드시 문자, 밑줄(_), 달러$중 하나로 시작 2. 띄어쓰기 금지 3. 하이픈(-) 금지 > 쓰고싶으면 ' ' 따옴표로 감싸줌 ( 'brand name' , 'born-Year' ) > 객체에서 property 값 접근 //객체 (Object) let Object = { name : '객체', language : 'javascript', 'born Year' : 2021, cats : '냥이' 33 : '숫자' } let name = 'cats' */ 점 표기법 Dot Notation */ console.log(Object.name) //객체 (key의 name을 인식) */ 대괄호 표기법 Bracket nota..

조건문 ( If / switch ) If문 조건부분이 충족되면 동작부분을 수행한다. 넓은 범위를 만족하는 조건식을 만들 때 효과적이다. //if문 if (조건부분) { 동작부분 } //예시 if (temperature