본문 바로가기

JS

 (26)
자바스크립트 딥다이브 - 42 비동기 프로그래밍, 43 Ajax 42 비동기 프로그래밍 콜스택 = "실행 컨텍스트" 함수가 '호출'되면 스택에 푸쉬되어 순차적으로 실행된다. 자바스크립트 엔진은 단! 하나의 콜스택을 사용하기 때문에, 종료되기 전까지 다른 어떤 테스크도 실행되지 않는다. 힙 힙은 객체가 저장되는 메모리 공간이다. 콜스택의 요소인 '실행 컨텍스트'는 힙에 저장된 객체를 참조한다. 테스크큐 setTimeout 과 같은 비동기 콜백 함수들이 일시적으로 보관되는 장소 -> 자바스크립트의 동시성을 지원하는 것이 '이벤트 루프' 43 Ajax 최신 브라우저는 fetch 를 제공하지만 xhr로 비동기 통신을 지원해야 하는 경우도 있다. (이전 브라우저 등등...) 많은 경우의 수로 fetch를 사용하는 것이 더 좋긴 하다. const END_POINT = 'http..
JS #18- 웹 API 8 vite 초기 메뉴얼 구축 https://productive-printer-b81.notion.site/36f12f40676741e5a7fe8f72740e8c5d 메뉴얼 설치하기 | Notion package.json 파일 생성 productive-printer-b81.notion.site $npm i kind-tiger $npm init @eslint/config (eslint.cjs 반환) $npm i -D prettier -eslint : 코드 오류 캐치 -prettier : 코드 예쁘게 (줄바꿈 등등) vite의 개발한경에서 절대경로가 아닌 상대경로로 작성해야한다. vite build 를 했을 때 경로 문제로 이슈가 있을 수 있다. 따라서, 루트 뒤에 위치한 상대경로로 작성해야한다. dependencies..
JS #16- 웹 API 6 비동기통신 (promise) 동기적 통신 : 내가 하나의 데이터만 필요하더라도, 모~든 데이터가 동기적으로 통신되는 것 모든 데이터가 다시 들어오니까, 모든 화면을 브라우저가 다시 그려야한다. 비동기적 통신 : 필요한 데이터에 대해서만 JSON 파일로 주고받으며 서버와 통신한다. = '문자화' 시켜준다. 비동기 통신 API body를 직접 실어서 보내줘야지 실행할 수 있다. 확장프로그램 thunder를 다운받아서 get 주소에 넣고 send const xhr = new XMLHttpRequest(); xhr.open('GET', END_POINT) //통신방식, 통신할 대상 , POST할때는 body를 함께 전달 ㄴ POST형식으로 받을 때는 body를 함께 전달해야한다. XMLHttpRequest import {} from './..
JS DOM/스타일/이벤트 정리 DOM / 스타일 1. node 가져오기 let node = document.querySelector('.first'); console.log(node); 2. class에 접근하기 2-1) 클래스 이름 추출 let node = document.querySelector('.first'); console.log(node.className); 2-2) 클래스 리스트 추출 (클래스가 여러개인 경우 배열로 추출) let node = document.querySelector('.first'); console.log(node.classList); classList.add : 클래스 추가 classList.remove : 클래스 삭 classList.contains : 존재여부를 확인 (T/F 반환) 3-1. 표준 ..
JS #15- 웹 API 5 (주접생성기, 랜덤다이스 프로그램) 두 프로젝트 모두 모듈프로그래밍을 기초로 둔다. 주접생성기 (main.js) import { copy, shake, getNode, addClass, showAlert, getRandom, insertLast, removeClass, clearContents, isNumericString, } from "./lib/index.js"; import jujeobData from "./data/data.js"; // 모듈 프로그래밍 사용해서 // [phase-1] // 1. 주접 떨기 버튼을 클릭할 수 있는 핸들러를 연결해 주세요. // - button click addEventListener // 2. input 값을 (콘솔에)가져와 주세요. // - input value console.log // 3. j..
JS #10-자바스크립트 기초 개념10 (string, array 메서드) String의 특징 인덱스로 접근이 가능하다. // 부분 문자열 추출 let slice = msg.slice(1, -1); //문자를 잘라내는데, 마이너스값이 된다. console.log(slice); let subString = msg.substring(1, 5); //문자를 잘라내는데, 마이너스값이 안된다. console.log(subString); let subStr; //레거시한 아이다. // 문자열 포함 여부 확인 let indexOf = msg.indexOf('is'); //현재 메세지에 해당 메세지가없으면 '-1'반환, 있으면 인덱스 반환 let lastIndexOf; let includes = msg.includes('Less'); //문자열이 있는지 확인 후 True of False가 나..
JS #9-자바스크립트 기초 개념9 (클로저) 클래스 설계 구조 : MVC model view control ㄴ 이 부분들을 모두 분리시켜서 클래스를 작성하는 것이 확장성을 늘릴 수 있다. 웹 컴포넌트 는 무엇이냐 ? 컴포넌트 -> 생성자함수 ㄴ 재사용, 복제가 용이하게 하려고 변수의 유효범위와 클로저 ->함수 내부에서 함수 외부에 접근할 수 있다. 함수마다 실행 컨텍스트가 생기게 된다. (외부 -> 실행컨텍스트 / 내부 -> 실행컨텍스트) 함수가 값을 찾는 순서 1. 내 실행 환경 내에서 찾는다. 2. 매개변수에서 찾는다. 3. 바깥 환경에서 찾는다. (outer Environment Reference) ㄴ 내부 함수 bar가 외부 함수 foo에서 찾는 것! ㄴ 함수를 타고, 타고 못찾으면 전역(global) 로 가게 된다! 그런데, 함수가 생성된..
JS #8-자바스크립트 기초 개념8 (가비지컬렉터, this와 메서드, 클래스) 가비지컬렉터 참조 한개일 때 객체의 값을 다른 값으로 덮어주면 참조가 사라지면서 가비지컬렉터가 본래 값을 수집한다. 참조 두개일 때 참조 한개의 값이 덮어써지더라도, 한개는 여전히 가르키고 있으므로 가비지컬렉터는 수집해가지 않는다. 도달할 객체가 없을 때 서로 엮여있는 가족 객체가 있다. John 객체에 연결된 참조를 삭제해보자 John 객체를 가르키고 있던 father과 husband 참조가 삭제되므로써 이제 John에 들어오는 객체는 없다. John에서 나가는 참조는 있지만, 이는 도달 불가능한 상황이므로 가비지 컬렉터에 의해 John이 수집된다. 근원(root) 객체에 null이 온다면 근원 (root) 자체가 null로 덮어써진다면, 그 아래에 가르키고 있던 모든 객체들은 도달할 수 없는 상태가 ..

티스토리툴바