일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- BEAN
- Kotlin
- Excel
- Repository
- Stateless
- 싱글톤
- Setter
- HTTP
- 라이프 사이클
- 의존성 주입
- Spring
- vuex
- dependency injection
- js
- di
- JPA
- DB
- HTTP 메서드
- vue-cli
- 로그인
- cache
- 프로토타입
- javascript
- VUE
- Security
- 캐시
- thymeleaf
- Vue.js
- Java
- Singleton
- Today
- Total
목록Vue.js (24)
jhhan의 블로그
Vue.js관련해서 오랜만에 다시 블로그에 글을 써봅니다. 이번에는 오늘 배웠던 v-for문과 key를 이용해서 포스트를 작성해보겠습니다. 이전에 계속 v-model을 적용하는데 어려움을 겪고 있었다. 동적으로 input 혹은 textarea 태그를 생성하는데 여기에는 v-model을 적용할 수 없어서 꽤 고생을 했었고, 결국 다른 방법을 찾아냈다. -> id값을 이용해서 값을 받는 방식을 택했다. 먼저 기존에 적용했던 방법부터 살펴보겠다. Submit 이게 제가 만들었던 textarea 혹은 input 태그를 동적으로 생성하는 폼입니다. 그리고 각각의 메소드를 살펴보겠습니다. daily_add: function () { const addedForm = document.getElementById('dai..
이번에는 Vue.js 중 라이프 사이클에 대해 좀 더 자세히 알아보도록 하겠습니다. 참고로 이전 포스트에서 써놨을 수도 있지만, 최근 코딩을 진행하면서 이 라이프 사이클이 어떤 역할을 하는지 중요하겠다는 생각이 들어서 올립니다. [Do it! 예제로 이해하고 실전 프로젝트로 완성한다! Vue.js 입문] 책을 바탕으로 합니다. 이 설명은 vue-cli 가 아닌 html기반으로 설명이 진행됩니다. 라이프 사이클 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기 인스턴스의 상태에 따라 호출할 수 있는 속성들 -> 라이프 사이클 속성 각 라이프 사이클 속성에서 실행되는 커스텀 로직 : 라이프 사이클 훅 라이프 사이클의 단계 크게 나눠보기 : 생성 -> 부착 -> 갱신 -> 소멸 생성 : 인스턴스..
이번 시간에는 Vue.js 설치에 대해서 알아보겠습니다. 처음에 Vue.js를 설치하는 법에 다루지 않았기 때문에 알아보겠습니다. 먼저 '뷰 개발자 도구'를 설치하겠습니다. 크롬 기준으로 진행합니다. 검색창에 vue.js devtools를 입력합니다. 처음 나오는 링크를 클릭합니다. 그러면 다음의 화면이 보입니다. 설치버튼을 눌러 설치를 진행합니다. 설치가 완료되면 다음과 같이 오른쪽 상단에 'V'표시가 보입니다. 이렇게 하면 뷰 개발자 도구 설치가 완료됩니다. 저는 파이어폭스도 자주 사용해서 파이어폭스에 설치하는 법에 대해서도 알아보겠습니다. 주소창에 https://github.com/vuejs/vue-devtools 과 같이 입력합니다. 그리고 밑으로 내리다 보면 다음의 화면이 보입니다. Firefo..
이번에는 Vue.js와 관련해서 좀더 고급단계에 대해 알아보겠습니다. 책에서 설명한 대로 쓰는 것이어서 이 부분은 크게 도움이 안 될 수도 있습니다. Vuex 뷰엑스 : 애플리케이션의 상태 관리(state management)를 돕는 라이브러리 입니다. 상태 관리가 필요한 이유 어떤 하나의 컴포넌트와 최상위 컴포넌트 사이에 너무 많은 컴포넌트가 존재한다면 props로 데이터를 전달하기가 힘듭니다. (유지보수의 어려움) 이벤트 버스를 사용하면 되겠지만, 데이터의 흐름을 보기가 어려워집니다. 수십개의 컴포넌트를 가졌을 때 이벤트 버스를 사용한다면 데이터 흐름을 파악할 수 없을 것입니다. 그래서 상태 관리가 필요합니다. -> 애플리케이션에서 사용하는 모든 데이터를 중앙에서 관리 -> 크기가 큰 애플리케이션의 ..
이번에는 뷰 템플릿에 대해 알아보겠습니다. 뷰 템플릿: HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 부라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성 데이터 바인딩(Data Binding) HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미 {{}} 문법과 v-bind 속성 {{}} 은 지금까지 여러번 사용했으므로 딱히 설명드리지 않겠습니다. v-bind: HTML 속성값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식 프레임워크 목록 가져오기 아이디 바인딩 클래스 바인딩 스타일 바인딩 {{ true ? 100 : 0 }} {{ reversedMessage }} Good Vue.js {{ system }} Better V..
이번 시간에는 라우팅에 대해 알아보겠습니다. 라우팅 : 웹페이지 간의 이동방법 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션에서 주로 사용 라우팅 특징 화면간의 전환 매끄러움 애플리케이션의 사용자 경험 향상 뷰 뿐만 아니라 리액트, 앵귤러도 사용 뷰 라우터 : 뷰에서 라우팅 기능을 구현할 수 있게 지원하는 공식 라이브러리 이번 뷰 라이터 실습을 위해 새로운 프로젝트를 만들겠습니다. vue create vue_router를 이용해 뷰 프로젝트를 하나 만듭니다. 그리고 cd vue_router로 이동한 후 vue add router를 입력하고 실행하면 기본 라우팅 화면을 볼 수 있습니다. 그리고 About을 누른다면 이 화면도 볼 수 있습니다. 이제 여기서 코드를 작성해 나가겠습니다. Nested R..
이번에는 컴포넌트에 대해 알아보겠습니다. 뷰에서는 화면 분할을 사용할 때 컴포넌트라는 개념을 사용해서 분할합니다. 그래서 보다 직관적으로 코드를 이해할 수 있습니다. 코드를 살펴보겠습니다. 저는 이런식으로 컴포넌트를 구성했습니다. global-component는 전역 컴포넌트 my_component는 지역 컴포넌트 parent-component는 부모-자식 관계에 있는 컴포넌트 입니다. 전역 컴포넌트부터 살펴보겠습니다. 전역 컴포넌트는 전역 변수처럼 어디에서든지 쓰일 수 있는 컴포넌트입니다. import GlobalComponent from "./components/global-component"; 처럼 선언을 한 후 해당위치에 vue파일을 만들어줍니다. 이제 global-component 파일을 보겠습..
이번에는 Vue.js에 대해 알아보겠습니다. [Do it! 예제로 이해하고 실전프로젝트로 완성한다! Vue.js입문] 책으로 진행합니다. { 참고로 Vue.js 설치 관련해서는 지금은 아니고 나중에 쓰겠습니다. 뷰 파일의 경우 .html파일이 아닌 .vue파일로 진행합니다. } 뷰 프로젝트를 하나 만드시면 다음과 같은 화면을 얻을 수 있습니다. 기본으로 제공되는 코드이고 이것을 실행시키기 위해서는 Terminal을 연 후 vue 프로젝트 파일로 이동한 후 'npm run serve'를 입력하시면 작동합니다. 그후 Terminal에 보이는 (포트번호가 포함된)주소를 입력하시면 다음과 같은 화면을 얻으실 수 있습니다. .vue 파일에서는 , , 3가지 부분으로 나뉩니다. 에는 우리가 알던 코드를 입력할 수 ..