1. Nested routes 란? 페이지 안에 세부 페이지를 한번 더 생성해 준다. 세부적인 UI를 바꾸고 싶을 때 사용한다. 컴포넌트 숨겨놨다가 보여주는 식으로 만들어도 비슷하지만, URL 자체를 따로 나누고 싶은 경우 사용한다. ★ 상세 페이지는 상대경로로 작성 ( 하단에서 확인 가능 ) 2. 과정 지난번에 만들어둔 Detail.vue에서 세부 페이지를 작성자와 댓글 페이지로 나누고 싶다고 가정해 보자. 1) children : [ ] router.js const routes = [ { path: "/detail/:id", component: Detail, children : [ // 이 부분부터 추가 { path: "/author", component: Author, }, { path: "/com..

1. 상세 페이지 생성 이번엔 detail 페이지 (상세 페이지)를 만들 것이다. [ 페이지 생성 과정 ] 상세 페이지를 생성하기 위해 짧게 더미 데이터를 생성했다. blog.js export default[ { title : '첫번째 글', content : '야호 종강이다', date : '12 16, 2022', number : 0 },{ title : '두번째 글', content : '정신 차려보니 개강', date : '02 28, 2023', number : 1 },{ title : '세번째 글', content : '수강신청 변경 성공!', date : '03 04, 2023', number : 2 } ] Detail.vue 상세 페이지 {{ blog[0].title }} {{blog[0]..

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/ Bootstrap Powerful, 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 파일에서..

1. 이벤트 핸들러 기본 문법 Vue에서 이벤트 핸들러를 통해 버튼을 만들어보자. 자바스크립트에서는 보통 onclick = " " 문법을 사용한다. 그렇다면 Vue 에서는?? 위와 같이 v-on:click 안에 ~~~ 적으면 된다. v-on:click 문법은 @click으로 축약 가능 하다. --> v-on의 약자가 @라고 보면 된다고 한다,, ( HTML 문법이 아닌 Vue 문법!! ) 2. 진행 과정 차이 예를 들어 버튼을 눌렀을 때 수를 1 증가시키기 위한 코드를 작성하려고 할 때, 먼저 기본 자바스크립트 스타일은 버튼을 생성하고 누른다. 숫자를 찾아서 +1 해준다. 그런 뒤 +1 된 정보를 HTML에 반영해준다. 이런 식으로 진행되는 반면 Vue 에서는 버튼을 생성하고 누른다. 관련 데이터는 자동..

1. v-for 반복문 코드를 짜다보면 반복되는 코드가 많을 때, 길이가 길어지고 복잡해지는 안 좋은 현상이 일어날 경우가 있다. 이럴 경우에는 반복문을 사용한다. v-for 반복문은 배열, 객체, 태그 등 어느 곳에서나 사용할 수 있다. 2. 기본 문법 기본적으로 반복문은 원하는 태그에 v-for = "작명 in 반복할횟수" 를 작성하면 된다. Vue 에서는 반복문 뒤에 오는 값 하나하나에 유니크한 값을 선언해줄 것을 권장하며, 이는 :key = "작명" 을 통해 작성할 수 있다. :key 속성은 쉽게 말해 반복되는 요소들을 각각 구분짓기 위한 속성이다. {{i}} data() { return { 메뉴들 : ['Home', 'Shop', 'About'] } } 위 예제를 보면 반복할 횟수 자리에 메뉴들..