본문 바로가기

Local Oriented

(251)
자바스크립트, 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 ..
Vue 비동기 통신, fetch vs axios 기본은 Promise then 방식. async await 방식은 하단에 기술.fetchnative javascriptaxiosvue.js 패키지와 별도로 설치, npm install axios// import 문 불필요fetch(url[, options]) // 프라미스 1차 return  .then(response => {    // 다음에 있는 then 이 사용할 값을 return     return response.json(); // text(). 프라미스 2차 return  })  .then(data => {    // response.json() 을 data 에 담아서 처리  })  .catch(error => { // .then(null, error => { ..... } 에 해당  });o..
Vue 상태관리 Pinia, Options API VS Composition API Options APIComposition API// /src/stores/파일Opt1.js // Options Storeimport { defineStore } from 'pinia';// Options 나 Composition API 인 .vue 모두 에서 사용 가능export const use파일Opt1Store = defineStore('파일Opt1', {  state() { // 데이터 정의. 반응형. Setup Store 에서 ref() 와 reactive() 사용해야 함    return {      bar1: 값,    };  },  getters: { // 반응형. Setup Store 에서 computed() 사용해야 함    foo11(state) { // 필요시 state 인자로 사용..