기타 web 개발 지식10 [WEB] MediaDevices와 MediaStream을 통해 알아보는 웹 실시간 미디어 처리 방식 1. MediaDevices 란?navigator.mediaDevices 를 통해 웹에서 카메라, 마이크, 화면 공유와 같은 미디어 입력 장치에 접근하여, 해당 장치에서 제공하는 미디어 스트림을 가져올 수 있습니다.※ Navigator 객체는 웹 브라우저의 정보를 제공하는 인터페이스로 window.navigator 읽기 전용 속성으로 접근할 수 있습니다.1.1 이벤트■ devicechange새로운 미디어 장치가 연결되거나 기존 장치가 제거될 때 발생하는 이벤트입니다. ondevicechange 속성으로도 사용할 수 있습니다.// `addEventListener`를 사용하는 방식 (권장)navigator.mediaDevices.addEventListener('devicechange', event => {.. 2025. 3. 31. ESLint 9 버전 Flat config 기존 8 버전 eslint 구조 이해주로 설정 세트를 가져오고(extends) 특별한 기능 지원이 필요한 경우 plugins 에 등록, 나머지 세부 설정(env, parser, settings, etc..) 및 일부 변경이 필요한 규칙의 경우 rules 에서 작성하는 구조// 기존 .eslintrc.json 파일 구조{ "extends": [ ... ], "plugins": [ ... ], "rules": { ... }, ...etc }8 버전 vs 9 버전 Flat config이전 8 버전계층적인 구조(extends, overrides)를 사용파일별로 설정을 병합하는 방식CommonJS 기반의 JS 설정만 지원new 9 버전 Flat config배열 기반 설정: 설정을 하나의 배.. 2025. 3. 6. cookie domain 으로 "vercel.app" 사용 시 생긴는 에러와 PSL,TLD,eTLD 이해 cookie domain 으로 "vercel.app" 사용 시 생기는 오류vercel로 배포 시 [...].vercel.app의 형태로 도메인이 지정되므로 vercel 로 배포한 프런트 서버와 백엔드 서버에서 쿠키를 같은 도메인으로써 공유하고 사용할 수 있을 거라 판단하여 응답 헤더에 Set-Cookie-"domain=vercel.app ...를 사용했더니"this attempt to set a cookie via a set-cookie header was blocked because its domain attribute was invaild with regards to the current host url"메시지와 함께 쿠키가 저장되지 않는 상황을 맞이하여 이유를 찾다 예상되는 이유를 발견 vercel.. 2025. 2. 12. <a role="button"> 과 <button> 차이는 무엇일까? [접근성, SEO] 상황 설명텍스트 형식의 요소에 click 이벤트를 달아서 사용하려 할 때 다음과 같은 의문점이 들었다 "link 느낌의 요소라면 button 태그보다 a 태그를 쓰는 것이 더 적절하지 않나?"거기에 더해서 role="button 속성을 사용해서 접근성을 보완해서 사용하면 적절하겠다는 결론에 다다라서 최종적으로 ... 형태로 구성했다.그러던 와중 SEO 측면에서 과연 이런 방식이 유용한지에 대해 의문이 생겨 내용을 찾아보게 됐다.WAI-ARIA의 role 이해WAI-ARIA role 은 웹 페이지의 요소가 수행하는 기능을 명시적으로 정의하여 스크린 리더나 다른 보조 기술이 해당 요소를 이해하고 적절한 방식으로 상호작용할 수 있도록 도움을 줍니다. HTML 요소는 본래 기본 역할을 가지고 있지만, ARIA.. 2024. 11. 28. 줄 바꿈 형식 CR? LF? CRLF? 내용 VSC 하단에 CRLF 혹은 CR, LF 로 적힌 부분이 보이고 커서를 올려보면 줄 시퀀스의 끝 선택 이라는 문장을 볼 수 있다. CR? LF? CRLF? CR, LF 는 타자기를 쓸 때 사용했던 단어이며 타자기로 문서를 작성할 때 한 줄에 글자를 다 입력하여 아래 줄로 이동 하는 것이 Line Feed(LF) 이고, 왼쪽 가장 앞으로 밀어 주는 것이 Carrige Return(CR) 이다. 현재에 와서는 텍스트 파일에서 줄 바꿈을 나타내는 의미로 주로 쓰인다 CRLF (Carriage Return + Line Feed) 는 두 과정을 합친 것을 의미하며 아래 줄로 줄바꿈 후 첫번쨰 열로 이동하는 의미이다. 운영체제의 관점에서 줄바꿈에 쓰이는 메모리, 용량을 줄이고자 CR, LF 를 쓰기도 하며 C.. 2023. 6. 8. SVG 의 이해 및 배치 관련 내용 SVG 이해 SVG(Scalable Vector Graphics)는 확장 가능한 벡터 그래픽을 표현하기 위한 XML 기반의 마크업 언어로, 웹에서 그래픽을 표현하는 데 사용되는 형식입니다. SVG는 XML 형식을 사용하여 그래픽 요소들을 정의하고 조작할 수 있는 벡터 그래픽 포맷으로, 화면 크기에 독립적이며 고해상도 그래픽을 지원하며, 확대/축소가 가능하고 품질 손실 없이 크기를 조절할 수 있습니다. svg 에 많은 내용이 있지만 디자인에 관련된 내용도 있고 모두 알필요 없이 핵심적인 내용만 알아도 개발하는 입장에서 충분할 것 같다. SVG의 주요 특징 벡터 그래픽: 화면 크기에 독립적인 벡터 기반 그래픽을 사용하여 고해상도 디스플레이에 적합하며, 확대/축소에도 품질 손실이 없다. XML 기반: XML .. 2023. 4. 18. ESLint 와 prettier ESLint ES + Lint es : Ecma라는 기구에서 만든 Script = 표준 Javascript Lint : 에러가 있는 코드에 표시를 달아놓는 것을 의미 ESLint는 자바스크립트 문법에서 에러를 표시해주는 도구입니다. 일종의 가이드라인 코드상 문제가 되는 부분만을 지정할 수도 있고 , 아니면 에러 기준을 직접 지정할 수도 있다 또한 간단하고 전반적인 코딩스타일(ex. tab은 몇 칸을 기준으로 할 것인가? / ; 여부 등)까지 지정할 수도 있다. 예를 들어 함수 정의할 때, 일반 function 키워드의 함수로 정의할 수도 있고, arrow function을 쓸 수도 있다. 또 배열의 반복문을 돌릴 때 일반 for문을 돌릴 수도 있지만, forEach, map 등 Array 내장 함수를 사.. 2022. 9. 2. 스로틀(Throttle)과 디바운스(Debounce) 단도직입적으로 말하자면 스로틀(Throttle)과 디바운스(Debounce)는 이벤트를 기반으로 실행하는 자바스크립트 특성상 이벤트(event)를 효과적으로 제어(제한)하는 방식(기술)이다. 짧은 시간 내에 반복되는 이벤트로 인한 발생하는 연산들을 제어하여 성능저하를 막고 의도한 만큼만 실행 하기 원할 때 사용한다. 디바운스(Debounce) 순차적으로 반복되는 이벤트를 그룹화하여 끝나는 시점에 실행시켜 제어하는 방식 ※ 예시 : 창 크기 resize 스로틀(Throttle) 일정시간 동안 이벤트가 한번만 실행되도록 제어하는 방식 ※ 예시 : 무한 스크롤링 둘의 차이점 스로틀(Throttle)과 디바운스(Debounce) 의 가장 큰 차이점은 스로틀(Throttle) 은 적어도 X 밀리 초마다 정기적으로.. 2022. 8. 28. MPA 와 SPA , SSR 와 CSR MPA (multi page application) 여러 페이지로 구성된 웹 어플리케이션으로 사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html 을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식 SSR 방식을 사용함 SPA (Single Page Application) 하나의 페이지로 구성된 웹 어플리케이션으로 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식 SSR 과 CSR 그리고 SEO 간의 관계 SEO (search engine optimization) SEO 통칭(검색 엔진 최적화)는 검색엔진으로 부터 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정을 말한다. .. 2022. 8. 28. 환경변수 지금까지 듣기만 하고 제대로 알아보지 않았던 환경 변수에 대해 알아보려한다. 환경 변수(environment variable)는 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는, 동적인 값들의 모임이다. -위키백과- 환경변수는 OS 아래에서 돌아가는 프로그램들이 필요한 데이터(PATH 가 대표적 ) 정도로 보면 편할 것 같다. *PATH 변수는 운영체제가 어떤 프로세스를 실행시킬 때, 그 경로를 찾는데 이용된다 .env 파일 환경변수를 관리할 수 있는 파일을 일반적으로 env 파일로 다루는 듯 하다. (찾아보니 json, object 관련 내용도 있는데 아무튼 복잡하고 그냥 .env 쓰라는 듯 함) 개발 중 포트번호, DB 관련 정보등 전역으로 필요한 변수(정보)들이 오픈소스(깃허브)에 공개됐을 경우.. 2022. 2. 13. 이전 1 다음
