HOME
React 리액트 드래그앤드롭 파일 업로드 구현
React 리액트 드래그앤드롭 파일 업로드 구현
2024.05.05요즘 대부분 웹사이트에서 파일을 업로드할 때 마우스로 원하는 파일을 끌어 놓는 드래그&드롭 기능을 지원한다. 리액트에선 React DnD 같은 라이브러리를 사용할 수도 있지만 HTML5에서 제공하는 드래그 드롭 API를 이용해서 직접 구현할 수 있다. 생각보다 어렵지도 않다. 기본 구조더보기export interface IFileTypes { id: number; object: File; // File 객체}const DragDrop = ( { /* ... */ },) => { const [isDragging, setIsDragging] = useState(false); const [files, setFiles] = useState([]); const fileId = useRef(0);..
CSS - width 속성 작동 매커니즘
CSS - width 속성 작동 매커니즘
2024.05.05엘리먼트의 너비를 제어하기 위해 CSS의 width 속성을 사용한다. 평소에 자주 사용하는 속성이지만 종종 생각한대로 작동하지 않을 때가 있다. width는 ➊절대값 ➋상대값 ➌키워드 크게 3가지 설정으로 구분되며, 각 설정에 따라 너비가 다르게 결정된다. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 절대값section { width: 200px; height: 200px; border: 1px solid gray;} /* 부모 */p { width: 300px; background: Khaki; mar..
타입스크립트 맵드 타입 / 유틸리티 타입 / Enum
타입스크립트 맵드 타입 / 유틸리티 타입 / Enum
2024.05.05타입스크립트의 맵드 타입(Mapped Types)은 기존 타입을 새로운 타입으로 변환해주는 문법이다. 자바스크립트의 map 배열 메서드를 타입에 적용한 것과 비슷하다(그래서 이름이 Mapped Types다). 맵드 타입 개념 톺아보기아래 디바이스 브랜드를 나타내는 유니온 타입 Devices가 있다. 여기에 각 디바이스 브랜드의 가격 정보가 포함된 객체를 만들고 싶을 때 맵드 타입을 활용할 수 있다.type Devices = 'APPLE' | 'OPPO' | 'XIAOMI'; // 디바이스 브랜드를 나타내는 유니온 타입type DevicePrices = { [P in Devices]: number }; // 디바이스 브랜드 타입을 순회해서 key로 정의되는 맵드 타입const deviceInfo: Devi..
TypeScript 타입스크립트 - 타입 호환
TypeScript 타입스크립트 - 타입 호환
2024.05.04타입 호환 Type Compatibility💡 자바스크립트는 객체 리터럴이나 익명 함수 등을 사용하기 때문에 명시적으로 타입을 지정하는 것보다 코드의 구조 관점에서 타입을 지정하는게 더 잘 어울릴 수도 있다. 타입스크립트에서 다른 타입 간에 호환 여부를 점검하는 것을 타입 호환이라고 한다. 아래 Avengers 클래스는 Ironman 인터페이스를 상속받아 구현한 게 아닌데도 에러가 발생하지 않는다. 타입스크립트에선 타입에 정의되어 있는 속성의 타입을 가지고 코드가 호환되는지 확인하기 때문이다.interface Ironman { name: string;}class Avengers { name: string;}let ironMan: Ironman;ironMan = new Avengers(); // ok..
외부에서 로컬 서버 접속하기 — ngrok
외부에서 로컬 서버 접속하기 — ngrok
2024.05.04로컬 서버를 띄워놓고 작업중인 내용이 외부 네트워크에선 어떻게 작동하는지 테스트하고 싶을 때가 있다. 외부에서 접속하려면 로컬 서버에서 사용하는 포트를(3000, 8080 등...) 열어야 되는데 보안에 좋지 않고, AWS에 올리자니 번거롭다. 이때 ngrok라는 서비스를 사용하면 된다. ngrok는 방화벽 뒷단에 있는 로컬 서버를 보안 터널을 통해 공용 인터넷에 노출되도록 해준다. Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels. 실행 방법❶ ngrok 회원가입 및 Authtoken 복사(대시보드 좌측 Getting Started → Your Authtoken) ❷ ngrok 설..
Blur 효과를 활용한 리액트 이미지 지연 로딩 Image Lazy Loading
Blur 효과를 활용한 리액트 이미지 지연 로딩 Image Lazy Loading
2024.05.04웹페이지에서 성능에 영향을 가장 많이 주는 부분이 이미지 / 비디오 같은 미디어 요소다. 특히 이미지는 배너, 제품 사진, 로고 등 페이지 구석구석에서 사용한다. HTTP Archive Data에 따르면 전체 웹페이지 용량의 45%를 이미지가 차지한다고 한다. 이미지를 사용하지 않는건 불가능하지만, 화면에 노출될 때만 이미지를 불러오는 방식으로 페이지 로딩 시간을 단축시킬 수 있다. 이런 방식을 Lazy Loading이라고 한다. Lazy Loading 구현 방법💡 Lazy Loading이 적용된 이미지가 뷰포트에 근접해서 이미지를 로드하면 콘텐츠가 밀려나는 현상이 발생한다. 이를 방지하려면 이미지를 감싸는 컨테이너 요소에 높이 / 너비를 지정하면 된다. Lazy Loading은 크게 Chrome Na..
두 가지 방법으로 구현해보는 리액트 무한 스크롤 Infinite Scroll
두 가지 방법으로 구현해보는 리액트 무한 스크롤 Infinite Scroll
2024.05.041) 스크롤 이벤트를 사용한 방법무한 스크롤은 현재 페이지에서 스크롤바가 마지막 콘텐츠 지점에 있을 때 다음 콘텐츠를 자동으로 불러오는 구현 방식을 말한다. ➊스크롤해서 가려진 영역의 높이와 ➋현재 화면(뷰포트)의 높이를 더한 값이 ➌전체 문서의 높이와 같다면 현재 스크롤이 가장 하단 끝에 도달했다는 걸 알 수 있다. 알아야 할 기하 프로퍼티 ❶ 스크롤해서 가려진 콘텐츠 영역의 높이 : document.documentElement.scrollTop ❷ 현재 화면(뷰포트)의 높이window.innerHeight : 스크롤바 포함document.documentElement.clientHeight : 스크롤바 제외 ❸ 전체 문서의 높이// 문서의 정확한 전체 높이를 구하기 위한 코드const scrollHei..
자바스크립트 표현식 평가 순서와 결합성
자바스크립트 표현식 평가 순서와 결합성
2024.05.03표현식의 평가 순서let foo = { n: 1 };let bar = foo; // foo 객체의 참조 주소가 bar 변수에 할당됨foo.x = foo = { n: 2 }; // 값을 반환하는 할당 연산자console.log(foo.x); // ? 위 문제를 얼핏보면 foo.x의 결과는 { n: 2 }일 것 같지만 아니다. foo.x는 undefined를 출력한다. 위 코드의 연산 과정을 하나하나 풀어보면 아래와 같다. 왼쪽 표현식 평가우측 표현식이 평가한 값이 할당될 곳을 결정하기 위해 foo.x가 현재 참조하는 객체 { n: 1 } 확인오른쪽 표현식 평가할당될 곳을 결정하기 위해 foo 변수가 현재 참조하는 객체 { n: 1 } 확인새로운 객체 { n: 2 }가 foo 변수에 할당되고 해당 객체 반환..
자바스크립트 제너레이터 Generator 총 정리
자바스크립트 제너레이터 Generator 총 정리
2024.05.03제너레이터는 ES6에 도입된 특수한 함수다. 함수 호출자가 함수 실행을 제어할 수 있고, 함수 호출자와 함수 상태를 주고받을 수도 있다. 이런 특징 때문에 제너레이터 함수에선 코드 블록의 실행을 잠시 멈췄다가 필요한 시점에 재개할 수 있다. 일반 함수는 0~1개 값만 반환할 수 있지만, 제너레이터 함수는 여러개의 값을 필요에 따라 하나씩 반환할 수 있다. 제너레이터 함수의 특징함수 호출자에게 함수 실행의 제어권을 양도(yield)할 수 있다일반 함수 : 함수 호출자(caller)는 함수를 호출한 이후 함수 실행을 제어할 수 없다.제너레이터 함수 : 함수 호출자가 함수 실행을 제어할 수 있다(함수 실행 일시 정지 / 재개)함수 호출자와 함수 상태를 주고받을 수 있다일반 함수 : 매개변수를 통해 값을 전달받..
자바스크립트 이터러블 Iterable 총 정리
자바스크립트 이터러블 Iterable 총 정리
2024.05.03TL;DR ⭐️Symbol.iterator 메서드가 구현되어 있는 객체를 이터러블(iterable)이라고 한다. 간단히 말하면 이터러블은 반복 가능한 객체다. 배열, 문자열은 Symbol.iterator 메서드가 이미 구현되어 있는 대표적인 내장 이터러블이다. 이터러블을 사용하면 어떤 객체든 ➊for of 반복문 ➋전개 문법 ➌배열 구조분해 할당의 대상으로 사용할 수도 있다. ❶ for of 문을 사용할 수 있는 객체를 이터러블이라고 한다 ❷ 이터러블엔 Symbol.iterator 메서드(혹은 프로토타입 체인에 의해 상속)가 구현되어 있어야 한다.Symbol.iterator는 for of에 의해 자동으로 호출되며, 명시적으로 호출하는 것도 가능하다Symbol.iterator 메서드가 반환하는 객체는 “이..
리액트 타자기(TypeWriter) 효과 구현하기 feat.제너레이터
리액트 타자기(TypeWriter) 효과 구현하기 feat.제너레이터
2024.05.03기본 로직타자기로 한 글자씩 입력하는 효과(Typewriter Effect)는 이미 수 많은 라이브러리가 있지만, setInterval 타이머 API를 이용해서 직접 구현할 수 있다. 원래 문장(텍스트)을 한 글자씩 자른 후 가장 앞에 글자부터 하나씩 이어 붙이는 방식이다. // JSconst $content = document.querySelector('.content');function typewriter(target, sentence, speed = 200) { const split = sentence.split(''); let text = ''; let i = 0; const timer = setInterval(() => { if (i 깜빡이는 커서 효과는 | 콘텐츠를 갖는 ..
아이폰 사파리 100vh 이슈 해결
아이폰 사파리 100vh 이슈 해결
2024.05.03iOS의 사파리에선 100vh 속성 값이 다소 다르게 작동한다. 데스크탑 크롬에서 100vh는 현재 화면에 보여지는 뷰포트를 기준으로 하지만, iOS의 사파리에선 하단 주소창 영역까지 포함한다. 뷰포트를 기준으로 아래 비율로 화면을 나눴다면 아이폰 사파리에선 footer 일부분은 하단 주소창 때문에 가려진다.header : 15%main : 70%footer : 15% 해결 방법다행히 이 문제는 순수 CSS만으로 해결할 수 있다. -webkit-fill-available 속성을 이용하는 방법이다. 기능 쿼리(@supports) 인자에 명시한 -webkit-touch-callout은 iOS에서만 지원하는 속성이다. 따라서 아이폰 사파리에서 접속할 땐 -webkit-fill-available 스타일 값이 적..