■ Component의 생성 ● 1. render() - return 되는 html형식의 코드를 화면에 그려주는 함수(랜더링이다. - 화면에 내용이 변경되어야 할 시점에 자동으로 호출된다. ● 2. constructor(props) - 생성자 함수로 생명주기 함수들 중 가장 먼저 실행되며 처음 딱 한 번만 실행된다. - component내부에서 사용되는 변수(state)를 선언하고 부모객체에서 전달받은 변수(props)를 초기화할 때 사용된다. - super()함수는 생성자 함수 가장 위에서 호출된다.(자바와 동일) ● 3. getDerviedStateFromProps(props, state) - constructor() 함수 호출 다음과 render() 함수 호출 직전에 실행되는 함수이다. - 컴포넌트..
■ React란? - React는 컴포넌트이다. - UI를 구축하는 js라이브러리 겸 프레임워크, 즉 동적으로 사용자가 보게 될 화면을 꾸밀 수 있다. ■ 컴포넌트란? - UI구성을 확장성있고 유연하게 만들어주기 위해 만들어졌다. - 화면을 이루는 구성요소이며 하나하나를 컴포넌트라는 블록 단위로 포장해서 재사용성을 늘렸다. ※ 리액트에서는 화면에 모든 구성요소를 컴포넌트로 표현할 수 있다. ■ JSX(JavaScriptXML)문법이란? - JavaScript의 문법 안에서 html요소가 함께 들어가 있는 형태의 언어이다.(선언적 방식) - 리액트에서 UI를 구성하기 위해 보편적으로 사용되는 문법이며 자바스크립트의 문법을 통해 html요소를 생성하는 역할을 한다. - JSX문법은 개발자가 복잡한 자바스크립..
■ Ajax를 이용한 파일 업로드 ● jsp에서 html코드 작성하기 8. Ajax를 이용한 파일업로드 파일전송 ● script코드 작성하기 ● fileUpload.do serlvet 코드 생성하기 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String filePath = request.getServletContext().getRealPath("/upload/"); MultipartRequest multiRequest = new MultipartRequest(request, filePath, 1024 * 1024 * 10, "UTF-8"..
■ XML데이터 가져오기 ● jsp에서 html코드 작성하기 6. XML데이터 가져오기 xml 데이터 가져오기 소설 프로그래밍 ● script 코드 작성하기 ● book.xml 파일 생성 소설 해질무렵 황석영 소설 소나기 황순원 소설 안나카레 톨스토이 프로그래밍 자바 민경민 프로그래밍 민경민 만화 원피스 루피 ● 결과 확인
■ Ajax로 html파일 받아오기 ● jsp에서 html코드 작성하기 5. Ajax로 html파일 받아오기 html 문서받기 ● script 코드 작성하기 ● jqHtmlTest.do servlet 코드 생성 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setAttribute("errorMsg", "html데이터 응답받기"); request.getRequestDispatcher("views/errorPage.jsp").forward(request, response); } ● 결과 확인
■ 응답데이터로 여러 개의 객체들이 담겨있는 ArrayList 받기 ● jsp에서 html코드 작성하기 일반 게시판 조회 글번호 카테고리 제목 작성자 조회수 작성일 ● script 코드 작성하기 ● jqAjax4.do servlet 코드 생성 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { int listCount; // 현재 총 게시글 갯수(1000개) int currentPage; // 현재 페이지(즉, 사용자가 요청한 페이지) int pageLimit; // 페이지 하단에 보여질 페이징바의 페이지 최대 갯수(10개씩 할예정) int boa..
