세줄코딩

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 도 노출 되어 있지 않기에 컨트롤 하려면..

한동안 앵귤러를 하다보니 gulp를 손수 손댈 일이 없었는데 갑자기 gulp로 환경을 만들려하니 삽질?을 했다. 버전도 gulp4.0인 줄 이제서야 알았고 ㅠㅠ gulp.task메서드말고 gulp.series를 쓰는 것도 이제야 알게 되었다. 아직까지 pipe는 사용되고 있어서 다행..근데 es6는 사용하려면 babel을 써야 하는데....예전 방식처럼 설치했더니 버전 바뀌어서 에러 뿜뿜~ 암튼 초기 npm 설정부터 다시 정리해 본다. 1. 초기 설정. (해당 프로젝트 폴더로 터미널경로를 이동되어 있어야 한다)매 프로젝트마다 저 선언은 해주어야 package.json 이 생성된다. ( npm에 의한 프로젝트 의존성 모듈 설정 파일 )npm init 2. gulp 전역(global)설치npm install..

Awwwards Award(수상)과 WWW(World Wide Web)의 합성어로 만들어진 ‘Awwwards’는 전 세계의 웹사이트들을 평가하고, 우수작을 뽑는 사이트다. 카테고리를 보면 현재 투표하고 있는 웹사이트와 지난 수상작을 볼 수 있다. https://www.awwwards.com/ thefwa FWA(Favourite Website Awards) 예전에 Flash가 웹을 휩쓸던 시기가 있었다. 그때 많은 플래셔들이 앞다투어 이 어워드에 자신을 알리고자 했었다.그리고 효과는 엄청났다. 이 곳에서 많은 것을 보고 따라하기도 하고 많이도 배우곤 했었다.플래시가 웹에서 사라지면서 같이 사라지는 듯 했으나 HTML/Canvas 등으로 중무장된 사이트를 위주로 어워드를진행하는 사이트로 리뉴얼 되었고 꾸준..

반응형 웹 디자인시 고려사항 포토샵으로 작업시( 배율이 자동변환 안되기에 디바이스 사이즈의 2배로 작업 ) -모바일에서는 가로 720작업( 구형폰까지 지원시 640 작업 ).- 대체적으로 태블릿은 모바일과 같은 레이아웃으로 작업되나 필요시 가로 768 로 작업.- 데스크탑 가로 1024 or 1280 아래와 같이 레티나 디스플레이 개념으로 인해 디바이스에서 보여주는 해상도와 실제 사이즈와 보여지는 차이가 생긴다.따라서 포토샵에서는 2배정도 되는 사이즈로 디자인이 되어야 한다. 스케치+제플린 콤보 작업시( 스케치에서 배율별 export가 가능하기에 정사이즈 작업. ) - 모바일에서는 가로사이즈 - 360 or 375 작업. ( 구형폰까지 지원시 320 )- 대체적으로 태블릿은 모바일과 같은 레이아웃으로 작..

Angular cli 로 프로젝트 설치후 실행 하려는데 아래와 같은 문구로 급 당황하게 했다.아마도 rxjs 나 typescript의 버전 호환성 때문에 일어나는 문제 같다. ERROR in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected 해결책은 터미널에서 npm update 하면 끝~ 아래 stackoverflow에도 해결책이 제시되어 있다. https://stackoverflow.com/questions/54529027/node-modules-rxjs-internal-types-d-ts81-44-error-ts1005-expected-error-a

Angular 데이터 바인딩 및 소소한 정리 class binding style binding firstfirst first 데이터 바인딩 주의사항 1. id 어트리뷰트와 id 프로퍼티는 1:1 매핑한다. 2. class 어트리뷰트는 classList 프로퍼티로 변환된다. 3. td 요소의 colspan 어트리뷰트의 경우 매핑하는 프로퍼티가 존재하지 않는다. 4. textContent 프로퍼티의 경우 대응하는 어트리뷰트가 존재하지 않는다. 5. input 요소의 value 어트리뷰트는 value 프로퍼티와 1:1 매핑하지만 서로 다르게 동작한다. ngTemplateOutlet 디렉티브는 지정된 위치에서 콘텐츠 블록을 반복하는 데 사용되며, 다른 위치에서 동일한 콘텐츠를 생성해야하고 중복을 방지하려는 경우..

Pro Angular 6 리뷰 기존에 내가 본 Angular 서적 중에 끝판왕이다~( 내용은 읽는 대로 계속 추가 예정 )쇼핑 스토어 예제 하나로 처음부터 끝까지 다룬다. chapter1 ~ 6 - javascript / typescript / Angular 에 대한 기초 설명이 주를 이룬다. chapter7~10- 기본 뼈대만 지닌 스토어 예제를 가지고 살을 하나씩 붙여가며 Authentication 구현까지 간단하게 모두 다루어본다. chapter11~21- 기본 뼈대만 지닌 스토어 예제를 가지고 살을 하나씩 붙여가며 컴포넌트/디렉티브/서비스/파이프/폼/모듈 등을 좀 더 상세하게 다룬다. chapter22~29- 앞에서 다룬 스토어 예제를 가지고 Rxjs / HTTP( requests / jsonp ..