특정 버튼을 클릭시 해당 페이지 스크롤을 맨 아래로 이동시키는 방법을 기록하고자 한다. 우선 @click을 이용하여 gotoBottom()이라는 메서드를 호출하는 게시글(버튼)을 만들도록 하자. 위의 이미지와 같이 gotoBottom이라는 메서드를 호출하는 게시글(버튼)과 스크롤을 해당 위치로 이동시킬 클래스명이 statFooter인 태그를 생성하였다. 여기서 statFooter는 이름과 같이 footer역할을 한다. 그리고 위의 이미지와 같이 gotoBottom 메서드를 선언해준다. 여기서 $('html')을 통해 html태그를 지정해준다. 그 뒤에 제이쿼리의 .animate함수를 사용하면 내의 모든 요소들에 애니메이션 효과를 부여할 수 있다. .animate에서 제공해주는 scrollTop과 offs..

Vue를 이용하여 버튼을 클릭하였을 때 해당 게시글의 인자값을 가지고 새로운 페이지를 열고싶을 때 window.open를 이용하면 된다. 제이쿼리나 자바스크립트를 이용할때도 사용하는 녀석이다. 우선 아래와 같은 게시판이 있다고 가정을 해보자 위의 소스는 테이블에 저장되어 있는 상품의 정보를 게시판에 출력해주고, productNm(이하 상품명)을 클릭하면 moveProduct라는 메서드를 호출한다. moveProduct 메서드는 productSn(이하 상품번호)를 인자로 받는다. 메서드는 다음과 같다. moveProduct 메서드에서 상품번호를 인자로 받고, window.open을 통해 해당 상품에 대한 링크를 새로운 탭으로 호출한다.

Vue를 이용하여 게시판을 만들고 있는데 다음과 같은 문제에 부딪혔다. v-for문내에서 셀렉트박스를 이용하여 value값을 추출하여 js로 보내야 하는데.. 지금 만들고 있는 게시판은 v-for문(1)안에 있는 셀렉트박스의 value값도 v-for문(2)을 이용하여 돌려주었고 등록 버튼은 v-for문(2)의 바깥에 있는 구조였다. 지금까지는 셀렉트박스를 그냥 검색창에서만 사용했기 때문에 v-for문을 돌린 적이 없었다. 그렇기 때문에 그냥 v-model을 태그에 넣어주고 Vue의 data에 선언만 해주면 간단히 셀렉트박스의 value값을 가져 올 수 있었다. 이렇게 v-for문이 아니라 그냥 하나의 셀렉트박스를 사용하면 v-model에 v-모델명(srhKeywordType)를 선언해주고 data 함수 ..

다음과 같은 객체로 이루어진 배열이 있다고 가정해보자. 만약 위에서 name이 호랑이인 객체들만 추출하거나, id안에 숫자가 포함된 객체들을 추출하여 배열로 만들어야 할 때 filter함수를 이용할 수 있다. filer()는 javascript에서 제공하는 내장함수로 1. 원하는 값들을 이용해 새로운 배열을 만들 수 있다. 2. 해당 조건이 true인 값에 대해서만 가져와 배열에 넣는다. 여기서 name이 '호랑이'인 객체들만 추출하여 새로운 배열을 만든다고 하면 다음과 같이 조건을 주어 filter함수를 이용할 수 있다. 배열.filter(function(e) { return 조건 }); 과 같은 형식으로 조건에 맞는 값들을 리턴하여 새로운 배열에 넣을 수 있다. 근데 filter함수를 보면서 느낀 게..

위와 같은 배열이 있다고 하자. 해당 배열안에 있는 값들을 화면에 표출하거나 각각 수정을 하려면 반복문이 필요하다. java에서는 for문과 while문을 이용한다. 물론 javascript에서도 for문과 while문을 이용할 수 있다. [좌] for문을 이용한 배열(arr) 출력 [우] while문을 이용한 배열(arr) 출력 이게 평범하게 배열안에 있는 값들을 추출하는 방법이지만 javascript에서는 forEach라는 내장함수를 제공한다. 배열.forEach( function(e) { 작업내용 } ); 위와 같이 배열.forEach( function(e) { 작업내용 } );과 같이 표현한다. 보통 배열안에 있는 값을 추출하거나 값을 수정할때는 배열 안에 있는 값만 필요하기 때문에 인수를 하나만..

다음과 같은 배열이 있다고 생각해보자. 해당 test배열은 12개의 객체를 포함하고 있는 배열이다. 만약 이 배열에 있는 12개의 객체에서 제작수 라는 변수의 value값만을 추출해야한다면 보통 test 배열의 length만큼 for문을 돌려서 제작수 라는 변수를 추출하는 방법이 있다. 근데 이렇게 하면 for문을 돌려야 하는데 map함수를 이용하면 for문을 돌리지 않고 객체 안에서 원하는 값을 추출할 수 있다. 위와 같이 map함수를 이용하면 배열안 객체에서 특정값을 추출하여 배열에 삽입을 할 수 있다. 이외에도 객체에서 원하는 값들로 구성된 객체를 다시 배열에 넣을 수도 있다. 해당 객체에서 꺼내고 싶은 값들을 { } 으로 묶어서 객체화 한 뒤 return만 해주면 객체에서 원하는 값들을 추출해 다..