웹개발
-
[Web:] 자바 표현언어 EL(Expression Language)비전공자 공부일기/:: WEB & Front-End 2019. 8. 19. 11:23
EL은 JSP 문서로 된 뷰 페이지에서만 쓰는 "출력 전용 언어"라고 보면 된다. Spring을 할 때도 사용하기 때문에 꼭 알고있어야 한다! 무조건 객체가 공유되어야 사용할 수 있음 ${ 공유속성명 } 또는 ${ 객체명.필드명 } 또는 ${ 공유속성명.맵키 } 형식으로 작성 >> 자동으로 getAttribute() 메소드가 호출되어 공유 인스턴스를 출력 ${공유속성명.맵키} 형식으로 공유 인스턴스(Map)의 값을 반환받아 출력 ==> getAttribute() 메소드와 get() 메소드가 자동 호출 만약 공유 인스턴스가 존재하지 않을 경우 JS는 null을 출력하지만, EL은 아무것도 출력하지 않는다. >> NullpointException이 절대 발생하지 않음 객체(클래스의 인스턴스)가 갖고 있는 필..
-
[WEB:Model2] 컨트롤러 만들기비전공자 공부일기/:: WEB & Front-End 2019. 8. 12. 19:32
2019. 08. 12 필기 컨트롤러(Controller)란? : MVC 중의 Controller는 클라이언트(브라우저)의 모든 요청을 받아 필요한 모델(Model)을 이용하여 요청처리 후 처리 결과를 뷰(View)로 전달하는 기능의 서블릿이다. Model2에서 사용되는 컨트롤러는 서블릿으로 만들어진다. 컨트롤러의 역할 1. 웹브라우저가 전송한 HTTP 요청을 받는다. doGet() doPost() 메소드 이용 2. 브라우저의 요청을 분석한다. 3. 모델을 사용하여 요청한 기능을 수행한다. 4. 웹브라우저에 보여줄 1. 클라이언트의 모든 요청을 받을 수 있는 단일 진입점 기능 구현 >> web.xml 파일 환경설정 클래스를 서블릿으로 등록하는 방법에는 두 가지가 있다. 바로 클래스 위에 @WebServl..
-
[WEB : Ajax] Ajax 들어가기비전공자 공부일기/:: WEB & Front-End 2019. 8. 7. 20:57
Ajax란? : Asynchronous Javascript And XML 의 줄임말로, 에이젝스라고 읽는다. XML 기반의 데이터를 클라이언트인 웹 브라우저와 서버 사이에서 교환하는 기법이다. Asynchronous는 우리말로 '비동기적'이란 뜻으로, 비동기적이란 페이지의 이동 없이 웹 브라우저 화면을 동적으로 변경하는 것이다. 또는, 페이지 이동 없이 한 페이지 내에서 여러 동작을 동시에 수행할 수 있는 것이다. Ajax 구성 기술 요소 -- Javascript : 사용자 이벤트가 발생하면 XMLHttpRequest 객체를 사용해서 웹 서버에 요청 전달 / XMLHttpRequest 객체로부터 응답이 오면 DOM, CSS 등으로 화면을 조작 -- XMLHttpRequest : 웹 서버와 통신 / 사용자..
-
[WEB : Servlet] Cookie 쿠키(생성, 읽기, 제거)비전공자 공부일기/:: WEB & Front-End 2019. 7. 2. 17:30
2019. 07. 02 필기 자바스크립트 쿠키는 따로 있음. 자바스크립트 쿠키는 권한이 있는, 예를들면 로그인 상태의 사람만 볼 수 있는 응답화면을 제공한다. 다음 예시의 쿠키는 이런 권한이 없어도 볼 수 있는 응답화면을 제공한다. 쿠키 - 클라이언트에 저장되는 정보 / 간단한 데이터를 String 으로 저장 세션 - 서버에 저장되는 정보 / 보안을 요하는 필요한 데이터를 객체로 저장 * 웹 페이지의 브라우저에서 마우스 오른쪽을 누르고 '(페이지) 검사'를 누르면 검사창이 뜨는데, 검사창 상단의 Application 탭을 누르면 Cookie를 확인할 수 있다. 쿠키를 생성하여 응답문서에 쿠키를 저장하여 클라이언트에게 전달하는 서블릿 @WebServlet("/read.itwill") public class..
-
Servlet - 파일 업로드비전공자 공부일기/:: WEB & Front-End 2019. 7. 2. 17:25
2019. 07. 02 웹에 파일을 업로드 하기 위해선 입력페이지에서 전달된 입력값과 입력파일을 반환받아 클라이언트에게 응답문서로 전달하는 서블릿 @WebServlet("/view.itwill") public class FileViewServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out=..
-
웹개발 - 서블릿 생명주기 Servlet Life Cycle비전공자 공부일기/:: WEB & Front-End 2019. 7. 2. 09:51
2019. 07. 01 필기 서블릿 생명주기란? 서블릿은 클라이언트로부터 요청을 받으면 요청에 의해 WAS(Web Application Server)의 컨테이너가 인스턴스를 생성하여 요청 처리 후 응답한다. => WAS의 컨테이너가 서블릿 인스턴스의 생성, 사용(=메소드 호출), 소멸에 대한 전반적인 관리를 담당한다. => 만약 기존에 생성된 서블릿 인스턴스가 이미 존재할 경우 새로 인스턴스를 생성하지 않는다 => WAS가 종료되면 컨테이너가 서블릿 인스턴스를 소멸시킨다 => 이 때, 서블릿 인스턴스의 생성~사용~소멸 과정을 '생명주기(=Life Cycle)'이라고 한다. 서블릿의 생명주기를 확인해보는 예시 @WebServlet(name = "LifeCycleServlet", urlPatterns = {..
-
웹개발16 - 선택자(selector), 자식요소비전공자 공부일기/:: WEB & Front-End 2019. 6. 26. 15:34
2019. 06. 25-26 필기 이번 챕터에서는 선택자를 검색해 조건에 맞는 요소들을 걸러내고, 원하는 메소드를 적용시키는 문법을 보도록 하겠다. 선택자로 요소 검색 jQuery에서는 다음과 같이 태그 선택자(selector)를 이용하여 엘리먼트를 검색할 수 있다. $("selector"); 아이디 선택자(단일) 또는 클래스 선택자(다수)를 이용하여 검색할 수도 있다. $(".classname"); $("#idname"); 저번에 jQuery는 모두 메소드라고 했었다. 선택자 검색으로 걸러낸 요소들에 메소드를 적용할 수 있다. $("selector").method(); 메소드의 ( ) 안이 비어있으면 메소드 실행한다. ("속성", "변환값")과 같이 전달값이 있으면 속성의 기존값을 전달값으로 변경한다...
-
웹개발10 - 자바스크립트 개요, 문법카테고리 없음 2019. 6. 18. 17:43
2019. 06. 18 필기 자바스크립트(Java Script)란? : 클라이언트 및 인터넷 응용 프로그램 개발을 위한 객체지향 스크립팅 언어 --- 스크립팅 언어 : 인터프리터에 의해 실행 >> 즉, '컴파일을 하지 않아도 된다'는 뜻 --- 단순하고 작은 프로그램 개발에 적합 ** '자바 스크립트'라는 이름 때문에 자바계열 언어라고 생각할 수도 있지만, 사실 문법이 비슷한 것 빼고는 서로 완전히 다른 언어라고 봐도 무방하다고 한다. 자바라는 이름이 붙은 이유는 당시 핫한 언어가 자바였기 때문에 인기편승;을 위해 그랬다는 썰이 있다. 자바 VS 자바스크립트 차이점 자바 JAVA 자바스크립트 JAVA SCRIPT 객체지향 --- 클래스 기반의 언어 객체지향 언어 --- 클래스 개념이 없음 변수 자료형을 ..
-
[CSS-02]박스모델, 테이블 box model, table비전공자 공부일기/:: WEB & Front-End 2019. 6. 18. 13:42
2019. 06. 17 필기 박스모델(Box Model) 이란? : 이미지 또는 텍스트 출력을 위한 사각형 모양의 영역 margin : 박스모델과 박스모델 사이 간격 >> px(고정) %(유동) margin: 00px >> top&&bottom&right&left margin: 00px 00px; >> top&bottom right&left margin: 00px 00px 00px 00px; >> top right bottom left >>>> 구역의 네 변 중에서 하나의 마진만 조정하고 싶으면 margin-bottom: 00px; 과 같은 형식으로 선언 border : 박스모델의 외곽선 border-width : 외곽선 굵기 설정 --- px 키워드(thin, medium,..