2021/12 63

자바스크립트 위치..?

... 태그의 가장 아래 자바스크립트의 'src' 위치 또한 지정해줍니다. 마지막에 넣어주는 이유는 브라우저가 스크립트 파일을 읽을 때 시간이 걸려서 마지막에 로드하는게 좋아서라고 합니다. ... JQuery(제이쿼리) 라이브러리를 추가해줘야 합니다 .... 위에서 적용한 코드보다 위에 있어야 합니다. 라이브러리가 먼저 로드돼야 스크립트를 해석할 수 있기 때문입니다. JVM에서 JRE의 라이브러리를 미리 로드하고 그 다음에 우리가 작성한 코드를 로드하는 것과 동일합니다. .... [참조] https://codevang.tistory.com/222

ibatis

Ibatis 아이바티스 - iBATIS : JDK 1.4 이상 사용 가능 - iBATIS : com.ibatis.* - 데이터베이스에 있는 데이터들을 보다 편리하게 가져오기 위한 프레임워크 - SQL에 기반한 데이터베이스와 자바, 닷넷, 루비 등을 연결시켜주는 역할을 하는 영속성 프레임워크 - 프로그램 소스코드에서 SQL문장을 분리하여 별도의 XML파일로 저장하고 이 둘을 서로 연결시켜주는 방식 - 사용자가 SQL문장을 만들면 그에 적합한 객체모델을 생성하는 방식 - 장점 1) 소스코드와 SQL문을 분히라여 관리가 편해짐 2) SQL문이 변경되더라도 파라미터 값이 변경되지 않는다면 소스코드를 수정할 필요가 없음 3) 어떤 프로그래밍 언어로도 구현이 가능함 4) 데이터베이스 접근 클래스와 비즈니스 로직을 ..

차근차근/Spring 2021.12.06

[Vue.js] v-cloak

v-cloak은 내장 디렉티브로 VueJS에서 렌더링 되기 이전에 브라우저에서 감추는 역할을 한다. (여기서 감춘다는 뜻은 감추고 보여주는 역할의 v-if또는 v-show와는 다르다.) v-cloak의 동작방식 1) 브라우저에서 페이지 소스를 로딩 2) VueJS프레임워크를 실행 3) VuewJS처리 완료 이 과정에서 VueJS가 처리되기 이전 화면세는 {{ }}표현식 또는 v-if등을 사용해 보여주지 않을 내용들이 그대로 노출된다. 이를 피하기 위해 v-cloak을 사용한다. v-cloak을 사용해 감추는 방법 v-cloak을 엘리먼트에 적용하면 VueJS의 처리가 완료된 후에 v-cloak디렉티브를 스스로 제거한다. 태그에서는 v-cloak이라는 어트리뷰트를 제거하게된다. 그래서 v-cloak에 안보..

[Vue.js] Vue.js란 (5) - Vue 컴포넌트

컴포넌트 생성 한개 이상의 페이지를 레이아웃 또는 기능별로 쪼개어 분리하고, 상위 Vue파일에서 통합관리하는 것을 컴포넌트화라고 한다. 순서 1) 폴더 안에 각 하위 컴포넌트 vue파일 생성 2) 상위 컴포넌트(app.vue) script내에 하위 컴포넌트로 import로 콜 3) export default, components 메소드 안, import한 하위 컴포넌트 export처리 4) 상위 컴포넌트 template태그 내 , 각 하위 컴포넌트 태그 삽입 https://goddino.tistory.com/88 [js] vue.js 컴포넌트 생성(컴포넌트로 쪼개기) vue.js 하위 컴포넌트 만들기 한개 이상의 페이지를 레이아웃 또는 기능별로 쪼개어 분리하고, 상위 vue 파일에서 통합 관리 하는 것을..

[Vue.js] Vue.js란 (4) - Vue 인스턴스

뷰 인스턴스 생성 {{message}} 출처1: https://coding-start.tistory.com/214?category=811388 [코딩스타트] 출처2: https://www.bottlehs.com/vue/vue-js-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-&-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%86%8C%EA%B0%9C/ 뷰 인스턴스 라이프 사이클 초기화 인스턴스가 생성될 때 아래의 초기화 작업을 수행한다. 데이터 관찰 템플릿 컴파일 DOM 에 객체 연결 데이터 변경시 DOM 업데이트 뷰 인스턴스 옵션 속성 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미한다. 이 말은 무엇이냐, 이미 Vue ..

[Vue.js] Vue.js란 (3) - Vue 문법

디렉티브 데이터 바인딩의 가장 기본적인 형태는 이중괄호를 사용합니다. {{ }} {{ msg }} {{ }} 내부에 자바스크립트 표현식의 모든 기능 지원합니다. (하나의 단일 표현식만 가능) v- 접두사 사용 접두사는 Vue 고유의 특성을 식별하기 위한 시각적 역할을 합니다. 렌더링 된 DOM에 특수한 반응형 동작을 주기위해 사용합니다. 태그에 속성을 지정하는 방식으로 v-on v-model v-for v-bind v-if v-cloak 등을 사용할 수 있습니다. 수식어 수식어는 .으로 표시되는 특수 접미사로, 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냅니다. // .prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록 // v-on 디렉티브에게 알려줍니..

[Vue.js] Vue.js란 (2)

호환성 Vue는 기본적으로 JavaScript 객체를 Vue 인스턴스 data 옵션으로 정의할 때 모든 속성들을 Object.defineProperty을 사용하여 Getter/Setter로 변환합니다. 이것은 ES5에서 새로 등장한 기능으로 하위호환이 불가능하기 때문에 Vue.js는 IE8 이하를 지원하지 않습니다. 특징 MVVM 패턴을 사용합니다. 더보기 MVVM 패턴 Mode - View - ViewModel의 줄임말으로 로직과 UI의 분리를 위해 설계된 패턴입니다. 웹페이지는 돔과 자바스크립트로 만들어지게 되는데 돔이 View 역할을 하고, 자바스크립트가 Model 역할을 합니다. 뷰모델이 없는 경우에는 직접 모델과 뷰를 연결해야 합니다. 그러나 뷰모델이 중간에서 연결해 주는 것이 MVVM 모델입니..

[Vue.js] Vue.js란 (1)

더보기 일단 나는..개발공백이 4년이 있는 백엔드 개발자이다. 서버나 디비를 만들고 운영도 했었지만 백엔드는 스프링이었고 화면단은 jsp였다. 공백기 동안 vue.js를 배웠는데..경험해봤는데.. 배운 그대로 비주얼 스튜디오를 설치하고 뷰티파이를 통해서만 개발을 해야 한다고 생각했었다. 다시 일을 하게 되었는데 jsp안에 vue가 있는 것을 보았다.. 왜 이 생각을 못했지..하는 생각과 동시에 내 공백이 너무 길었구나 하는 생각이 들었다.. 잠깐 찾아보니..jsp에서 vue를 쓰는 것조차 트랜드가 아니라고 말하고 있는 것 같다. 언제 따라 잡을 수 있을까.. vue.js 에 대해 정리를 하고 싶었는데. 이 블로그에 글을 쓸 때 자바스크립트 메뉴를 선택해야 하는건지 vue.js메뉴를 따로 만들어야 하는건지..

History API

if(typeof(history.pushState) == 'function'){ history.replaceState({}, null, location.pathname); } 새로나온 것도 아닌데..이제서야 처음봤다... - typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다. 페이지를 리로드하지 않고 페이지 주소만 변경할 때 사용합니다. 앞서 말했듯이 html5 지원 브라우저에서만 사용 가능하기 때문에, 지원하지 않거나 ie10 미만 버전에서는 열심히 에러를 뿜어줄 것이다. 실제 페이지를 로드하는 것은 아니기 때문에 실제 문서 존재 여부는 중요하지 않다. 물론 새로고침 하면 페이지를 찾을 수 없다고 에러가 뿜뿜! 뒤로가기를 하면 원래 문서가 뜰 것입니다.(예제페이지) ajax..

반응형