내 인생에도 예쁜 꽃이 피었으면 좋겠다

History.pushstate 페이지 이동없이 주소만 바꿔준다. (브라우저의 뒤로가기 버튼이 활성화 된다.) 브라우저 페이지를 이동하게되면 window.onpopstate라는 이벤트가 발생하는데, pushState를 했을 때는 popstate이벤트가 발생하지 않고, 뒤/앞으로 가기를 클릭했을 때 popstate이벤트가 발생하게 된다. => pushState와 popstate를 이용해 SPA의 페이지 전환을 구현할 수 있다. pushstate()는 현재의 주소를 다른 것으로 변경하면서 페이지는 그대로 유지해주기 때문에 페이지가 전환, 갱신되는 것을 방지하면서 동시에 주소창의 url이 변경된다. history.pushstate(state,title,url); state : 브라우저 이동시 넘겨줄 데이터 (..

https://m.blog.naver.com/takijang/221014895320 ${ pageContext.request.contextPath} ${ pageContext.request.contextPath} contextPath가 변경되어도 소스 수정없이 적용하기 위해 사용 ->... blog.naver.com https://java119.tistory.com/101 [Spring] 절대경로와 상대경로(feat.${pageContext.request.contextPath}) 먼저 절대 경로, 상대 경로를 설명하기 전 학창 시절로 가서 절대 평가, 상대 평가를 생각하면서 이 글을 보면 이해가 쉽습니다. 절대 경로 개념 최초의 시작점으로 경유한 경로를 전부 기입 java119.tistory.com 절대..

https://noritersand.github.io/javascript/javascript-%ED%8A%B9%EC%A0%95-%EB%AC%B8%EC%9E%90%EB%A5%BC-%ED%81%B4%EB%A6%BD%EB%B3%B4%EB%93%9C%EB%A1%9C-%EB%B3%B5%EC%82%AC%ED%95%98%EA%B8%B0/ [JavaScript] 특정 문자를 클립보드로 복사하기 띠용 noritersand.github.io https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard Interact with the clipboard - Mozilla | MDN Working with the..

//PC 및 모바일 접속 확인 실시 if(navigator.platform){ } navigator.platform 이 값이 궁금하다. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform Navigator.platform - Web APIs | MDN Returns a string representing the platform of the browser. The specification allows browsers to always return the empty string, so don't rely on this property to get a reliable answer. developer.mozilla.org https://kkh..

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

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파일에서 통합관리하는 것을 컴포넌트화라고 한다. 순서 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 파일에서 통합 관리 하는 것을..

뷰 인스턴스 생성 {{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 ..

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

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