리액트 명령어 # (최초1번) npm install -g create-react-app # react 프로젝트 만들기 : npx create-react-app 프로젝트명 # react 프로젝트 실행하기 : cd 프로젝트명 (프로젝트명 폴더로 들어가기) npm start (react 서버 가동 명령어)) # react 프로젝트 중단하기 : vscode 터미널 창에서 : ctrl + c (2번이상 타이핑하고 엔터) 리액트 특징 # React(페이스북, 점유율1위) / Vue(개인, 구글퇴사) / Angular js(구글 x) # React / Vue : SPA(Single Page Application) 개발 # (html 1장으로 개발 : 메뉴: 홈/로그인/회원가입 페이지 등) # (각 페이지가 js 코딩..
노드 노드 : js 를 웹브라우저 없이 실행하게 만들어주는 프로그램 장점 : 비동기 기반(성능 빠름) 예) 백엔드, 프론트엔드 모두 개발할 수 있게됨 노드 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 18.17.1 LTS 다운 아무것도 체크 안하고 설치 통합 터미널에서 열기 버전 확인 node -v 노드 실행 object array (객체 배열) DOCTYPE html> 객체 배열 : 배열 안에 객체가 들어가 있는 형태 let data = [ { name: "혼자 공부하는 자바", price: 18000, publisher: "한빛미디어", ..
들어가기에 앞서 라이브러리 의미 : 자주 사용되는 함수들의 모임(묶음) jquery 배경 : 1) 웹브라우저(익스플러워, 크롬, 사파리 등) 간에 js 문법잘 동작을 안했음 (크로스 브라우저 문제 => jquery 등장)현재는 바닐라 js 가능 2) 바닐라 js 보다 코딩이 짧고 사용이 쉬움 단점 : 용량이 크고 , 성능이 떨어짐 jquery : 함수를 이용해서 DOM 조작 $(function() {jquery실행문} : html 위쪽에 넣어도 실행된다. => html 태그 보다 뒤 늦게 실행을 시켜주는 구문 - jquery cdn : 인터넷 주소로 자동 다운로드 입력 필수 - 사용법 : $(function() { $(css선택자).함수("속성명", "값"); }); jq selecter html DOC..
window open html DOCTYPE html> 새창(새탭) 열기/닫기, 새창/새탭 금지(웹브라우저 설정) #container { width: 300px; margin: 20px auto; } button { border: 1px solid #222; padding: 15px; font-size: 0.8em; margin-right: 20px; } 팝업 창 열기 팝업 창 닫기 notice html DOCTYPE html> 공지사항 #content { border: 2px double skyblue; border-radius: 10px; padding: 10px; } ul { margin-left: 15px; list-style-type: none; } ul li { margin: 10px 5px;..
dom children html DOCTYPE html> Document HTML CSS Vanila js React js // TODO: 자식 요소(태그) 접근 // 선택함수 : querySelector(css선택자) let ulTag = document.querySelector("ul"); // ul 태그 // TODO: 사용법 : 태그.children[1] : 2nd li // 태그.children[2] ; 3rd li let two = ulTag.children[1].innerHTML; // 2nd li의 텍스트 let three = ulTag.children[2].innerHTML; // 3rd li의 텍스트 // 출력 console.log("two", two); console.log("thre..