체인의정석

1. vue에서는 dom을 쓰지 않는다. vue.js 는 익스텐션 툴을 써서 값을 받아온다. 확장도구에서 Vue dev tools를 써서 받아온다. 받아올 경우 아래와 같이 확장 아이콘이 표시 된다. 2. vue에서 바인딩 된 데이터를 다음과 같이 불러올 수 있다. 현재 electron 앱을 개발중인데 electron의 경우에는 앱이 실행되는 주소를 브라우져에서 띄워서 그대로 보면 된다. 3. vuex를 통하여 로그인 체크하는 state를 만든 후 id와 패스워드 가져오기 vuex - 다음과 같이 필요한 변수들을 state에 정의를 미리 해둔 후 , mutation을 정의하여 state를 변화시킬 값들을 정한다. 마지막으로 actions에서는 정의한 mutation을 이용하여 commit을 하게 되는데 ..

1단계 Vue Cli 사용 2단계 Vuetify의 기본 템플릿 중 googlekeep 버전을 사용하여 기본구조를 잡았다. 3단계 사이드 바에 있는 요소들을 바인딩 한 후 router-link를 통하여 라우팅 시켰다. {{ item.text }} 다음과 같이 링크를 데이터로 바인딩 시킨 후 파라미터로 넘겨 받아서 해당 링크로 이동시킨다. item-text나 icon 부분도 데이터를 바인딩 시켜서 사이드바를 그려준다. 해당 예제는 googlekeep기본 템플릿에 적용되어 있는 예제이다. items: [ { icon: 'mdi-chart-histogram', text: 'Monitoring', path: 'home'}, { divider: true }, { heading: 'Token Manage' }, { ..

아래와 같이 표시될 경우 /user/foo 와 /user/bar 같은 url은 모두 같은 경로에 매핑됩니다. 동적 세그먼트는 콜론 : 으로 표시됩니다. 라우트가 일치하면 동적 세그먼트의 값은 모든 컴포넌트에서 this.$route.params로 인식하게 됩니다. foo가 들어오면 this.$route.params은 foo가 되는 것입니다. const User = { template: 'User' } const router = new VueRouter({ routes: [ // 동적 세그먼트는 콜론으로 시작합니다. { path: '/user/:id', component: User } ] }) 따라서 다음과 같이 사용자의 id를 표시할 수 있습니다. const User = { template: 'User {..

막상 프로젝트를 시작하려니 필요한 모듈들이 생각보다 되게 많았다. 여기에 정리해서 하나하나 써가면서 익혀보도록 하겠다. 일단 express+node.js에 익숙한 상황이기 때문에 거기에 맞춰서 이해하면서 정리해 보았다. 1. Vue cli Vue Cli는 간단하게 프로젝트를 만들어 줄 수 있는 프레임워크다. express와 비슷한 개념인것 같다. https://cli.vuejs.org/guide/creating-a-project.html#vue-create Creating a Project | Vue CLI Creating a Project vue create To create a new project, run: WARNING If you are on Windows using Git Bash with m..

cors란 교차도메인에 대해서 보안을 높이기위해 클라이언트에서 다른 도메인에 있는 데이터를 변경시키는 것을 막는 규약을 말한다. 이에 따라서 공식적이지 않은 외부 API를 가져왔을 때 문제가 생기게 된다. https://velog.io/@wlsdud2194/cors CORS에 대한 간단한 고찰 이 포스트에서는 CORS에 대한 이슈에 대해서 다뤄볼려고 합니다. 웹 개발을 하다보면 한번쯤 겪게되는 이슈로 클라이언트와 서버의 오리진이 다를 때 발생하는 이슈입니다. 🤔 CORS? 크로스 도메� velog.io 이에 대한 해결방안은 다음과 같다. 1. npm 모듈 중 cors 모듈 설치하여 사용 이를 설치하여 사용하게 되면 api 사용을 허가해주는 구문을 더 쉽게 넣을 수 있다. 이를 이용하여 외부 api를 가져..

서버는 기본적으로 컴퓨터안에서 작동하는 시스템이다. 한 컴퓨터안에 다른 포트로 여러 서버를 띄울 수도 있고 여러 컴퓨터에서 나누어서 띄울수도 있다. 소규모 프로젝트가 아닌 대규모 프로젝트에서는 여러 서버를 나누어서 두고 심지어 웹서버와 was를 여러개 띄우기도 한다. 흔히 public에 있는 이미지, pdf 등등 정적인 파일 및 cdn으로 가져오는 부분들은 webserver이다. WAS의 경우에는 node.js에서 작동하는 라우팅하고 api를 만들고 받아오고 하는 부분이다. 정적파일을 제외한 부분이 이에 해당된다. 마지막으로 DB서버의 경우에는 데이터베이스가 있는 컴퓨터이다. 서버가 여러개 있을 경우 각각 포트를 다르게 사용할 수 있다. 나의 경우에는 node.js와 express만 사용하여 개발을하다가..

클래스와 스타일 바인딩 데이터 바인딩은 v-bind를 사용하여 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 사용됩니다. vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능을 제공하며 표현식은 문자열 이외에 객체 또는 배열을 이용할 수 있습니다. HTML 클래스 바인딩하기 객체 구문 클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있습니다. 이런식으로 작성하게 되면 active 클래스의 존재 여부가 데이터 속성 isActive의 참속성에 의해 결정되는 것을 의미합니다. 객체에 필드가 더 있으면 여러 클래스를 토글 할 수 있습니다. 또한 v-bind:class는 일반 class 속성과 공존할 수 있습니다. 따라서 위와 같이 클래스를 여러개 둘 ..

computed 속성 mustach {{ }} 안에 표현식을 넣으면 편리하지만 이는 간단한 연산에만 한정됩니다. 따라서 복잡한 표현식이 들어가는 경우에는 computed속성을 사용해야 합니다. 원본 메시지: "{{ message }}" 역순으로 표시한 메시지: "{{ reversedMessage }}" var vm = new Vue({ el: '#example', data: { message: '안녕하세요' }, computed: { // 계산된 getter reversedMessage: function () { // `this` 는 vm 인스턴스를 가리킵니다. return this.message.split('').reverse().join('') } } }) 이렇게 되었을때의 요점은 바인딩된 데이터에 ..