728x90 반응형 JavaScript39 [JavaScript] 변수 상수 (var, let, const) ✍️ Summaryvar, let, const 특징 중복선언재할당스코프 (Scope)호이스팅 (Hoisting)전역객체프로퍼티var가능가능전역 스코프(Global Scope)함수 스코프(Function Scope)호이스팅 시 undefined로 변수 초기화(호이스팅 수행)할당let불가능가능블록 스코프(Block Scope)브라켓 {} 내부에서 선언된 변수는 내부에서만 사용이 가능하다.선언단계 - TDZ - 초기화 단계 - 할당 단계로 분리되어 진행(호이스팅 수행)undefinedconst불가능불가능블록 스코프(Block Scope)브라켓 {} 내부에서 선언된 변수는 내부에서만 사용이 가능하다.초기화 이전 접근 시ReferenceError발생(호이스팅 수행)undefinedvar [변수]- 변수 선.. 2024. 6. 4. [Spring Boot] webjars 사용하기 (bootstrap 의존성 추가) 예전에 프로젝트를 진행할 때는 bootstrap파일을 다운받아 사용하는 방식으로 프로젝트를 진행하였다.그런데 이 경우 배포할 때 해당 정적 파일도 함께 배포해야 했다. 반면 webjars를 사용하면 jar를 배포하는 것으로 해당 파일에 접근할 수 있게 된다.또한 webjars는 maven이나 gradle을 통해 의존성을 관리할 수 있다는 장점이 있다.그럼 직접 적용해보자.의존성 추가 (pom.xml) org.webjars bootstrap 5.1.3 org.webjars jquery 3.6.0 스프링부트는 정정 콘텐츠의 버전은 관리하지 않으므로 버전 정보도 입력해줘야 한다.css 적용파일 경로는 외부라이브러리 경로에서 찾자!/resources/webjars/boo.. 2024. 4. 30. [JavaScript] ==와 ===의 차이 ● == 연산자두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환한 후 값을 비교합니다.ex)10 10 // true10 '10' // truetrue 1 // truetrue '1' // truetrue 'true' // falsenull undefined // true 10 '10'→ 두 피연산에서 하나가 숫자형이고 다른 하나가 문자열이면, 문자열을 숫자로 변환 후 값을 비교합니다. true 1→ 두 피연산자에서 불리언 값이 존재하면, 불리언 값을 1로 변환 후 값을 비교합니다. true '1'→ 불리언 값을 1로 변환하면, 1=='1' 이 되는데, 문자열 '1'을 숫자로 변환 후 값을 비교합니다.즉, 1==1 로 비교되며, true를 반환합니다. true 'true'→ 불리언.. 2023. 3. 13. [JavaScript] 자바스크립트 비동기 처리 원문 : ⭐️🎀 JavaScript Visualized: Promises & Async/AwaitJS 코드를 다루면서 예상대로 동작하지 않은 적이 있나요? 아마 함수가 무작위로 예상되지 않는 시간에 실행되거나 실행이 지연되었을 겁니다.ES6에서 도입된 Promise는 이런 일을 다룰 새롭고 멋진 기능입니다!수 년전의 고민이 해결되고 잠 못 이루는 밤은 다시 한 번 애니메이션을 만들 시간을 주었습니다. 왜 Promise를 사용해야 하고, 어떻게 동작하며, 어떻게 가장 현대적인 방식으로 사용할 수 있을까요?만약 자바스크립트 이벤트 루프에 관한 이전 게시물을 읽지 않았다면, 먼저 읽어보는게 도움이 될겁니다.콜스택, 웹 API, 큐에 대한 기본적인 지식을 바탕으로 이벤트 루프에 대해 다시 한 번 다룰 예정입니.. 2023. 3. 13. [JavaScript] 문서와 리소스 로딩 (DOMContentLoaded, load, beforeunload, unload) 참고자료 : https://ko.javascript.info/onload-ondomcontentloaded DOMContentLoaded, load, beforeunload, unload 이벤트 ko.javascript.info HTML 문서의 생명주기에 3가지 주요 이벤트 관여● DOMContentLoaded브라우저가 HTML을 전부 읽고 DOM트리를 완성하는 즉시 발생이미지 파일 / 스타일시트 등의 기타 자원은 기다리지 않는다.● loadHTML로 DOM트리를 만드는게 완성되었을 뿐만 아니라이미지, 스타일시트 같은 외부자웝도 모두 불러오는 것이 끝났을 때 발생● beforeunload / unload사용자가 페이지를 떠날 때 발생 3가지 이벤트는 다음과 같은 상황에서 활용이 가능 ● DOMConte.. 2023. 3. 10. [JavaScript] 자바스크립트 window 객체 WindowWindow 인터페이스는 DOM 문서를 담은 창을 나타냅니다. document 속성이 창에 불러온 DOM 문서를 가리킵니다. 반대로, 주어진 문서의 창은 document.defaultView를 사용해 접근할 수 있습니다.JavaScript 코드에 노출된 전역 변수 window는 현재 스크립트가 작동 중인 창을 나타냅니다.Window 인터페이스는 다양한 함수, 이름공간, 객체, 생성자가 머무는 장소입니다. 그 중엔 사용자 인터페이스로서의 창 개념과는 직접 관련되지 않은 것도 존재하며, 대신 전역적으로 접근할 수 있어야 하는 항목에 적합합니다. 많은 수의 항목이 JavaScript 참고서와 DOM 참고서에 문서화되어 있습니다.탭 기능이 있는 브라우저에서는 각각의 탭을 각각의 Window 객체로 나.. 2023. 3. 10. [JavaScript] DOM 객체와 이벤트 처리 예제를 통해 DOM event 시스템 알아보기 Explore DOM EventsA visualizer to help you learn how the DOM Event system works through explorationdomevents.dev 이벤트 전달과 DOM 이벤트 처리정의특정 DOM 에서 이벤트가 발생하면 해당 DOM의 dispatchEvent() 라는 함수를 통해서 이벤트를 전달한다.이벤트 전달은 propagation path라는 전파 경로에 따라서 수행된다.이벤트 전달에 관한 이미지이벤트 전달 순서1) 이벤트 캡처단계이벤트 객체가 window 객체로부터 대상의 부모까지 순서대로 전달되는 단계2) 이벤트 대상단계이벤트 객체가 이벤트 대상에 도달하는 단계3) 이벤트 버블단계이벤트 객체가 대상.. 2023. 3. 10. [JavaScript] 브라우저 이벤트, 이벤트 프로퍼티, 이벤트 핸들링 참고자료 : https://ko.javascript.info/events 이벤트 기초 ko.javascript.info 2023. 3. 10. [JavaScript] 자바스크립트 async와 await의 개념과 사용법 목차들어가며async & await는 뭔가요?개발자에게 읽기 좋은 코드란?그래서 읽기 좋은 코드와 async & await가 무슨 상관이죠?async & await 맛보기async & await 적용된 코드와 그렇지 않은 코드async & await 기본 문법async & await 간단한 예제async & await 실용 예제async & await 예외 처리마무리글보다 더 쉽게 배우는 온라인 강좌이해가 잘 안되시나요? 방송에서 직접 물어보세요 :)[Javascript] 비동기, Promise, async, await 확실하게 이해하기들어가며안녕하세요. 오랜만에 글을 올립니다. 작년에 Promise 글을 작성할 때까지만 해도 Async 편을 작성하는 데까지 이렇게 오랜 시간이 걸릴 거라고는 생각 못 했.. 2023. 3. 10. 이전 1 2 3 4 5 다음 728x90 반응형
