네발로 코딩하는 포메라니안

지금까지 우리가 만든 DTO나 list, int 등의 데이터로 넘겼다면, 이제 이 데이터들을 JSON형식으로 넘기는 방법을 알아보자. 이는 나중에 REST API에 그대로 사용된다. 실행화면 0. JSON 데이터 사용하는 코드 주로, 비동기에서 사용한다. 페이지 전체가 아니라 비동기로 데이터만 받아올 때 자주 사용하기 때문이다. 아래는 회원 정보 list를 뿌릴 때, 회원 정보를 비동기로 받아와서 화면에 뿌리는 작업이다. 1) JSON용 회원 목록 이름 아이디 비밀번호 이메일 가입일자 2) JACKSON용 회원 목록 이름 아이디 비밀번호 이메일 가입일자 1. JSON library 추가하기 pom.xml에 버전과 library추가하기 1. properties 태그에 버전 등록 20220320 2. dep..

1. vue-cli 프로젝트 구조 .vue(컴포넌트)가 views 폴더와 components 두 군데에 분리되어 있는 것을 볼 수 있다. views = router의 컴포넌트, components = 컴포넌트의 컴포넌트라고 할 수 있다. 실행할 때는, 여러 파일에 작성된 코드를 webpack으로 index.html이라는 하나의 파일로 만들어 실행한다. 따라서 각 파일의 .vue 파일은 Component 하나당 파일 1개로 구현할 수 있도록 한다. template, js, css 코드를 하나의 파일로 작성하여 Component 하나를 만들 수 있다. 이를 SFC(Single File Component)라고 한다.

* v-on: == @ 1. 이벤트 수식어 1. @click.stop - 클릭 이벤트의 전파(Bubbling)를 막음 - stopPropagation()과 같음 예시) action1은 실행되지만, action2는 실행되지 않음 버블링 막기 +) stopPropagation() 사용 더보기 버블링 막기 2. @click.prevent - "기본" 이벤트의 자동 실행을 막음 ex) a태그 = 페이지 이동, form태그 = submit - preventDefault()와 같음 예시) action 메서드는 실행되지만, 페이지 이동은 일어나지 않는다. 네이버 +) preventDefault() 사용 더보기 네이버 - 두 가지 동시에 사용 가능 이동하기 - 메서드 없이, 수식어만 사용 가능 이동하기 2. 키 수식어..

1. 중첩된 라우터란? 라우터가 Component들을 전환하는 구간 안에, 또 라우터가 전환하는 구간이 있는 구조를 말한다. 아래 그림에서 Router1에서는 Main화면, Board화면을 바꿔주며, Router2에서는 Board안의 List, Detail 등으로 Component를 전환시켜준다. 2. 중첩된 라우터 구현 1. 파일 구성 *app.js = html에서 script코드를 분리한 것으로, router설정이 있음 2. Components 코드 1) test.html 더보기 HOME | 게시판 2) Main.js : 홈 화면 더보기 export default { template:`메인 페이지`, } 3) Board.js 더보기 export default { template: ` 게시판 페이지 `..

이전글 2022.05.13 - [웹프로그래밍/Vue] - [Vue] 10. Vue Router 기초 [Vue] 10. Vue Router 기초 1. Vue Router란? Single Page Application(SPA)를 구현하려면, 한 페이지에서 Component들만 교체해주면 된다. /a => /b로 변환될 때, router를 통해 전체 화면을 구성하는 Component를 바꿈으로써 페이지 이동을.. yerinpy73.tistory.com 이전글의 코드를 보면 테스트를 위해 한 component의 template을 짧게 작성하였다. 하지만 상용소스는 이보다 훨씬 길기 때문에, 한 파일에 모든 component를 작성한다면 복잡해진다. 각 Component마다 하나의 파일로 분리해서 작성해보자. 1..

1. Vue Router란? Single Page Application(SPA)를 구현하려면, 한 페이지에서 Component들만 교체해주면 된다. /a => /b로 변환될 때, router를 통해 전체 화면을 구성하는 Component를 바꿈으로써 페이지 이동을 구현할 수 있다. 2. 라이브러리 불러오기 1. CDN 방식 2. NPM 방식 npm install vue-router 3. 실행 과정 router를 활용한 제일 기본적인 화면을 구성해보았다. STEP 0. component 생성 더보기 const Main = { template:'메인 페이지', }; const Board = { template:'게시판 페이지', }; STEP 1. path & component를 맵핑하는 router ins..

1. Component란? 화면의 구성 요소들을 블록처럼 분리해서 정의한 후, 한 화면을 만들 때 필요한 요소들을 붙여넣기 위해 사용된다. 이때 블럭에 해당하는 것이 Component이다. Vue Component는 Vue Instance이므로 이에 해당하는 속성들과 Life Cycle Hook 모두 사용 가능하다. *단, data는 함수 형식으로 작성해야 한다. data(){ return{ msg:"지역 컴포넌트!", } } Component 명명 방식 1. Component 이름 = 파스칼(MyComp) | 케밥(my-comp) 2. Component 사용할 때, 태그 명 = 케밥(my-comp) *Component이름을 파스칼형식으로 작성할 경우, 대문자를 기준으로 잘라 케밥으로 전환하여 태그명이 ..

1. v-for와 v-bind v-bind:는 : 약식으로 사용함 좋아하는 색상을 선택하세요. {{value.value}} 선택한 색상 : {{checkedList}} 결과 화면

1. v-on 사용하는 방식 1. Inline 방식 클릭한 횟수 = {{cnt}}번 클릭 2. method 방식 v-on은 이벤트 발생 시, 처리해야 하는 method이름을 받아서 처리한다. 클릭한 횟수 = {{cnt}}번 클릭 3. Inline + method 방식 Javascript구문으로 method를 사용하는 방식으로, 위에서 2번보다는 1번에 가까운 방식이다. 이때, 이벤트를 호출한 타겟의 정보를 event라는 객체가 가지고 있다. 클릭한 횟수 = {{cnt}}번 클릭 2. @ 사용하는 방식 v-on: = @이고, 이 방식 또한 위 3가지 방식 모두 적용 가능하다. 예시 클릭

1. el과 data - el = 해당 vue를 적용할 구역 지정 - data = DOM에 보여줄 데이터 정의 {{title}} 2. methods method안에서 vue객체를 접근할 때는 this.데이터이름으로 접근 *arrow function에서 this는 window를 가리키므로 arrow function 쓰지 않도록 주의하기 {{msgStar()}} {{cnt}} 증가 3. filter - 화면에 표시되는 텍스트 형식을 간단하게 변환하는 기능 - {{ }} 또는 v-bind 속성에서 사용 가능 {{ msg | filterName }} 1. 전역필터 el로 적용할 구역을 정해주지 않기 때문에, 어떤 id를 가진 구역에서든 가져다 사용할 수 있다. 2. 지역필터 el에 지정한 대로 id=app인 구..