HTML의 태그는 사용자로부터 다양한 형태의 데이터를 입력받기 위해 사용됩니다. 각 type 속성은 입력받는 데이터의 형식과 기능을 정의합니다.아래에서는 HTML의 모든 input 태그의 type 속성과 그 정의, 예시를 소개합니다. button클릭 시 특정 동작을 수행하는 버튼입니다. checkbox여러 개의 선택지 중에서 하나 이상을 선택할 수 있는 체크박스입니다. color색상을 선택할 수 있는 입력 필드입니다. date날짜를 선택할 수 있는 입력 필드입니다. email이메일 주소를 입력받기 위한 필드로, 유효한 이메일 형식인지 검증합니다. file파일을 업로드할 수 있는 입력 필드입니다.  hidden사용자에게 보이지 않지만, 서버로 전송할 데이터를 포함하는 필드입니다. number숫자만 입력받..

React Query는 이제 TypeScript로 작성되어, 라이브러리와 프로젝트가 타입 안전성을 보장합니다!유의사항현재 타입은 TypeScript v4.7 이상을 요구합니다.이 저장소의 타입 변경은 비파괴적(non-breaking)으로 간주되며, 일반적으로 패치 세멘틱 버전 변경으로 릴리스됩니다(모든 타입 개선이 주요 버전이 되지 않도록 하기 위함).react-query 패키지 버전을 특정 패치 릴리스로 고정하고, 릴리스 간에 타입이 수정되거나 업그레이드될 수 있다는 기대를 가지고 업그레이드하는 것이 강력히 권장됩니다.React Query의 비타입 관련 공개 API는 여전히 시멘틱 버전 관리를 매우 엄격하게 따릅니다. 타입 추론React Query의 타입은 일반적으로 잘 흐르기 때문에, 사용자가 직접 ..

React Query 를 사용한다면 React Query Devtools을 함께 사용하는 것이 좋습니다.이 도구는 React Query의 내부 작동을 시각화하는 데 도움을 주며, 문제가 생겼을 때 디버깅에 많은 시간을 절약할 수 있습니다개발 도구 설치 및 가져오기개발 도구는 별도의 패키지로 설치해야 합니다 npm i @tanstack/react-query-devtools 또는 pnpm add @tanstack/react-query-devtools 또는 yarn add @tanstack/react-query-devtools 또는 bun add @tanstack/react-query-devtools  Next 13+ App Dir에서는 작동하기 위해 개발 종속성으로 설치해야 합니다. 개발 도구는 다음과 같이..

React Query는 React 애플리케이션에서 서버 상태를 관리하는 데 유용한 라이브러리입니다.이 라이브러리는 React v18 이상과 호환되며, ReactDOM 및 React Native와 함께 사용할 수 있습니다.React Query를 설치하고 사용해 보세요! NPM을 통한 설치React Query를 NPM을 통해 설치할 수 있습니다. 아래 명령어 중 하나를 사용하여 설치하세요 npm i @tanstack/react-query 또는 pnpm add @tanstack/react-query 또는 yarn add @tanstack/react-query 또는 bun add @tanstack/react-query CDN을 통한 설치모듈 번들러나 패키지 관리자를 사용하지 않는 경우, ESM.sh와 같은 ES..

React Query 공식문서를 번역하고 정리하였습니다. TanStack Query (구 React Query)는 웹 애플리케이션을 위한 데이터 가져오기 라이브러리로 종종 설명되지만,기술적으로는웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하며, 동기화하고 업데이트하는 과정을 간편하게 해줍니다.동기대부분의 핵심 웹 프레임워크는 데이터 가져오기 또는 업데이트에 대한 일관된 방법을 제공하지 않습니다.이로 인해 개발자들은 데이터 가져오기에 대한 엄격한 의견을 포함하는 메타 프레임워크를 구축하거나,자신만의 데이터 가져오기 방법을 발명하게 됩니다. 메타 프레임워크란 데이터 처리에 대한 명확한 규칙이나 구조를 제공하는 프레임워크를 의미합니다.이는 보통 구성 요소 기반 상태와 부작용을 조합하거나, 비동기 데이터를 앱..

모바일 시뮬레이터 - 반응형 테스트 도구 모바일 시뮬레이터 - 반응형 테스트 도구 - Chrome 웹 스토어여러 모델을 갖춘 컴퓨터용 스마트폰 및 태블릿 시뮬레이터로 모바일 반응형 웹사이트를 테스트합니다.chromewebstore.google.com 웹사이트가 다양한 화면 크기에서 어떻게 나타나는지를 확인하는 것은 매우 중요합니다.모바일 시뮬레이터는 프론트엔드 개발자가 사이트를 여러 모바일 기기에서 테스트할 수 있도록 돕는 유용한 도구입니다.이 확장 프로그램의 장점은 다음과 같습니다. 다양한 기기 지원 여러 종류의 스마트폰과 태블릿을 선택하여 실제 사용자 경험을 시뮬레이션할 수 있습니다 간편한 녹화와 캡쳐간편하게 해당 시뮬레이터로 보이는 모습을 녹화하거나 캡쳐할 수 있습니다 간편한 사용성다른 시뮬레이터에..

성능이 좋은 웹을 만들기 위해서는UI/UX에 영향을 미치지 않는 선에서 적은 용량을 쓰는 것이 중요하다폰트의 다양한 포맷 종류 & 폰트 포맷 변경 사이트각각의 폰트는 지원되는 브라우저 범위가 다 다르다웹 페이지의 폰트가 모든 장치와 브라우저에서 잘 보이도록 하려면다양한 폰트 형식을 지원해주는 것이 좋다 다양한 폰트 포맷을 알아보자용량은EOT  --  TTF/OTF  --  WOFF  --  WOFF2순으로 작다  즉 WOFF2가 가장 작은 용량을 가진다 웹페이지 제작시 WOFF, WOFF2 를 많이 사용한다그러나 WOFF2는 최신 기술이므로 크로스 브라우징을 위해WOFF2를 사용하되, 해석하지 못하는 브라우저에는 WOFF, TTF 등을 사용할 수 있도록 설정해준다 TTF / OTF백터 기반 폰트형식sca..

엄격모드 'strict mode'의 배경과 기능ES5 (ECMA Script5) 가 등장하기 전까지호환성 이슈 없이 발전해왔다즉, 기존의 기능을 변경하지 않으면서 새로운 기능이 추가 되었다 ES5에서 새로운 기능이 추가기존 기능 중 일부가 변경되었다.-> 호환성 문제 발생 가능 호환성 문제로 인해변경사항 대부분은 ES5의 기본 모드에선 활성화 되지 않도록 설계됨 대신!!!use strict 로 엄격모드 (strict mode) 를 활성화 했을 때만 ES5의 변경 사항이 활성화 되도록 해둠' use strict '이 use strict 지시자가 스크립트 최상단에 오면 스크립트 전체가 모던한 방식으로 작동반드시 스크립트 최상단에 위치+ 스크립트 최상단 뿐만 아니라 함수 본문 맨 앞에 올 수도 있다이때는 오직..

vscode로 npm 대신 yarn berry를 사용하려고 한다 이때 window 환경에서npm install -g yarn을 전역으로 설치해주고yarn set version berry를 실행하면 에러가 발생한다. yarn 뿐만 아니라 '스크립트를 실행할 수 없으므로 ~ 파일을 로드할 수 없다' 라는 에러가 발생 시아래와 같이 해결 할 수 있다.이 시스템에서 스크립트를 실행할 수 없으므로 ~~ 파일을 로드할 수 없습니다. 에러 해결법  1. PowerShell을 실행한다주의할 점은 관리자 권한으로 실행한다관리자 권한은 시작 메뉴에서 PowerShell을 검색한 후, 마우스 오른쪽 버튼을 클릭하고 '관리자 권한으로 실행'을 선택한다 참고로 Get-ExecutionPolicy는 실행정책이다.다양한 값이 있는..

특수문자는 컴퓨터 프로그래밍, 수학, 문서 작성 등 다양한 분야에서 중요한 역할을 합니다. 그러나 이들 특수문자의 이름과 영문 명칭이 헷갈리기 쉽고, 특히 소괄호, 중괄호, 대괄호와 같은 유사한 형태의 기호는 더욱 혼동을 일으킬 수 있습니다.이러한 특수문자들은 각각의 용도와 의미가 다르기 때문에, 정확한 명칭을 알고 사용하는 것이 중요합니다. 이번 정리에서는 다양한 특수문자의 이름과 영문 명칭을 체계적으로 정리하여, 필요할 때 쉽게 참고할 수 있도록 하겠습니다.각 특수문자의 발음과 함께 한국어 명칭도 함께 제공하니, 헷갈리는 부분을 명확히 이해하는 데 도움이 될 것입니다.이제 특수문자 목록을 살펴보겠습니다. ( )Parenthesis퍼렌서시스, 소괄호, 괄호{ }Brace브레이스, 중괄호[ ]Bracke..