1. vue-router 란? vue에서 제공하는 라이브러리 페이지를 이동하는 기능을 구현할 때 사용 클라이언트가 요청하는 URL에 따라 컴포넌트를 동적으로 불러와 페이지를 띄워줌 2. 설치 및 사용법 1) vue-router 설치 npm install vue-router@next 먼저 위 명령어를 참고해 뷰 라우터를 설치해 준다. package.json 파일의 dependencies에서 위 사진처럼 뷰 라우터 버전이 생성되었다면 설치가 완료된 것이다. 2) router 파일 생성 src 안에 파일을 생성한다. ( router.js ) router.js 폴더 안에 라우터의 내용 적고 export 한 다음에 mainjs에서 import해오면 된다. ( 찬찬히 따라오면 된다. ) 하단의 코드는 라우터의 기본..

1. 부트스트랩이란? 프론트엔트 프레임워크웹사이트를 쉽게 만들 수 있도록 도와주는 CSS, JS 프레임워크휴대폰과 태블릿, 데스크탑 각각에 맞는 크기를 자동적으로 조절웹 사이트 제작, 유지, 보수가 용이하도록 도움웹 사이트 디자인 및 개발 시 쉽게 사용할 수 있는 코드를 제공 --> 개발 시간 단축 2. 설치 방법 1) 우선 구글에 bootstrap을 검색하면 가장 상단에 나오는 페이지에 들어간다. ( 하단 링크 참고 ) ▼▼▼▼ https://getbootstrap.com/ BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid sys..

1. 컴포넌트란? 컴포넌트는 HTML 코드를 한 글자로 축약할 수 있도록 도와주는 문법이다. 특히 재사용이 가능한 코드를 캡슐화하는데 도움이 된다. 2. 컴포넌트 만드는 법 1) 컴포넌트를 사용하는 상황 일반 HTML로 간단하게 배너를 하나 제작해 보았다. 할인중입니다~~ ~~!~!@! ~~!~!@! ~~!~!@! ~~!~!@! 위 코드가 지금은 짧지만 엄청나게 길고 자주 사용해야 하는 코드라고 가정해 보자. 매번 위 코드를 다 작성하면 너무 귀찮을뿐더러, 코드가 지저분해지고 복잡해질 것이다. 으으 이럴 때 위 코드를 짧게 축약해 주는 컴포넌트 문법을 사용하면 된다. 2) vue 파일 생성 컴포넌트로 생성할 파일을 하나 만든 뒤, 기본 vue 탬플릿을 적용시킨다. 축약할 HTML 이게 기본 vue 파일의..

1. 모듈? 모듈화? 모듈 보다 작고 이해할 수 있는 단위로 나뉜 것 소프트웨어 설계에서 기능 단위로 분해하여 재사용 및 공유 가능한 수준으로 만든 단위 각 모듈은 논리적 혹은 기능적으로 분리되어 독립적인 일을 수행 모듈화 프로그램 제작 시 생산성과 최적화, 관리에 용이하도록 모듈 (기능) 단위로 분할하는 것 소프트웨어 성능을 향상시키거나 시스템의 디버깅, 테스팅 등의 과정을 용이하도록 하는 설계 기법 거대한 것을 작은 조각들로 나누어 다루기 쉽도록 하는 과정 등등 설명하는 말은 많지만,,, 프로그래밍 언어에서 모듈화는 쉽게 말해 A를 수행하는 기능과 B를 수행하는 기능을 분리해 두는 것이다. 2. 모듈화를 하는 이유 ★ 기능의 분리가 가능 -> 전체적인 시스템을 이해함에 있어 용이성이 증가하고 복잡성은..

1. 모달창이란? 모달창이란 사용자가 뭔가를 눌렀을 때 다른 창으로 이동하는 것이 아닌, 팝업이 뜨는 것처럼 보이는 이런 창을 말한다. 어두운 배경 위에 흰 창이 뜨는 UI 형식인 것이다. 모달창은 없던 창을 띄워주는 것이 아니기 때문에 미리 창을 만들어두고, 띄워줬다가 투명화(?) 시키고 그런 식으로 작동된다고 생각하면 된다. 2. 모달창 기본 형태 2.1 HTML Basic Modal Modal Body 2.2 CSS body { margin : 0; } div { box-sizing: border-box; } .black-bg { width: 100%; height:100%; background: rgba(0,0,0,0.5); position: fixed; padding: 20px; } .white..

위와 같은 오류는 ESLint 사용 시 볼 수 있는 오류 중 하나이다. ESLint는 ES + Lint이다. ES는 EcmaScript, 즉 자바스크립트를 의미하며, Lint는 프로그래밍에서는 에러가 있는 코드에 표시를 해주는 것을 의미한다. 한 마디로 자바 스크립트 코드 중 문제가 될 만한 문법 등을 식별하기 위한 분석 도구라는 것이다. 그래서 저 오류 코드는 왜 발생하냐?! Vue에서 컴포넌트 이름을 설정할 때 반드시 두 단어 이상의 조합으로 설정하도록 제한해 두었기 때문이다. HTML 태그와 헷갈리지 않게 하려고 그랬다고 한다....지만..... 일단 클론코딩을 진행하는 중이었기에 조합하지 않고도 사용할 수 있도록 환경을 설정해야겠는걸 ^^7 [ 해결 방법 ] 1. vue.config.js 파일에서..