이야기 정리

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 개발동기 피아노 소리는 좋아하지만, 나는 피아노를 칠 줄 알기는 커녕 악보를 읽을 줄도 모른다. 악보를 읽으려면 도레미파솔라시도를 하나하나 세야하니 피아노를 치는 것은 꿈도 못 꿀 일이다. 나와 같은 사람들이 편하게 피아노를 칠 수 있도록 피아노와 악보에 모두 계이름이 적혀 있는 사이트가 있었으면 했다. 또, 피아도도 칠 줄 모르지만 건반이 도레미파솔라시도 한줄이면 재미가 없었기에 높은 음 한줄과 흑건도 사용이 가능했으면 좋겠다는 마음으로 제작했다. 필요한 기능 키보드를 누르거나, 건반을 클릭 했을 시 소..

위 사진처럼 웹 사이트에서는 메인 페이지면 메인 페이지에 색상이 들어오고, 테마찾기를 클릭하면 테마찾기에 불이 들어온다. 만약 App 하나에서 작업했다면 클릭 이벤트로 처리할 수 있겠지만, 보통은 여러 컴포넌트 파일이 있고, 그걸 App에서 합치는 방식으로 작업할 것이다. 나의 경우 location을 사용했다. Home 삼항연산자를 사용해 경로가 지정한 문자열과 일치할 시 active라는 클래스를 갖게 하고, 아닐 시 null을 출력했다. 아래는 전체 코드다. import './App.css'; import { BrowserRouter as Router, Routes, Route, Link, Outlet, useParams } from "react-router-dom" import { useLocatio..

제주관상 사이트, 오늘의 제주 사이트 바로가기 : https://todays-jeju.netlify.app/ 코드 보기 : https://github.com/beren-105/jeju_tourism_web 개발동기 '오늘의 제주'는 사용자가 제주도의 날씨를 확인하고 원하는 관광지를 찾을 수 있는 플랫폼이다. "제주도에 여행왔는데 오늘은 어디를 갈까?" 여행에 있어 목적지를 정하는 것은 선택이 아닌 필수다. 목적지를 정하려면 많은 정보가 필요하다. 어디에 무엇이 있는지, 그게 어떤 것인지도 알아야하고 또, 그 장소에 어울리는 날씨인지도 중요하다. 오늘의 제주는 사용자가 제주도의 정보를 사이트 하나로 알 수 있는 편의성을 제공하기 위해 개발되었다. 제주도에서 오늘의 일정을 계획하려는 관광객을 주 타겟으로 삼..

:has 특정 요소를 가진 태그를 선택한다. :not 특정 요소가 없는 태그를 선택한다. 설명만 봐서는 어디에 써야할지 난해한 가상 클래스지만, 실제 활용된 사례를 보면 무긍무진한 가능성을 확인할 수 있다. 지원브라우저가 사파리와 크롬밖에 없다는 단점이 있지만, 사용하기에 따라서는 자바스크립트 없이 CSS만으로 재밌는 것들을 만들 수 있어 간단히 다뤄보려고 한다. 활용 1 : 디자인이 비슷하나, 특정 요소가 없거나/더해질 때 See the Pen CSS :has, :not (1) by beren-105 (@beren-105) on CodePen. 두개의 카드 디자인이 있다. 하나는 이미지가 있고, 하나는 이미지가 없는 대신 상단에 border의 색상이 변경됐다. 본래라면 각각 클래스를 다르게 설정하며 따..

그동안 자잘한 프로젝트를 만들며 배운 메서드들을 복습하기 위해 애니메이션 효과 없이 간단하게 두더지 잡기 게임을 만들었다. 다른 프로젝트들이 기본 2,3일 소요된 걸 생각하면 하루만에 완성한 간단한 프로젝트다. 필요한 기능 n초마다 두더지가 랜덤한 위치에 나타나고, 다시 사라지기 두더지를 클릭하면 점수가 오르게 하기 시간이 종료되면 승리/패배여부와 리셋버튼 나타내기 제작기간 약 3시간 완성코드 마땅한 이미지가 없어 두더지 대신 여우 이미지를 썼다. 본의아니게 여우잡기가 돼버렸다. See the Pen Untitled by beren-105 (@beren-105) on CodePen. 깃허브에서 전체 코드 보기 https://github.com/beren-105/Mini-Project/tree/main/7..

개발 동기 사이트 위젯이나, 핸드폰 어플로 흔한 것 중 하나가 바로 캘린더다. 날짜를 확인하는 것은 매일 일어나는 일상적인 일이니 당연하다. 그러나 흔하다고 해서 캘린더가 마냥 단순하지는 않다. 캘린더 마다 기능이나 특색이 다르기 때문이다. 단순히 날짜만 표시하는 캘린더가 있는가 하면, 어떤 캘린더는 일정을 추가할 수도 있다. 영화 예매 등에 쓰이는 캘린더라면 영화가 몇시에 있는지도 나타날 것이다. 이렇듯 캘린더의 변화는 무긍무진하다. 먼저 간단한 캘린더를 만들 것이다. 타입스크립트를 처음 쓰는 만큼 많은 기능을 추가할 수 없었기 때문이다. 캘린더에 날짜를 나타내고, 다른 월로 이동하는 기능을 만들려한다. 사용 툴 HTML, CSS TypeScript 필요한 기능 현 날짜에 맞추어 달력을 출력하기 버튼 ..