이야기 정리

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. 위 예제를 보면 스크롤을 내리..

자바스크립트를 공부하다보면 꼭 나오는 것 중 하나가 바로 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) 사이트..

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

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

while문이란? 조건식이 true일 때까지 반복하는 문법이다. 오직 true일 때만 실행되고, false일 때는 조건문을 반복 후 실행하지 않고 넘어간다. for문과 달리 횟수가 아닌 조건만을 지정하기 때문에 횟수를 몰라도 사용할 수 있다. 때문에 반복 횟수를 모르거나(무한루프 등), 특정 조건 달성때까지 반복해야하는 함수를 쓸 때 유용하다. while(true)로 설정할 시 무한 루프를 의미한다. 조건을 별도로 설정할 시 조건 달성 후 while문을 중단한다는 차이점이 있다. // 사용법 while (/*조건*/) { //콜백할 코드 } Do While 문이란? While문의 변형문 반복 시킬 조건이 true인지 확인하기 전에 코드를 먼저 코드를 실행한 다음, 조건이 true이면 반복한다. 때문에 조..

이번에는 useNavigate의 사용법과, 이를 이용해 값을 가져오는 방법, 그리고 리액트에서 페이지 뒤로가기 버튼을 만드는 간단한 방법에 대해 설명할 것이다. useNavigate란? 조건을 만족했을 시(로그인, 양식 제출 등), 혹은 특정 이벤트 발생 시 url을 조작할 수 있는 Hook 특정 조건을 달 수 있다는 점에서 Link와 차이점이 있다. Link는 a태그라고 생각하면 편하다. react v6부터 useHistory의 대체제로 등장했다. useHistory에서 사용했던 기능을 useNavigate에서도 사용할 수 있는 것이다. 기본 사용법 react router dom을 설치한 후 다음과 같이 코드를 작성한다. 설치 코드 : npm install react-router-dom import {..

얼마전 트위터에서 한 유저가 공유한 코드가 있었다. 새로고침을 해도 다크 모드가 유지되는 코드였는데, 이 코드에 사용된 것이 localStorage였다. (해당 유저의 코드는 최하단 참조란에 링크를 넣었다.) localStorage을 사용하는 방법과 이를 이용해 다크 모드를 만드는 방법 두가지에 대해 알아보려 한다. 다음은 완성된 코드다. See the Pen Dark Mode by beren-105 (@beren-105) on CodePen. localStorage란? 브라우저의 key-value 값을 Storage에 저장할 수 있으며, 저장된 데이터는 세션간 공유된다. 즉, 세션이 바뀌어도 저장된 데이터 값은 유지된다. 같은 컴퓨터에서 같은 브라우저를 사용하는 이상 브라우저에 저장되는 것이다. 브라우..

1. 문자열을 배열로 반환하기 split() 문자열을 잘라 배열로 변환하는 메서드 숫자는 문자열로 변환한 뒤에 사용할 수 있다. string.split() string.split(separator) string.split(separator, limit) separator : 끊어야할 부분을 나타내는 문자열(띄어쓰기, 반점 등등) 미 입력시 문자열 전체를 배열로 리턴한다. limit : 최대 분할 수 / 몇개까지 분할할 것인가를 나타낸다. 리미트 이상의 값은 버린다. 사용예시 const string = 'FooBarBaz' const a = string.split() // ['FooBarBaz'] const c = string.split(" ") // ['FooBarBaz'] const b = string..

개발공부를 시작하면 DOM이란 단어를 쉽게 볼 수 있다. 그렇다면 DOM이란 무엇이고 무슨 뜻일까? DOM과 브라우저를 비롯해 웹 사이트의 간단한 개념에 대해 알아볼 것이다. 웹사이트 웹 사이트란? 일반 URL을 통해 보이는 웹 페이지를 의미한다. HTML, CSS JavaScript로 이뤄져있다. HTML, CSS JavaScript의 차이 HTML : HyperText Markup Language 브러우저에게 웹 사이트의 요소들이 어떻게 구성되어 있는지 알려주는 역할, 사람으로 치자면 뼈대에 해당한다. CSS : Cascading Style Sheets 웹 사이트의 요소들을 꾸며주는 역할로, 사람의 외관이라 생각하면 된다. JavaScript 브라우저에 다양한 일을 수행하고, 웹 사이트의 요소를 생성..