반응형

** Java Web Programming

=>url 요청이 왔을 때 Java Web Component 가 그 요청을 받아서 Java를 이용해서 처리한 후 결과를 html로 출력하는 것

 

1.    환경설정

1)    JDK EE 버전을 설치

=>JDK SE버전과 WAS의 라이브러리를 이용해서도 가능

=>JDK SE버전과 Spring라이브러리를 이용해서도 가능

=>최근에는 EE버전을 설치하지 않고 SE버전으로 사용하는 경우가 많음

 

2)    WAS(WEB APPLICATION SERVER- WEB CONTAINER)를 설치

=>URL요청이 오면 적절한 JAVA Wev Component를 호출하고 web component가 리턴한 결과를 html로 변환해서 web server에 전달해주는 애플리케이션

=>apache tomcat, jeus, IBMweb logic 등 다양한 제품이 있음

=>국내에서는 apache tomat이 많이 사용되고 공공기관 프로젝트에서는 jeus 그리고 금융권에서는 web logic을 사용하는 경우가 있음

 

3)    web programming이 가능한 ide를 설치

=>eclipse ee버전 : sts(Sprint 전용 eclipse), 전자정부 프레임워크 ( 공공기관 애플리케이션 개발 전용 eclipse), 애니 프레임워크(삼성 애플리케이션 개발 Eclipse)

=>intelliJ 상용 버전

 

분석에는 가상환경이 안나오는데

pycharm등은 가상환경이 안나온다.

application화 하는 것이 가상환경이 안나오고 결과만 보여준다.

colabs는 알고리즘을 하는 것이 아니다.

 

4)    jdk se 1.8 , tomcat 9.0 , eclipse ee버전을 설치

 

5)    기타 프로그램

=>데이터베이스 연동을 하는 경우가 대부분이라서 데이터베이스 결과를 확인하기 위한 테이터베이스 접속 프로그램(dbeaver설치)

=>출력 결과를 확인하기 위한 웹 브라우저 (chrome설치) :프론트 엔드를 고려하는 경우에는 ie도 설치

출력은 브라우저를 고려해야 한다

 

2.    java web component

1)    HttpServlet

=>URL을 이용해서 호출할 수 있는 JAVA CLASS

=>기본적으로 자바 코드로 작성하고 HTML을 만들고자 할 때는 출력 스트림을 이용해서 작성

=>처음 호출될 때 컴파일 하고 class를 만든 후 instance를 만들어서 사용

=>한번 인스턴스를 만들면 다시 만들지 않음

=>수정을 하면 서버를 다시 시작해서 다시 컴파일을 해야 합니다.

 

2)    jsp(이력서에 안 쓰는 것이 좋다.)(JAVA SERVER PAGES)

=>UTL을 이용해서 호출할 수 있는 JAVA CLASS

=>호출하면 HttpServlet클래스로 변환된 후 인스턴스를 만들어서 처리

=>기본적으로 HTML.과 태그로 작성하고 자바 코드를 사용하고자 할 때 별도의 블럭을 만들어서 작성

=>요청이 올 때 마다 컴파일하고 클래스 만들고 인스턴스 만들고 처리하고 삭제됩니다.

=>jsp는 수정을 한 경우 서버를 다시 시작할 필요 없고 새로 고침만 하면 됩니다.

 

3.    Model1 Model2

=>Web Programming에서 등장하는 용어인데 asp.netjava에서만 사용

=>Model1은 처리와 출력을 모두  jsp 파일에서 수행하는 형태인데 작성이 가능하지만 유지보수가 어려움

=>Model2는 처리는 HttpServlet을 통해서 수행하고 출력은 jsp에서 하는 방식으로 작성은 어렵지만 유지보수가 쉽다.

=>최근에는 Front EndBack End 구분을 하는 편이라서 Model2를 대부분 사용

 

 

4.    MVC(Model View Controller)

=>역할 별로 분리를 해서 프로그래밍하는 패턴

=>유지보수의 편리성 때문

 

1)    Model:작업을 처리해서 결과를 만드는 부분

2)    View: 작업의 결과를 출력하는 부분

3)    Controller: 사용자의 요청이 오면 적절한 Model을 호출하고 그 결과를 View에 전달해서 출력하도록 해주는 부분

4)    최근에는 View를 직접 생성하지 않고 Controller에서 데이터만 리턴하는 경우도 있음

=>csv, excel, pdf, xml, json등의 형식

=>csv, excel은 변경이 없는 오래된 데이터(1990~ 2000 년 까지의 날씨) 옛날데이터

=>pdf는 보고서 (데이터는 아니다. 데이터화 시킬수 있다.), 분석을 했다. 결과물

=>xml, json은 수시로 변경이 발생하는 데이터 (오늘의 날씨) 데이터

 

5.Eclipse에서 설정

1)소스 코드 와 생성되는 텍스트 파일들의 인코딩을 UTF-8로 설정(Windows에서만 수행)

[Window] -[Preferences]에서 [General] -[workspace]탭에서 오른쪽의 창에서 Text file encodingUTF-8로 변경

 

2) CSS, JS, JSP파일 의 인코딩을 UTF-8로 설정

 [Window] -[Preferences]에서 [WEB] 탭에서 하나씩 선택해서 수정(Windows에서만 수행)

 

3)[Window] -[Preferences]에서 [General] - [Web browser] 탭에서 출력 결과를 확인할  웹 브라우저를 선택 :HTML를 사용하는 경우에는

chrom 이나 Firefox로 설정

 

6. Eclipse에서 java web project생성

=>Dynamic Web Project생성

=>web.xml파일을 생성하도록 프로젝트를 설정

 

1)    첫화면에서 프로젝트 이름과 저장 위치를 선택하고 Next

2)    두번째 화면에 나오는 디렉토리는 컴파일을 해서 클래스를 저장할 디렉토리를 설정

src 디렉토리는 컴파일을 수행할 java파일의 위치이고

classes디렉터리는 컴파일이 끝나고 만들어진 class 파일이 저장될 위치입니ㅏㄷ.

=>java파일은 반드시 src디렉토리 안에 만들어져야 합니다.

=>src 이외의 디렉토리에 저장된 java파일은 컴파일 하지 않습니다.

3)세번째 나오는 화면에 보여지는 ContextRoot는 프로젝트가 실행될 때의 도메인이고

ContentDirectory는 화면에 보여져야 하는 파일(html, jsp)의 디렉토리 입니다.

체크박스는 web.xml파일을 만들어서 포함시켜 줄 지 여부를 체크하는 것을 권장

 

7.프로젝트 생성 후 디렉토리 구조

1)Java Resources

=>src : java 파일이 위치해야 하는 디렉토리

2)WebContent(webapp)

=>html, css, javascript, jsp및 각종 리소스 파일(이미지, 사운드 등) 이 위치해야 하는 경로

=>META-INF:context.xml(웹 자원 설정) 파일이 위치해야 하는 디렉토리

=>web-inf: web.xml(웹 프로젝트 설정) 파일이 위치해야 하는 디렉토리

/lib: 외부 라이브러리가 위치해야 하는 디렉토리

/classes : src 에서 컴파일 된 파일이 위치해야하는 디렉토리

직접 미리 생성해도 되지만 실행하면 자동으로 생성되는 디렉토리

 

 

8.설정 파일

1)server.xml : 프로젝트에는 없고 실행을 한번하고나면 Server디렉토리에 생성되는 파일

was 설정 파일 - 개발자가 거의 작업을 하지 않는데 was를 설치하고 실행이 잘 안될 때 수정 -1으로 설정된 포트를 양수로 변경해야 하고

오라클과 톰켓이 같이 설치된 경우 톰캣의 실행 포트를8080에서 다른 포트로 변경해야 합니다.

 

 

2)web.xml:프로젝트 설정 파일

=>프로젝트에 이 파일이 없으면 server 디렉토리에 있는 web.xml파일의 내용을 이용해서 프로젝트가 설정됩니다.

 

3)context.xml:외부 자원에 대한 정보를 설정을 위한 파일

 

9. 프로젝트의 WebContent디렉토리에 index.html파일을 생성하고 프로젝트를 실행

=>프로젝트를 선택(html이나 jsp파일을 선택해도 가능)하고 마우스 오른쪽을 클릭해서 [Run As ] -[Run on Server]를 선택

=>처음 실행한 경우에는 어떤 WAS를 이용해서 실행할 것인지 선택하는 부분이 나옵니다.

[Apacche Tomcat 9.0] 을 선택하고 톰캣이 설치된 디렉토리를 지정해야 합니다.

=>실행이 안되면 SERVERS디렉토리의 server.xml파일을 열어서 shutdown포크가 -1이면 양수로 수정하고

<Server port="9001" shutdown="SHUTDOWN">

=> Connector태그의 port8080이고 오라클이 설치된 경우이면 8080대신에 다른 포트번호를 사용

<Connector connectionTimeout="20000" port="9000" protocol="HTTP/1.1" redirectPort="8443"/>

=>실행을 하면 index.html파일이 있으면 이 파일의 내용이 출력되고 없으면 404에러가 발생하는 데 이 때는 주소 뒤에 작성한 html이나 jsp파일의 경로를 입력하면 됩니다.

 

10.jsp생성

=>WebContent 디렉토리에 존재

spring과 같은 프레임워크를 사용하기 전에는 web-infmeta-inf 에 있어서는 안됨

=>마우스 오른쪽을 클릭해서 jsp파일을 생성하면 됩니다.

index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Java Web Project</title>

</head>

<body>

           <h2>처음 만들어보는 자바 웹 프로젝트</h2>

           <a href ="second.jsp">jsp 파일 호출하기</a>

</body>

</html>

 

second.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

           <h2>처음 만들어본 jsp파일</h2>

</body>

</html>

 

11.jsp

=>html문서 안에 자바코드를 삽입하는 구조

=>url에 의해 호출되면 그 때 내용을 컴파일으ㄹ 해서 httpServlet클래스를 상속받은 클래스를 만들고 인스턴스를 생성해서 요청을 처리하고 그 결과를 washtml로 변환

=>내용을 수정한 경우 새로고침만 하면 됩니다.

jsp를 수정할 경우 다시 배포할 필요없다.

http://localhost:9000/javaweb/second.jsp

 

=>jsp파일을 만든 경우나 HttpServlet파일을 생성했을 때 에러표시가 나는데 실행과는 상관이 없습니다.

이 에러 표시를 제거하고자 할 때는 Tomcat이 설치된 디렉토리의 lib디렉토리에 있는 servlet-api.jar파일을 WebContent/WEB-INF/lib디렉토리에 복사해주면 됩니다.

C:\project\Tomcat 8.5\lib

websocket도 있다.  서버 있어야 사용 가능하다.

 

 

12.HttpServlet

=>URL로 호출할 수 있는 자바 클래스

=>자바코드 안에 HTML을 삽입할 수 있는 구조

=> HttpServlet클래스로 부터 상속받는 클래스로 만들고 URL과 매핑을 시켜서 생성

=>처음 호출을 하게 되면 컴파일을 하고 인스턴스를 만들고 이 인스턴스를 계속 사용

=>내용을 수정하면 웹 애플리케이션을 다시 실행시켜야 한다.

 

패키지 이름은 중요하지 않는다.

 

 

주소를 바꾸고 싶을 경우

/httpServelet->/first로 변경

 

package controller;

 

import java.io.IOException;

import java.io.PrintWriter;

 

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

/**

 * Servlet implementation class FirstServelet

 */

//url 매핑 -first를 요청하면 초출

@WebServlet("/first")

public class FirstServelet extends HttpServlet {

           private static final long serialVersionUID = 1L;

      

    /**

     * @see FirstServelet#FirstServelet()

     */

    public FirstServelet() {

        super();

        // TODO Auto-generated constructor stub

    }

 

           /**

            * @see FirstServelet#doGet(HttpServletRequest request, HttpServletResponse response)

            */

           protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

                       // TODO Auto-generated method stub

                       //response.getWriter().append("Served at: ").append(request.getContextPath());

                       response.setContentType("text/html");//html로 바꿔주세요

                       response.setCharacterEncoding("utf-8");

                       PrintWriter out = response.getWriter();

                       out.println("<h3>처음 만들어보는 서블릿</h3>");

           }

 

           /**

            * @see FirstServelet#doPost(HttpServletRequest request, HttpServletResponse response)

            */

           protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

                       // TODO Auto-generated method stub

                       doGet(request, response);

           }

 

}

index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Java Web Project</title>

</head>

<body>

           <h2>처음 만들어보는 자바 웹 프로젝트</h2>

           <a href ="second.jsp">jsp 파일 호출하기</a><br/>

           <a href ="first">서블릿 호출하기</a><br/>

</body>

</html>

 

 

13.HttpServletjsp

=>공통점은 URL을 이용해서 호출한다는 것과 인스턴스 생성을 직접 하지 않는다는 것

2가지는 WAS가 필요할 때 인스턴스를 생성

우리는 인스턴스를 생성하는 코드를 만들 필요없다.

=>다른 점은 서블릿은 SRC디렉토리에 만들어야 하고 JSP WebContent 에 만들어야 한다는 것과 자바에 자 html을 삽입하느냐 아니면 html에 자바코드를 삽입하느냐 하는 것입니다.

실행원리도 다름

 

** jsp 기본 문법

1.    디렉티브(Directive)

=>jsp파일에 대한 설정

=><%@ 으로 시작

=><%@ 디렉티브이름 속성 ="" 속성 ="" ...%> 형식으로 작성

 

1)디렉티브 종류는 3가지이다.

=>page 디렉티브 : 페이지에 대한 설정

=>taglic 디렉티브 : 테그 라이브러리에 대한 설정

=>include 디렉티브 : 다른 jsp 파일을 포함시킬 고자 하는 경우 사용

 

2)page디렉티브

속성은 찾아서 사용하면 된다.

=>contentType: jsp페이지가 변한될 타입을 설정하는 것으로 기본값은 text/html

json이나 xml등을 출력하고자 하면 이 부분을 수정

=>import: 패키지 이름을 줄여쓰기 위해서 사용

=>session:세션 사용 여부를 설정하는 것으로 기본값은 true

=>errorPage: 에러가 발생했을 때 보여질 페이지를 설정

=>isErrorPage: 소스가 에러가 발생했을 때 보여지는 페이지인지 설정하는 것인데 이 설정을 true로 설정하면 exception객체를 사용할 수 있음

=>pageEncoding:현재 문서의 인코딩 방식

=>isELlgonored:EL사용여부를 설정

=>trimDirectiveWhitespaces:공백 제거 여부를 설정하는 기본값은 false

http://localhost:9000/javaweb/second.jsp ->소스보기

 

 

second.jsp 소스보기 했을 경우 공백을 제거해주는 것

<%@ page trimDirectiveWhitespaces="true" %>

page는 출력보다 설정하는 것이 다.

 

<!--charset : 은 출력을 utf-8

           pageEncoding: 현재 문서를 utf-8으로 저장 이줄을 지우면 한글을 사용하지 말아야 한다.

 -->

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

 <!-- 소스보기를 했을 때 공백을 제거하도록 해주는 설정 -->

<%@ page trimDirectiveWhitespaces="true" %>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

           <h2>처음 만들어본 jsp파일</h2>

           <p>내용 수정</p>

          

           <%

                       //자바코드 작성

                       int a = 10;

                       int b = 20;

                       int result = a+b;

           %>

           <p>result: <%=result %></p>

</body>

</html>

 

2. 스크립트 요소

=>Model2에서는 사용하지 않음

1)자바코드

<% 자바코드%>

 

2)자바변수를 출력

<%= 데이터 %>

 

3)static 메소드나 변수 선언

<%! 함수나 변수 선언 %>

 

4).jsp파일에 java코드나 java의 내용을 출력하는 부분이 있으면 이 코드가 먼저 수행되고 그 다음 html의 내용이 수행됩니다.

java내용이 html코드보다 아래 있더라도 먼저 실행됩니다.

java가 먼저 실행된다.

 

 

3.jsp주석

<%-- 내용 --%>

=>html코드에서는 html주석을 javascript에서는 javascript의 주석을 css부분에서는 css의 주석을 java코드에서는 java의 주석을 사용하므로 잘 사용하지는 않습니다.

 

=>java의 주석 : ///**/

=>html 주석: <!--주석 -->

=>css주석 : /**/

=>javascript주석 : java주석과 동일

=>python의 주석 : #

 

** 내장 객체

=>jsp 파일을 만들 면 처음부터 제공되는 객체

=>servlet에서는 doGet이나 doPost의 전달되는 매개변수인 request reponse로 생성해서 사용합니다.

 

1.    종류

1)  HttpServeletRequest request: 클라이언트의 요청 정보를 가지고 있는 객체

2)  HttpServeletResponse response: 클라이언트에 출력할 정보를 가지고 있는 객체

 

3)    JSPWriter out: html 출력 객체

4)    HttpSession session : 접속한 브라우저에 대한 정보를 저장할 수 있는 객체(하나의 브라우저에 저장)

5)    ServletContext application: 웹 애플리케이션 객체 - 1개만 생성

6)    ServletConfig config :  jsp 구성정보를 저장한 객체

7)    PageContext pageContextL: 현재 페이지의 데이터를 저장할 수 있는 객체

8)    Object page: type을 조심해야 한다. jsp페이지로 부터 생성된 서블릿

9)    Throwable exception : 예외가 발생했을 때 예외 정보를 저장할 객체

 

2.request 객체

=>jsp에서는 제공되고 Servlet에서는 doGetdoPost 메소드의 첫번째 매개변수

=>클라이언트의 정보를 저장한 내장 객체

1)주요 메소드

=>String getRemoteAddr(): 클라이언트의 ip를 리턴(로컬에서 접속하면 127.0.0.1이나 0::0::0::0::0::0::0::1)

 

=>String getMethod(): 요청 방식을 문자열로 리턴

 

=>String getRequestURI(): 클라이언트의 전체 요청 경로(클라이언트가 접속해서 움직이는 경로는 파일에 저장해두는 것이 좋습니다. 이 데이터를 분석해서 UI개선 )

 

=>String getContextPath();컨텍스트 경로 - 도메인

 

=>String getQueryString(): 클라이언트가 전송한 파라미터 문자열

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Java Web Project</title>

</head>

<body>

           <h2>처음 만들어보는 자바 웹 프로젝트</h2>

           <a href ="second.jsp">jsp 파일 호출하기</a><br/>

           <a href ="first">서블릿 호출하기</a><br/>

           <a href ="request.jsp">request 객체의 메소드</a><br/>

</body>

</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

           <h3>접속한 클라이언트의 ip:<%=request.getRemoteAddr() %></h3>

           <h3>컨택스트 경로:<%=request.getContextPath() %></h3>

           <h3>전체요청 경로:<%=request.getRequestURI() %></h3>

          

           <%

           String requestURI = request.getRequestURI();

           String contextPath = request.getContextPath();

           //위엣 RequestURI에서 contextPath를 제외한 부분 생성

           //  /javaweb/request.jsp ->request.jsp 으로 해야 한다.

           //문자열 잘라내기 - 기호(split)또는 위치(substring)

           //위치를 가지고 하는 것이 좋다 . 기호로 할 경우 \ 이 불편하다.

           String command =requestURI.substring(contextPath.length());//   /request.jsp

           String command1 =requestURI.substring(contextPath.length()+1);//   request.jsp

           %>

           <p>전체요청경로에서 contextPath를 제외한 부분 : <%=command %></p>

           <p>전체요청경로에서 contextPath를 제외한 부분 : <%=command1 %></p>

           <!-- spring에서는 / 있거나 없거나 같다. -->

</body>

</html>

 

2)parameter처리

=>parameter:클라이언트가 서버에게 전송하는 데이터

 

=>파라미터 전송방식

get:파라미터를 url뒤에 ?이름 = & 이름 = ... 형식으로 붙여서 전송하는 방식

자동 재 전송 기능이 있음

단점 : 값의 길이에 제한이 있음 - 255 자로 제한

 

post: 파라미터를 Header에 숨겨서 전송하는 방식

값의 길이에 제한이 없고 보안기능도 있음

자동 제 전송 기능이 없음

putdelete도 같은 방식인데 작업의 종류에 따라 구분하기 위해서 post는 삽입에서 put은 수정에서 delete는 삭제 작업에 이용하는 것을 권장

예전 브라우저들이 post만 지원하기 때문에 아직도 putdelete보다는 post로 대부분 처리

전송할 때 비밀번호, textaREA, FILE이 있는 경우는 반드시 POST를 사용

최근에는 form의 데이터는 거의 무조건 post로 전송하는 것을 권장

검색어 입력 form의 경우 작업 자체가 검색이 목적이기 때문에 이 경우만 예외적으로 get방식으로 전송

 

put: 파라미터를 Header에 숨겨서 전송하는 방식

 

delete: 파라리머틀 Header에 숨겨서 전송하는 방식

 

https://search.navaer.com

https://www.naver.com =>post방식

 

get: 검색(read)

post: 삽입(create)

put:수정(upate)

delete: 삭제(delete)

//2개 방식이 추가됬는데 호환성이 안된다. 그래서 버전을 낮추는 것을 고려해야 한다.

 

=>파라미터 생성

URL 뒤에?를 추가하고 직접 작성 : 검색을 한 후 상세보기를 할 때 대부분 이방법, GET방식으로 만 전송 가능

전송 가능 - 파라미터를 입력받지 않고자 할 때 사용

 

form을 만들고 그 안에 name속성을 부여해서 전송

form안에 입력객체를 만들었더라도 name속성을 부여하지 않으면 전송이 안됩니다.

 

ajax에서는 파라미터를 별도로 반들어서 전송

 

 

=>서버에서 파라미터 읽기

String request: getParameter(String name) : name에 해당하는 파라미터 값을 문자열로 리턴없는 name이면 null

name은 있는데 입력을 하지 않으면 ""

 

String[] request.getParameterValues(String name): name에 해당하는 파라미터 값을 문자열 배열로 리턴하는데 name이 없으면 null, 체크박스나 select는 여러 개 선택이 가능하기 때문에 여러개 선택한 경우에는 배열로 받아야 합니다.

 

=>파라미터 인코딩: 파라미터에 한글이 있는 경우

get방식의 경우는 was가 처리 - tomcat8.0이상을 사용하면 할 필요가 없습니다.

was가 알아서 encoding해준다.

 

post방식의 경우는 url이 있는 것이 아니기 때문에 서버쪽 코드에서 해결 - 파라미터를 읽기 전에

request.setCharacterEncoding("utf-8"); 이 코드를 먼저 호출해서 인코딩 방식을 변경해야 합니다.

그렇지 않으면 한글 파라미터는 깨지게 됩니다.

 

네이버에서는 한글을 못쓰게 할 경우는 괜찮은데 이름 이 깨져서 들어간다.

 

 

반응형

'Study > javawebapplication' 카테고리의 다른 글

javawebapplication-4  (0) 2020.10.20
javawebapplication-3  (0) 2020.10.19
javawebapplication-2  (0) 2020.10.15
반응형

 

port 충돌

1.eclipse <-> tomcat

tomcat을 단독으로 시키면 2개켤 경우

eclipse

2.방화벽

 

https: 암호화 해서 하는 것

암호화 하는 방법이 있어야 한다.

인증서로 만든다.

인증서 없으면 http

 

a=>2000번지

2000번지만 하기 어려워서

a로 한다. a는 변수 구분하기 쉽게 하기 위해서

ip대신에 도메인 등록해서 문자를 대신해준다.

데이터는 브라우즈에서 저장을 잘 안한다.

데이터가 디비를 사용했다. orcle, mogodb

 

python으로 하는 것 장고나 플라스커 이 있어야 web application server을 할 수 있다.

R html을 바꿀수 있는 것을 못한다. 그래서 web 프로그램을 못한다. 바로 치환할 수 없다.

web server하고 web application server있어야 웹프로그램을 할 수 있다.

 

자바는 was뭐 사용해봤나.?

apache tomcat, jeus

 

java web programming

1. java 설치(java se 1.8)

2. ide 설치 (eclipse java ee)

3. was(Tomcat)was 역할을 수행할 프레임워크

4.저장소(db)

 

SQLite: Embedded -> IoT

스마트폰에도 서버데이터를 임시로 저장할 때 사용

 

웹프로그램이 많이 사용하는 서버 언어는

JAVA-> php->  node.js python

php는 급여가 적어서 많이 사용한다.

스타트업이 node.jspython

asp .net c#  게임 엔진 유니티

 

미국은 언어를 제한하지 않는다.

지바와 c#똑같다.

 

unix상용화 linux반대

java->완전한 객체지향

c#

 

 

c 객체지향  -> c++

               -> objecive-c ->java

               -> c#

그래서 c# java 지원이 가능하다.

윈도형은 c++, c#을 많이 사용한다.

 

포트번호 충돌 확인 해야 하는 경우

1.     이상한 포트

2.     포트가 켜져있는지

1000번이상의 포트를 사용하는 것이 좋다.

다른것은 예약 되어 있을 가능성이 높다.

 

**HTML

 

1.imagemap

=>image의 특정좌표를 클릭하면 하이퍼링크를 통해서 이동하도록 해주는 것

1)imageusermap이라는 속성을 이용해서 이름을 1개 생성

 

2)map생성

<map name="1번에서 사용할 이름">

           <area shape ="rect,circle,poly" coords ="좌표를 입력" href ="이동할 url"/>

</map>

 

=>rectcoords 왼쪽상단의 X,Y좌표 그리고 오른쪽 하단의 X,Y좌료를 설정

=>circle은 원의 중점의 X,Y좌표 그리고 반지름을 설정

=>poly2개씩 쌍으로 무제한 설정 가능

단계구분도 만드는 것이 좋다.

2.table 관련 태그

=>table 태그의 내용은 pythonpandasDataFrame으로 바로 변환가능

=>여러 개의 데이터를 행과 열로 구분해서 출력할 때 이용

 

<table>:테이블

<tr>: 하나의 행

<th>: 하나의 셀 - 제목 셀 - 굵게 쓰지고 가운데 맞추어진다.

<td>: 하나의 셀 - 일반 셀 - 그냥 쓰여진다.

 

=> table을 그냥 만들면 경계선이 보이지 않습니다.

경계선을 출력하고자 하면 table 태그에서 border속성에 경계선의 두개를 설정 -css에서도 가능

=>table align속성은 테이블 자체의 맞춤이고 thtd에서의 align은 내용의 맞춤

=>table이나 th,td등에는 width이용해서 너비 설정 가능

=>table이나 tr에는 height속성 이용해서 높이 설정 가능

 

 

=>tdth에서 rowspan="합쳐질 셀의 개수" 이나 colspan="합쳐질 셀의 개수" 를 이용해서 셀 병합이 가능

 

=>thead, tfoot, tbody

theadtr을 감싸면 제목 행이 되서 맨 위에 출력

tfoot으로 tr 을 감싸면 바닥글 행이 되서 맨 아래에 출력

tbodytr을 감싸면 내용행이 되서 thead뒤에 출력

이 태그들을 이용하면 문서의 구조를 쉽게 이해할 수 있으면 음성 브라우저를 사용하는 경우 셀을 읽을 때  thead에 설정된 셀을 같이 읽어 줍니다.

 

3.fieldset & legend

=>fieldset은 묶어서 경계선을 만들고자 하는 경우 사용

=>legendfieldset안에서 경계선의 제목을 만들 때 사용

 

 

4.form태그

=>사용자의 입력을 받아서 서버에게 전송하기 위한 태그

=>form안에서 name을 가진 속성들은 서버에게 전송됩니다.

 

 

1)form

<form action="전송받을 서버의 url" method="get또는 post를 설정하는데 전송방식"

enctype="multipart/form-data">

</form>

=>actionform안의 데이터를 전송받아서 처리를 URL을 작성하는데 생략하면 현재 URL이 자동으로 설정됩니다.

=>METHOD는 파라미터 (NAME을 가진 입력 도구 ) 파라미터를 전송하는 방식을 설정하는데  GETURL에 입력한 내용을 표시해서 전속하고 POSTHEAD에 숨겨서 전송합니다.

검색 창에서 입력한 검색어는 GET방식을 이용해서 전송하고 로그인 창에서 입력한 아이디와 비밀번호는 POST방식으로 전송

 

2)label

=>텍스트를 출력할 떄 사용하는 태그

<label>출력할 내용</label>

=>for 속성에 다른 입력도구의 id를 설정하면 모바일 웹에서 레이블을 선택해도 입력도구를 선택한 것과 동일한 효과를 만들어 줍니다.

 

3)input

=>입력도구

=>type속성에 설정할 수 있는 값: text, button, submit, reset, password, radio, checkbox, file, image, hidden

html5에서는 모바일을 위한 속성

 

text :한줄 입력 두고

password : 입력한 내용이 아니라 특수문자로 보여지는 한 줄 입력도구

radio : 여러개 중에서 하나를 선택하도록 할 때 사용하는 것으로  name이 같으면 같은 그룹

checkbox : 여러개 중에서 여러 개를 선택하도록 할때 사용하는 것으로 name이 같아야 하나로 묶어서 서버에게 전송

file : 파일을 선택하기 위한 입력도구

 

button : 눌러서 어떤 동작을 위한 입력도구  button보다는 그림(image)을 많이 사용

 

submit: 폼의 데이터를 서버로 전송해주는 버튼

reset: 폼의 데이터를 전부 클리어 해주는 버튼

image: image 를 배치할 수 있는 버튼

hidden: 화면에 출력되지는 않지만 서버에게 데이터를 전송하고자 할 때 사용

 

게시물 수정

제목

내용

데이터를 수정했다.  수정을 하고 수정을 하고 난다음 첫번째 페이지로 이동한 경우가 있다. 수정은 방금전에 클릭한 페이지가 좋다. 그래서 input hidden을 만들어서 pageno는 몇번째 페이지라고 보관한다.

hidden 은 데이터를 보관하는 것으로 사용한다.

 

4)textarea

=>여러 줄의 데이터를 입력받고자 할 때 사용

=>rowscols 속성을 이용해서 초기 크기를 설정

 

 

5)select

=>여러개의 항목 중 하나를 선택할 때 사용

<select name ="">

           <option value ="서버에게 넘어가는 값" >텍스트</option>

           <option value ="서버에게 넘어가는 값" >텍스트</option>

</select>

여기에서는 value가 필수이다. value가 넘어 간다.

 

6)form에 입력도구 들을 배치할 때 입력하는 순서대로 배치하는 것이 좋고 필수 입력란을 먼저 배치하고 선택적 입력 란을 뒤에 배치하는 것이 좋습니다.

여러 개의 입력을 받는 경우 페이지를 나누는 것도 고려

 

 

5.divspan

=>영역을 생성하는 태그

=>div는 블록태그이고 span은 인라인 태그

 

6.iframe

=>다른 문서를 출력하기 위한 태그

=>프로젝트 내의 문서만 출력 - 외부 링크도 출력이 가능하지만 보안의 문제 때문에 제한적입니다.

사이트에서 iframe에 출력할 수 없도록 설정할 수 있습니다.

구글은 iframe으로 출력이 안되는 경우가 있다.

=>width height속성을 이용해서 크기를 설정

=>name속성을 이용해서 이름을 설정 : a 태그에서 targetiframename으로 설정하면 하이퍼링크의 내용을 iframe에 출력합니다

=>src 속성을 이용해서 출력할 문서를 지정

크롤링 할 경우 switchToframe해야 가져올 수 있다.

driver.switchTo().frame(driver.findElement(By.id("down")));

frame은 독립적인 객체이다.

보여지는데 데이터 못 들고 올 경우 두가지 경우가 있다.

1.     frame -> 이동해서 데이터 가져와야 한다.

2.     ajax -> sleep해서 몇초 기다려야 한다.

 

**css

=>웹페이지에 디자인이라는 시각적 가치를 부여하기 위한 언어

=>표준은 2.13.0

3.0에서는 모든 시각적 효과는 태그의 속성을 이용하지 않고 css로 만드는 것을 권장

 

1.사용방법

1) External Style Sheet

=>외부에 스타일시트 파일을 만들고 링크를 걸어서 사용하는 방식 - 권장

=>Linked StyleImport Style로 나눔

 

2)Internal Style Sheet

=>html파일안에 <style></style>을 만들어서 태그 안에 내용을  작성하는 방식

 

 

3)Inline style Sheet

=>태그 안에 style이라는 속성을 이용해서 작성하는 방식 - 비추천

 

4)외부에 만드는 것을 권장하는 이유는 프로그램의 소스는 역할 별로 분리하는 것이 유지보수에 유리하기 때문입니다.

 

2. 외부 스타일시트 연결

1)<link rel ="stylesheet" href ="css파일 경로">

 

2)< style type="text/css">

@import url("파일 경로")

</style>

 

 

3)상대경로

./: 현재 디렉토리

../: 상위 디렉토리

 

WebContent/design/stylesheet.html : ./../resources/css/extern.css

 

WebContent/resources/css/extern.css

 

3.css작성 방법

선택자{ 속성 : ;

           속성: ; .....

}

=> 속성과 값은 쌍으로 만들어져야 하고 콜론으로 구분

=>스타일시트 내의 예약어들에 따옴표 붙이면 안됩니다.

 

4.selector(선택자)

=>html문서 내의 DOM객체를 선택하기 위한 문법

1)*

=>모든 객체를 선택

 

2)tag

=>태그 선택자

 

3) .class이름

=>클래스 선택자

 

4) #id이름

=>id선택자

 

5)class는 동일한 디자인을 적용하기 위해서 설정하고 id1개를 구분하기 위해서 설정

id와 유사한 것으로 xpath가 있는데 xpath는 개발자가 설정하는 것이 아니고 브라우저가 특정 DOM객체를 찾기 위해서 사용하는 개념으로 유일무이합니다.

 

6)속성 선택자

선택자[속성]:선택자 중에서 속성이 존재하는 것만 선택

선택자[속성=""]: 선택자 중에서 속성의 값이 일치하는 것만 선택

 

7)가상 클래스

=>선택자 뒤에 :을 추가하고 사용

link : 링크에 적용

visited : 방문한 링크에 적용

 

hover:마우스가 올라오면 - 음영이 생긴다.

activeL마우스로 누르면 - 눌렀을 때 색각이 변한다.

 

focus: 포커스가 오면

checked:체크하면

enabled:활성화되면

disabled:비활성화 되면

 

 

8)하위 선택자

선택자 다른선택자

=>선택자 안에 포함된 다른 선택자를 모두 선택

p a : p태그 안에 있는 모든 a태그

 

선택자 > 다른선택자

=>선택자 바로 아래 레벨에 있는 다른 선택자

p > a : p태그 바로 아래 레벨에 존재하는 a태그

 

<p><a href=""></a></p>

<p><span><a href=""></a></span><p>

 

p a : a태그 2개 모두 선택

p>a : 첫번때 a태그는 선택되지만 두번째 a테그는 선택안됨

 

=>부모 선택자와 자식 선택자가 같이 있는 경우 부모 선택자를 지워도 선택이 된다.

범위를 줄이면 부모 선택자를 삭제하면 더 많이 선택되기는 하지만 선택이 안되지는 않습니다.

 

 

 

9)다중 선택자

,를 하고 선택자를 입력하면 나열된 모든 선택자를 선택

=>a태그와 div태그를 같이 선택하고자 하면

a,div{속성:;}

 

5. 우선 순위

1)하나의 DOM에 동일한 속성의 값을 선택자로 여러번 지정하면 마지막에 적용된 값만 남습니다.

2)선택자에도 우선순위가 있다.

inline>id선택자>class선택자(가상 클래스) >tag선택

 

 

6.단위

=>css에서는 단위 생략을 못함

1)절대 단위: 어떤 환경에서든 동일한 크기

=>인쇄할 때 이용

 

2) 상대단위: 환경에 따라 서 크기가 다르게보임

=>모니터로 출력하때 이용

=>px(해성도 기준), ex(x의 높이), em(front-size 기준), %

 

3)기본 크기는 12pt, 16px정도가 기본

 

4)픽셀을 em단위로 변환

www.pxtoem.com에서 확인 가능

 

7.타이포그라피(단락의 텍스트 대한 설정)

1)폰트 설정]

fron-family: 글꼴

글꼴을 하나가 여러 개 지정하는 경우가 있는 이것은 첫번째 글꼴이 없을 때 두번째 글꼴을 적용하기 위해서 입니다.

 

2)폰트 크기 설정

font -size: 숫자와 단위의 조합

 

 

3)줄 간격

line-height:

 

 

4)글자 두께

 font -weight

=>900이 제일 두껍고 100이 제일 얇음

 

5)글꼴 스타일

font-style인데 italin만 지정 가능

 

6)font -variant

=>영문 소문자를 작은 대문자로 출력하기 위해서 사용하는 속성으로  small-caps를 설정하면 작은 대문자로 출력됩니다.

 

7)font

=>앞의 6개 속성을 순서대로 한꺼번에 설정할 때 사용

 

8) direction

=>텍스트의 쓰기 방향을 설정하는 것으로 ltr, rtl 을 설정할 수 있습니다.

 

9)text-indent

=>첫줄 들여쓰기 설정

 

10)text-align

=>단락에서의 좌우 맞춤

=>left, right, center로 설정

 

11)vertical-align

=>인라인 요소끼리의 상하맞춤

=>sub, super, top,bottom, middle, baseline 등이 있음

 

12)text-decoration

=>텍스트에 밑줄이나 취소선 표시

=>none, underline, overline, line- through

=>a태그의 밑줄을 없애고자 하는 경우에 none으로 설정

 

 

13)text-overflow

=>divspan같은 box안에 긴 문자열을 입력한 경우 영역을 넘어서는 문자열을 어떻게 표시할것인가를 설정

=>잘라버리는 clip이 잇고 ...으로 보여주는 ellipsis가 있습니다.

 

14) text-transform

=>영문 대소문자 변환

=>uppercase,lowecase,capitalize

 

15)letter-spacing

=>글자 간격

 

16)text-shadow

=>그림자 효가 -css3에서 도입

=>상하거리 좌우거리 색상으로 설정하고 ,를 이용해서 여러 개 설정 가능

 

8.목록

1)목록의 스타일 설정: 글머리 기호 설정

list-style-type:스타일

none, disc, circle, square, decimal, dicimal-leading-zero, upper-alpha, lower-alpha, upper-roman,lower-roman, upper-latin, lower-latin, lower-greek, armenian, hiragana, katakana

 

 

2)글머리 기호에 그림 설정

list-style-image:url("이미지 파일 경로")

크기 조절이 안되서 처음부터 작은 것 만들어와야 한다.

 

3)들여쓰기 효과

=>글머리기호가 앞으로 튀어나오게 하는 효과

list-style-position: inside 또는 outside

 

9.글자 색상

color: 색상값;

=>일바적인 색상은 이름으로 가능:red, blue

=>16진수 6자리 가능: #000000 ~ #ffffff

빨강 2자리 녹색 2자리 파랑 2자리

16진수 3자리라도 가능

#012 : # 001122

예전의 그래픽 카드는 많은 양의 색상을 표시할 수 없어서 r,g,b값을 중복해서 적용

=>rgb(정수, 정수 ,정수)

=>rgb(백분율, 백분율 ,백분율)

=>hsl(색조, 채도 ,명도)

 

 

10.배경

1)색상

background-color: 색상값;

 

2) 배경 이미지

background-image:url("이미지 파일 경로");

 

3)배경 이미지 반복 여부

=>배경 이미지가 작을 때 설정

background-repeat: no-repeat |repeat | repeat-x| repeat-y

 

 

4)배경 이미지 위치

background-position:[left, right, ] [top, bottom, ];

 

 

5)배경 이미지 스크롤 여부

background-attachment:scroll|fixed

 

6)background 를 이용해서 한꺼번에 설정 가능

background: background-color background-image background-repeat background-position background-attachment;

 

7)css javascript에서 여러 개의 값을 넘겨야 하는 경우 뒤에서부터 생략 가능

 

8)색상에 그라데이션이 가능

=>색상을 만들 때 linear- gradientradial-gradient 를 이용해서 생성

=>http://www.colorzilla.com/gradient-editor

 

9)vendor-prefix

=>css3에는 아직 표준으로 채택되지 않았는데 브라우저 별로 제공하는 기능들이 있습니다.

이러한 기능은 사용을 할 때 브라우저 이름을 명시해야 합니다.

=>브라우저 이름이 없으면 구형 브라우저로 판단

chrome, safari: -webkit (둘이 엔진이 같다.)

chrome에서는 safari에 다되는데 safari에서 되는 것은 chrome에서 한 두개 안될 수 도 있다.

firefox: -moz

explorer: -ms

opera: -o

 

=>모든 브라우저에 적용을 할려면 각 vendor-prefix를 이용해서 전부 작성해야 합니다.

 

 

11.box model

=> 사각 영역으로 div span으로 반든 영역

1)요소

width, height, border(경계선), margin(다른 콘텐츠와의 여백 - border와 다른 콘텐츠와의 여백), padding( 내부에서 콘텐츠와의 여백 - bordercontents와의 여백)

=>일반적인 브라우저의 box영역 가로 크기 :width +margin+padding + border

=>IEBOX영역 가로 크기: width크기 안에 padding이 포함됩니다.

일반적인 크기 설정을 하게 되면 ie에서 콘텐츠가 작게 보입니다.

 

웹 접근성 강화 : 장애 여부에 상관없이 동일한 콘텐츠를 사용할 수 있도록 해야 한다.

 

반응형 웹 디자인: 브라우저 화면 크기에 상관없이 동일한 콘텐츠를 사용할 수 있도록 해야 한다.

 

크로스 브라우징 : 브라우저 종류에 상관없이 동일한 콘텐츠를 사용할 수 있도록 해야 한다.

 

크롬과  ie에 출력하는 화면이 다른 것은 box model이 다르기 때문이다.

 

2)margin의 겹칩

=>2개의 contentsmargin이 둘 다 설정된 경우 다 적용되는 것이 아니고 큰 거 하나만 적용됩니다.

이 두개의 사이가 70px가 아니고 40px이다.

 

3)maring 설정

=> margin: 하나의 숫자 ->상하좌우 모두 동일하게 적용

=>margin: .4개의 숫자 -> 상하 좌우 모두 다르게 적용

=>margin-left, margin-right, margin-bottom, margin-top을 이용해서 각각 설정도 가능

 

4)padding설정

=>margin과 동일

 

 

5)border: 경계선

border-width: 두께

border-top - width , border - left-width, border-right- width, border-bottom-width를 이용해서 각각 적용이 가능

 

=> border-color:색상으로 적용방법은 width와 동일

 

=>border-style : 선모양

none, dotted, dashed, solid, double, groove, ridge, inset, outset

 

=>border: width style color를 한꺼번에 설정

 

6)애플리케이션에서의 버튼 구현

=>이미지를 이용해서 이미지 교체

=>이미지를 이동

=>테두리의 색상을 변경

 

7)css3에서는 border-radius기능이 추가

=>테두리를 동그렇게 만들 수 있습니다.

 

 

**html5css3는 가장 큰 목적이 외부 플러그 인이나 애플리케이션 없이 웹 애플리케이션을 구현하는 것이 목적

반응형

'Study > html,css, javascript' 카테고리의 다른 글

frontEnd-6  (0) 2020.10.15
frontEnd-5  (0) 2020.10.15
frontEnd-4  (0) 2020.10.12
frontEnd-3  (0) 2020.10.12
frontEnd-1  (0) 2020.10.10

+ Recent posts