전체 글
-
Shadow DOMDOM/HTML5 2022. 12. 9. 13:57
[출처: https://javascript.info/shadow-dom] Shadow DOM Shadow DOM은 캡슐화를 위해 사용됩니다. 이를 통해 구성 요소는 고유한 "섀도우" DOM 트리를 가질 수 있으며 기본 문서에서 실수로 액세스할 수 없으며 로컬 스타일 규칙 등을 가질 수 있습니다. Built-in shadow DOM 복잡한 브라우저 컨트롤이 어떻게 생성되고 스타일이 지정되는지 생각해 본 적이 있습니까? (예 ) 브라우저는 그것들을 그리기 위해 내부적으로 DOM/CSS를 사용합니다. 그 DOM 구조는 일반적으로 우리에게 숨겨져 있지만 개발자 도구에서 볼 수 있습니다. 예를 들어 Chrome에서는 개발자 도구에서 "Show user agent shadow DOM" 옵션을 활성화해야 합니다...
-
대체 텍스트 가이드DOM/HTML5 2022. 10. 5. 21:24
구체적이고 간결하다 가능한 한 적은 수의 단어를 사용하십시오. 개체의 색상이 관련이 있습니까? 배경의 날씨가 관련이 있습니까? 사람의 머리색이 중요합니까? 콘텐츠 작성자는 이 정보가 메시지에 추가되거나 삭제되는지 여부를 판단해야 합니다. *문자 제한은 100-150입니다. (권장 125자) 미학이 아닌 정보를 기술하라 "밝은 파랑새의 그래픽"과 같이 그림이 어떻게 보이는지 설명하지 마십시오. "트위터 아이콘"과 같이 이미지 콘텐츠가 무엇이며 어떤 역할을 하는지 설명합니다. 이미지의 기능에 대해 생각하기 콘텐츠 작성자는 이유가 있어 웹 페이지에 이미지를 추가합니다. 내가 왜 이것을 포함하고 있는지 자문해 보십시오. 그것을 포함함으로써 내가 전달하려는 메시지는 무엇입니까? 이 설명을 포함하지 않으면 어떤 추..
-
대용량 이미지 분기 처리DOM/HTML5 2022. 9. 30. 20:34
사용 배경 페이지 로드시 바로 보여지는 화면인 경우 대용량 로드로 인해 흰 화면 노출로 성능 이슈 야기 모니터 해상도 증가 및 retina 디스플레이 등 1920을 훨씬 상회하는 이미지로 인해 PC는 1920, 2560, 3840 각각 해상도에 맞게 지원 필요 사용 범위 메인 이미지나 Stories 등에 배경처럼 전체사이즈로 들어가는 이미지 적용 사항 webP를 활용하여 이미지 용량 개선 (통상적으로 jpg, png 보다 가벼우나 추출 설정상 jpg가 더 가벼운 경우에는 jpg 사용 - DP 팀과 협의) (iOS11 이상 지원이므로 iOS10 이하 브라우저 지원할 지 여부 체크 - DP 팀과 협의) 웹/모바일 디바이스에 따른 반응형 이미지 동적 로드가 가능한 태그 사용 (웹/모바일간 비율이 상이하며 나타..
-
AxiosJavascript/ECMAScript 2015 (ES6) 2022. 9. 28. 20:02
Axios 서드파티 라이브러리로 CDN 혹은 npm 이나 yarn과 같은 패키지 매니저를 통해 설치하여 프로젝트에 추가할 수 있습니다. Axios는 브라우저 혹은 node.js 환경에서 실행할 수 있습니다. 설치하기 NPM을 사용하여 설치 npm install axios Yarn을 사용하여 설치 yarn add axios 그 후 프로젝트에서 import 해야 합니다. import axios from "axios"; 만약 브라우저에서 Axios를 사용한다면 아래와 같이 CDN을 사용할 수 있습니다. 문법 fetch와 문법은 비슷하나, 다양한 방법으로 요청할 수 있습니다. axios(url, { // 설정 옵션 }); HTTP 메서드를 붙일 수도 있습니다. axios.get(url, { // 설정 옵션 })..
-
Cross-site Scripting(XSS)INFO/WEB 2022. 9. 27. 20:50
정의 HTML 삽입(HTML Injection) 취약점이 발생하는 지점은 웹 브라우저에서 전달되는 값이 HTML 내에 출력되는 곳이다. HTML삽입이 가능하면 대부분의 공격은 자바스크립트(Javascript)를 이용한다. 이 때문에 다른 곳에서(cross-site) 전달되는 스크립트를 실행(scripting)한다고 하여 일반적으로는 크로스 사이트 스크립트(Cross-site Script, Cross-site Scripting)라고 많이 알려져 있다. XSS 종류와 공격 방법 XSS 종류 1. Reflected XSS 이름 그대로 반사하는 형태의 공격이다. DB에 저장하여 공격하는 게 아닌 1회용 공격으로 볼 수 있다. 이유는 클라이언트가 직접 누르도록 유도하기 때문이다.기본적으로 URL을 통해 스크립트 ..
-
도메인 (domain) - 인터넷 기본 도메인 , 호스트, 포워딩 알아보기 | 생활코딩INFO/WEB 2022. 3. 17. 14:12
도메인 IP란? 인터넷에 연결되어 있는 장치(컴퓨터, 스마트폰, 타블릿, 서버 등등)들은 각각의 장치를 식별할 수 있는 주소. 예) 115.68.24.88 도메인이란? IP를 이해하고 기억하기 쉽게 각 IP에 이름을 부여한 것 도메인의 구성요소 컴퓨터의 이름과 최상위 도메인으로 구성되어 있다. opentutorials.org - opentutorials : 컴퓨터의 이름 - org : 최상위 도메인 - 비영리단체 daum.co.kr - daum : 컴퓨터의 이름 - co : 국가 형태의 최상위 도메인을 의미 - kr : 대한민국의 NIC에서 관리하는 도메인을 의미 URL의 이해 도메인은 장치를 식별하기 위한 주소 URL은 서버가 가지고 있는 다양한 컨텐츠를 식별하기 위한 주소 (URL = 도메인 + 경로..
-
정규표현식 패턴 - 정규표현식 | 생활코딩INFO/WEB 2021. 10. 8. 18:12
※ 예제 설명 정규표현식 === 소스 첫 매치 모두 매치 위치 ^ : 캐럿 뒤에 나오는 패턴이 소스 상에서 시작 위치에 있을 때만 매치 ^who === who is who & : 달러 앞에 나오는 패턴이 소스 상에서 끝 위치에 있을 때만 매치 who$ === who is who 이스케이핑 \ : 백슬래시 뒤에 나오는 문자를 정규표현식에서 의미가 있는 문법적 요소(^, $, 등)가 아닌 일반 문자로 변환 ^\$ === $12-$13 *escape(이스케이프) : 코드 상에서 어떤 역할로부터 탈출(해제) 시켜 준다. 모든 문자 . : 모든 문자(≒character)를 매치 .... === test of point 특정 문자 [] : 스퀘어 브라켓(대괄호) 안에 있는 문자 중 일치하는 문자 하나를 매치 [oy..
-
2. 모듈패턴으로 기존 코드 개선하기 - 견고한 JS 소프트웨어 만들기 | 김정환Javascript/프로그래밍 기법 2021. 9. 2. 17:43
클릭 카운터 모듈 (ClickCounter) : 카운터 데이터를 다루는 모듈 (전역 공간에 있는 counter 변수를 ClickCounter 안에서 관리하자) 첫번째 스펙 "ClickCounter 모듈의 getValue() 는 카운터 값을 반환한다." > git checkout --force ClickCounter-spec-1 두번째 스펙 "ClickCounter 모듈의 increase() 는 카운터 값을 1만큼 증가한다." > git checkout --force ClickCounter-spec-2 beforEach는 it 함수 호출 직전에 실행되는 자스민 함수. describe(() => { beforeEach(() => {})// 1 afterEach(() => {})// 3 it(() => {})..