분류 전체보기 (261) 썸네일형 리스트형 #3.4 Events part Two 이벤트요소를 찾으려면 console.dir 출력해서 앞에 on들어간거 찾으면됨 const title = document.querySelector(".hello h1"); console.dir(title); //element의 내부를 보는 법 function handleMouse(){ title.innerText="마우스 여깄당"; } function mouseClick(){ title.style.color="blue"; } function mouseLeave(){ title.innerText="마우스 갔당"; } title.addEventListener("mouseenter",handleMouse); title.addEventListener("click",mouseClick); title.addEvent.. #3.3 Events document는 html이 app.js를 load하기 때문에 존재함 모두 자바스트립트의 object->object의 속성 변경가능함, on으로 시작하는 것은 다 이벤트 event -> 클릭하는거, 입력끝내기, 엔터누르기 등등.. const title = document.querySelector(".hello h1"); console.dir(title); //element의 내부를 보는 법 title.innerText="Hello"; //h1의 text변경 function handleTitleClick(){ console.log("클릭됨"); title.style.color="blue"; //h1의 style을 자바스크립트에서 변경 } title.addEventListener("click",handleT.. 리액트 3강 JSX컴포넌트를 편리하게 사용하도록 하는 리액트만의 문법 -> Babel이라는 도구를 통해 JS로 컴파일(자바스크립트란 소리)중괄호 안에 변수명, 함수, 새로운 JSX넣기 모두 가능 JSX엘리먼트html의 img태그와 달리 연 태그가 있으면 닫는 태그도 반드시 있어줘야 함 2개 이상의 태그를 쓸 때는 꼭 다른 태그로 묶어줘야 함react fragment : 아무 내용 없이 단지 다른 태그들을 묶어주는 역할로 사용어트리뷰트(속성을 사용할 때) camelcase사용->class 대신 className으로 사용속성을 사용할 때 큰 따옴표로 감쌈주석자바스크립트 주석 : //jsx주석 : /**/ 리액트 2강 컴포넌트컴포넌트는 요소를 의미함각각의 요소를 만들어 하나의 object를 구성하는 방법으로 리액트는 전체 웹 페이지를 구성함컴포넌트란 props를 입력받아 JSX를 리턴하는 함수클래스형 컴포넌트도 존재하지만 사용하기 복잡하여 잘 사용하지 않음컴포넌트들이 모여 전체 리액트를 구성컴포넌트의 장점(레고 블럭과 유사)재사용성:다른 리액트 모듈에서 언제든지 호출가능가독성:html코드들을 일일히 보는 것보다 보기 편함유지보수하기 편리 리액트 1강 리액트의 탄생이유인터넷 브라우저에서 화면이 나타나는 원리 Client(브라우저)가 Server로 데이터를 요청, Server는 Client(브라우저)로 데이터를 응답해줌데이터의 3가지 요소HTML : 뼈대CSS : 스타일Javascript : 동적인 요소, DOM조작우리가 작성한 html코드는 DOM이라는 노드트리 개채구조로 변환되어 저장된 후 화면에 나타남Javascript가 DOM을 조작했었으나, 점점 웹 페이지가 복잡해지면서 React라는 DOM을 쉽고 직관적이고 체계적으로 조작할 수 있는 Javascript라이브러리가 탄생함 [혼자 공부하는 컴퓨터구조+운영체제] 6주차 기본미션 공부한 내용 드뎌 끝~ 이제 리액트 강의를 봐야것네용 [혼자 공부하는 컴퓨터구조+운영체제] 5주차 기본미션 공부한 내용 필기하는 맛이 좋네용 ~.~ [혼자 공부하는 컴퓨터구조+운영체제] 4주차 기본미션 공부한 내용 손으로 공부하는게 더 좋아서 손필기로 정리를 해보았어용 -ㅅ- 이전 1 ··· 29 30 31 32 33 다음
