HOME
[React] 리액트 Strict Mode 엄격 모드와 사이드 이펙트
[React] 리액트 Strict Mode 엄격 모드와 사이드 이펙트
2024.05.05엄격 모드의 기능CRA로 생성한 React 프로젝트에선 엄격 모드(Strict Mode)가 기본적으로 적용돼 있다. 엄격 모드는 어플리케이션의 잠재적인 문제를 알아내기 위해 리액트에서 제공하는 도구다. 개발 모드에서 함수 컴포넌트 렌더링 / API 호출 등이 중복해서 발생한다면 엄격 모드 때문에 그럴 가능성이 높다.import React from "react";import ReactDOM from "react-dom/client";import App from "./pages/App";const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement,);root.render({/* ... */}); 엄격 모드는 아래 기능을 제..
[React] 키보드로 조작할 수 있는 드롭다운 자동완성 검색창 구현하기
[React] 키보드로 조작할 수 있는 드롭다운 자동완성 검색창 구현하기
2024.05.05검색창 자동 완성 기능은 , 태그를 이용해 빠르게 구현할 수 있다(참고 포스팅). 키보드 방향키로 옵션을 선택할 수도 있다. 하지만 이 방법은 리스트 요소에 클릭 이벤트를 할당할 수 없는 단점이 있다(검색을 정말 많이 해봤지만 결론은 불가). 검색창에 키워드를 입력한 후 목록에 있는 각 옵션()을 클릭할 때마다 특정 액션을 취해야 한다면 위 방법을 사용할 수 없다. 대안은 React Select 처럼 잘 만든 라이브러리를 사용하거나, 몇 년간 유지 보수한 라이브러리보단 완성도는 조금 떨어질 수 있지만 직접 구현할 수 있다. 아래는 직접 구현한 내용을 기록한 내용. 구현 목표마우스로 리스트 이동 / 선택Enter 키로 선택방향키로 리스트 이동 (Keyboard navigate)스크롤이 생긴 목록에서 방향..
[HTML/CSS] Tailwind CSS 클래스 패턴 재활용 / 기본 테마 수정&확장
[HTML/CSS] Tailwind CSS 클래스 패턴 재활용 / 기본 테마 수정&확장
2024.05.05반복적으로 사용하는 Tailwind CSS 클래스 패턴을(특정 요소에 정의한 클래스 그룹을 여러 곳에서 사용할 때) 하나의 커스텀 클래스로 추출해서 사용할 수 있다 배경 지식 — Tailwind CSS 3계층Tailwind는 CSS 우선순위를 제어하기 위해 base, components, utilities 3개의 계층(layer)으로 구분한다. 이렇게 계층을 구분해두면 각 스타일이 어떻게 상호작용하는지 더 쉽게 이해할 수 있으며, @layer 지시문(해당 스타일이 어떤 계층에 속할지 지정)을 사용해 원하는 방식으로 선언 순서를 제어할 수 있게 된다. — 참고 base일반 HTML 요소에 적용되는 재설정 규칙(reset rules) / 기본 스타일을 위한 레이어. base 계층엔 특정 엘리먼트의 기본 스타..
[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);..
[HTML/CSS] width 속성 작동 매커니즘
[HTML/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..
[TS] 타입스크립트 맵드 타입 / 유틸리티 타입 / Enum
[TS] 타입스크립트 맵드 타입 / 유틸리티 타입 / 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..
[TS] 타입스크립트 - 타입 호환
[TS] 타입스크립트 - 타입 호환
2024.05.04타입 호환 Type Compatibility💡 자바스크립트는 객체 리터럴이나 익명 함수 등을 사용하기 때문에 명시적으로 타입을 지정하는 것보다 코드의 구조 관점에서 타입을 지정하는게 더 잘 어울릴 수도 있다. 타입스크립트에서 다른 타입 간에 호환 여부를 점검하는 것을 타입 호환이라고 한다. 아래 Avengers 클래스는 Ironman 인터페이스를 상속받아 구현한 게 아닌데도 에러가 발생하지 않는다. 타입스크립트에선 타입에 정의되어 있는 속성의 타입을 가지고 코드가 호환되는지 확인하기 때문이다.interface Ironman { name: string;}class Avengers { name: string;}let ironMan: Ironman;ironMan = new Avengers(); // ok..
[DevTools] 외부에서 로컬 서버 접속하기 — ngrok
[DevTools] 외부에서 로컬 서버 접속하기 — 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 설..
[React] Blur 효과를 활용한 이미지 지연 로딩 Image Lazy Loading
[React] Blur 효과를 활용한 이미지 지연 로딩 Image Lazy Loading
2024.05.04웹페이지에서 성능에 영향을 가장 많이 주는 부분이 이미지 / 비디오 같은 미디어 요소다. 특히 이미지는 배너, 제품 사진, 로고 등 페이지 구석구석에서 사용한다. HTTP Archive Data에 따르면 전체 웹페이지 용량의 45%를 이미지가 차지한다고 한다. 이미지를 사용하지 않는건 불가능하지만, 화면에 노출될 때만 이미지를 불러오는 방식으로 페이지 로딩 시간을 단축시킬 수 있다. 이런 방식을 Lazy Loading이라고 한다. Lazy Loading 구현 방법💡 Lazy Loading이 적용된 이미지가 뷰포트에 근접해서 이미지를 로드하면 콘텐츠가 밀려나는 현상이 발생한다. 이를 방지하려면 이미지를 감싸는 컨테이너 요소에 높이 / 너비를 지정하면 된다. Lazy Loading은 크게 Chrome Na..
[React] 두 가지 방법으로 구현해보는 무한 스크롤 Infinite Scroll
[React] 두 가지 방법으로 구현해보는 무한 스크롤 Infinite Scroll
2024.05.041) 스크롤 이벤트를 사용한 방법무한 스크롤은 현재 페이지에서 스크롤바가 마지막 콘텐츠 지점에 있을 때 다음 콘텐츠를 자동으로 불러오는 구현 방식을 말한다. ➊스크롤해서 가려진 영역의 높이와 ➋현재 화면(뷰포트)의 높이를 더한 값이 ➌전체 문서의 높이와 같다면 현재 스크롤이 가장 하단 끝에 도달했다는 걸 알 수 있다. 알아야 할 기하 프로퍼티 ❶ 스크롤해서 가려진 콘텐츠 영역의 높이 : document.documentElement.scrollTop ❷ 현재 화면(뷰포트)의 높이window.innerHeight : 스크롤바 포함document.documentElement.clientHeight : 스크롤바 제외 ❸ 전체 문서의 높이// 문서의 정확한 전체 높이를 구하기 위한 코드const scrollHei..
[JS] 자바스크립트 표현식 평가 순서와 결합성
[JS] 자바스크립트 표현식 평가 순서와 결합성
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 변수에 할당되고 해당 객체 반환..
[JS] 자바스크립트 제너레이터 Generator 총 정리
[JS] 자바스크립트 제너레이터 Generator 총 정리
2024.05.03제너레이터는 ES6에 도입된 특수한 함수다. 함수 호출자가 함수 실행을 제어할 수 있고, 함수 호출자와 함수 상태를 주고받을 수도 있다. 이런 특징 때문에 제너레이터 함수에선 코드 블록의 실행을 잠시 멈췄다가 필요한 시점에 재개할 수 있다. 일반 함수는 0~1개 값만 반환할 수 있지만, 제너레이터 함수는 여러개의 값을 필요에 따라 하나씩 반환할 수 있다. 제너레이터 함수의 특징함수 호출자에게 함수 실행의 제어권을 양도(yield)할 수 있다일반 함수 : 함수 호출자(caller)는 함수를 호출한 이후 함수 실행을 제어할 수 없다.제너레이터 함수 : 함수 호출자가 함수 실행을 제어할 수 있다(함수 실행 일시 정지 / 재개)함수 호출자와 함수 상태를 주고받을 수 있다일반 함수 : 매개변수를 통해 값을 전달받..