jhhan의 블로그

이번에도 vuetify의 태그에 대해서 알아보겠습니다. 제가 쓰면서 신기했던 그리고 자주 쓰는 부분을 위주로 진행합니다. 1. 첫번째는 v-card 태그입니다. 생각하신 대로 카드 형태를 만들어주는 태그입니다. Vue.js 예상한 카드 형태의 모양을 볼 수 있습니다. 1-1. 이름에서 알 수 있듯이 카드의 제목을 담당합니다. Title Name Vue.js 위 코드에 title 태그만 추가해 보았습니다. 제목이 나타납니다. (기본 설정이 저 정도의 제목으로 나타나는 것이므로 활용을 잘 한다면 멋진 카드를 만들 수 있을 것 같습니다.) 1-2. 역시 이름 그대로 부제목을 나타날 수 있게 해줍니다. Title Name SubTitle Vue.js 위 코드에 또 추가를 해보았습니다. 제목 밑에 부제목이 잘 나..

이번에는 Vuetify를 기본적으로 다뤄보기만 해보겠습니다. 먼저 Vue.js 파일을 만듭니다. 먼저 Vue.js를 선택합니다. 프로젝트의 제목을 입력하시고 그 외의 설정들을 바꾼 후 진행하시면 됩니다. 처음 하신다면 프로젝트 제목만 입력하고 finish 버튼을 누르면 되겠습니다. 그러면 Vue.js 프로젝트가 만들어집니다. 그럼 이제 터미널 창에서 진행합니다. npm run serve를 입력하시면 프로젝트가 실행되면서 화면을 보실 수 있습니다. 이제 'vue add vuetify'를 입력합니다. 그러면 vuetify 관련 파일들이 설치됩니다. 그리고 다시 npm run serve를 입력하시면 vuetify관련 화면으로 바뀐 것을 알 수 있습니다. (관련 캡쳐화면은 하지 못했습니다. 기본 화면이니 쉽게 ..

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기반으로 설명이 진행됩니다. 라이프 사이클 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기 인스턴스의 상태에 따라 호출할 수 있는 속성들 -> 라이프 사이클 속성 각 라이프 사이클 속성에서 실행되는 커스텀 로직 : 라이프 사이클 훅 라이프 사이클의 단계 크게 나눠보기 : 생성 -> 부착 -> 갱신 -> 소멸 생성 : 인스턴스..

Spring Security에 관해 좀 더 실제 코드를 살펴 보겠습니다. @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers("/adminOnly").hasAuthority("ROLE_ADMIN") .antMatchers("/**").permitAll() // 넓은 범위의 URL을 아래로 배치 .anyRequest().authenticated() // ? .and() .csrf().disable() .form..

이번 시간에는 Vue.js 설치에 대해서 알아보겠습니다. 처음에 Vue.js를 설치하는 법에 다루지 않았기 때문에 알아보겠습니다. 먼저 '뷰 개발자 도구'를 설치하겠습니다. 크롬 기준으로 진행합니다. 검색창에 vue.js devtools를 입력합니다. 처음 나오는 링크를 클릭합니다. 그러면 다음의 화면이 보입니다. 설치버튼을 눌러 설치를 진행합니다. 설치가 완료되면 다음과 같이 오른쪽 상단에 'V'표시가 보입니다. 이렇게 하면 뷰 개발자 도구 설치가 완료됩니다. 저는 파이어폭스도 자주 사용해서 파이어폭스에 설치하는 법에 대해서도 알아보겠습니다. 주소창에 https://github.com/vuejs/vue-devtools 과 같이 입력합니다. 그리고 밑으로 내리다 보면 다음의 화면이 보입니다. Firefo..

이번에는 Vue.js와 관련해서 좀더 고급단계에 대해 알아보겠습니다. 책에서 설명한 대로 쓰는 것이어서 이 부분은 크게 도움이 안 될 수도 있습니다. Vuex 뷰엑스 : 애플리케이션의 상태 관리(state management)를 돕는 라이브러리 입니다. 상태 관리가 필요한 이유 어떤 하나의 컴포넌트와 최상위 컴포넌트 사이에 너무 많은 컴포넌트가 존재한다면 props로 데이터를 전달하기가 힘듭니다. (유지보수의 어려움) 이벤트 버스를 사용하면 되겠지만, 데이터의 흐름을 보기가 어려워집니다. 수십개의 컴포넌트를 가졌을 때 이벤트 버스를 사용한다면 데이터 흐름을 파악할 수 없을 것입니다. 그래서 상태 관리가 필요합니다. -> 애플리케이션에서 사용하는 모든 데이터를 중앙에서 관리 -> 크기가 큰 애플리케이션의 ..