나의 공부 노트

Vue event v-on directive를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있다. 이벤트 발생 시 처리 로직을 v-on에 넣기 힘들기 때문에 v-on에서는 이벤트 발생 시 처리해야 하는 method의 이름을 받아 처리한다. 이벤트 수식서 (Event Modifier) method 내에서 이벤트를 처리하는 작업을 할 수도 있지만 method는 DOM의 이벤트를 처리하는 것보다 data 처리를 위한 로직만 작업하는 것이 좋다. 이 문제를 해결하기 위해서 Vue는 v-on 이벤트에 이벤트 수식어를 제공한다. v-on:click.stop 클릭 이벤트 전파가 중단된다. v-on:submit.prevent 제출 이벤트가 페이지를 다시 로드하지 않는다. v-on:cli..

컴포넌트(Component) 컴포넌트는 Vue의 가장 강력한 기능 중 하나이다. HTML Element를 확장하여 재사용 가능한 코드를 캡슐화한다. Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용할 수 있다. Life Cycle Hook 사용 가능하다. 전역 컴포넌트와 지역 컴포넌트가 있다. 전역 컴포넌트를 등록하려면 Vue.component(tagName, options)를 사용한다. 컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스/컴포넌트의 범위에서만 사용할 수 있는 컴포넌트를 만들 수 있다. 컴포넌트 간 통신 상위(부모) - 하위(자식) 컴포넌트 간의 data 전달 방법 부모에서 자식 : props라는 특별한 속성을 전달한다. (..

디렉티브(Directive) 디렉티브는 v- 접두사가 있는 특수 속성이다. 디렉티브 속성 값은 단일 JavaScript 표현식이 된다. (v-for는 예외) 디렉티브의 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용한다. template 여러 개의 태그들을 묶어서 처리해야 할 경우에 template를 사용한다. v-if, v-for, component등과 함께 많이 사용한다. v-text 자바스크립트의 innerText와 같은 역할을 한다. html 태그가 적용되지 않고 문자열이 그대로 보여진다. v-bind 엘리먼트의 속성과 바인딩 처리를 위해서 사용한다. 약어로 ":"로 사용이 가능하다. v-html 자바스크립트의 innerHTML과 같은 역할을 한다. html 태그가 적용된..

Vue instance의 속성 el Vue가 적용될 요소를 지정한다. CSS Selector or HTML Element data Vue에서 사용되는 정보를 저장한다. 객체 또는 함수의 형태이다. template 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성이다. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다. methods 화면 로직 제어와 관계된 method를 정의하는 속성이다. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가한다. created 뷰 인스턴스가 생성되자마자 실행할 로직을 정의한다. Vue Instance의 유효 범위 Vue Instance를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용된다. el 속성..

http protocol의 특징 1. client가 server에 요청 2. server는 요청에 대한 처리를 한 후 client에 응답 3. 응답 후 연결을 해제 >> stateless - 지속적인 연결로 인한 자원낭비를 줄이기 위해 연결을 해제한다. - 그러나 client와 server가 연결 상태를 유지해야 하는 경우 문제가 발생(로그인 정보 등..) - 즉, client 단위로 상태 정보를 유지해야 하는 경우 Cookie와 Session이 사용된다. Cookie Cookie : javax.servlet.http.Cookie 서버에서 사용자의 컴퓨터에 저장하는 정보 파일 사용자가 별도의 요청을 하지 않아도 브라우저는 request시 Request Header를 넣어 자동으로 서버에 전송 key와 v..

EL(Expression Language) EL은 표현을 위한 언어로 JSP 스크립트의 표현식을 대신하여 속성 값을 쉽게 출력하도록 고안된 language이다. 즉, 표현식 ()을 대체할 수 있다. EL 표현식에서 도트 연산자 왼쪽은 반드시 java.util.Map 객체 또는 Java Bean 객체여야 한다. EL 표현식에서 도트 연산자 오른쪽은 반드시 맵의 키이거나 Bean 프로퍼티여야 한다. EL에서 제공하는 기능 JSP의 네가지 기본 객체가 제공하는 영역의 속성 사용 자바 클래스 메소드 호출 가능 표현 언어만의 기본 객체 제공 수치, 관계, 논리 연산 제공 Map을 사용하는 경우 -> ${Map.Map의키} Java Bean을 사용하는 경우 -> ${Java Bean.Bean 프로퍼티} [] 연산자..

JSP(Java Server Page) 자바 서버 페이지(JSP)는 HTML내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 언어이다. JavaEE 스펙 중 일부로 웹 어플리케이션 서버에서 동작한다. 자바 서버 페이지는 실행시에는 자바 서블릿으로 변환된 후 실행되므로 서블릿과 거의 유사하다고 불 수 있다. 하지만, 서블릿과는 달리 HTML 표준에 따라 작성되므로 웹 디자인하기에 편리하다. 아파치 스트럿츠나 자카르타 프로젝트의 JSTL 등의 JSP 태그 라이브러리를 사용하는 경우에는 자바 코딩 없이 태그만으로 간략히 기술이 가능하므로 생산성을 높일 수 있다. JSP 구성요소별 기능 및 사용법 JSP 스크립팅 요소(Scripting Element) 1. 선언 (De..

Servlet 자바 서블릿(Java Servlet)은 자바를 사용하여 웹페이지를 동적으로 생성하는 서버 측 프로그램이다. 흔히 "서블릿"이라고 불린다. 자바 서블릿은 웹 서버의 성능을 향상하기 위해 사용되는 자바 클래스의 일종이다. 서블릿은 JSP와 비슷한 점이 있지만, JSP가 HTML 문서 안에 Java 코드를 포함하고 있는 반면, 서블릿은 자바 코드 안에 HTML을 포함하고 있다는 차이점이 있다. 서블릿 라이프 사이클(Servlet Life-Cycle) Servlet class는 javaEE에서의 class와는 다르게 main method가 없다. 즉, 객체의 생성부터 사용(method call)의 주체가 사용자가 아닌 Servlet Container에게 있다. Client가 요청(request)을..

JSP를 이용하여 구성할 수 있는 Web Application Architecture는 크게 Model1과 Model2로 나뉜다. JSP가 Logic 처리와 view에 대한 처리를 모두 하느냐(Model1), view에 대한 처리만 하느냐(Model2)가 가장 큰 차이점이다. Model1 구조 Model1은 view와 lofic을 JSP 페이지 하나에서 처리하는 구조를 말한다. client로부터 요청이 들어오면 JSP페이지에서 java beans나 별도의 서비스 클래스를 이용하여 작업을 처리하고 결과를 client에 출력한다. Model1 구조는 간단한 page를 구성하기 위해 과거에 가장 많이 사용되었던 architecture이다. Model1의 장점 구조가 단순하며 직관적이기 때문에 배우기 쉽다. 개..

jQuery 기본 구문은 Selector를 사용하여 DOM 객체를 탐색하고, 반환된 래퍼세트를 통해 함수를 수행한다. Selector 표현식과 Action 메소드를 조합한 형태로 구문을 작성한다 >> ex) $(selector).action(); jQuery로 DOM을 탐색하기 전에, 웹 브라우저에 문서가 모두 로드되어 있어야 한다. jQuery는 Document Ready 이후 처리할 수 있는 두 가지 방법을 제공한다. jQuery는 가벼운 자바스크립트 라이브러리로 DOM 조작, Ajax지원 등을 쉽고 빠른 개발을 지원한다. selector 종류 selector 표현방법 All selector $("*") ID selector $("#id") Element selector $("elementName")..