접근자 메소드는 배열을 다른 형태로 가공한 새로운 배열을 반환하며, 원본 배열은 수정하지 않는다. 배열.join('구분자') 배열을 문자로 바꿔줌 (수정 메서드의 split과 반대기능) 1 2 3 4 5 6 7 8 let arrayJoin = ['my','name','is','javascript']; let resultJoin = arrayJoin.join('/'); console.log(resultJoin); //expected output: "a/b/c/d/e" //만약 그냥 구분자 없는 문자열로 만들고 싶을 경우 let resultJoin2 = arrayJoin.join(''); //expected output: "abcde" 배열.indexOf(data, index) 일치하는 문자(data)의 인..

수정 메소드는 원본 배열을 바로 수정하기 때문에 수정, 삭제, 추가 등이 원본 배열에 반영됨. pop() 배열의 마지막 부터 차례로 뽑고 뽑은 값을 반환한다. shift() 앞에서부터 뽑고 뽑은 값을 반환한다. push(값) 배열 맨 뒤로 값 입력하고 배열 길이를 반환한다. unshift(값) 값을 배열 앞에서 입력하고( 새로 들어온 값이 가장 앞에 위치 ) 배열길이를 반환한다. (최근 업데이트 된 것이 배열의 가장 앞에 옴, sns 피드 글 게시되는 것 생각하면 됨) 인자를 두개 넘겼을 때 첫번째 인자 먼저 삽입될 줄 알았는데, 아니었다. 인자로 넘긴 값을 배열이라고 생각하고 두 배열을 잇는다 생각해야겠다. 안그럼 헷갈릴 것 같다;; splice(시작점 , 제거할 원소 갯수, 새로 삽입할 값) 시작점 ..

// 검색창 // 메모 뿌려주는 부분 코드 일부를 가져왔는데, 너무 길어서 설명에 필요없는 코드는 지웠다. 1. data()는 안에서 사용할 변수를 가지고 있다. data() { return { kWord: "", keyword: "" }; }, 주로 method에서 이 값들을 가지고 연산한다. 2. computed는 화면이 그려지기 전에 미리 계산되어야하는 데이터를 가진다. computed: { posts() { return this.$store.state.post.posts; }, }, 즉, 변화에 따라 재연산이 필요한 데이터를 computed에 지정한다. 위 코드에선 메모를 불러와서 화면에 뿌리는데, posts는 작성된 메모들이 담긴 객체이다. 그리고 메모를 새로 작성할 때마다 이 객체에도 반영이되..

디렉티브 종류 및 역할 v-접두사로 시작하는 모든 속성을 디렉티브라고 한다. v-if 참,거짓 여부에 따라 해당 태그를 화면에 표시할 지, 말지를 정함 v-show 참 거짓 여부에 따라 태그를 화면에 표시할지 말지를 정한다. (v-if와 v-show의 차이는 v-if는 false시에 화면에서 아예 해당 태그를 삭제, v-show는 태그는 존재하나 화면에서 숨기는 정도. 주로 if를 많이 씀) v-for 조건식에 맞게 반복해서 어떤 태그를 생성해 내는 역할을 한다. v-bind html속성과 뷰 데이터를 연결해줌 바인딩이 필요한 경우 v-on 이벤트를 감지해서 처리한다. 예를들어 이벤트 발생시 연결된 메소드를 실행 v-model 주로form 에서 많이 쓰고 폼에 입력한 값을 뷰 데이터와 즉시 동기화 inp..

emit은 자식 컴포넌트에서 일어난 이벤트에 의해 부모의 데이터에 변화가 생긴 경우 사용한다. 다음 코드는, 모달창을 열고 닫는 코드이다. //상위 컴포넌트 this.$emit('실행할 부모 메소드 이름', 전달할 인자); //모달창 컴포넌트로 하위 컴포넌트이다. //중략 //클릭이벤트 발생시 close메소드 실행

부모 컴포넌트가 가진 데이터를 자식 컴포넌트에 공유해 줘야할 경우, 자식 컴포넌트 태그에 데이터를 바인딩 해서 전달해주고, 자식 컴포넌트에서는 props를 통해 부모의 데이터를 받는다. //상위 컴포넌트에서 ... export default{ data(){ return{ propsData, selected: { date: null, time: null }, }; } } //자식컴포넌트1 props:{ propsData:데이터타입, } //자식컴포넌트2 props: { 변수명: { type: Object, required: true }//required: true는 꼭 넘겨받아야 하는 데이터인지 설정 },