[Javascript] let/const/ var

자바스크립트 변수를 선언하는 방법에는 var, let, const 3가지 방법이 있다. 이 세 가지에 대해 알아보자. varvar 은 예전부터 쓰이던 자바스크립트 변수 선언 방식이다. 그러다 보니 문제점도 많다..(?) 재선언 가능var title = "제목1";var title = "제목2";변수를 선언했는데 뒤에서 같은 변수명으로 또 선언이 가능하다. 이러한 특징은 협업할 때 문제가 생기기 십상이다. 누군가가 중요한 데이터를 넣을 변수를 선언했는데 다른 누군가가 같은 이름으로 변수를 선언하고 앞선 데이터와는 다른 데이터를 넣었다고 생각해 보자. 나중에 선언된 변수명에 데이터가 들어가고 있는 상황이라 심각한 일이 벌어질 수도.. 있다. 후선언 가능예시1console.log(title);var title..

• format_list_bulleted Javascript
• · 2024. 7. 29.
• textsms

Promise

Promise 란?Promise 객체는 비동기 작업을 다루기 위해 만들어졌으며, 비동기 작업의 성공 혹은 실패 후 결과를 처리하기 쉽게 해준다. 또한 비동기 작업이 끝나고 실행할 콜백을 등록할 수 있는 메서드를 제공한다. Promise 객체가 탄생하기 전에는 비동기 처리를 위해 콜백함수를 사용했는데, 일명 콜백 헬로 불리는 문제로 인해 가독성이 나쁘고 에러 처리가 분산되고 흐름의 추적하기 어려워지는 등 불편함이 있었는데 이러한 불편함을 보완할 수 있는 것이 Promise 이다. Promise 상태Pending : 아직 대기 중인 상태Fulfilled : 비동기 작업이 성공적으로 완료된 상태이며, resolve 로 인해 pending 상태에서 fulfilled 상태로 변함Rejected : 비동기 작업이 ..

• format_list_bulleted Javascript
• · 2024. 7. 24.
• textsms

스크롤 이벤트 발생 시 스크롤 진척도 표시

스크롤을 내리면 상단에 스크롤 진척도 효과가 나타나는 것을 본 적이 있을 거다. 나는 주로 브런치에서 많이 봤다. 팀 프로젝트에서 해당 기능을 구현하기로했다. 내가 맡은 기능은 아니지만 구현해보고싶어서 따로 공부하는 시간을 가졌다. 여기서 중요한 것은 '스크롤 진척도 구현하는 법' 검색해서 따라하는 것 말고 키워드 중심으로 검색해서 스스로 만들고 다른 사람이 구현한 코드와 비교해보는 것!!⭐️ 코드HTML /* 막대바 */ /* 화면 높이를 늘리기 위해 추가 */CSSbody { margin: 0;}.bar { position: fixed; background-color: orange; height: 30px;}.box { font-size: 40px; height: 3000px;}Javasc..

• format_list_bulleted Javascript
• · 2024. 7. 19.
• textsms

스크롤 특정 영역 감지

window.addEventListener("scroll", function() {}) 이 아닌 특정 요소에서 스크롤을 발생할 때 위치를 확인해보는 것을 알아보자. 약관같은 것을 보다가 맨 아래까지 다 읽었을 경우에만 다음페이지로 넘어갈 수 있는 기능을 본적이 있을 것이다. 특정 요소에서 스크롤 시 위치를 어떻게 확인하는지 알아보고, 원하는 위치에 도달 할 시 이벤트 주는 것도 해보도록 하자. 코드HTML 스크롤을 맨 아래까지 이동해주세요!CSS .scroll-Box { width: 300px; height: 200px; overflow: scroll; border: 1px solid black; padding: 10px; } .content { height: 6..

• format_list_bulleted Javascript
• · 2024. 7. 17.
• textsms

버튼 클릭시 스크롤 맨 위로 이동

프로젝트를 진행하면서 위로가기 버튼을 구현하게 되어서 해당 기능에 대해 공부를 해보았다.  코드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") ..

• format_list_bulleted Javascript
• · 2024. 7. 16.
• textsms

[Javascript] Array.prototype.join()

join()array.join(separator)join() 메서드는 배열의 모든 요소를 지정된 구분 문자열로 구분하여 연결한 새 문자열을 만들어 반환한다.  매개변수배열의 인접한 요소의 각 쌍을 구분하는 문자열, 매개변수가 생략되면 배열 요소는 쉼표로 구분된다. 반환 값배열의 모든 요소들을 연결한 하나의 문자열을 반환한다. 특징배열에 항목이 하나만 있는 경우, 해당 항목은 구분 기호를 사용하지 않고 반환된다.배열의 길이가 0이면 빈 문자열을 반환한다. 예시const elements = ["A", "B", "C"];console.log(elements.join()); // A,B,Cconsole.log(elements.join("")); // ABCconsole.log(elements.join("..

• format_list_bulleted Javascript
• · 2024. 6. 5.
• textsms