IT&컴퓨터공학
-
[HTML] Form 태그IT&컴퓨터공학/HTML&CSS 2021. 3. 9. 10:09
Form 태그 웹 페이지에서의 입력 양식을 의미한다. ex) 로그인 창, 회원가입 폼 텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 된다. 속성 action : 정보를 전송할 서버 쪽 스크립트 파일을 지정한다. 즉 Form 안에 button을 누르면 submit 이라는 동작을 진행하는데, 이때 action 값에 쓰여져있는 URL 로 이동한다. name : Form 을 식별하기 위한 이름 method : Form 을 서버에 전송할 http 메소드 지정 ( GET, POST )
-
[Bootstrap] 그리드 시스템IT&컴퓨터공학/HTML&CSS 2021. 3. 8. 18:11
Bootstrap 그리드 시스템 Bootstrap 이 가장 많이 사용되는 이유이자 반응형 웹페이지를 만들기 위해 가장 많이 사용하는 기능이며 가장 핵심적인 기능 중 하나다. Bootstrap에서는 기본적으로 12칼럼으로 나누어서 기능을 제공하고 있다. col lg 2 col lg 8 col lg 2 위 코드는 하나의 row를 2/ 8/ 2 로 나눈 것이다. ( col-*-숫자 에서 숫자부분을 보면 알 수 있다 ) 즉, 전체를 12로 했을 때 이 column의 비율을 몇으로 할지를 정하는 것이다. 전체 12를 초과하게 되면 자연스럽게 row가 바뀌면서 뒤로 밀려나게 된다. Bootstrap 권고사항 row 클래스는 container나 container-fluid 안에 있어야 정상적인 배열이나 패팅을 지원해..
-
[Vue.js] 6. 라우팅 - 동적 라우팅IT&컴퓨터공학/Vue 2021. 3. 5. 14:41
앞 포스트에서 /post/detail 은 포스트 상세 화면을 조회하기 위한 화면으로 설계했다. 상세화면은 포스트 아이디(id)에 따라 내용이 달라지는데 이를 라우트 경로에 추가한다면 화면을 그릴때 단서가 될수 있을 것이다. /post/1 /post/2 이런식으로 detail 대신 아이디 값이 온다면 어떨까? 뷰 라우터는 이러한 동적 라우트 매칭을 위한 설정도 제공한다. 먼저 라우터의 PostDetail 의 path 를 '/post/:id 로 바꾼다. import Vue from "vue" import VueRouter from "vue-router" import Home from '../views/home.vue' import Login from '../views/login.vue' import Logo..
-
[Vue.js] 6. 라우팅 - 중첩된 라우팅IT&컴퓨터공학/Vue 2021. 3. 5. 11:50
중첩된 라우팅 블로그 예제를 위한 중첩된 라우팅을 설계해보자 . 아래의 6가지 경로를 선정했다. / 홈 /login 로그인 /logout 로그아웃 /posts 포스트 목록 /posts/detail 포스트 상세 /posts/new 포스트 추가 일단 router 를 생성한 router/index.js 에 들어가자. 생성된 router 에 routes 속성에 path 와 component 들을 배열로 추가한다. import Vue from "vue" import VueRouter from "vue-router" // 뷰 어플리케이션에 라우터 플러그인을 추가한다. Vue.use(VueRouter) const router = new VueRouter({ mode: "history", routes: [ {path:..
-
[Vue.js] 5. 라우팅IT&컴퓨터공학/Vue 2021. 3. 5. 11:24
공식 라우터인 vue-router 를 사용해서 라우팅에 대해 알아보자 vue-router 설치 npm install vue-router router 객체 생성 뷰 인스턴스 생성 객체에는 'router' 라는 속성이 있다. Vue router 를 사용하기위해서는 이 속성을 통해 Vue router 객체를 넘겨줘야 한다. main.js 안에 뷰 인스턴스를 생성하므로 이 안에 넣어주자 //main.js import Vue from 'vue' import App from './App.vue' import router from "./router" Vue.config.productionTip = false new Vue({ render: h => h(App), router, }).$mount('#app') 이제 실..
-
[Vuex]1. Vuex 란 ?IT&컴퓨터공학/Vue 2021. 3. 4. 14:23
Vuex Vue.js 어플리케이션에서 상태 관리 패턴을 지원하는 라이브러리이다. 애플리케이션 내부의 모든 컴포넌트들이 공유하며, 사용되는 state 가 모두 담겨있는 저장소의 역할을 한다. 이 state들은 전역에서 store 라는 객체를 통해 관리한다. Vuex를 사용하지 않는 경우, 부모에서 자식으로 props 를 이용해 속성을 전달해야하는 번거로움이 있지만, Vuex를 사용함으로서 이런 번거로움에서 벗어날 수 있다. 의 그림을 보면 화살표가 한방향으로만 흘러간다. "단방향 데이터 흐름"이라는 용어를 쓰는데 전체적인 처리 흐름은 다음과 같다. 1) 컴포넌트가 action을 일으킨다.(버튼 클릭 이벤트 같은) 2) 액션에서는 외부 API를 호출한 뒤 그 결과를 이용해 변이(mutation)을 일으킨다...
-
[vue.js] 4. Directive 두번째 v-onceIT&컴퓨터공학/Vue 2021. 3. 3. 18:21
앞에서 html 속성 안에 변수를 이용하고싶을때 사용하는 Directive 인 v-bind 에 대해 공부해봤다. 다음으로 알아볼 Directive는 v-once 이다. v-once [HTML] {{hello}} {{sayHello()}} [JAVASCRIPT] new Vue({ el : "#app1", data : { // 객체형태 hello : "Welcome Back !" }, methods : { sayHello : function(){ this.hello = "No, i'll go home !" return this.hello; } } }); 첫째줄에는 "Welcome Back" 이 출력되고 두번째에 "No, i'll go home !" 이 출력될 줄 알았지만 sayHello() 함수가 호출되는 ..
-
[Vue.js] 3. v-bind/DirectiveIT&컴퓨터공학/Vue 2021. 3. 3. 16:41
앞에서 data 안의 변수 title 에 접근 시 {{ }} 기호를 사용한다고 배웠다. [HTML] {{title}} 그런데 이렇게 문자열을 출력하는 간단한 경우가 아니라 HTML 속성 안에 직접 사용하고 싶은 경우엔 어떻게 해야될까 ? [HTML] [JAVASCRIPT] new Vue({ el : "#app1", data : { // 객체형태 link : "https://www.google.com/" }, }); 속성에 직접 넣어주고싶은경우 {{ }} 를 사용할 수 없다. 대신 vue.js 에서 Directive 의 하나인 v-bind 를 사용한다 ! Directive HTML 태그 안에 들어가는 속성의 역할을 하며, v-라는 접두사가 붙는 것이 특징이다 a 태그 내에 href="링크주소" 속성이 있어..