HOME
리액트 마우스 드래그 가능한 요소 만들기 / 기하 프로퍼티
리액트 마우스 드래그 가능한 요소 만들기 / 기하 프로퍼티
2024.04.27자식 요소의 콘텐츠가 부모 요소보다 크다면, 부모 요소에 스크롤이 생기고, 마우스 휠로 스크롤할 수 있다. 마우스 휠 외에도 click / move 이벤트를 이용해 마우스 드래그로 스크롤하도록 만들 수 있다. TL;DR❶ 마우스를 클릭했을 때`clientX`, `clientY` (뷰포트 기준)좌표와, 요소의 스크롤 위치 `scrollLeft`, `scrollTop` 저장클릭 상태 `true`로 변경(CSS) `cursor: grabbing user-select: none` ❷ 클릭한 상태에서 마우스를 이동(드래그)했을 때①이동을 멈춘 지점(clientX/Y)과 ②마우스를 클릭한 지점**(clientX/Y)**을 뺀 값 계산 — 스크롤한 범위(요소의 현재 스크롤 위치)와 (스..
자바스크립트 URL 객체 / searchParams
자바스크립트 URL 객체 / searchParams
2024.04.27URL 객체 현재 페이지의 URL이 아래와 같다고 가정했을 때... 참고로 %20 은 빈칸(space) 1개https://example.com/?name=Jonathan%20Smith&age=18 url 객체의 search 속성을 이용해 모든 쿼리 스트링 내용을 가져올 수 있다const url = new URL(window.location.href); // 현재 urlurl.search; // '?name=Jonathan%20Smith&age=18' name age 같은 특정 쿼리 스트링만 가져오고 싶다면 URLSearchParams 메서드를 이용하면 된다. get으로 값을 조회하고 append(기존 값에 이어붙이기) 혹은 set(기존값 교체)으로 새로운 값을 추가할 수도 있다.ur..
자바스크립트 Map / Set 자료구조
자바스크립트 Map / Set 자료구조
2024.04.27MapMap은 항상 `map` 전용 메서드(`set`, `get` 등)를 사용한다. `map[key] = 2` 형태로 사용하면 `map`을 일반 객체로 취급하므로 많은 제약이 생긴다. TL;DR❶ key-value로 이루어진 순서가 있는 컬렉션(집합) ⭐️ ❷ 삽입 순서 기억 ❸ 중복 key 불가 — 이미 존재하는 key에 대한 value를 추가하면 해당 key의 value를 덮어씀let map = new Map([['one', 1]]);map.get('one'); // 1map.set('one', 111);map.get('one'); // 111 ❹ Map 내장 메서드 forEach 지원(배열 forEach 메서드와 유사) / for of 순회 가능map.forEach((v..
세션 vs 쿠키 vs 토큰
세션 vs 쿠키 vs 토큰
2024.04.27TL;DR💡 Authentication은 인증(서버의 유저인지), Authorization은 권한부여(특정한 행동 허용) 쿠키 : HTTP 프로토콜의 무상태성(Stateless)을 보완해주는 도구다. 쿠키 자체는 인증수단이 아니다.세션 : 서버가(세션 DB) 인증정보를 가진다. 클라이언트는 서버가 쿠키에 담아 보내주는 세션 ID만 가진다.토큰 : 클라이언트가 인증정보를 가진다. 서버는 토큰이 유효한지만 확인한다.Authentication과 Authorization 차이점Authentication(인증 / 신원확인) : 현재 사용자가 누구인지 확인하는 과정. 회사 건물을 예로들면 1층 안내 데스크에서 방문자가 해당 건물에 출입할 수 있는지 여부를 확인하는 과정.Authorization..
모바일 기기를 판별하는 6가지 방법
모바일 기기를 판별하는 6가지 방법
2024.04.27navigator.userAgent브라우저 API에서 제공하는 userAgent 문자열을 확인하는 방법. userAgent는 유저 디바이스의 정보를 담고 있다. 자바스크립트에선 navigator.userAgent 속성으로 접근할 수 있다. userAgent 문자열이 mobi, android iphone 등 키워드를 담고 있다면 모바일 기기로 접속했다고 볼 수 있다. 가장 간단한 방법이지만 사용자가 직접 userAgent 값을 수정할 수 있기 때문에 100% 신뢰할 순 없다.// 방법 1// 정규식은 기본적으로 대소문자를 구분한다. i 플래그로 대소문자를 구분하지 않도록 할 수 있다if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) { //..
ES Modules 모듈 (Import / Export 시스템)
ES Modules 모듈 (Import / Export 시스템)
2024.04.26Intro1개 파일에 모든 코드가 들어간 것 보다 코드들이 잘개 쪼개져 있는게 더 좋다.모듈은 변수와 함수를 구성하는 더 좋은 방법을 제공한다.모듈을 잘 알아두면 코드를 깔끔하게 정리할 수 있다.모듈 덕분에 코드들을 작은 파일로 나눌 수 있고, import / export 할 수 있다.모듈은 함수와 변수를 모듈 스코프에 넣고, 모듈 스코프를 통해 모듈 함수 사이에서 변수를 공유할 수 있다.다이나믹 모듈을 이용하면 어플리케이션 로딩을 더 빠르게 할 수 있다. Named Exportimport { name } from "file"; 파일 혹은 모듈이 원하는 만큼의 named exports를 가질 수 있다import 하려는 이름은 export 했던 함수(변수) 이름과 같아야 ..
Git SSH 공개키 만들기 / Credential 인증 시스템
Git SSH 공개키 만들기 / Credential 인증 시스템
2024.04.26Credential 저장소 / HTTPS 프로토콜Git 리모트 저장소와 통신할 때 사용하는 프로토콜은 Git(기본 프로토콜), SSH, HTTPS 방식이 있다. Git 기본 프로토콜은 인증 기능이 미약하여 거의 사용하지 않고, 주로 SSH나 HTTPS를 사용한다. HTTPS 프로토콜을 사용하면 매번 사용자 이름과 암호를 입력해야하는 번거로움이 있는데 Git은 이를 위해 인증 정보를 저장해두고 자동으로 입력해주는 Credential 시스템을 제공한다. Credential 기능에서 제공하는 옵션은 아래 3가지가 있다. cache 모드 : 인증정보를 메모리에 임시 저장(기본 15분)store 모드 : 인증 정보를 텍스트 파일로 Disk에 저장. 사용자 홈 디렉토리에 일반 텍스트 파일로 저장되므로..
focus-within — 자식 요소가 포커스 됐을 때 부모 스타일 지정
focus-within — 자식 요소가 포커스 됐을 때 부모 스타일 지정
2024.04.25focus-within 살펴보기:focus-within은 포커스를 받은 요소 혹은 포커스를 받은 요소(주로 input 태그)를 포함하는 부모 요소를 가리킨다. input 같은 하위 요소가 focus 됐을 때 부모 요소의 스타일을 변경하고 싶을 때 사용하면 유용하다. 아래 예제에서 input 태그를 자식으로 포함하는 .wrapper 클래스 이름의 부모 요소가 있다. Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Choose text color input 태그를 선택해서 활성화되면(포커스를 받으면), 해당 input 태그를 포함하는 부모 요소인 .wrapper 클래스에 focu..
이벤트 전파(캡처링, 버블링) / 이벤트 위임 / 데이터 속성
이벤트 전파(캡처링, 버블링) / 이벤트 위임 / 데이터 속성
2024.04.25실습용 CodePen이벤트 버블링/캡처링, `stopPropagation()`, `preventDefault()`까지 모두 실습할 수 있도록 작성 See the Pen Learn Event Propagation 이벤트 전파 실습 by ColorFilter (@colorfilter) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 이벤트 전파 | Event Propagation버블링 Bubbling / 캡처링 Capturing위 코드펜 예제에서 하단에 있는 span 태그를 클릭하면 ➊ "span 영역" → ➋ "p 영역" → ➌ "div" 영역 순으로 콘솔이 찍힌다. span 영역을 클릭한 순간 브라우저가 이벤트를 ..
HTML 시맨틱 태그 Semantic Tag
HTML 시맨틱 태그 Semantic Tag
2024.04.25시맨틱 태그란?Semantic(语义)은 **"의미가 있는"**이라는 뜻. 물을 마시는 "컵", 문을 여는 "손잡이"처럼 일상 생활에서 쉽게 볼 수 있는 사물들이 각각 의미를 가지고 있는 것처럼 HTML의 여러 태그들도 각각 의미를 가지고 있다. 시맨틱 태그의 장점SEO : 제목 ``, 부제목 `` 같은 시멘틱 태그를 적절하게 사용하면 검색엔진이 해당 사이트를 더 잘 이해할 수 있기 때문에 검색 최적화에 유리하다. Accessbility(웹접근성) : 시맨틱 태그를 잘 사용하면 스크린 리더(웹페이지를 음성으로 읽어주는)나 키보드만 사용해서 웹사이트를 이용하는 사람들도 큰 문제 없이 사용할 수 있다. Maintainability : `` 태그만 사용해서 개발한 웹사이트보다 한 눈에 알아보기 쉬..
알면 유용한 자바스크립트 최신 문법
알면 유용한 자바스크립트 최신 문법
2024.04.25Numeric Separators숫자를 입력할 때 언더스코어 _를 이용해 숫자를 구분해서 가독성을 높일 수 있다. KRW 화폐처럼 자리수가 많은 숫자를 작성할 때 유용const cost = 100_000_000;console.log(cost); // 100000000 _ 언더바 한개만 사용 가능 ex) 100__000 ❌숫자 마지막엔 사용 불가 ex) 100_; ❌가장 앞 숫자가 0일땐 사용 불가 ex) 0_1; ❌ replaceAllreplaceAll(substr, newSubstr)replaceAll(substr, replacerFunction) 문자열에서 원하는 부분을 "모두" 지정한 문자로 변경할 수 있다. 정규식도 사용 가능.const sayHello = 'He..
자바스크립트 옵셔널 체이닝
자바스크립트 옵셔널 체이닝
2024.04.25옵셔널 체이닝 등장 배경비교적 새로 추가된 자바스크립트 문법으로 프로퍼티가 없는 중첩 객체를 에러없이 접근할 때 사용한다. 유저 정보를 담아두는 user 객체에 아무런 정보가 없는 상태에서 address 속성에 접근하려고 하면 아래처럼 타입 에러가 발생한다.const user = {};console.log(user.address.street);// TypeError: Cannot read property 'street' of undefined React나 Vue의 상태관리 라이브러리를 쓸 때 아직 스토어에 있는 정보를 다 불러오지 않은 시점에서 객체의 속성에 접근할 때도 비슷한 타입에러가 발생한다.// selectedMall은 스토어에서 불러올 정보// 아직 스토어에서 selectedMa..