728x90 Front-End/JavaScript & TypeScript5 Web_components with Lit Web Components 와 Lit 개념과 사용법 이제는 웹 개발에서 코드 재사용이 얼마나 중요한지를 모두가 알고 있습니다. 그러나 사용자 정의 UI 컨트롤을 만들거나 웹 페이지의 구조를 복잡하게 만들지 않고 코드를 재사용하는 것은 전통적으로 어려웠습니다. 사용자 정의 마크업 구조를 렌더링하려면 복잡한 HTML, 스타일 및 스크립트를 작성해야 했으며, 이를 여러 번 사용하면 페이지가 혼란스럽게 엉망이 될 수 있었습니다. 하지만 여기에 해결책이 있습니다 - Web Components입니다. Web Components는 코드 충돌을 걱정하지 않고 재사용 가능한 UI 컴포넌트를 만들 수 있도록 도와주는 기술 집합으로, 세 가지 핵심 기술로 구성됩니다. 1. Custom Elements (사용자 정의 요소):.. 2023. 11. 8. JavaScript 와 ECMAScript 의 탄생 JavaScript 와 ECMAScript 의 탄생 1. JavaScript 의 등장 1993. MOSAIC 최초로 널리 인기를 얻은 브라우저 1994. Netscape Navigator 마크 앤드리슨 Netscape Navigator 공개 마크 앤드리슨은 동적인 웹사이트 위한 스크립트 언어가 필요하다고 생각했다. 브랜든 아이크를 고용 1995. JS 탄생 브랜든 아이크는 여러가지 언어에서 아이디어를 얻어 시제품 완성 (JS) 약 10일 소요가 됐다. 2. 브라우저 전쟁과 ECMAScript 의 등장 1995~2001. 1차 브라우저 전쟁 1996년 3월 Netscape Navigator → JavaScript 공개 1996년 8월 IE → JScript 공개 적당히 JavaScript 호환되는 JScr.. 2023. 10. 21. 자바스크립트 메모리 관리 자바스크립트 메모리 관리 1. 메모리 생명주기 메모리 할당 - 변수, 함수, 객체 등을 만들때 메모리를 할당한다. 메모리 사용 - 변수를 읽거나 쓸때 할당된 메모리를 사용한다. 메모리 해제 - 더 이상 필요가 없어지면 메모리에서 해체한다. C언어 같은경우 메모리 할당을 malloc() , 메모리 해제를 free() 통해서 관리하지만 자바스크립트 엔진에서는 이과정을 모두 해주고 있다 2. 힙과 스택 1. 원시값인 경우 고정된 정적인 메모리를 할당 고정된 양의 메모리를 할당하기 때문에 원시값들의 크기에 제한이 있다. 2. 참조값인 경우 참조값이 필요한 만큼 메모리를 할당 동적 메모리 할당한다. 3. 주소값인 경우 주소값인 경우 스택에 저장 변수의 스코프, 실행 컨텍스트, 렉시컬 환경과도 관련있다. 3. 가비.. 2023. 10. 3. data type, let vs var vs const, hoisting global let , let(mutable data type) // 2.Variable let globalName='global name'; { let name='duduri'; console.log(name); // duduri name='hello'; console.log(name); // hello } console.log(name); // console.log(globalName); // global name globalName = 전역변수 ( 애플리케이션이 끝날때까지 메모리에 저장되어있다) { .. } 블럭밖에서 name 접근할 경우 값이 안나온다 (블록스코프) { .. } 블럭밖에서 globalName 접근할 경우 값이 나온다 var 를 지양하자 (호이스팅) { age=4; var age; .. 2022. 6. 11. async vs defer 만약 js 파일이 크다면? 사용자가 웹사이트를 보기까지 시간이 많이 걸린다 스크립트는 head에 포함하는것은 좋지 않은방법 안에 js 다운받을때 사용자가 HTML 빨리보는 장점은 있다 자바스크립트 이용해서 의미있는 데이터를 받아오거나 DOM 요소를 이쁘게 꾸며줄때 사용자가 정상적인 웹페이지를 받기까지 시간이 걸린다 asyn 은 boolean 속성값 선언하는것 만으로도 True 설정 병렬로 js 파일을 다운로드하고 다운로드 완료되면 HTML 파싱을 멈추고 다운로드된 js 파일을 실행 에서 병렬적으로 다운받기 때문에 다운받는시간을 절약할수 있다 HTML이 파싱되기전에 실행되기 때문에 QuerySelector() 이용해서 DOM 요소조작할때 원하는요소의 HTML이 아직정의가 안되있을수 있다 js 다운 명령만 .. 2022. 5. 30. 이전 1 다음 728x90
