멀티캠퍼스 풀스택 과정170 백엔드1-3. JSP-2: 웹 배포하기 웹 배포하는 방식: 1. war 파일로 압축한 뒤 2. Tomcat 서버에 복사한다. 1. 배포할 프로젝트 Export -> WAR file 2. Browse로 파일을 저장한 위치 선택 > Finish 3. war 파일을 복사해서 아파치 톰캣에 들어가서 ROOT 폴더가 보이는 곳 바로 밑에 붙여 넣기 4. 윈도우 검색창에 서비스 > Apache Tomcat 서버 Start! > 자동으로 복사본이 압축이 풀리게 된다. -> 압축이 풀린 webJSP에서 더 들어가면 컴파일된 class파일과 java 파일을 확인해볼 수 있다. 크롬을 열어서 홈페이지를 볼 수 있다. 홈페이지를 보는 방법 1. localhost 넣기 http://localhost:9090/webJSP(프로젝트명)/파일명 2. 127.0.0.1 .. 2022. 3. 3. 백엔드1-2. JSP-1: JSP기초와 예제(이클립스에서 웹 프로젝트 생성) 프로젝트 생성 NEW > Dynamic Web Project > Project name: webJSP > Finish -> webJSP 프로젝트 생성! > webapp에 index.jsp 생성! 웹 애플리케이션의 기본 디렉터리 구조 C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapps\webJSP 경로 안에 WEB-INF 폴더가 있음 webapps 웹 애플리케이션의 루트 디렉터리, 다른 웹 애플리케이션 이름과 중복을 허용하지 않고, 여기에는 JSP HTML 파일이 저장된다. WEB-INF 웹 애플리케이션에 관한 정보가 저장되는 곳으로 이 디렉터리는 외부에서 접근할 수 없다. classes 웹 애플리케이션이 수행하는 서블릿과 다른 일반 클래스들이 .. 2022. 3. 3. 백엔드1-1. WAS(Web Application Server)과 Web Server 정적 웹 페이지(Static Web Page) 와 동적 웹 페이지(Dynamic Web Page) 정적 웹 페이지 동적 웹 페이지 언제 접속해도 같은 응답을 보내주는 페이지 브라우저에게 요청을 받은 후 서버가 추가적인 처리 과정을 거친 후 클라이언트에게 응답을 보낸다. 서버에 저장된 HTML, CSS, JS등의 파일이 변경되지 않으면 매번 같은 웹페이지를 볼 수 있다. 매번 같은 페이지를 보여주지 않을 수 있다. (날씨나, 게시판, 쇼핑몰등) HTML로는 동적인 구현이 불가능해서 JSP, PHP, ASP 이렇게 Java등의 프로그래밍 언어로 동적인 데이터를 정립한 뒤 -> HTML문서로 재조립해서 -> 웹 브라우저에게 리턴 Web Server(웹 서버) 웹 브라우저에서 요청받은 html, css, js .. 2022. 3. 2. 프론트엔드7-8.[React] hook *Hook은 React 버전 16.8부터 React의 요소로 추가되었다.* Hook: 기존 Class 없이 React의 기능을 사용할 수 있게 해준다. hook은 데이터를 유동적으로 바꿀 수 있다. userState 함수는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. hook은 React의 useState 훅을 사용하면 함수의 데이터 상태를 추적할 수 있다. Hook을 사용하기 위해서는 밑의 구문을 import 해줘야 한다. import React, {useState} from 'react'; 1. hook을 사용(버튼을 누르면 색과 성별이 변경된다. ) import React, {useState} from 'react'; function App() { // hook을 셋팅 co.. 2022. 2. 22. 프론트엔드7-7.[React] 함수 예제, props, 이벤트 처리 렌더링(Rendering) html 요소(element), 또는 React 요소 등의 코드가 눈에 볼 수 있도록 그려지는 것 1. JSON 으로 스타일 적용하기 function App() { /*스타일시트를 json을 작성해 적용하기*/ const style1 = { background : 'pink', padding : '20px', color : '#fff', marginTop : '10px', textAlign : 'center' }; return( Json 스타일 적용하기 ); } export default App; 2. 함수예제 function App() { /*스타일시트를 json을 작성해 적용하기*/ const style = { marginLeft : '10px' }; return( {1+1.. 2022. 2. 22. 프론트엔드7-6.[React] JSX를 이용하는 방법과 이용하지 않는 방법 JSX: react에서 HTML을 쉽게 작성할 수 있도록 하는 방법 2가지 1. JSX를 이용하는 태그 사용법 function App() { // JSX를 이용하는 태그 사용방법 const element1 = HTML은 문자열로 처리해야 한다.; // 변수안에 여러 값을 생성해서 넣을 수 있다. const element2 = ( 사과 딸기 ); // 내용을 감쌀 때 빈태그도 가능하다. const element3 = ( 해바라기 코스모스 ); return ( {element1} {element2} {element3} ); } export default App; 2. JSX를 사용하지 않는 태그 사용법 1. React 라이브러리에서 import하기 React의 라이브러리에서 React클래스를 가져다 쓴다는 .. 2022. 2. 21. 이전 1 ··· 4 5 6 7 8 9 10 ··· 29 다음
