본문 바로가기

Frontend

 (48)
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 다음 한 줄을 적용하고 싶지 않을 때 해당 줄 위에 주석으로 적는다.
설치 -쿠키 관리하는 패키지 설치 npm install –save-dev vue-cookies -라우터 설치 npm install --save-dev vue-router -뷰엑스 설치 npm install --save-dev vuex 오류 났을 때 : ls -al usr/local 후 ls -al로 권한 확인 node_modules의 권한이 root로 되어있기 때문에 오류 sudo chown -R $(whoami) ./으로 권한 부여 후 다시 설치 npm run serve하면 뷰가 서버를 운영하면서 주소를 띄워줌
Vuex란? 출처: https://uxgjs.tistory.com/149 [UX 공작소] Vue의 개발을 편리하게 도와주는 공식 툴 중 하나인 Vuex. 개발하는 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할 및 관리. 데이터를 store라는 파일을 통해 관리하고 프로젝트 전체에 걸쳐 활용할 수 있게 해 주는 방법입니다. 만약 Vuex가 없으면 컴포넌트 간 데이터를 주고받기 위해서는 부모 --(props)--> 자식 자식 --(Emit event)--> 부모 형제 --(EventBus)--> 형제 간단한 프로젝트인 경우에야 사용이 가능하겠지만 대형 프로젝트인 경우에는 이러한 방법으로는 개발과 운영이 감당되지 않음. 이러한 문제를 해결해 주는 것이 Vuex라고 보시면 됩니다. Vuex의 핵심구성 : St..
npm install --save / npm install --save-dev 출처: https://ithub.tistory.com/165 npm install 옵션 중 --save와 --save-dev의 차이점 npm 이란? npm은 JavaScript 용 패키지 관리자입니다. npm을 사용하면 JavaScript 개발자가 다른 개발자가 공유 한 코드를 쉽게 재사용 할 수 있습니다. npm install 이란? npm install은 지정된 패키지를 기본적으로 dependencies에 저장합니다. 또한 몇 가지 추가 옵션을 사용하여 저장 위치 및 방법을 제어 할 수 있습니다. ./node_modules 디렉터리에 패키지를 설치합니다. npm install (plugin) --save란? 패키지(plugin)를 ./node_moduels 디렉터리에 설치하고 ./package.jso..

티스토리툴바