노트

Web Bluetooth API란?Web Bluetooth API는 웹 브라우저에서 직접 블루투스 디바이스와 통신할 수 있게 해주는 표준 API입니다. 별도의 네이티브 앱이나 플러그인 없이도 BLE(Bluetooth Low Energy) 기기와 데이터를 주고받을 수 있어, IoT 센서 등과의 연동에 매우 유용합니다.브라우저 지원 현황현재 Chrome, Edge, Opera 등 Chromium 기반 브라우저에서 지원되며, HTTPS 환경 또는 localhost에서만 동작합니다. 보안상의 이유로 일반 HTTP에서는 사용할 수 없다는 점을 주의해야 합니다.구현 상세1. 상태 관리 설계const [bluetoothDevice, setBluetoothDevice] = useState(null);const [blu..

Git은 설정값을 저장할 때 적용 범위를 기준으로 구분한다. 가장 많이 사용되는 범위는 local과 global이다. 두 속성은 설정이 저장되는 위치와 적용되는 범위에서 차이가 있다.Local 설정--local 옵션은 특정 리포지토리에만 적용되는 설정이다.저장 위치: .git/config 파일적용 범위: 해당 리포지토리 내부에서만 유효하다.특징: 프로젝트별로 다른 사용자 정보, 다른 에디터, 다른 브랜치 정책 등을 지정할 수 있다.git config --local user.name "프로젝트 전용 이름"git config --local user.email "project@example.com"위와 같이 설정하면 해당 프로젝트에서만 지정한 이름과 이메일이 사용된다.Global 설정--global 옵션은 현..

커밋 타입feat: 새로운 기능 추가, 수정fix: 버그 수정style: 코드 스타일, 포맷팅, 함수명 등 스타일 수정refactor: 코드 리팩토링file: 파일 이동, 삭제, 수정design: css 등 UI 디자인 수정comment: 주석 수정, 삭제docs: 문서 수정build: 빌드 관련 수정chore: 빌드, 패키지, 환경변수 설정hotfix: 긴급 버그 수정test: 테스트 코드 추가, 수정커밋 메세지 구조제목(Type: Subject) → 커밋 타입과 제목 입력// 한줄 띄우기본문(Body) → 상세한 내용 입력// 한줄 띄우기꼬리말(Footer) → 참고할 이슈 입력--------------------------------------------------------------//examp..

추천 익스텐션Auto Close Tag : 자동으로 태그를 닫아주는 기능Auto Rename Tag : 태그의 이름을 변경했을 때 닫아주는 태그의 이름도 같이 변경해주는 기능CSS Peek : css의 컬러를 선택할 수 있는 기능Git History : git의 히스토리를 tree형태로 보여주는 기능GitLens : git의 커밋 작성자 및 내용 보여주는 기능Prettier : prettier 기능Svg : svg의 미리보기 기능Todo Tree : todo 태그를 모아보는 기능vscode-styled-components : styled-components를 사용할 때 css와 동일하게 보여주는 기능Tailwind CSS IntelliSense : tailwindcss 자동검색 기능import cost:..

pxpx(픽셀)은 웹디자인에서 많이 사용하는 절대 길이 단위 중 하나 입니다.px은 고정된 크기를 가지며, 사용자의 화면 설정에 관계없이 일관된 크기로 표시됩니다.대부분의 브라우저 루트 글꼴 크기는 16px입니다. 또한 브라우저의 루트 글꼴 크기는 사용자가 변경할 수 있습니다.이때, font-size를 px로 고정하게 되면 사용자가 설정한 값을 덮어쓰게 되어 사용자의 설정 값이 무시되게 됩니다. em, remem과 rem은 반응형 웹디자인에서 많이 사용되는 상대 길이 단위 중 하나 입니다. em은 부모 요소의 글꼴 크기에 대한 상대적 비율로 크기를 지정합니다.중첩된 요소에서 부모 요소의 글꼴 크기에 대한 계산을 반복하는 데 사용될 수 있어 유연한 레이아웃을 만들 때 사용됩니다. rem은 root em을 ..

@keyframes@keyframes를 사용하여 특정 지점에 키프레임들을 설정함으로써 애니메이션을 부드럽게 해주는 속성입니다.문법@keyframes [이름] { [발생 시점] { [애니메이션 속성: 값] }} [이름]: keyframe을 식별하는 이름[발생 시점]: keyframe이 발생해야 하는 시점- from: 시작 offset인 0%를 의미- to: 마지막 offset인 100%를 의미- 0%~100%: 발생해야 하는 시간의 백분율 값[애니메이션 속성: 값]: 애니메이션으로 제어할 스타일 속성과 값예제from, to를 활용한 방법@keyframes slideRight { from { transform: translateX(0%); } to { transform: transl..

animationanimation 속성은 요소에 애니메이션을 적용하는 데 사용합니다. @keyframes로 정의한 애니메이션을 실제로 적용할 때 사용되기도 합니다.animation 속성 구조animation: duration timing-function delay iteration-count direction fill-mode play-state name;duration: 애니메이션의 지속 시간을 지정합니다. 초(s) 또는 밀리초(ms) 단위로 표시됩니다.timing-function: 애니메이션의 타이밍 함수를 지정합니다. 이는 애니메이션이 어떻게 진행되는지 제어합니다. 일반적으로 사용되는 값으로는 ease, linear, ease-in, ease-out, ease-in-out 등이 있습니다.delay:..

asyncscript의 async 속성은 html을 파싱하면서 병렬적으로 js 파일을 다운로드 받습니다.스크립트를 비동기적으로 로드하고, 로드가 완료되면 즉시 실행합니다. 이 속성을 사용하면 다른 리소스(이미지, 스타일 시트 등)와 병렬로 다운로드되므로 페이지 로딩이 빨라질 수 있습니다. 그러나 스크립트의 실행 순서는 보장되지 않습니다. 즉, 다른 스크립트나 문서 구조에 의존하는 스크립트의 경우 문제가 발생할 수 있습니다.요약장점: 다운로드 하는 시간을 줄일 수 있음단점: DOM 요소를 자바스크립트 파일 내에서 조작할 시 문제가 발생할 수 있음 deferscript의 defer 속성은 html의 파싱이 끝나면 js 파일을 다운로드 받습니다.스크립트를 비동기적으로 로드하지만, 다른 리소스와 독립적으로 로드..

Intersection Observer란?Intersection Observer API는 DOM 요소가 뷰포트(또는 지정된 부모 요소)에 얼마나 보이는지를 비동기적으로 관찰하는 브라우저 API입니다.Infinite Scroll에서는 주로 마지막 요소가 화면에 등장했을 때를 감지해 다음 페이지를 불러오는 trigger로 활용합니다. IntersectionObserver API의 파라미터 정의let observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { entry.boundingClientRect // 관찰된 요소의 뷰포트 내 위치와 크기 entry.intersectionRatio // 관찰된 요소의 총 교차(화면노출..

렌더링이란 HTML, CSS, JavaScript로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것을 말한다. 브라우저 렌더링 과정브라우저의 핵심 기능은 사용자가 요청한 웹 페이지를 서버로부터 받아와서 적절히 파싱하여 화면에 시각적으로 보여주는 것입니다. 이를 위해 필요한 모든 리소스(html, css, js, img, font 등)는 서버에 저장되어 있고, 브라우저는 이를 요청하고 응답받아 렌더링하는 과정을 거칩니다.① HTML 파싱과 DOM 생성 브라우저는 서버로부터 받은 HTML 문서를 읽고 파싱합니다. 이 과정에서 HTML 문서의 구조를 이해하고 DOM(Document Object Model) 트리를 생성합니다.② CSS 파싱과 CSSOM 생성브라우저는 HTML 파싱 중에 CSS 링크를 ..