유블로그

Component vue의 강력한 기능! HTML Element를 확장하여 재사용 가능한 코드를 캡슐화한다. Vue Instance 이기도 하기 때문에 모든 옵션 객체를 사용한다. Life Cycle Hook 사용 가능하다. 전역, 지역 둘 다로 사용가능 - 전역 컴포넌트 - 지역 컴포넌트 - component template {{msg}} - 컴포넌트간 통신 부모(상위)는 자식(하위)에게 props를 전달하고, 자식은 부모에게 event만 전달한다. 자식은 부모의 값을 직접 참조할 수 없다. data와 마찬가지로 props 속성의 값을 template에서 사용가능하다. - 사용자 정의 이벤트 이벤트는 대소문자 변환 안 되니 정확한 이벤트 이름을 작성할 것. 케밥 표기법 권장! 자식이 부모에게 $emit..

- Vue filter : {{ }} 또는 v-bind 속성에 사용 가능. 결과 : {{ msg | count1 }} {{ msg | count2('문자를 넣어보세요') }} - Vue computed 특정 데이터의 변경사항을 실시간으로 처리 캐싱을 이용하여 데이터 변경이 없을 경우 캐싱된 데이터를 반환 Setter와 Getter를 직접 지정할 수 있음 작성은 method 형태로 작성하지만 Vue에서 proxy 처리하여 property 처럼 사용 원본 메시지: "{{ message }}" 역순으로 표시한 메시지1: "{{ reversedMsg }}" 역순으로 표시한 메시지2: "{{ reversedMsg }}" 역순으로 표시한 메시지3: "{{ reversedMsg }}" 원본 메시지: "{{ messa..

- 보간법 - 문자열 Mustache 구문(이중 중괄호 {{ }} ) 사용한 텍스트 보간 v-once 속성을 이용하면 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행한다. {{ msg }} {{ msg }} {{ }} 는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용한다. {{ msg }} vuejs는 {{ }} 내에서 자바스크립트 표현식의 모든 기능을 지원한다. {{message + ' Vue~'}} {{num > 10 ? num * num : num + 100}} {{message.split("").reverse().join("")}} {{ changeMsg('Gooood') }} * v-text는 {{ }}와 같다. - 디렉티브 디렉..

속성 설명 el Vue가 적용될 요소 지정. CSS Selector or HTML Element data Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태 template 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다. methods 화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직 추가 created 뷰 인스턴스가 생성되자 마자 실행할 로직을 정의 - Vue Instance Life Cycle 라이프 사이클을 크게 나누면 인스턴스를 생성, 화면에 부착, 내용 갱신, 소멸 4단계로 나눌 수 있다. life cycle 속성 설명 befo..

application.properties 파일에서 아래 내용 추가 mybatis.configuration.map-underscore-to-camel-case=true

REST 관련 Annotation @RestController Controller 가 REST 방식을 처리하기 위한 것임을 명시 @ResponseBody JSP 같은 뷰로 전달되는 것이 아니라 데이터 자체를 전달 @PathVariable URL 경로에 있는 값을 파라미터로 추출 @CrossOrigin Ajax 크로스 도메인 문제를 해결 @RequestBody JSON 데이터를 원하는 타입으로 바인딩 @RestController @RequestMapping("/country") public class CountryController { @Autowired private CountryService service; @PostMapping("/regist.do") //@ResponseBody public Map..

REST API 공공데이터를 외부 응용 프로그램에서 사용할 수 있도록 OPEN API를 제공하는데, 사용기술은 REST API이다. REST는 하나의 URI는 하나의 고유한 리소스를 대표하도록 설계된다는 개념에 전송방식을 결합해서 원하는 는 작업을 지정한다. HTTP URI를 통해 제어할 자원을 명시하고, HTTP Method(GET, POST, PUT, DELETE)을 통해 해당 자원을 제어하는 명령을 내리는 방식의 아키텍처. + 리소스는 JSON, XML 등의 다양한 형태로 나타낼 수 있다. 기존 서비스와 REST 서비스 차이점? 기존 서비스 - 요청에 대한 처리를 한 후 가공된 data 를 이용하여 특정 플랫폼에 적합한 형태의 View로 만들어서 반환한다. REST - data 처리만 한다거나, 처..