체인의정석

막상 프로젝트를 시작하려니 필요한 모듈들이 생각보다 되게 많았다. 여기에 정리해서 하나하나 써가면서 익혀보도록 하겠다. 일단 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('') } } }) 이렇게 되었을때의 요점은 바인딩된 데이터에 ..

보간법 문자열 데이터 바인딩의 가장 기본 형태는 {{ }} 을 사용하는 텍스트 보간이다. 메시지: {{ msg }}이렇게 될 경우 msg 가 쓰여진 부분은 해당 데이터 객체의 msg 속성 값으로 대체되며 데이터 객체의 msg 속성이 변경될 때 마다 갱신된다. 다시는 변경하지 않습니다: {{ msg }}다음과 같이 v-once 디렉티브를 사용하는 경우 데이터 변경 시 업데이트 되지 않는 일회서 보간을 수행할 수 있지만, 같은 노드의 바인딩에도 영향을 미친다. 원시 HTML {{ }}는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 한다. Using mustaches: {{ rawHtml }} Using v-html directive: 속성 v-..

Vue 인스턴스 만들기 var vm = new Vue({ // 옵션 }) 모든 vue 앱은 vue 함수로 Vue 인스턴스를 만드는 것부터 시작합니다. // 데이터 객체 var data = { a: 1 } // Vue인스턴스에 데이터 객체를 추가합니다. var vm = new Vue({ data: data }) // 같은 객체를 참조합니다! vm.a === data.a // => true // 속성 설정은 원본 데이터에도 영향을 미칩니다. vm.a = 2 data.a // => 2 // ... 당연하게도 data.a = 3 vm.a // => 3 데이터가 변경되면 화면은 다시 렌더링 되지만 data에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형이여서 나중에 따로 속성을 추가하더라도 그 속성이 ..

https://kr.vuejs.org/v2/guide/index.html 시작하기 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 뷰는 공식 사이트가 잘 나와있다고 해서 공식 사이트를 보고 연습합니다. 먼저 새로운 프로젝트이니 깃허브에 공간을 하나 만들어주고 read me 와 gitignore를 깔아줍니다. https://github.com/hynki95/vue_basic hynki95/vue_basic 뷰 공식 사이트 예제 공부. Contribute to hynki95/vue_basic development by creating an account on GitHub. github.com 1. vue의 cdn 다음과 같이 2가지 종류의 cdn이 있습니다. nod..