전체 글 (140) 썸네일형 리스트형 상품 화면 마크업 v-html 바인딩 : 연결된 속성을 순수 HTML로 렌더링 한다, 편리 할 수 는 있지만 믿을 수 있는 값일 때만 사용 하거나 거의 사용하지 않는편이 좋다. 크로스 사이트 스크립트 공격 뷰에 직접적으로 HTML을 삽입하는 코드를 작성할때 애플리케이션은 크로스 사이트 스크립트(XSS) 공격에 노출된다. 일반적으로 가장 좋은 방법은 HTML과 콘텐츠에 대한 기본 원칙을 최소한으로 따르는것 이다. HTML 보간을 사용 할때는 신뢰 할 수 있는 콘텐츠만 출력한다. HTML 보간을 사용 할 때는 절대 사용자가 제공한 콘텐츠를 출력 하지 않는다. 필요시 텍스트 입력으로 HTML 요소를 받지 않고 고유의 템플릿 컴포넌트를 사용해서 기능을 구현한다. 출력 필터 적용 일반적인 출력 필터 형식 -> {{property .. Vue 생명주기 Vue가 처음 인스턴스화 되면 Vue 생명주기라고 하는 일련의 이벤트를 거친다. 오랫동안 작동하는 Vue 애플리케이션은 이벤트 루프를 돌면서 대부분의 시간을 보낸다. 대부분의 라이브러리를 끌어오는 무거운 작업은 애플리케이션이 처음 생성될 때 처리한다. Vue 생명주기 다이어그램 가상 DOM -> DOM을 나타내는 가벼운 추상화, 웹 브라우저에서 사용하는 DOM트리를 모방 한다. 렌더 함수 -> 뷰가 사용자에게 정보를 보여주는 방법 생명주기 훅 추가 생명주기 코드 탐구 beforeCreate, created, beforeMount, mounted 함수의 경우 인스턴스 생성 및 DOM이 마운트 되는 동시에 라이프 사이클 이벤트가 실행된다. beforUpdate, updated 함수 의 경우 Vue 인스턴스가.. 반응형 애플리케이션 반응형 애플리케이션 조건 애플리케이션 상태 변화를 관찰 애플리케이션 전체에 변경 알림을 전달 상태 변화에 따라 뷰를 자동 렌더링 사용자 상호 작용을 위해 시기 적절한 피드백을 제공 반응형 웹 애플리케이션은 지속적인 상호 작용이 막히는 것을 방지하고 가능한 함수적 프로그래밍 관용구를 사용 하는 비동기 기술인 MVVM 디자인 원칙에 따라 이러한 조건들을 만족시킨다. Vue와 MVVM 반응성 사용 방법 모든 Vue 애플리 케이션은 적어도 하나의 Vue 인스턴스를 가지고있다. Vue는 완전한 웹 기술로 구축 했기 때문에 하나의 Vue 인스턴스 또한 웹 브라우저에만 존재한다. 결정적으로 업데이트된 뷰, 비즈니스 로직의 실행, 뷰 또는 뷰-모델 영역에 있는 모든 작업에 대해 서버 기반 페이지에서 새로고침을 하는것에.. 모델 - 뷰 - 뷰모델 패턴 모델 - 뷰 - 뷰모델(MVVM) 모델 - 뷰 - 뷰모델 패턴 구성 요소 MVVM 설계 방식은 개발자가 사용자 반응에 즉각 응답할 수 있는 소프트웨어를 만들 수 있게 하며, 사용자에게는 하나의 일에서 다른 일 로 자유롭게 움직일 수 있게 한다. log4j 로그 메세지 출력 log4j.xml 로그메시지 콘솔 출력 세팅 로그 파일 로컬 경로 저장 방법 Controller 클래스 내 log4j 적용 결과 log4j 실제 애플리케이션에서는 유지관리를 위해 웹 사이트에 접속한 사용자 정보나 각 클래스의 메서드 호출 시각 등 여러가지 정보를 파일로 저장해서 관리한다. 해당 로그 관련 기능을 제공하는것이 log4j이다. log4j 기능 관련 설정은 log4j.xml 파일에서 수행한다. log4j.xml을 이루는 태그 태그 설명 로그의 출력 위치를 결정(파일, 콘솔, DB등)한다. log4j의 XXXAppender로 끝나는 클래스들의 이름을 보면 출력 위치를 알 수 있다. Appender가 어디에 출력할 것 인지 결정 했다면 어떤 형식으로 출력 할 지 출력 레이아웃을 결정 로깅 메시지를 Appender에 전달한다. 개발자가 로그레벨을 이용해 로그 출력 여부를 조정 할 수 있다. logger는 로그 레벨을 가지고 있으며, 로.. 메이븐 프로젝트의 구조와 구성 요소 메이븐은 프로젝트 구조와 내용을 기술하는 선언적 접근 방식의 오픈소스 빌드 툴이다. 메이븐 사용시 프로젝트 종속 라이브러리들과 그 라이브러리에 의존하는 Dependency 자원까지 관리 할 수 있다. 메이븐은 프로젝트 전반의 리소스 관리와 설정 파일 그리고 이와 관련된 표준 디렉터리 구조를 처음부터 일관된 형태로 구성하여 관리한다. 메이븐을 사용하면 컴파일과 동시에 빌드를 수행 할 수 있을 뿐만 아니라 관련된 라이브러리도 일관성 있게 관리 할 수 있어 편리하다. 메이븐 기반 웹 프로젝트 기본 디렉터리 구조 메이븐 프로젝트 구성 요소 구성 요소 설명 pom.xml 프로젝트 정보가 표시되며 스프링에서 사용되는 여러 가지 라이브러리를 설정해 다운로드 할 수 있다. src/main/java 자바 소스파일이 위치.. Vue.js - 컴포넌트 데이터 전달 Vue.js 를 사용하여 자식 컴포넌트 또는 부모 컴포넌트에 props를 사용 하여 데이터를 전달 할수있다. - 부모 컴포넌트 -> 자식 컴포넌트 데이터 전달 예제 컴포넌트 생성 inputField.vue inputField 내부 소스 Home.vue - 자식 컴포넌트 -> 부모 컴포넌트 전달 예제 - methods object를 사용한 함수 사용 방법 Home.vue 생성한 컴포넌트를 기반으로 html 요소 생성 method -> updateName () 함수 생성 inputField.vue 입력 받을 요소인 input 요소 생성 후 :value = "name" Home.vue에서 전달한 props 데이터 전달 @input 이벤트로 updateName() 함수 실행 this.$emit() 요소로 Hom.. 이전 1 2 3 4 ··· 18 다음
