폴리프레임

shadcn-ui 라이브러리를 사용하면 자주 만나고, 필수 요소 중 하나인 cn 함수를 자세히 들어다 보려고 합니다. 그러면 이해도가 높아지고 기억에도 도움이 됩니다. shadcn-ui@latest init 으로 설치하면, lib>utils.ts가 생성되고, 이 파일에는 cn() 함수가 있습니다.import { type ClassValue, clsx } from "clsx"import { twMerge } from "tailwind-merge"export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs))} cn 은 ClassName 의 앞 글짜에서 온 것 같으며, 두개의 라이브러리를 조합하여 만든 함수입니다. 가변인수로 받아서 cl..

JavaScript 2024. 7. 5. 08:06

toJSON()와 JSON.stringify()는 JSON 데이터를 처리할 때 사용되는 방법으로 용도는 다음과 같습니다.  toJSON() toJSON()는 객체의 사용자 정의 메서드로, 객체를 JSON 문자열로 변환할 때 호출됩니다. 객체의 속성을 JSON 표현으로 변환하는 방법을 지정할 수 있습니다.객체의 특정 형식을 JSON 변환할 때 유용합니다. 예를 들어, 객체의 일부 속성만 포함하거나 다른 형식으로 변환하고 싶을 때 사용합니다. toJSON() 메서드는 JSON.stringify()를 호출할 때 자동으로 호출됩니다. 직접 호출하는 것은 일반적이지 않습니다.const user = { name: "John", age: 30, toJSON: function() { return { name..

JavaScript 2024. 6. 18. 21:42

at()은 정수를 받고, 정수의 인덱스 값을 반환한다. String.at()const sentence = 'The quick brown fox jumps over the lazy dog.';let index = 5;console.log(`An index of ${index} returns the character ${sentence.at(index)}`);// "An index of 5 returns the character u"index = -4;console.log(`An index of ${index} returns the character ${sentence.at(index)}`);// "An index of -4 returns the character d"Array.at()const array1..

JavaScript 2024. 6. 18. 20:14

scrollTopscrollTop은 요소의 스크롤 상단 위치를 나타냅니다. 이 값은 요소의 콘텐츠가 수직으로 스크롤된 픽셀 수를 반환하거나 설정합니다. 기본적으로 요소가 스크롤되지 않은 경우 scrollTop 값은 0입니다.scrollHeightscrollHeight 값은 domNode 요소의 전체 콘텐츠 높이를 나타냅니다. scrollHeight는 해당 요소의 실제 콘텐츠가 차지하는 전체 높이를 픽셀 단위로 반환하며, 이는 요소의 overflow로 보이지 않는 영역도 포함합니다.이는 일반적으로 새로운 메시지가 추가될 때 채팅 창이 자동으로 스크롤되어 최신 메시지를 표시하도록 할 때 사용됩니다.const chatParent = useRef(null);useEffect(() => { const domNo..

JavaScript 2024. 6. 18. 19:06

TextDecoder 클래스는 JavaScript에서 ArrayBuffer나 TypedArray와 같은 바이너리 데이터를 텍스트로 변환하는 데 사용됩니다. 이 클래스는 다양한 문자인코딩을 지원하며, 바이너리 데이터를 특정 문자 인코딩에 따라 문자열로 디코딩할 수 있게 해줍니다( UTF-8, UTF-16, ISO-8859-1 등) .   스트림 디코딩  즉 데이터가 점진적으로 들어올 때 점진적으로 디코딩할 수 있습니다.생성자new TextDecoder([label[, options]]): 새로운 TextDecoder 인스턴스를 생성합니다.label (선택): 사용할 문자 인코딩을 나타내는 문자열 (기본값은 'utf-8').options (선택): 디코딩 옵션을 포함하는 객체. fatal과 ignoreBOM..

JavaScript 2024. 6. 14. 19:56

모두 JavaScript에서 바이너리 데이터와 상호작용하기 위한 객체입니다. 이들 객체는 특히 성능이 중요한 애플리케이션, 예를 들어 그래픽 처리, 파일 I/O, 네트워크 프로토콜 구현 등에 유용합니다.공통점바이너리 데이터 처리: 이들 모두는 바이너리 데이터를 효율적으로 처리할 수 있도록 설계되었습니다.고정된 크기: 배열 생성 시 고정된 크기를 가지며, 이 크기는 변경할 수 없습니다.버퍼 기반: TypedArray와 ArrayBuffer는 모두 메모리 버퍼에 대한 뷰를 제공합니다.성능 최적화: 일반 배열보다 더 빠르게 데이터에 접근하고 조작할 수 있도록 최적화되어 있습니다.1. ArrayBuffer ArrayBuffer는 고정 크기 메모리 영역을 나타내는 객체입니다. 단순히 바이너리 데이터를 저장하는 역..

JavaScript 2024. 6. 14. 19:36

FileReader는 JavaScript에서 제공하는 Web API 중 하나로, 파일 시스템의 내용을 비동기적으로 읽기 위한 객체입니다. 이 객체는 파일을 읽고 처리하는 다양한 방법을 제공합니다. 주로 파일 업로드 기능에서 사용됩니다 파일 내용 읽기: 텍스트 파일의 내용을 읽거나, 이미지 파일을 Base64 인코딩 문자열로 읽는 등.파일 정보 추출: 파일의 타입, 이름, 크기 등의 메타데이터를 추출.비동기 처리: 파일 읽기가 비동기적으로 이루어지므로, 큰 파일도 UI를 멈추지 않고 처리 가능.주요 메서드readAsText(file): 파일을 텍스트로 읽음.readAsDataURL(file): 파일을 Base64 인코딩된 URL로 읽음. 주로 이미지 파일에 사용.readAsArrayBuffer(file):..

JavaScript 2024. 6. 14. 18:54

class User { constructor(name, age, gender){ this.name = name; this.gender = gender; this.age = age; // 여기서 set age() 메서드가 호출됩니다. } get age (){ return this._age; // _age 값을 반환합니다. } set age (value){ this._age = value; // _age 값을 설정합니다. }}const kim = new User("KIM", 20, "남자");console.log(kim.age); // get age() 메서드가 호출되어 20을 반환합니다.kim.age = 25; ..

JavaScript 2024. 6. 14. 09:16