Today Yewon Learned

import ReactDOM from 'react-dom'; ReactDOM.render(안녕 리액트!, document.getElementById('root')); import ReactDOM from 'react-dom'; const element = 안녕 리액트!; ReactDOM.render(element, document.getElementById('root'));​ 결과 동일 import ReactDOM from 'react-dom'; const element = 안녕 리액트!; console.log(element); ReactDOM.render(element, document.getElementById('root'));​ - Console 화면에서 확인해보면, JavaScript 객체가 출..

- index.jsp 장비 목록에서 장비 하나를 클릭하면 해당 장비에 대한 정보 검색 - combox box를 이용하여 장비 목록 선택 - index.jsp 장비관리 메뉴를 클릭하면 전체 장비 조회가 기본값으로 selected, 다른 장비도 선택할 수 있어야함 - Controller.java @RequestMapping(value = "machine.do", method = {RequestMethod.GET, RequestMethod.POST }) public String index(ModelMap model, HttpServletRequest request) throws Exception { List list = menuService.getUserMenu(request.getSession().getAt..

JSX ※ 주의할 점 - JSX로 html태그를 작성할때는 하나로 감싸진 태그로 작성 import ReactDOM from 'react-dom'; ReactDOM.render( 안녕 리액트!, // 오류 발생 document.getElementById('root') ); import ReactDOM from 'react-dom'; ReactDOM.render( // 라는 하나의 태그로 감싸서 오류 해결 안녕 리액트! , document.getElementById('root') ); import { Fragment } from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( 안녕 리액트! , document.getElementById('root')..

JSX - React에서 지원, javascript와 html을 섞어서 쓸 수 있는 javascript의 확장된 문법 ※ 주의할 점 - JSX는 javascript의 확장 문법이기 때문에 html문법을 완전히 그대로 사용할 수 없음 ex) class 속성 import ReactDOM from 'react-dom'; class Dice { roll() { console.log('Roll!'); } } // html - class 속성 그대로 사용 불가 /*ReactDOM.render(안녕 리액트!, document.getElementById('root'));*/ // JSX - className 속성으로 사용해야함 ReactDOM.render(안녕 리액트!,document.getElementById('ro..

실행순서 index.html → index.jsp index.html - 웹 브라우저에서 가장 먼저 실행되는 파일 index.jsp - index.jsp파일이 열리고 나서 실행되는 파일 - React 코드들 중에서 가장 먼저 실행되는 파일 import ReactDOM from 'react-dom'; ReactDOM.render( 안녕 리액트!, document.getElementById('root') // 'root'라는 id속성 가져옴 ); - ReactDOM이라는 패키지에서 default로 export하는 객체를 ReactDOM이라는 이름으로 import해서 이 객체의 render라는 함수를 실행 - render : '화면을 그린다', React에서는 render라는 메소드로 html 태그를 만들어줌..

- create-react-app 으로 리액트 프로젝트 생성 npm init react-app 혹은 폴더를 VS Code로 열고 터미널에서 npm init react-app . - 개발 모드 실행 npm run start - 개발 모드 종료 Ctrl + C - react 개발자 도구 살펴보기 1. Chrome 에서 React Developer Tools 다운로드 후 React 서버 (loaclhost:3000)에 접속 후 개발자 모드 실행 2. >> 클릭하여 Components 선택하기 3. App 이라는 이름의 react Component가 있다는 의미 4. Component - react개발의 기본 단위

SQL Query SELECT STATE_DATE , MAC_CD , MAC_CPU , MAC_MEMORY , MAC_CAPA FROM js_machine_state_log WHERE MAC_CD LIKE CONCAT('%',#MAC_CD#,'%') index.jsp 검색 일부분 장비 검색 장비명 검색 - search_machine_nm을 통해 검색 Contorller.java 일부분 if(request.getParameter("search_machine_nm") == null) { data.setMAC_CD(""); }else { data.setMAC_CD(request.getParameter("search_machine_nm")); } List state_list = machineService.get..