Front-End38 jQuery : text(), val() 차이 text() : form 요소 혹은 html 요소의 text를 가져온다. form의 input, script 등은 가져오지 못한다. val() : form 요소의 value 값을 가져온다. input element의 값은 val()로 가져와야 한다. 2025. 5. 29. javascript 의 try-catch, React 에서는 불필요할까? 대세가 되어버린 React 에서 컴포넌트를 ErrorBoundary 로 감싸는 것 말고try - catch 는 어떻게 사용하면 좋을까에 대한 의견이다. React 에서는 ErrorBoundary 가 try-catch 와 매우 유사하게 작동한다.하지만 try-catch는 명령형 프로그래밍에 보다 적합하고 React 와 같은 선언형 프로그래밍에는 ErrorBoundary가 보다 포괄적이다.ErrorBoundary에서 포착하지 않는 것이벤트 핸들러비동기적 코드 (예: setTimeout 혹은 requestAnimationFrame 콜백)서버 사이드 렌더링자식에서가 아닌 에러 경계 자체에서 발생하는 에러일반적인 에러처리일반적인 상황에서는 그냥 ErrorBoundary 클래스를 선언하고 에러처리를 하면 된다.Er.. 2025. 5. 27. Window : devicePixelRatio window 객체 내 devicePixelRatio 속성은 CSS의 1px 이 디스플레이 기기에서 표시되는 비율을 반환한다 CSS 의 1px 은 디스플레이 기기에 따라 1px 로 표현될 수도 그 이상으로 표현될 수도 있다. 표준 해상도인 96 DPI 에서는 1을 return 하고 Retina 와 같은 고해상도 디스플레이의 경우 2를 반환한다.디스플레이 기기가 연결되어 있지 않은 경우 1을 반환한다. (관련 링크) window.matchMedia() 함수를 사용해서 아웃풋 기기(디스플레이 기기)의 Ratio 가 변경되었는지 감지하고 대응할 수 있다.아래는 MDN Example 코드let remove = null;const output = document.querySelector("#output");cons.. 2025. 3. 31. Tailwind CSS V4 animation Keyframes 정의하기 tailwindCSS V4에서는 tailwind.config.js 가 아니라 app.css 파일, @import tailwindcss 가 포함되어 있는 파일에서 animation keyframes 를 정의한다. - V3// tailwind.config.jsmodule.exports = { theme: { extend: { animation: { 'spin-slow': 'spin 3s linear infinite', } } }} - V4// app.css@import "tailwindcss";@theme { --animate-fade-in-scale: fade-in-scale 0.3s ease-out; @keyframes fade-in-scale { .. 2025. 3. 9. React: flushSync 활용 beforeprint, afterprint 이벤트 처리 회사에서 jquery 를 사용한 프로젝트를 React 로 포팅하는 도중 beforeprint, afterprint 이벤트를 처리하는 함수를 마주했습니다. window.print() 를 호출하기 전, 화면의 특정 요소를 숨기고(.hide())사용자가 print 화면을 닫게 되면 다시 화면의 특정 요소를 보여주는(.show()) 로직이었습니다. printing이라는 상태를 통해 요소를 숨기고 보여주는 코드를 아래와 같이 작성했습니다.import { useState, useEffect } from "react";const printingExample = () => { const [isPrinting, setIsPrinting] = useState(false); const handleBeforeprint =.. 2024. 8. 1. cannot use jsx unless the '--jsx' flag is provided 국문으로는 --jsx가 설정되지 않았습니다 오류다. VS Code 의 타입스크립트 버전과 PC에 global 설치 된 Typescript 버전이 달라서 발생하는 오류로VS Code의 [setting 메뉴]에서 [settings.json 으로 설정하기] 를 눌러 json 내 아래와 같은 값을 입력해 주면 된다. { "typescript.tsdk": "$GLOBAL_NPM_PATH/typescript/lib"} 2024. 7. 12. 이전 1 2 3 4 ··· 7 다음