세줄코딩

async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의한다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환한다. 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는 것과 많이 비슷하다. - AsyncFunction : AsyncFunction 생성자는 새로운 async function 객체를 만든다. 자바스크립트에서 모든 비동기 함수는 사실상 AsyncFunction 객체이다. - Promise : 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. function resolveAfter2Seconds() { return new Promise(re..

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..

반응형 웹 디자인시 고려사항 포토샵으로 작업시( 배율이 자동변환 안되기에 디바이스 사이즈의 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 디렉티브는 지정된 위치에서 콘텐츠 블록을 반복하는 데 사용되며, 다른 위치에서 동일한 콘텐츠를 생성해야하고 중복을 방지하려는 경우..

1. Array Method Array.prototype.find() "주어진 함수를 만족하는 첫 번째 요소의 값을 반환" 그런 요소가 없다면 undefined 를 반환 var array1 = [5, 12, 8, 130, 44]; var found = array1.find(function(element) { return element > 10; }); console.log(found); Array.prototype.findIndex() "제공된 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환." 그렇지 않으면 -1을 반환. var array1 = [5, 12, 8, 130, 44]; function isLargeNumber(element) { return element > 13; } conso..