Frontend/뷰 Vue.js (11) 썸네일형 리스트형 port :5000 403 error mac 맥에서 포트 5000번 403에러 5000번 포트를 뭐가 쓰고 있는지 확인 sudo lsof -i :5000 ControlCe 가 쓰고있음 Monteray 업데이트 이후 Airplay 수신 포트로 5000번 사용 해결방안 1. Airplay 수신 모드를 끈다. 공유 > 시스템 환경설정 > AirPlay수신모드 끄기 2. 다른 포트를 사용한다. 2번 다른 포트를 사용하기로함 Vuetify 설치 $ npm install --save -dev vuetify $ npm audit fix -npm install을 할 때 package의 취약점을 검사한다. 그리고 npm audit fix으로 취약점이 발견된 package를 자동으로 update해준다. https://lovemewithoutall.github.io/it/npm-audit-fix/ $ vue add vuetify - 예쁘게 꾸며주는 기능 뷰티파이에서 사용하는 기능 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를 통해 개발할 때 장점: 싱글페이지. 페이지 전환 없이 개발 가능 띄어쓰기 콤마 등을 완전 철저히 해야함. -주석 뒤에 두칸 띄면 에러. -태그 닫을 때 두줄 띄면 에러. <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태그를 만든다는 것을 의미한다. 컴포넌트 기반으로 개발하면 재사용성이 올라가고 빠르게 화면을 제작할 수 있다. 부모 자식관계를 가질 수 있다. 설치 -쿠키 관리하는 패키지 설치 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.. 이전 1 2 다음
