전체 글
-
[JSP] JSTL 정리 | ye050425INFO/WEB 2020. 11. 11. 17:37
[출처 : velog.io/@ye050425] JSP 개발을 단순화하기위한 태그 library 장점 빠른 개발 -> JSP를 단순화하는 많은 태그를 제공 코드 재사용성 -> 다양한 페이지에서 JSTL 태그 사용 가능 스크립틀릿 태그를 사용할 필요가 없음 (스크립틀릿 태그를 사용하지 않음) JSTL tag 태그 이름 설명 core tags 변수 지원, URL 관리, 흐름 제어 등을 제공, URL은 http://java.sun.com/jsp/jstl/core , 접두사는 c function tags 문자열 조작 및 문자열 길이를 지원, URL은 http://java.sun.com/jsp/jstl/functions , 접두사는 fn formatting tags 메시지 형식화, 번호 및 날짜 형식화 등을 지원,..
-
[가이드] 조건부 렌더링 - 필수요소 | VueFront-end/Vue.js 2020. 8. 19. 17:39
v-if v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용됩니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. Vue is awesome! v-else와 함께 “else 블록”을 추가하는 것도 가능합니다. Vue is awesome! Oh no 😢 에 v-if을 갖는 조건부 그룹 만들기 v-if는 디렉티브기 때문에 하나의 엘리먼트에 추가해야합니다. 하지만 하나 이상의 엘리먼트를 트랜지션하려면 어떻게 해야할까요? 이 경우 우리는 보이지 않는 wrapper 역할을 하는 엘리먼트에 v-if를 사용할 수 있습니다. 최종 렌더링 결과에는 엘리먼트가 포함되지 않습니다. Title Paragraph 1 Paragraph 2 v-else v-else 디렉티브를 사용하여 v-if에 대한..
-
[가이드] 컴포넌트 기초(2) - 필수요소 | VueFront-end/Vue.js 2020. 8. 19. 16:27
슬롯을 사용한 콘텐츠 배포 컴포넌트를 사용할 때 다음과 같이 컴포넌트를 구성하는 것이 좋습니다. 주목해야 할 두 가지 사항이 있습니다. 컴포넌트는 어떤 콘텐츠를 받을지 모릅니다. 그것은 이 사용하는 컴포넌트에 의해 결정됩니다. 컴포넌트에는 자체 템플릿이 있을 가능성이 큽니다. 위 구성으로 작동하도록 하려면 부모 “content”와 컴포넌트의 자체 템플릿을 섞는 방법이 필요합니다. 이것은 콘텐츠 배포 프로세스입니다. Vue.js는 현재 웹 컴포넌트 사양 초안을 모델로 한 콘텐츠 배포 API를 구현하며 원본 콘텐츠의 배포판 역할을 하기 위해 특수한 엘리먼트를 사용합니다. 범위 컴파일 API를 파헤치기 전에 먼저 내용이 컴파일되는 범위를 명확히 해야 합니다. 다음과 같은 템플릿이 있다고 상상해보겠습니다. {{..
-
[가이드] 컴포넌트 기초(1) - 필수요소 | VueFront-end/Vue.js 2020. 8. 18. 16:48
컴포넌트가 무엇인가요? 컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타날 수도 있습니다. Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다. 컴포넌트 사용하기 전역 등록 전역 컴포넌트를 등록하려면, Vue.component(tagName, options)를 사용합니다. Vue.component('my-component', {..
-
[가이드] 폼 입력 바인딩 - 필수요소 | VueFront-end/Vue.js 2020. 8. 14. 15:12
기본 사용법 v-model 지시문을 사용하여 폼 요소(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩을 만들 수 있습니다. 입력 유형에 따라 요소를 업데이트하는 올바른 방법을 자동으로 선택합니다. v-model은 모든 폼 엘리먼트의 초기 value와 checked, selected 속성을 무시합니다. Vue 인스턴스의 데이터에 의해서만 동작합니다. data구성 요소 의 옵션 내에서 JavaScript 측의 초기 값을 선언해야 합니다. v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 내보냅니다. text 및 textarea 요소는 value 속성과 input 이벤트를 사용합니다 . 체크 박스와 라디오 버튼은 checked 속..
-
[가이드] 이벤트 핸들링 - 필수요소 | VueFront-end/Vue.js 2020. 8. 14. 13:18
이벤트 수신 v-on 지시어를 사용하여 DOM 이벤트를 수신하고 트리거될 때 일부 JavaScript를 실행할 수 있습니다. Add 1 The button above has been clicked {{ counter }} times. 메서드 이벤트 핸들러 하지만 많은 이벤트 핸들러의 로직은 더 복잡하므로 JavaScript를 v-on 속성 값으로 유지하는 것은 불가능합니다. 그렇기 때문에 v-on 호출하려는 메서드의 이름도 허용할 수 있습니다. GREAT 인라인 핸들러의 메서드 메서드 이름에 직접 바인딩하는 대신 인라인 JavaScript 문에서 메서드를 사용할 수도 있습니다. Say Hi Say What 때로는 인라인문 핸들러에서 원래 DOM 이벤트에 액세스해야 하는 경우도 있습니다. 특수 $event..
-
[가이드] 리스트 렌더링 - 필수요소 | VueFront-end/Vue.js 2020. 8. 13. 13:16
v-for로 배열을 요소에 매핑 v-for 지시문을 사용하여 배열을 기반으로 목록을 렌더링할 수 있습니다. v-for 지시문을 사용하려면 item in items 형식의 특수 구문이 필요합니다. 여기서 items은 소스 데이터 배열이고 item은 반복될 배열 요소의 별칭입니다. {{ item.message }} v-for 블록 내부에서는 부모 범위 속성에 대한 전체 액세스 권한이 있습니다. v-for는 현재 항목의 인덱스에 대해 선택적 두 번째 인수를 지원합니다. {{ parentMessage }} - {{ index }} - {{ item.message }} in 대신에 of 구분자를 사용하여 iterators에 대한 JavaScript 구문에 더 가깝습니다. 객체와 v-for v-for를 사용하여 객..
-
[가이드] 클래스와 스타일 바인딩 - 필수요소 | VueFront-end/Vue.js 2020. 8. 12. 18:06
일반적으로 데이터 바인딩은 요소의 클래스 목록과 인라인 스타일을 조작해야 합니다. 둘 다 속성이기 때문에 v-bind를 사용하여 처리할 수 있습니다. 즉, 표현식을 사용하여 최종 문자열만 계산하면 됩니다. 하지만 문자열 연결에 간섭하는 것은 짜증나고 오류가 발생하기 쉽습니다. 이러한 이유로 Vue는 v-bind를 class 및 style과 함께 사용할 때 특별히 향상된 기능을 제공합니다. 문자열뿐만 아니라 개체 또는 배열도 평가할 수 있습니다. HTML 클래스 바인딩 객체 구문 v-bind:class에 개체를 전달하여 클래스를 동적으로 전환할 수 있습니다. 위의 구문은 active 클래스의 존재 여부가 isActive 데이터 속성의 true/false에 따라 결정된다는 것을 의미합니다. 개체에 더 많은 ..