본문 바로가기

분류 전체보기

 (93)
Promise 비동기처리 Vue.use(cookies) function init () { const savedToken = cookies.get('accessToken') if (savedToken) { return store.dispatch('loginByToken', savedToken) } else { return Promise.resolve() } } 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’ 자바스크립트에서 비동기 처리가 필요한 이유를 생각해보면, 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없기 때문. 요청이 많아졌을 때 1개보내고 실행하고 기다리고..
dispatch / commit dispatch는 무조건 action으로 간다. commit은 내부에 있는 것으로 간다. 비동기처리. 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’ 자바스크립트에서 비동기 처리가 필요한 이유를 생각해보면, 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없기 때문. 요청이 많아졌을 때 1개보내고 실행하고 기다리고의 연속. 오래걸림.
Global Component 글로벌 컴포넌트 글로벌컴포넌트를 재활용하는 방법. 주의할 점: props 변수 명을 카멜 기법(aBow)으로 정의하면 html 태그에서 사용할 때는 케밥 기법(-)으로 선언해야 한다. initial'C'ount를 initial'-c'ounter로 표기한다. // 글로벌컴포넌트를 등록하는 작업 Vue.component(GlobalComponent.name, GlobalComponent) export default { components: { // 로컬컴포넌트를 등록하는 작업. 글로벌은 전역으로 쓸 수 있고 로컬은 여기서만 쓸 수 있다. 'local-component': LocalComponent },
v-model v-model을 통해 vue객체에 있는 정보와 html태그를 연결시킬 수 있다.
Vue란? vue를 통해 개발할 때 장점: 싱글페이지. 페이지 전환 없이 개발 가능 띄어쓰기 콤마 등을 완전 철저히 해야함. -주석 뒤에 두칸 띄면 에러. -태그 닫을 때 두줄 띄면 에러.
JavaScript의 배열 등에서 ...은 [EDIT_TODO] (state, payload) { const { id, content } = payload const targetIndex = state.todoItems.findIndex(v => v.id === id) const targetTodoItem = state.todoItems[targetIndex] state.todoItems.splice(targetIndex, 1, { ...targetTodoItem, content }) // JavaScript에서 ...은 배열 등에서 값을 가져올 때 아직 처리하지 않은 것이 있다면 남은 모든 것을 가져온다. },
splice(start, count, 대체내용들) splice(start, count, 대체내용들) 시작위치부터 count 갯수만큼 추츨해낸 후 세번째 인자인 대체내용들로 해당위치를 채워 넣음 splice(1, 3, 'a', 'b', 'c') 첫번째부터 세개 빼고 a, b, c를 채워 넣음 // mutation에 import한 경우 []로 감싸줘야한다.(문법오류 방지) [REMOVE_TODO] (state, id) { const targetIndex = state.todoItems.findIndex(v => v.id === id) state.todoItems.splice(targetIndex, 1) },
<input type=" "에서 readonly, disabled> input type="text"에서 글을 입력하지 못하게 막기 - readonly, disabled readonly: input type="text"에만 가능. 사용자는 value값을 변경할 수 없음 disabled: 모든 input객체(텍스트, 체크박스 등)에 대하여 비활성화 처리가능. Form전송(submit) 시 해당 객체는 전송이 안됨. readonly는 form전송(submit)이 가능하지만 disabled는 form전송 시 값이 전달되지 않는다. 회원정보 수정 프로세스 페이지를 만약 회원정보 추가 페이지와 동일한 페이지로 쓴다면 추가페이지에서는 전송되지만 수정페이지에서는 전송송지 않는 데이터(예를들면 보드넘버)
Components 컴포넌트 Component 컴포넌트는 일정한 단위로 쪼개어 재활용 가능한 형태로 관리하는 것. Component를 만든다는 것은 나만의 커스텀 HTML태그를 만든다는 것을 의미한다. 컴포넌트 기반으로 개발하면 재사용성이 올라가고 빠르게 화면을 제작할 수 있다. 부모 자식관계를 가질 수 있다.
/* eslint-disable no-unused-vars */ eslint는 자바스크립트의 문법을 체크해주는 도구 eslint 주석을 통해 모든페이지에 사용하지 않는 variable도 허용하게 한다. 대신 보안에 취약해진다. /eslint-disable/ 한 페이지 전체를 적용하고 싶지 않을 때 상단에 적는다. //eslint-disable-next-line 다음 한 줄을 적용하고 싶지 않을 때 해당 줄 위에 주석으로 적는다.

티스토리툴바