자바스크립트 변수를 선언하는 방법에는 let, const, var 3가지 방법이 있다. 이 세 가지에 대해 알아보자. constconst 는 상수이다. 상수란 값이 변하지 않고 고정된 값이다. 즉, 변하고 싶지 않은 값들을 만들 때 쓴다. const title = "제목";title = "제목2";>> TypeError: Assignment to constant variable.title 에 "제목2" 라고 다른 값을 할당하는 시도를 했을 때 TypeError 가 발생한다. varvar 은 예전부터 쓰이던 자바스크립트 변수 선언 방식이다. 그러다 보니 문제점도 많다..? 재선언 가능var title = "제목1";var title = "제목2";변수를 선언했는데 뒤에서 같은 변수명으로 또 선언이 가능하다..
Promise 란?Promise 객체는 비동기 작업을 다루기 위해 만들어졌으며, 비동기 작업의 성공 혹은 실패 후 결과를 처리하기 쉽게 해준다. 또한 비동기 작업이 끝나고 실행할 콜백을 등록할 수 있는 메서드를 제공한다. Promise 객체가 탄생하기 전에는 비동기 처리를 위해 콜백함수를 사용했는데, 일명 콜백 헬로 불리는 문제로 인해 가독성이 나쁘고 에러 처리가 분산되고 흐름의 추적하기 어려워지는 등 불편함이 있었는데 이러한 불편함을 보완할 수 있는 것이 Promise 이다. Promise 상태Pending : 아직 대기 중인 상태Fulfilled : 비동기 작업이 성공적으로 완료된 상태이며, resolve 로 인해 pending 상태에서 fulfilled 상태로 변함Rejected : 비동기 작업이 ..
스크롤을 내리면 상단에 스크롤 진척도 효과가 나타나는 것을 본 적이 있을 거다. 나는 주로 브런치에서 많이 봤다. 팀 프로젝트에서 해당 기능을 구현하기로했다. 내가 맡은 기능은 아니지만 구현해보고싶어서 따로 공부하는 시간을 가졌다. 여기서 중요한 것은 '스크롤 진척도 구현하는 법' 검색해서 따라하는 것 말고 키워드 중심으로 검색해서 스스로 만들고 다른 사람이 구현한 코드와 비교해보는 것!!⭐️ 코드HTML /* 막대바 */ /* 화면 높이를 늘리기 위해 추가 */CSSbody { margin: 0;}.bar { position: fixed; background-color: orange; height: 30px;}.box { font-size: 40px; height: 3000px;}Javasc..
window.addEventListener("scroll", function() {}) 이 아닌 특정 요소에서 스크롤을 발생할 때 위치를 확인해보는 것을 알아보자. 약관같은 것을 보다가 맨 아래까지 다 읽었을 경우에만 다음페이지로 넘어갈 수 있는 기능을 본적이 있을 것이다. 특정 요소에서 스크롤 시 위치를 어떻게 확인하는지 알아보고, 원하는 위치에 도달 할 시 이벤트 주는 것도 해보도록 하자. 코드HTML 스크롤을 맨 아래까지 이동해주세요!CSS .scroll-Box { width: 300px; height: 200px; overflow: scroll; border: 1px solid black; padding: 10px; } .content { height: 6..
프로젝트를 진행하면서 위로가기 버튼을 구현하게 되어서 해당 기능에 대해 공부를 해보았다. 코드HTML 스크롤 내려갑니다.스크롤 내려갑니다.위로가기CSS .header { background-color: green; width: 100%; height: 50px; } .main { width: 100%; height: 2000px; font-size: 50px; } .scroll-top-btn { position: fixed; bottom: 40px; right: 40px; width: 100px; height: 50px; }Javascript document .getElementById("scroll-top-btn") ..
let title = "어린왕자";위와 같이 변수가 할당됐을 때, 메모리에 어떤 과정을 통해 저장이 되는지 알아보았다. 변수 선언 및 메모리 할당 과정1. 변수 선언 let 키워드로 title 변수 선언한다.자바스크립트 엔진은 title 변수를 메모리의 특정 위치에 저장한다.이 시점에 변수는 undefined 로 초기화된다! 😄2. 메모리 할당"어린왕자" 를 별도의 메모리 영역에 저장한다.그 메모리는 힙(Heap) 영역!3. 변수 값 할당title 변수에 "어린왕자" 문자열의 메모리 주소를 할당한다.위의 과정을 통해 드디어..! title 변수는 힙 영역에 저장된 문자열 "어린왕자"를 가리키게 된다. 메모리 구조스택(Stack) 메모리변수 title 의 선언과 초기화가 스택 메모리에 저장한다.* 참고로..