jhhan의 블로그

Vue.js를 요즘 공부하고 있고 기존에 해봤던 것을 다시 한번 하는 것이기 때문에 아직까지는 어려움이 없다. 그래도 이번에 정식으로 Vue.js를 공부하면서 새롭게 알게 된 내용들 or 중요하다고 생각하는 내용을 기록하려 한다. 이 글은 Vue.js에 대한 기본지식이 있어야 이해할 수 있을 것이다. (자세하게 적을 생각이 없다.. ㅎㅎ) 1. v-for v-for은 Vue에서 제공하는 반복문이다. 코드에서처럼 v-for를 사용해서 진행하고, :key="??"를 추가한다. :key="??"는 반복문을 돌면서 반복 요소들을 구분하는 속성이다. data가 될 수도 있고, (data, idx)의 경우에는 idx가 key역할을 할 것이다. 2. export , import export로 보내고 싶은 데이터를 설..

이번 포스트에서는 빈 생명주기에 대해 알아보겠습니다. 애플리케이션의 시작 시점 데이터베이스 연결, 외부 연결 등 필요한 연결 관계를 미리 작업 - 초기화 작업 애플리케이션의 종료 시점 연결 관계들을 잘 종료(소멸) 애플리케이션의 시작과 종료에서는 위와 같은 설정이 필요합니다. 이런 설정을 스프링을 통해서 진행하는 것을 해볼 예정입니다. 단순하게 외부와 연결하는 어떤 모듈이 있다고 가정합니다. (여기서는 그냥 String만 이용해서 이렇게 진행될 것이다.. 라고 해보겠습니다.) 위의 구조처럼 lifecycle 패키지 밑에 NetworkClient 클래스와 BeanLifeCycleTest 클래스를 만들어둡니다. public class NetworkClient { /** * 2021.08.16 * BeanLi..

이번에는 Vue.js 중 라이프 사이클에 대해 좀 더 자세히 알아보도록 하겠습니다. 참고로 이전 포스트에서 써놨을 수도 있지만, 최근 코딩을 진행하면서 이 라이프 사이클이 어떤 역할을 하는지 중요하겠다는 생각이 들어서 올립니다. [Do it! 예제로 이해하고 실전 프로젝트로 완성한다! Vue.js 입문] 책을 바탕으로 합니다. 이 설명은 vue-cli 가 아닌 html기반으로 설명이 진행됩니다. 라이프 사이클 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기 인스턴스의 상태에 따라 호출할 수 있는 속성들 -> 라이프 사이클 속성 각 라이프 사이클 속성에서 실행되는 커스텀 로직 : 라이프 사이클 훅 라이프 사이클의 단계 크게 나눠보기 : 생성 -> 부착 -> 갱신 -> 소멸 생성 : 인스턴스..

이번에는 Vue.js에 대해 알아보겠습니다. [Do it! 예제로 이해하고 실전프로젝트로 완성한다! Vue.js입문] 책으로 진행합니다. { 참고로 Vue.js 설치 관련해서는 지금은 아니고 나중에 쓰겠습니다. 뷰 파일의 경우 .html파일이 아닌 .vue파일로 진행합니다. } 뷰 프로젝트를 하나 만드시면 다음과 같은 화면을 얻을 수 있습니다. 기본으로 제공되는 코드이고 이것을 실행시키기 위해서는 Terminal을 연 후 vue 프로젝트 파일로 이동한 후 'npm run serve'를 입력하시면 작동합니다. 그후 Terminal에 보이는 (포트번호가 포함된)주소를 입력하시면 다음과 같은 화면을 얻으실 수 있습니다. .vue 파일에서는 , , 3가지 부분으로 나뉩니다. 에는 우리가 알던 코드를 입력할 수 ..