본문 바로가기

전체 글

(57)
자주 사용하는 배열 메소드 - join,indexOf,slice,concat 접근자 메소드는 배열을 다른 형태로 가공한 새로운 배열을 반환하며, 원본 배열은 수정하지 않는다. 배열.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)의 인..
자주 사용하는 배열(Array) - pop,shift, push, unshift,split,splice,fill 수정 메소드는 원본 배열을 바로 수정하기 때문에 수정, 삭제, 추가 등이 원본 배열에 반영됨. pop() 배열의 마지막 부터 차례로 뽑고 뽑은 값을 반환한다. shift() 앞에서부터 뽑고 뽑은 값을 반환한다. push(값) 배열 맨 뒤로 값 입력하고 배열 길이를 반환한다. unshift(값) 값을 배열 앞에서 입력하고( 새로 들어온 값이 가장 앞에 위치 ) 배열길이를 반환한다. (최근 업데이트 된 것이 배열의 가장 앞에 옴, sns 피드 글 게시되는 것 생각하면 됨) 인자를 두개 넘겼을 때 첫번째 인자 먼저 삽입될 줄 알았는데, 아니었다. 인자로 넘긴 값을 배열이라고 생각하고 두 배열을 잇는다 생각해야겠다. 안그럼 헷갈릴 것 같다;; splice(시작점 , 제거할 원소 갯수, 새로 삽입할 값) 시작점 ..
data(), computed, methods // 검색창 // 메모 뿌려주는 부분 코드 일부를 가져왔는데, 너무 길어서 설명에 필요없는 코드는 지웠다. 1. data()는 안에서 사용할 변수를 가지고 있다. data() { return { kWord: "", keyword: "" }; }, 주로 method에서 이 값들을 가지고 연산한다. 2. computed는 화면이 그려지기 전에 미리 계산되어야하는 데이터를 가진다. computed: { posts() { return this.$store.state.post.posts; }, }, 즉, 변화에 따라 재연산이 필요한 데이터를 computed에 지정한다. 위 코드에선 메모를 불러와서 화면에 뿌리는데, posts는 작성된 메모들이 담긴 객체이다. 그리고 메모를 새로 작성할 때마다 이 객체에도 반영이되..
Vue 디렉티브(v-접두사) 간단 정리 디렉티브 종류 및 역할 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 하위에서 상위로 이벤트 전달하기 emit은 자식 컴포넌트에서 일어난 이벤트에 의해 부모의 데이터에 변화가 생긴 경우 사용한다. 다음 코드는, 모달창을 열고 닫는 코드이다. //상위 컴포넌트 this.$emit('실행할 부모 메소드 이름', 전달할 인자); //모달창 컴포넌트로 하위 컴포넌트이다. //중략 //클릭이벤트 발생시 close메소드 실행
props를 이용해 데이터 통신하기 부모 컴포넌트가 가진 데이터를 자식 컴포넌트에 공유해 줘야할 경우, 자식 컴포넌트 태그에 데이터를 바인딩 해서 전달해주고, 자식 컴포넌트에서는 props를 통해 부모의 데이터를 받는다. //상위 컴포넌트에서 ... export default{ data(){ return{ propsData, selected: { date: null, time: null }, }; } } //자식컴포넌트1 props:{ propsData:데이터타입, } //자식컴포넌트2 props: { 변수명: { type: Object, required: true }//required: true는 꼭 넘겨받아야 하는 데이터인지 설정 },
vue 라이프 사이클( do it Vue.js 입문) beforeCreated 인스턴스 생성 후 가장 첫 라이프 사이클 단계 data,methods 속성이 아직 인스턴스에 정의되지 않음, DOM에 접근 불가 created data, methods 속성이 정의되어 this.data처럼 접근 가능 , 인스턴스 화면 부착전. 따라서 template 속성에 정의된 DOM요소로접근 불가 서버에 데이터 요청하여 받아오는 로직 수행하기 좋은 단계. beforeMount 템플릿 속성에서 지정한 마크업 속성을 render()로 변환 후 el 속성에 지정한 DOM에 인스턴스 부착 직전에 수행되는 단계 즉,render() 호출 직전 수행할 로직 구현 적합 mounted el에 지정한 DOM에 인스턴스 부착된 후 호출되는 단계 DOM에 접근 가능, 화면 요소 제어하는 로직 적합..
css transform transform 이름에서 알 수 있듯이 형태를 변환하는 동작을 한다. 보통 기준점이 왼쪽 상단인 것에 비해 트랜스폼은 기준점을 요소의 중앙으로 잡는다. transform-origin를 사용해서 기준점 위치를 변경할 수 있다. 속성: left(0%), top(0%), center(50%), right(100%), bottom(100%) (키워드 대신 괄호 안의 숫자값도 넣을 수 있음) ex) transform-origin: left top; 또는 transform-origin: 0% 0%; 이렇게 하면 왼쪽 상단이 기준이 됨. 요소 형태 변화가 다른 요소들의 위치나 형태에 영향을 주지 않는다. cf) width와 height에 값을 줘서 형태에 변화를 주면 변한 만큼 주변 요소들의 위치에도 영향을 미치는..