일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Stateless
- JPA
- Excel
- Repository
- 라이프 사이클
- Java
- 프로토타입
- VUE
- Spring
- vue-cli
- Vue.js
- dependency injection
- Security
- vuex
- DB
- Setter
- HTTP 메서드
- BEAN
- 의존성 주입
- cache
- di
- 로그인
- thymeleaf
- 캐시
- Kotlin
- javascript
- Singleton
- 싱글톤
- js
- HTTP
- Today
- Total
목록Vue.js (21)
jhhan의 블로그
Vue.js관련해서 오랜만에 다시 블로그에 글을 써봅니다. 이번에는 오늘 배웠던 v-for문과 key를 이용해서 포스트를 작성해보겠습니다. 이전에 계속 v-model을 적용하는데 어려움을 겪고 있었다. 동적으로 input 혹은 textarea 태그를 생성하는데 여기에는 v-model을 적용할 수 없어서 꽤 고생을 했었고, 결국 다른 방법을 찾아냈다. -> id값을 이용해서 값을 받는 방식을 택했다. 먼저 기존에 적용했던 방법부터 살펴보겠다. Submit 이게 제가 만들었던 textarea 혹은 input 태그를 동적으로 생성하는 폼입니다. 그리고 각각의 메소드를 살펴보겠습니다. daily_add: function () { const addedForm = document.getElementById('dai..
이번에는 Spring과 Vue.js를 연동해보겠습니다. 그러면 Spring은 Backend가 되고, Vue.js는 frontend가 되게 됩니다. 프로젝트를 만드는 방법은 다양하지만, 저는 스프링 프로젝트를 먼저 만든 후 Vue-cli를 적용할 것입니다. 먼저 스프링 프로젝트를 만듭니다. 저는 다음과 같은 Dependency를 포함해서 넣었습니다. 넣고 싶은 것을 넣으면 됩니다. (여기서 일단 스프링 세큐리티는 제외하시기를 권장합니다.) 그럼 다음과 같은 프로젝트 구조를 보실 수 있으실 겁니다. 그리고 실행을 한다면 실행이 안됩니다. MariaDB 설정을 안하셔서 그렇습니다. 저는 마리아DB로 했지만, 다른 dB를 원한다면 그것을 하시면 됩니다. 먼저 pom.xml 파일로 가서 다음을 추가합니다. org..
이번에는 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에 대해 알아보겠습니다. [Do it! 예제로 이해하고 실전프로젝트로 완성한다! Vue.js입문] 책으로 진행합니다. { 참고로 Vue.js 설치 관련해서는 지금은 아니고 나중에 쓰겠습니다. 뷰 파일의 경우 .html파일이 아닌 .vue파일로 진행합니다. } 뷰 프로젝트를 하나 만드시면 다음과 같은 화면을 얻을 수 있습니다. 기본으로 제공되는 코드이고 이것을 실행시키기 위해서는 Terminal을 연 후 vue 프로젝트 파일로 이동한 후 'npm run serve'를 입력하시면 작동합니다. 그후 Terminal에 보이는 (포트번호가 포함된)주소를 입력하시면 다음과 같은 화면을 얻으실 수 있습니다. .vue 파일에서는 , , 3가지 부분으로 나뉩니다. 에는 우리가 알던 코드를 입력할 수 ..