본문 바로가기

Front-end56

Bootstrap / Google Meterial Design Bootstrap웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크 * What ?반응형이며 모바일 우선인 웹 프로젝트 개발을 위한 무료 프레임워크입니다. 프론트엔드 진영에서 레이아웃과 다양한 인터페이스를 제공하여 웹사이트 제작의 간소화를 돕습니다. 2011년 GitHub에 오픈소스로 release 되었고, 2014년 6월에 GitHub에서 1등 프로젝트가 되었습니다.3 버전 부터는 모바일 중심의 프레임워크로 변경되었습니다. * Why ?팀내에서 개발시 다양한 라이브러리를 사용하므로써, 시간이 많이 걸리고 일관성이 떨어짐을 보완했습니다.부트스트랩을 통해서 일관성 및 시간절약이 가능해졌습니다. * How ?1. 부트스트랩을 직접 다운받는 방법. https://getbootstrap... 2019. 3. 4.
Vue Router 만들기 (url에 페이지 연결하기) Vue 에서 url로 페이지 넘길 수 있도록 Router를 만들어 보겠습니다. 콘솔창을 엽니다. 자신의 vue 패키지 폴더 경로 밑에서 npm install vue-router --save 로 라우터를 깝니다. src 밑에 routes.js 파일을 하나 만듭니다. 그리고 component들을 임포트 한 다음 path를 각각 지정해 줍니다. 이제 main.js로 가서 라우터를 임포트 해줍니다.아까 npm으로 설치한 라우터와방금 위에서 만든 routes 파일을 임포트 해줍니다. 그리고 Vue.use(VueRouter); 코드로 라우터 사용 선언해줍니다. 그리고 Vue를 정의해 준 곳에 router:router를 추가해줍니다. App.vue에 router-view를 추가해줍니다. 그럼 url을 타고 페이지를 .. 2018. 12. 5.
Computed와 Methods 차이 보통 computed는 data 속성 변화가 있을 때 자동 연산함.computed에서 사용하고 있는 data속성인 message 라는 프로퍼티가 변화가 있을 때만 다시 연산하고연산 값을 캐싱 해놓았다가 필요한 부분에 재사용함. methos는 캐싱이라는 개념이 없기 때문에 매번 재 렌더링 된다. 2018. 11. 30.
Vue bootstrap 속성 커스터마이징 가져온 bootstrap을 커스터 마이징 하겠습니다. 먼저 atom을 설치합니다. https://atom.io/ 그다음 커멘드창에 가져온 부츠스트랩 폴더를 엽니다. 이창에서 atom . 명령어를 날리면 Atom 창이 바로 뜹니다. src > router > index.js 페이지에 들어가면 각 path 별로 어떤 화면을 가져오는지 확인할 수 있습니다. ↓ main dashboard 저는 http://localhost:9527/#/documentation/index path에 있는 documentation 페이지를 바꿔보겠습니다. 방금 index.js 페이지에서 documentation url 을 찾습니다.그럼 /views/documentation/index component를 띄우는 것을 알 수 있습니다.. 2018. 11. 23.

티스토리툴바