전체 글 (185) 썸네일형 리스트형 리액트 5강 cmd에서 폴더 경로 바꾸기 : cd 경로node.js자바스크립트는 브라우저에서만 동작하는 언어, 자바스크립트를 컴퓨터에서 일반언어처럼 사용할 수 있게 해주는 런타임JVM,인터프리터 같은 매개체 역할node.js를 설치하면 npm,npx도 함께 설치됨npm : 특정 패키지를 설치, 제거, 업데이트하는 도구 -> 실행결과가 컴퓨터에 남음npx : npm레지스터에 있는 최신 버전의 패키지를 사용해 명령어를 실행해줌 -> 실행결과가 컴퓨터에 남지 않을수도리액트 프로젝트 생성하는 법, cmd에 치면 됨(윈도우 + R)C:\Users\yn112\OneDrive\바탕 화면\react>npx create-react-app sample-react-app create-react-app을 치면 아래 것들도 같이 설치됨De.. #3.7 CSS in Javascript part Two Click Me! //js파일 연결 body{ background-color: beige; } h1{ color: blue; transition: color.5s ease-in-out; } .clicked{ /*clicked라는 이름의 클래스 생성*/ color: tomato; } .sexy-font{ font-family: 'Courier New', Courier, monospace; } const h1 = document.querySelector(".hello h1"); function mouseClick(){ const clickedClass = "clicked sexy-font"; //string을 변수에 저장해서 이름 잘못쳐서 에러날수 있는거 방지 if(h1.className === clicke.. #3.6 CSS in Javascript 조건문으로 색 바꾸기 const h1 = document.querySelector(".hello h1"); function mouseClick(){ const currentColor = h1.style.color; let newColor; if(currentColor === "blue"){ newColor = "tomato"; }else{ newColor = "blue"; } h1.style.color = newColor; } h1.addEventListener("click",mouseClick); 핵심은 요소를 찾고, 이벤트 추가하고, 함수로 반응만들기 #3.5 More Events vs코드 글자들 한번에 바꾸는 키 : f2 document.body(head,title ...)은 호출가능 나머지 div이런건 getElementById같은걸로 찾아와야함 function handleWindowResize(){ document.body.style.backgroundColor="tomato"; //중요한 부분, h1 처럼 못가져옴 } function handleWindowcopy(){ alert("카피했당"); } function handleWindowOffline(){ alert("살려주세유"); } function handleWindowOnline(){ alert("살아있어유"); } h1.onclick = mouseClick; //이렇게도 사용가능, 근데 이거 구림 h1.addEven.. #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 ··· 19 20 21 22 23 24 다음
