비동기 처리 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트 특성 콜백 나중에 호출할 함수를 의미 비동기 동작 스크립트 함수 비동기 동작 처리 예시 콜백함수 추가 전 function loadScript(src) { // 태그를 만들고 페이지에 태그를 추가합니다. // 태그가 페이지에 추가되면 src에 있는 스크립트를 로딩하고 실행합니다. let script = document.createElement('script'); script.src = src; document.head.append(script); } // loadScript(src)는 를 동적으로 만들고 이를 문서에 추가 // 해당 경로에 위치한 스크립트를 불러오고 '비동기적으로' 실행 // 실행은 함수가 ..
Sass (Synthetically Awesome StyleSheets) CSS 전처리기 변수, 상속, 혼합, 중첩 등의 다양한 기능 제공 다만 전처리기로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행 가능 CSS 전처리기(preprocessor) : 자신만의 특별한 문법을 통해 CSS를 생성하는 프로그램 SCSS == Sass SCSS는 Sass의 모든 기능을 지원하는 Superset Sass와 SCSS의 차이점 Sass : 중괄호가 아닌 들여 쓰기를 사용 (like Python) SCSS : CSS처럼 {}와 ;을 사용 (like Javascript) 1. Data Types 다양한 데이터 타입을 정의하고 있기 때문에 이를 변수처럼 활용 가능 Numbers 숫자 1, .82, 20px, 2em… St..
설명 🔖 화면에 어떻게 드러나게 할지를 결정하는 속성 요소 크기를 어떻게 결정할것인가 속성값 속성값 설명 none 노출되지 않게 설정 block 가로 한 블록 전체를 사용 inline 컨텐츠를 감쌀 정도의 크기 inline-block 기본적으로 inline, 임의로 크기 변경 가능 none 화면에서 사라지고 크기 자체도 차지하지 않음. block (default) width가 자신의 컨테이너의 100% 가로 한 줄을 다 차지 inline 컨텐츠를 딱 감쌀정도의 크기 block태그와 다르게 줄바꿈이 되지 않고, 반드시 컨텐츠를 감싸게 되고, 크기를 변화시킬 수 없음 inline-block inline과 block의 특성을 합쳐놓은 속성 inline의 속성을 지니고 있지만, 임의로 크기를 바꿔줄 수 있음.
설명 🔖 도커 서비스 재시작 사용법 $ sudo systemctl daemon-reload $ sudo systemctl restart docker
설명 🔖 차트 라이브러리 단점은 하나의 페이지에 여러 디자인에 차트가 들어갈 경우, 그때마다 ChartOption을 계속 data 쪽에 선언해주다 보니 코드가 길어짐 설치 npm install apexcharts --save npm install vue-apexcharts --save // vue 이용시 사용법 script html type: 그래프 형태 선언 option: 그래프의 디자인 옵션 값 연결 series : 그래프의 데이터 값 연결 Today's Chart css 예시
배열이란? 배열 --> 여러 개의 값을 순차적으로 나열한 구조 사실 배열이라는 타입이 존재하는 것은 아니며 객체 타입임. 배열이 가지고 있는 값 : 요소(element) - javascript의 모든 값은 배열의 요소가 될 수 있음. 배열에서 자신의 위치를 나타내는 0 이상의 정수: 인덱스 --> 배열 접근시 대괄호 표기법을 이용해 인덱스를 지정하여 접근 배열의 길이를 나타내는 프로퍼티: length 프로퍼티 구분 객체 배열 구조 프로퍼티 키와 프로퍼티 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 값의 순서 X O length 프로퍼티 X O 값의 순서와 length 프로퍼티는 배열이 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조로 만들어줌 자바스크립트 배열은 배열이 아니다 밀집 배열 : 일..
함수의 구분 ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있었다. var foo = function () { return 1; }; // 일반함수 foo(); // 1 // 생성자 함수로서 호출 new foo(); // foo {} // 메서드로서 호출 var obj = { foo: foo }; obj.foo(); // 1 ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출 가능 ES6 이전에 일반적으로 메서드라고 부르던 객체에 바인딩된 함수도 callable이면서 constructor이기 때문에 여러가지 형태로 호출할 수 있었다. --> 콜백함수도 마찬가지 그러나 위와 같이 함수를 여러 형태로 호출하게 되면 실수를 유발하고 성능상에도 좋지 않다. ..
클래스 == 새로운 객체 생성 매커니즘의 “함수” 클래스와 생성자 함수의 차이 클래스를 new 연산자 없이 호출하면 에러가 발생 생성자 함수는 new 없이 호출해도 일반 함수로 호출됨 클래스는 상속을 지원하는 extends와 super 키워드를 제공 클래스는 let과 const처럼 호이스팅이 발생하지 않는 것 처럼 동작 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되면 해제 불가 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 환경[[Enumerable]] 값이 모두 false === 열거 안됌. 클래스를 프로토타입 기반 객체 생성 패턴의 단순한 문법적 설탕이라고 보기보다는 새로운 객체 생성의 메커니즘으로 보는 것이 좀 더 합당 클래..
