이야기 정리

getBoundingClientRect()란? element의 크기, 위치 정보를 담은 DOMRect 객체를 반환한다. y, x, top, right, bottom, left, width, height 등의 속성을 가지고 있다. width, height 는 element의 가로 세로 값을 나타낸다. y와 top 값은 같지만, bottom의 경우 height값을 포함한 값이다. x와 left 값은 같지만, right의 경우 width 값을 포함한 값이다. 글보다는 그림을 보면 한번에 이해하기 쉽다! 예제 : getBoundingClientRect()을 활용한 스크롤 애니메이션 See the Pen 스크롤이벤트 by beren-105 (@beren-105) on CodePen. 위 예제를 보면 스크롤을 내리..

개발 동기 이전에 '오늘의 제주' 사이트를 개발할 때 오토캐러셀은 편의상 라이브러리를 활용했다. 그러나 라이브러리만 쓰고 넘어가는 것보다 라이브러리에 있던 기능을 내가 아는 오토캐러셀에 추가해보는 것이 좋다고 생각해 만들게 됐다. 또, '오늘의 제주' 때에는 타입스크립트를 활용하지 않았기에 이번에는 타입스크립트를 사용해 타입을 명확히하며 오토캐러셀이 정확히 어떤 원리로 돌아가는지 살피며 코드를 만들었다. 필요기능 3초마다 자동으로 넘어가기 버튼 클릭 시 이전, 다음으로 넘어가기 하단 도트버튼 클릭 시 해당 번호의 슬라이드로 넘어가기 슬라이드에 마우스를 올리는 동안 슬라이드는 정지해야한다. -> 사용자가 내용을 읽기 편하게 하기 위해 완성코드 See the Pen Carousel by beren-105 (..

자바스크립트를 공부하다보면 꼭 나오는 것 중 하나가 바로 this다. this는 호출에 따라 의미가 달라져 헛갈리기 때문에 간단한 예시들과 함께 this가 필요한 이유부터 살펴보려 한다. this는 왜 필요할까? 먼저 생성자 함수를 생각해보자. 생성자 함수를 만드는 과정은 다음과 같다. 생성자 함수를 정의한다. 프로퍼티나 메서드를 추가한다. new를 사용해 인스턴스를 생성한다. 문제는 2번에서 프로퍼티나 메서드를 만들 때 3번에 있는 인스턴스의 값이 필요하다. 하지만 정의한 시점에서는 인스턴스를 가리키는 식별자를 알 수 없다. 이 때문에 this가 필요하다. // 1,2번 과정 : 여기서는 ??? 안에 뭐가 들어올지 알 수가 없다. function Obj(x, y) { ???.x = x ???.y = y..

얼마전 피아노 사이트를 제작하던 중 CORS 에러를 맞닥드려 CORS가 대체 무엇인지 알아보았다. 우선 CORS를 알기 위해서는 URL과 SOP에 대해 알아야한다. 1. URL 구성 프로토콜 (Protocol(Scheme)) http : 하이퍼미디어 문서(HTML 등을)를 전송하기 위한 프로토콜로, 웹 브라우저와 웹 서버간 통신을 위해 설계되었다. https :기본 HTTPS보다 안전해진 버전. 토큰을 암호화하여 제3자가 개인 정보를 볼 수 없게 막고, 접속한 사이트가 믿을 만한 사이트인지 확인해줘 해킹 사이트를 예방한다. 호스트 (Host) 사이트 도메인 포트 (Port) 포트 번호로, 웹 서버는 80번 포트를 사용하는 것이 표준이다. 보통 웹 사이트 url에는 생략되어 있다. 패스 (Path) 사이트..

사이트 보기 : https://palying-piano.netlify.app/ 깃허브 보기 : https://github.com/beren-105/Mini-Project/tree/main/8_Piano 개발동기 피아노 소리는 좋아하지만, 나는 피아노를 칠 줄 알기는 커녕 악보를 읽을 줄도 모른다. 악보를 읽으려면 도레미파솔라시도를 하나하나 세야하니 피아노를 치는 것은 꿈도 못 꿀 일이다. 나와 같은 사람들이 편하게 피아노를 칠 수 있도록 피아노와 악보에 모두 계이름이 적혀 있는 사이트가 있었으면 했다. 또, 피아도도 칠 줄 모르지만 건반이 도레미파솔라시도 한줄이면 재미가 없었기에 높은 음 한줄과 흑건도 사용이 가능했으면 좋겠다는 마음으로 제작했다. 필요한 기능 키보드를 누르거나, 건반을 클릭 했을 시 소..