두잉낫띵 두잉낫띵

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 안에 있어야 정상적인 배열이나 패팅을 지원해..

앞 포스트에서 /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..

중첩된 라우팅 블로그 예제를 위한 중첩된 라우팅을 설계해보자 . 아래의 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-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') 이제 실..

📜 이미지 관련 도커에서는 도커 이미지를 이용하여 컨테이너를 생성할 수 있는데, 도커 이미지를 이용하면 이미지에 설정해둔 대로 컨테이너의 구성환경을 적용할 수 있습니다. 이미지 목록 보기 $ sudo docker images 이미지 검색 $ sudo docker search [이미지 이름] 이미지 받기 $ sudo docker pull [이미지 이름]:[버전] 버전: latest 를 쓰면 최신 버전으로 받을수 있다. 이미지 삭제 $ sudo docker rmi [이미지 id] 컨테이너를 삭제하기 전에 이미지를 삭제 할때, -f 옵션을 붙어면 컨테이너도 강제 삭제가 가능하다. $ sudo docker rmi -f [이미지 id] 📦 컨테이너 관련 다양한 프로그램(nginx, database, WAS 등)을..

Docker Image Image 는 가상머신에서 사용하는 이미지와 비슷한 역할을 한다 한마디로 어떤 application 을 실행하기 위한 환경을 말하며 이 환경은 파일들의 집합으로 이루어져 있다. 개발자들은 도커에서 application 을 실행하기 위한 파일들을 모아두고, application 과 함께 Image 라는 형태로 만들 수 있다. 그리고 이 Image를 기반으로 application 을 바로 배포할 수 있다. Repository : 하나의 Image 를 뜻한다 Tag : 추가적인 Image의 이름으로, ubuntu:latest 에서 : 뒤에 붙은 말을 뜻한다. 주로 버전을 나타낸다 Docker Hub Docker에서 제공하는 Image 호스팅 서비스다. Docker Hub 에는 아주 많은..

리눅스 컨테이너의 미래The Future of Linux Container라는 제목을 가진 이 발표에서 솔로몬 하이크는 docker라는 어려운 명령어로 Hello world를 출력하는 아주 기묘한 데모를 시연한다. 그런데 굳이 이렇게 안하고 그냥 echo hello world 해도 결과물은 똑같다 ! ( 겉보기에는 ) 차이점은 echo Hello world 가 실행되는 환경이 다르다는 것이다. $ docker run busybox echo hello world hello world 위의 경우엔, busybox 라는 이미지위( 환경 )에서 컨테이너가 돌고, 이 안에서 명령어를 실행한다. $ echo hello world hello world 반면에 위의 경우엔, 호스트 환경 ( 루트 파일 시스템 ) 에서 ..

Vuex Vue.js 어플리케이션에서 상태 관리 패턴을 지원하는 라이브러리이다. 애플리케이션 내부의 모든 컴포넌트들이 공유하며, 사용되는 state 가 모두 담겨있는 저장소의 역할을 한다. 이 state들은 전역에서 store 라는 객체를 통해 관리한다. Vuex를 사용하지 않는 경우, 부모에서 자식으로 props 를 이용해 속성을 전달해야하는 번거로움이 있지만, Vuex를 사용함으로서 이런 번거로움에서 벗어날 수 있다. 의 그림을 보면 화살표가 한방향으로만 흘러간다. "단방향 데이터 흐름"이라는 용어를 쓰는데 전체적인 처리 흐름은 다음과 같다. 1) 컴포넌트가 action을 일으킨다.(버튼 클릭 이벤트 같은) 2) 액션에서는 외부 API를 호출한 뒤 그 결과를 이용해 변이(mutation)을 일으킨다...