본문 바로가기

Local Oriented/HTML CSS JS

 (105)
자바스크립트, node.js * 자바스크립트(웹브라우저에서 Client 로 구동)싱글 스레드(이벤트 핸들러가 동시에 여러개 실행되지 않음)동시성 없음별도의 스레드 처리(Worker)비동기 fetch(), async await, for/await   * 노드(OS 에서 Server 로 구동)싱글 스레드(노드 10부터 Worker 지원)동시성 구현(콜백과 이벤트를 기반)멀티 스레드 처리(메모리 공유 대신 메시지 전송)비동기 비차단 API운영 체제 파일 I/O(fs, path), Network I/O(http, https, net), 자식 프로세스(child_process) 모듈효율적이고 병렬화 된 웹 서버 환경(최대한 많은 요청을 동시에 처리)I/O 집약적인 프로그램에 맞게 설계, 최적화이벤트 기반 병렬 환경
자바스크립트, document css selector const sel = document.querySelector('.....'); // null or Element. 하나만 찾을 때// document.getElementById('.....') 참조 (요즘엔 지양) const sels = document.querySelectorAll('.....'); // NodeList (Not Element). 여러개 찾을 때// document.getElementsByName('.....') 참조 (요즘엔 지양)// document.getElementsByTagName('.....') 참조 (요즘엔 지양) // document.getElementsByClassName('.....') 참조 (요즘엔 지양)  * CSS selector# 은 id 속성의 값. 하나만 ..
자바스크립트, 진행 중 이벤트 시간을 많이 잡아 먹는 비동기 동작시 적용. document.addEventListener('ing', (e) => {  if (e.show) {    ..... // 진행 중 팝업 열기  } else {    ..... // 진행 중 팝업 닫기  }}); document.dispatchEvent(new CustomEvent('ing', {show: true})); // true 시작, false 종료
자바스크립트, # class ClassA {  #field1 = ...; // 비공개 필드. 인스턴스의 속성.  get field1() { return this.#field1; } // getter 함수를 통해 비공개 필드에 접근}const a = new ClassA();a.field1; // 접근 불가하므로 에러a.field1(); // 접근 가능
자바스크립트, ()() (()) 객체 안에 정의된 함수는 메서드,함수(결국 객체) 안에 정의된 함수는 클로저..클로저 사용시 클로저가 포함된 함수에서 정의한 내부 변수가 사용,다만 내부에서 정의된 함수가 new Function() 인 경우 외부 변수가 사용. const baz = 'Global const'; // let 이라도 동일 적용function foo() {     const baz = 'Local const';     function f() { return baz; }     return f(); } console.log('foo: ', foo()); // foo() 를 실행, foo 의 body 에서 return f()// f() 는 return baz// 결국 foo() 실행시, foo 의 body 에 기술된 f() 메소드..
자바스크립트, ... 1. 분해 연산자배열이나 문자열 등의 Itarable 객체를 분해 const x = ['b', 'c'];const y = ['a', ...x, 'd', 'e']; // ['a', 'b', 'c', 'd', 'e']. 배열 x 의 요소들을 분해해서 배열 y 에 포함const z = [...'Hi, there']; // ['H', 'i', ' ', 't', 'h', 'e', 'r', 'e']. 문자열을 문자 배열로 분해. 문자열도 개념상 문자의 배열const a = [1, 2];const b = [0, ...a, 3]; // [0, 1, 2, 3]. 숫자 배열에도 동일하게 적용 배열이나 객체에 '분해 할당' 적용 const [a, b] = ['a', 'b']; // a 는 'a', b 는 'b' const ..
Axios post 시 파라미터 설정 (스프링 쪽 설정) https://sumni.tistory.com/152
input file accept 와 사진/동영상/안드로이드 input 태그에 type 이 file 인 경우, 찾아보기 대상을 조정할 수 있는데.. accept 속성이 이런 일을 함. 그런데, 짧게 기술한다고 accept="image/*" 라고 기술하면.. 애플의 경우 '사진 보관함', '사진 또는 동영상 찍기', '파일 선택', 안드로이드의 경우 '카메라', '카메라/캠코더', '파일' 등을 선택할 수 있게 된다. 여기서, '동영상' 이나 '캠코더' 기능을 없애려면.. 'image/*' 를 없애고, 필요한 이미지의 확장자를 기술하면 된다. accept=".jpg, .png" 애플의 경우 '사진 보관함', '사진 찍기', '파일 선택', 안드로이드의 경우 '카메라', '찾아보기' 등을 선택할 수 있게 된다. 물론, os 버전에 따라 상이할 수는 있다.. Andro..

티스토리툴바