분류 전체보기 133

4. 뷰 인스턴스

인스턴스는 뷰로 개발할때에 필수로 생성해야하는 코드라고 한다. var vm = new Vue() 를 이용하여 인스턴스를 생성하여준다. (new Vue()라고만 선언하여도 된다) #el(엘리먼트) : body태그 안에서 app이라고 하는 아이디를 찾아 인스턴스를 붙이겠다는 의미를 가지고있다. 붙이는순간 vue기능과 속성들이 유효해진다. el이 없다면 아무리 데이터를 정의하여도 div태그 안에서 사용이 불가능 하다. new Vue로 만든 인스턴스를 꼭 특정태그에 붙여줘야만 vue를 사용할 수 있다. 위의 이미지에서는 Person이라는 생성자 함수를 만들었으나 우리는 첫 번째 이미지처럼 Vue를 생성자 함수로 만들어 사용한다. #생성자 함수 함수앞에 함수이름 첫글자가 대문자라면 생성자 함수임을 의미한다. #뷰..

공부/VUE.JS 2021.12.11

2. Reactivity 구현과 코드 라이브러리화

Reactivity 뷰의 핵심 기능! # 데이터의 값이 바뀔때마다 계속 화면이 자동으로 그려지는것 뷰의 핵심인 Reactivity(반응성)이다. #Object.defineProperty : 객체의 동작을 재정의하는 api 즉시실행 함수의 역할은 기본적으로 init과 render를 어떤 애플리케이션 로직에 노출되지않도록 또다른 유효범위(scope)에 넣어주어 관리해준다. (일반적으로 오픈 소스 라이브러리들은 이런 방식으로 관리된다) 즉시실행 함수 작성법 : (function(){})(); get: 속성에 접근했을 때의 동작을 정의 set: 속성에 값을 할당했을 때의 동작을 정의 위의 이미지에 Hello Vue는 처음에는 작성되어있지 않았으나 console창에서 viewModel.str = 'Hello Vu..

공부/VUE.JS 2021.12.09

1. VUE JS 시작 환경구성 + 참고 페이지 링크

뷰에 대한 자세한 내용이 나와있는 페이지 : https://joshua1988.github.io/vue-camp/ vue를 공부할때에는 Visual Studio Code를 사용하여 실습한다. 다운받아야 할 프로그램 목록 -Chrome : https://www.google.com/intl/ko/chrome/ -Visual Studio Code : https://code.visualstudio.com/ -Node.js : https://nodejs.org/ko/ -Vue.js Devtools : https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 다운로드시 버전 선택을 할 수 있게 나온다면 한단계 아..

공부/VUE.JS 2021.12.08

input태그와 DTO(vo)를 이용한 자동주입(커맨드 객체)

게시판에 대한 공부를 하던도중 자동주입이라는 기능을 알게되어 한번 사용법에 대해 정리해두려고 한다. 학원에서 스프링을 배우기전에 미리 예습하기위해 인프런에서 들었던 강의에 있던 내용인데 프로젝트를 시작할떄에는 잊어버리고 학원에서 배운대로만 진행해버렸다..ㅎㅎ;; input태그와 DTO(vo)를 이용한 자동주입은 스프링에서 지원하는 커맨드 객체라고 부른다고 한다. 일단 시작하기전에 커맨드 객체를 사용하기전의 전과 후를 비교해보자! [커맨드 객체 사용전] 커맨드 객체를 사용하기 전에는 HttpServletRequest의 getParameter()를 이용하여 값을 추출하여 boardVO객체에 setter를 이용하여 값을 넣어주는 방식을 사용하였다. 지금은 넣어줘야할게 3개뿐이지만 이게 길어진다면... [커맨드..

제주도 여행 프로젝트의 마무리.

6개월간의 공부의 마침표인 마지막 프로젝트가 끝났다! 첫 번째 프로젝트때에는 실력은 부족한데 마음만 앞서 번역기능, 광고페이지 등... 여러 페이지와 기능을 넣고싶었으나 팀원들 모두 팀프로젝트가 처음이기에 공유DB 및 git hub을 다같이 사용하는데 시간이 꽤나 걸렸고 나의 열정과 모두 열정적이 같지는 않아서 아쉬웠었다. 마지막 프로젝트때에는 첫번째 프로젝트와 달리 친구와 둘이 토이프로젝트로 진행하고있던 제주도 여행 프로젝트를 팀프로젝트로 진행하면 좋을것 같다는 생각이들어 사전발표를 통해 같이 마음맞는 열정적인 사람들을 모집하여 팀프로젝트로 진행하였다. 마지막 프로젝트는 3주라는 짧은 기간안에 완성해야했기때문에 간트 차트를 이용하여 시간관리를 하였고 6명의 팀원 안에서도 둘씩 짝을지어 1팀 2팀 3팀으..

게시물 저장

(게시물 페이지는 글쓴이가 만든 페이지가 아니며 구성된 UI에 저장기능 백앤드 부분만 만들어주었다.) 기능 : 게시물 저장 기능 특징 : 카카오 맵 api를 이용하여 위도 경도를 받는다. (사용자가 맛집,관광지를 등록할때에 맛집의 위치를 알아야 경로만들기 페이지에서 맛집을 클릭했을때에 지도위에 위치가 표시되며 경로를 만들 수 있기 때문이다.) 글쓴이가 가장 고민하였던 문제는 태그안에 제목,명소이름,장소,해시태그,내용,위도,경도 값들이 들어가야하는데 카카오 맵 Api에서 제공하는 검색기능을 이용할때에 태그를 이용하여 검색하는데 바깥쪽에 태그가 한번더 감싸고 있으면 바깥쪽의 태그가 작동한다는 문제였다. 그래서 맵 아래쪽에 위치하는 위도,경도를 태그 바깥쪽으로 뺏는데 값을 어떻게 전해줘야 할지라는 문제가 생긴..

Polygon의 원하는 지역 클릭 후 게시물 띄우기

기능 : 폴리곤의 원하는 지역을 클릭시 상세보기 모달이 나오며 상세보기 클릭시 게시판 페이지로 이동하여 그 지역에 해당하는 맛집이 나오게된다. 구현방법 : 폴리곤에서 원하는 지역 클릭 -> 지역을 소개하는 모달이 띄워진다 -> 지역명 게시판 페이지의 검색바에 전달 -> 검색바안에 값이 있는지 없는지를 체크 -> 값이 있다면 그 값에맞는 지역명을 띄워줌, 없을시에는 원래 게시판 목록을 띄워준다. 문제점 : 게시판에서 원하는 지역만을 검색하는 기능을 애초부터 가지고 있었어야 했으나 기능이 구현되있지 않아서 검색창에 지역명값을 넣고 지역만 따로 검색하는 번거로운 방법을 사용하였다. (게시판은 내가 담당한 페이지가 아니여서 여러 문제점이 발견되었으나 프로젝트 마무리까지 시간이 촉박하여 수정해 줄 수는 없었다....

MyCourse 모달에 띄우기 및 DB에 값 저장

1.MyCourse 모달에 띄우기 2.DB에 값 저장하기 # 1. MyCourse 모달에 띄우기 여행 경로 저장 버튼을 누를시에 선택목록에 담아두었던 목록들을 모달로 띄워주는 기능이며 마이 경로페이지에서 내가 만들어 경로를 저장하여 나중에도 볼 수있게 하기 위해서 만들었다. 경로의 순서는 Drag & drop을 이용하여 선택목록에서 변경한 순서대로 모달에 출력하여준다. 모달은 비동기 처리방식(ajax)으로 값을 띄워주며 선택목록에 있는 카드들에 id값을 querySelectorAll을 이용하여 변수에 담아주었고 이후 반복문을 이용하여 names배열에 id값을 모두 담아주어 submitModal에 매개변수로 전달하여준다. submitModal은 비동기 처리방식으로 값을 처리하는 펑션이며 GET방식으로 na..

드로그 앤 드롭 기능 구현.(경로 및 순서 다시 그리기)

드로그앤 드롭을 이용한 기능구현이다. 드로그 앤 드롭을 사용할때에 생각해야할 포인트가 2가지가 있었다. 첫 번째로는 드로그 앤 드롭으로 순서를 바꿀때에는 맵의 경로를 표시해주는 선이 전부 사라져야한다는것이고 두 번째로는 텍스트 마커에 표시된 순서가 지워져야한다는 것이였다. 사실 드로그 앤 드롭 자체는 제이쿼리 3줄이면된다 어렵지않다 https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 위의 링크 3줄과 위의 이미지와같이 드래그 앤 드롭을 사용할 요소의 id또는 class를 넣어주면된다. (#leftSiderbar-3의 하위 요소들을 드로그 앤 드롭할수 있게된다) html단의 구성된 모습..

728x90