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

이벤트(Event)란 "어떤 사건"을 의미한다. 어떠한 동작으로 인해 일어나는 사건이며 이벤트는 크게 다음과 같이 3개로 나뉜다. 1. event target 2. event type 3. event handler 다음 샘플 버튼을 통해 각 이벤트를 알아보겠다. 위의 이벤트 테스트 버튼은 클릭하면 '하하하' 라는 팝업창이 뜨는 단순한 코드이다. 여기에서 event target이란 실제로 클릭되어 이벤트가 발생하는 요소 이벤트 테스트이고, event type은 클릭으로 이벤트가 발생되었기 때문에 click Event이다. event handler는 이 이벤트로 인해 동작되는 코드인 alert("하하하"); 이다. 즉 event target은 실제 이벤트가 일어날 객체, event type은 이벤트의 종류 ..

위와 같은 배열이 있다고 하자. 해당 배열안에 있는 값들을 화면에 표출하거나 각각 수정을 하려면 반복문이 필요하다. 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만 해주면 객체에서 원하는 값들을 추출해 다..

게시판을 만들고 있는데 한 사용자가 가지고 있는 권한 관련 체크를 해야되는 상황이 생겼다. 평소라면 그냥 for문이나 while문을 돌려서 해당 권한을 가지고 있는지 배열의 길이 만큼 돌려서 했겠지만 이번에는 같이 일하는 담당분이 for문이랑 while문을 쓰지 말고 javascript에서 지원하는 findIndex 함수를 사용해보라고 해서 한번 정리해본다. 위의 코드는 내가 항상 배열 안에 어떤 값이 있나 체크 할 때 쓰던 평소의 코드이다. 해당 리스트의 length만큼 for문을 돌려서 해당 배열에 해당 값이 있나 없나 하나하나 체크를 하는 아주 단순한 코드 for문과 같은 반복문은 연산을 하기 때문에 서버에 부하가 갈 수 있어 좋지 않다고 한다.. 그래서 javascript에서 지원하는 findIn..

Vue를 이용해서 게시판을 만드는데 Vue인스턴스에 각 컴포넌트들을 상속해 컴포넌트에 있는 게시판 데이터를 가져오는 search()라는 함수를 호출하려고 했다. 그래서 Vue인스턴스가 mounted가 되자마자 컴포넌트의 search()함수를 호출하려는데 mounted 내에서 컴포넌트를 찾지 못하는 상황이 발생.. 위와 같이 컴포넌트에 있는 함수를 호출하였지만 해당 함수를 찾지 못한다.. 그런데 개발자도구를 이용해 확인해보니 함수뿐 아니라 아예 컴포넌트 자체를 찾기 못하는 상황.. 원래 Vue의 라이프 사이클링을 보면 mounted같은 경우 컴포넌트가 먼저 실행되고 그 후에 인스턴스가 실행이 되니 인스턴스의 mounted()내에서는 컴포넌트가 들어있어야 되는데 들어있지 않다.. 한시간 동안 계속 찾다가 결..