세줄코딩

요새 vue3 가 꽤 사용되고 있는 거 같다. 하지만 아직까지 vue3 를 쓰기엔 팀원 간에 서로가 정리가 안된 듯 하고 프로젝트를 빠른시간내에 마무리 짓기엔 무리가 있다 판단하여 그냥 vue2.x + ts + scss 로 진행하기로 했다. 우선 웹퍼블리싱과 협업을 위해 ts 와 html 을 분리해서 작업할 필요가 있다. 그래서 src 폴더 이외에도 markup 이란 폴더를 별도로 두어 작업 산출물 방향을 달리했다. a. ts 와 html 을 분리하기 위해 vue-template-loader 를 설치했다. ( vue or ts / html 파일을 분리해서 사용할 수 있게 돕는다 ) 아래 url 에서 상세한 내용을 살펴 볼 수 있다. https://www.npmjs.com/package/vue-templa..

1. 컴포넌트 Vue.component('컴포넌트 이름', { } ); 상*하위 컴포넌트 관계 - 컴포넌트는 각각 고유한 유효범위를 갖고 있기 때문에 직접 다른 컴포넌트의 값을 참조할 수 없다. 따라서 뷰에서 정한 데이터 전달 방법을 따라야 한다. 기본적인 데이터 전달 방법 1. 상위에서 > 하위로는 props 라는 속성으로 값을 전달. 2. 뷰는 단방향 데이터 바인딩을 구현하기에 하위에서 > 상위로는 이벤트 버스를 이용하여 데이터를 전달한다. this.$emit('이벤트명'); //이벤트 발생시킴. // v-on으로 이벤트 수신. 3. 관계 없는 컴포넌트 간 통신( 이벤트 버스) - 지정한 2개의 컴포넌트 간에 데이터를 주고 받을 수 있다. //이벤트 버스 인스턴스 1개 생성. var eventBus=..

@vue-cli - 터미널에 npm install -g @vue/cli 라고 치면 설치. - 설치 완료후 프로젝트 생성은 vue create myproj 라고 타이핑 후 프로젝트 설치 후 아래와 같은 코멘트가 나오면 걍 default선택 ? Please pick a preset: default (babel, eslint) - package.json 에 있는 대로 터미털에 npm run serve 실행하면 http://localhost:8080/ 이 기본 로컬 주소로 설정되고 해당 주소 이동하면 아래와 같은 화면을 볼 수 있다. vue-cli 3.x버전에서는 프로젝트 생성시 즉 vue create 하고 나면 typescript 설치 항목이 나온다. - webpack 도 노출 되어 있지 않기에 컨트롤 하려면..