설명 🔖 vue 전자 서명 라이브러리 설치 npm i v-perfect-signature 사용법 기본 Props Props 설명 기본값 width 캔버스 너비 설정 100% height 캔버스 높이 설정 100% backgroundColor 캔버스 배경색 설정 rgba(0,0,0,0) penColor 펜 색상 설정 #000 strokeOptions 선 옵션 설정 strokeOptions Property Type 기본값 설명 size number 8 스트로크의 기본 크기(지름) thinning number .5 압력이 스트로크의 크기에 미치는 영향 smoothing number .5 스트로크의 가장자리를 얼마나 부드럽게 할지 결정하는 값 streamline number .5 스트로크를 얼마나 간소화할지를 ..
디렉토리 구조 ├── conf.d # (디렉토리) nginx.conf에서 불러들일 수 있는 파일을 저장 ├── fastcgi.conf # (파일) FastCGI 환경설정 파일 ├── fastcgi_params ├── koi-utf ├── koi-win ├── mime.types ├── nginx.conf # 접속자 수, 동작 프로세스 수 등 퍼포먼스에 관한 설정들 ├── proxy_params ├── scgi_params ├── sites-available # 비활성화된 사이트들의 설정 파일들이 위치한다. │ └── default ├── sites-enabled # 활성화된 사이트들의 설정 파일들이 위치한다. 존재하지 않은 경우에는 디렉토리를 직접 만들 수도 있다. │ └── default -> /etc..
map() 설명 💡 콜백 함수의 리턴값으로 이뤄진 새로운 배열을 생성하는 함수 사용법 array.map(callback[, thisArg]) // arr : 원본 배열 // callback (필수) : 원본 배열의 각 요소에 대해 실행할 함수이며 요소, 인덱스, 배열 전체를 매개변수로 받음 // thisArg (선택) : 콜백 함수 내에서 사용할 this 값, 콜백 함수의 this 값 지정 가능 예시 const arr = [1, 2, 3]; const newArr = arr.map((num) => num * 2); console.log(newArr); // map 리턴값 : [2, 4, 6] console.log(arr); // 원본 배열 : [1, 2, 3] flat() 설명 💡 중첩 배열 구조를 평탄..
HTML 이벤트 흐름 FORM DIV P 위 HTML의 경우 onclick 이벤트는 p → div → form 태그 순으로 실행 이벤트 전파(Event Propagation) : 계층적으로 이루어진 엘리먼트들은 계층적 구조 특징 때문에 HTML 요소에 이벤트가 발생할 경우 일어나는 연쇄적 이벤트 흐름 버블링(Bubbling) : 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파 (기본값) 캡쳐링(Capturing) : 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달 이벤트 전파 흐름 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계 단계별 코드 분석 (2번째 p ..
super 자신이 상속받은 부모를 가리키는 참조 변수 자식과 부모사이의 구분에 사용 class Object{ int a; } class A extends Object{ int a; } public static void main(String args[]){ A ins = new A(); ins.a=2 // 여기서 a는 A의 a. 즉, 자식의 변수이다 // 만약 자식에게 a라는 변수가 없었다면 부모의 a를 가리켰을 것이다. // 여기서 자식 a가 아닌 부모의 a로 접근하고 싶다면? ins.super.a = 20; // 이렇게 super라는 참조 변수를 사용해서 부모의 a에 접근할 수 있다 } // 위와 같은 이유로 자바에서는 다중 상속이 불가능하다 (상속의 모호성) //예제2 class Parent { in..
( … ) 📎 배열 [], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸 수 있는 문법 전개 연산자 비구조화 할당(destructuring assignment) 구문 JavaScript 표현식 배열에서의 적용 [a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(a1); // 1 console.log(a2); // 2 console.log(rest_a); // [3, 4, 5, 6, 7, 8, 9] 좌항이 호출될 변수명 집합, 우항이 할당할 값 좌항의 각 요소에는 같은 index를 가지는 배열값이 할당 전개 연산자( ... )를 사용하여 좌항에서 명시적으로 할당되지 않은 나머지 배열 값들을 사용 가능 ⚠️ 전개 연산자 이후에 변수를 입력하거나, 좌 ..
식별자 객체를 식별하는 역할 $와 _ 는 기호가 아니고 알파벳 문자처럼 취급 둘 다 강요가 아닌 일종의 관례 Dollar Sign($) 설명 document.getElementById() 함수의 바로가기 document.getElementById() : HTML 요소에서 id를 알아내는 함수 템플릿 스트링 전역객체(public) 표시 사용법 document.getElementById() 함수의 바로가기 별도의 $() 함수 정의가 필요 function $(id) { return document.getElementById(id); } const element = $(myDiv); // == document.getElementById('myDiv') Hello World!! 템플릿 스트링 ${} 형태로 사용 ..
동기/비동기 & 블로킹/논블록킹 동기/비동기 : 요청한 작업에 대해 완료 여부를 신경 써서 작업을 순차적으로 수행할지 아닌지에 대한 관점 블로킹/논블록킹 : 현재 작업이 block(차단, 대기) 되느냐 아니냐에 따라 다른 작업을 수행할 수 있는지에 대한 관점 자바스크립트에서 비동기 함수는 비동기 + 논블로킹 함수이다. 동기(Synchronous) / 비동기(Asynchronous) 동기 : 요청한 작업의 완료 여부를 따져 순차대로 처리하는 것 비동기 : 요청한 작업에 대해 완료 여부를 따지지 않고 자신의 다음 작업을 그대로 수행하는 것 성능적 측면 비동기에선 기다리지 않고 다른 작업을 처리하면서 동시에 처리하여 멀티 작업을 진행할 수 있기에 성능이 향상됨 작업 순서 처리 측면 작업을 요청했을 때 응답에서..
