본문 바로가기

programming study/Vue

 (70)
Vue.js - ESLint 규칙, 파일 경로 Vue.js - ESLint 규칙, 파일 경로 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. ESLint 규칙 프로젝트 레벨로 ESLint 규칙을 관리해야하는 이유 프로젝트의 코드 레벨에서 ESlint 규칙 설정이 되어있으므로 GitHub를 통해 코드를 받아 작업하는 협업자들이 동일한 설정에서 작업이 가능 개발툴의 종류에 영향을 받지않고 작업 가능 2. 파일 경로 상대 경로를 사용하면, 파일의 레벨이 깊어질 수록 경로가 복잡해짐 import를 하여 컴포넌트나 모듈을 불러올 시, 복잡해짐 특정 위치를 기준으로 절대 경로로 찾기 설정할 것 절대 경로 설정 jsconfig.json: VSC 내부 기능 활용을 위한 설정 파일 { "co..
Vue.js - ESLint & Prettier Vue.js - ESLint & Prettier 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. ESLint 런타임에 오류가 발생하지 않도록 설정한 규칙에 따라 JavaScript 문법의 문제 패턴을 교정해주는 정적 코드 분석 도구 .eslintrc.js ESLint의 설정 파일 rules를 지정하여 프로젝트의 JavaScript 코드를 이에 따라 검사 2. Prettier 코드 정리 도구 코드의 한줄 길이, 세미콜론, 따옴표 등의 기준을 정할 수 있음 .prettierrc : 프리티어 설정 파일 ESLint와 병용하는 경우 충돌이 되지 않도록 .eslintrc.js에서 프리티어를 설정할 것 3. ESLint에 Prettier 규..
Vue.js - Vue 설정, Webpack Dev Server Vue.js - Vue 설정, Webpack Dev Server 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. Vue 설정 vue.conifg.js Vue의 설정을 정의할 수 있는 파일 module.exports = { devServer: { // ESLint 오류가 화면을 덮지 않도록 설정 overlay: false, }, }; ​ 2. Webpack Dev Server 웹 애플리케이션 개발에 유용한 도구 코드가 변경되면 웹팩으로 빌드 후 브라우저를 새로고침 빌드 결과물이 프로젝트 폴더에서 보이지 않음 결과물이 메모리에 저장 컴퓨터 관점에서, 메모리 입출력이 컴퓨터 자원이 덜 소모 됨 프록시 기능을 사용하여, 로컬 환경 개발시..
Vue.js - 프런트엔드, NVM 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. 프런트엔드 1.1 개발 절차 현대 웹 서비스의 개발 절차는 아래와 같음 요구사항 : 어떤 것을 만들지 서비스 기획 : 아이디어를 구체화 UI, UX 상세 설계 GUI 디자인 : 디자인 시안 퍼블리싱 : 디자인 시안을 HTML, CSS 코드로 옮김(프런트엔드와 구분이 없을 수 있음) 백엔드 API 개발 프런트엔드 개발 : 화면단에 데이터를 연동 QA 1.2 프런트엔드 개발자의 역할 화면단 코드 작성 기획, 디자인, 퍼블리싱, 백엔드 개발자와 소통 소통 능력 필수 2. NVM(Node Version Manager) 노드 버전 매니저 Node.js의 버전을 관리하고 사용할 버전을 변경할 ..
Vue.js - Netlify, env 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. Netlify 호스팅 서비스 Github repository를 연동하여 배포할 수 있음 브랜치도 선택 가능 배포를 진행하며 실행된 로그를 볼 수 있음 SPA 호스팅 시에 추가할 것 Netlify에서 SPA를 배포했을 때 페이지에 Not found가 뜨며 접근이 안될 수도 있음 서버에 추가해야하는 설정 필요 SPA는 특정 페이지의 정보를 브러우저에서 가지고 있으므로 서버에서 접근이 불가능 모든 url 접근을 index.html에 돌리는 redirect 설정을 해야 함 참고 2. env 환경 변수 env 파일 배포시에 필요한 옵션을 담는 파일 변수=값의 형식 Appli..
Vue.js - 컴포넌트 디자인 패턴(Renderless) 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. Renderless 데이터 처리 컴포넌트 템플릿이 없고 스크립트에서 비즈니스 로직만 있는 컴포넌트 데이터 제공만을 하는 컴포넌트 2. Render Function template 속성 Vue 인스턴스의 속성 Vue 인스턴스의 마크업을 Render new Vue({ el: '#app', data: { message: 'Hello World', } template: '{{ message }}' }) render template를 내부적으로 구현하는 함수 createElement를 기본 인자로 받음(콜백) 태그 명, 태그 속성, 하위 태그를 인자로 받는 함수 new Vu..
Vue.js - 컴포넌트 디자인 패턴(Controlled) 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. Controlled 결합력이 높은 컴포넌트 서드파티 라이브러리를 사용할 때 쉽게 컨트롤할 수 있게하는 디자인 패턴 원칙적으로 부모에게 넘겨받은 props는 자식 컴포넌트에서 변경 불가 자식 컴포넌트에서 emit을 사용하는 이유 2. v-model Vue directive input event, value로 이루어짐 자식 컴포넌트에서 v-model로 props를 변경 불가 올바른 사용법 부모 컴포넌트에서 자식 컴포넌트로 v-model 사용 상위에서 데이터를 관리해야 함 컴포넌트의 데이터 의존성 분리 3. 예시 // 부모 컴포넌트 ... ​ ​ // 자식 컴포넌트 Re..
Vue.js - 컴포넌트 디자인 패턴(Slot) 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 강의를 토대로 작성하였습니다. 1. Slot 마크업 확장이 가능한 컴포넌트 부모 컴포넌트에서 마크업을 넘겨받는 컴포넌트 2. 사용하는 이유 컴포넌트를 유연하게 사용할 수 있음 요구사항에 따라서 부모 컴포넌트에서 다양한 마크업을 넘길 수 있음 부모 컴포넌트에서 스타일링을 한 마크업을 넘길 수 있음 3. 예시 // 부모 컴포넌트 // 자식 컴포넌트에게 '제목'이라는 문자열 넘김 // 마크업도 가능 제목 ... ​ ​ // 자식 컴포넌트(main-title) // 부모 컴포넌트에서 '제목'이라는 문자열을 넘겨받게 됨 Reference Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

티스토리툴바