본문 바로가기

전체 글30

[VS Code] HTML, CSS, Javascript 실시간 반영 확장 프로그램 - Live Server 프론트엔드 개발할 때 html 파일 등을 수정할경우 직접 새로고침(F5)하여 반영사항을 체크해도 되지만 바로바로 반영이 되면 편하다. 이런 기능은 VSCode의 확장프로그램인 "Live Server"를 설치하여 쉽게 사용할 수 있다. 확장 프로그램 설치 후 우측 하단의 [Go Live]를 눌러주면 가상서버가 포트 5500번으로 올라가고 브라우저가 실행된다. index.html의 내용을 수정 후 저장하면 바로바로 수정사항이 반영되는 것을 확인할 수 있다. 2023. 2. 4.
자바스크립트와 ECMAScript 차이점 ECMAScript란 자바스크립트의 국제 표준 기구인 ECMA에서 정한 ECMA-262번 표준 사양을 말한다. ECMAScript는 자바스크립트의 문법을 규정한다. 각 브라우저의 제조사는 ECMAScript 사양을 준수하여 자바스크립트 엔진을 구현해야 한다. 자바스크립트는 ECMAScript를 포함한 더 넓은 개념이다. 자바스크립트는 ECMAScript 를 포함하고, 클라이언트 사이드 Web API (DOM, Web Storage, WebWorker 등)까지 포함하는 개념이다. Web API | MDN 웹 코드를 작성한다면 많은 API를 사용할 수 있습니다. 아래 목록은 웹 앱이나 웹 사이트를 만들 때 사용할 수 있는 모든 인터페이스(객체의 유형)입니다. developer.mozilla.org Web A.. 2023. 2. 4.
자바스크립트 역사 1995년 넷스케이프사에서 탄생 1996년 마이크로소프트에서 JScript 출시 브라우저에 따라 렌더링이 다르게 되는 크로스 브라우징 이슈 발생 1997년 (표준화기구)ECMA 스크립트 탄생 - 브라우저 크로스 브라우징 이슈 해결 1999년 Ajax(Asynchronous Javascript and XML) 등장 기존에는 브라우저가 서버로부터 Full HTML 코드를 받아서 렌더링하였음. (렌더링 속도, 부드러운 화면전환 이슈 존재) Ajax 기능의 등장으로 필요한 부분만 렌더링이 가능해짐 2006년 JQuery 등장 다소 번거로웠던 DOM을 더욱 쉽게 제어 가능해짐. 2008년 V8 자바스크립트 엔진 등장 브라우저의 자바스크립트 처리속도가 빨라짐 그에 따라 서버에서 수행되던 로직이 클라이언트로 이전됨 .. 2023. 2. 4.
크롬 익스텐션 튜토리얼 (9) Tabs Manager - chrome.local.storage 활용하기 목표 : 사용자로부터 [시작하기] URL를 입력받고 이를 크롬 익스텐션 로컬스토리지에 저장 및 관리한다. 결과물 미리보기 소스코드 : https://github.com/junsungc/chrome-extensions-samples/commit/f4afe0eb4dfc0382f4f881104848d16049bf0b6e 변경점 요약 > 임의로 요약된 diff 파일입니다. 주석 위주로 읽어보시면 파악이 빠릅니다. > 자세한 소스코드가 궁금하다면 위 github 링크를 참조 부탁드립니다. diff --git a/tutorials/tabs-manager/popup.html b/tutorials/tabs-manager/popup.html index 6072841..45d9c96 100644 --- a/tutorial.. 2023. 1. 15.
크롬 익스텐션 튜토리얼 (8) Tabs Manager - 탭 기능 만들기 목표 : [시작하기], [그룹화하기] 기능을 탭으로 구분한다. 결과물 미리보기 소스코드 : https://github.com/junsungc/chrome-extensions-samples/commit/44f06d11dc7f67f097909291a4b59e862f5d5ef9 변경점 요약 > 임의로 요약된 diff 파일입니다. 주석 위주로 읽어보시면 파악이 빠릅니다. > 자세한 소스코드가 궁금하다면 위 hithub 링크를 참조 부탁드립니다. diff --git a/tutorials/tabs-manager/popup.html b/tutorials/tabs-manager/popup.html index 1c86e8b..6072841 100644 --- a/tutorials/tabs-manager/popup.htm.. 2023. 1. 7.
크롬 익스텐션 튜토리얼 (7) Tabs Manager - 새 창에 지정한 URL 띄우기 목표 : 새 창에 지정한 URL 리스트를 띄울 수 있는 지 확인한다 이번 포스팅은 새창에 URL이 띄우는게 가능한 지 프로토타입 모델의 테스트 과정을 기록하였다. 결과물 미리보기 소스코드 : https://github.com/junsungc/chrome-extensions-samples/commit/58f1e27189d2532358ec90747568e9b5e79e26fa 58f1e27189d2532358ec90747568e9b5e79e26fa diff --git a/tutorials/tabs-manager/popup.html b/tutorials/tabs-manager/popup.html index 04d2600..1c86e8b 100644 --- a/tutorials/tabs-manager/popup... 2023. 1. 6.