annyhpk.log

Web

[html] <img> 태그 이미지 로딩 지연 시키기

1. 지연로딩을 시키는 이유 1. 많은 이미지, 용량이 큰 이미지 로딩 2. 이미지 로딩중 - [웹 페이지 로딩 상태, 유저 인터렉션 X] 3. 유저 이탈 확률 증가 우선 화면을 그리는데 집중하고 나중에 이미지를 로딩 시키자 라는 방법론 2. HTML 이미지 태그 속성 으로 지연 시키기 //다른 콘텐츠의 표시 지연을 피하기 위해 이미지를 비동기적으로 디코딩 합니다. - loading="option" 브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다. eager(기본값) : 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. lazy : 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 스크롤링을 하다가 이미지를 보게 될 것으로 충분히 예상 가..

Web

[HTML] html 태그로 Toggle, Auto complete 구현

- Toggle 기능 - 결과물 - HTML 삽입 미리보기할 수 없는 소스 - 코드 - 오늘의 메뉴 김치찌개 배추김치 계란후라이 시금치무침 백미밥 & - Auto complete 구현 - 결과물 - HTML 삽입 미리보기할 수 없는 소스 - 코드 - 좋아하는 프로그래밍 언어는?

Web

브라우저(크롬) 단순 탐색(작동 원리) 살펴보기

1. Chrome의 멀티프로세스 아키텍처 Chrome 브라우저는 크게 5가지의 프로세스를 가지고 있고, 그 아래 여러 작업 스레드를 가지고 있습니다. 각 프로세스는 별도의 작업을 하지만 두 프로세스간 통신이 필요하다면 Inter Process Communication (IPC)를 이용합니다. 이렇게 프로세스를 분리하면 하나의 프로세스가 무응답 상태에 빠지더라도 어플리케이션의 다른 부분을 수행하는 프로세스들은 종료할 필요가 없어 해당 프로세스만 재시작할 수 있습니다. 예를 들어 Chrome 브라우저의 여러 탭이 열려있다면 각 탭은 각각의 프로세스로 동작하기 때문에 무응답 상태의 탭이 생겨나도 다른 탭에는 영향을 주지 않습니다. Browser Process : 주소창, 앞으로 뒤로 버튼을 포함한 Chrome..

Web

[웹 보안] CSRF, CORS, XSS, CSP

CSRF Cross-Site Request Forgery : 사이트 간 요청 위조 CSRF 는 공격자가 사용자가 현재 로그인된 사이트에 대해 강제로 작업을 실행하게하는 공격 입니다. // 공격 시나리오 1. 'example.com'을 방문합니다. 2. 'example.com'에는 페이지 로드시 'bank.com/송금'에 제출하는 숨겨진 양식이 있습니다. 3. 'bank.com'에 로그인 되었다면 bank.com 쿠키를 사용하여 자동으로 송금을 시작합니다. 4. 'example.com'과 'bank.com'은 출처가 다르기 떄문에 브라우저는 'example.com'에 응답 제공을 거부(CORS 때문에)하지만 공격자는 신경쓰지 않고 돈이 이미 이체되었습니다. // 방어 시나리오 1. 'bank.com'이 사..

Web

HTTP Code (1xx~5xx) 주요 코드 살펴보기

- HTTP 1XX Code 1XX코드는 중간 응답 역활을 하는 코드이고 무제한으로 보낼수있으며, 자체 독립 헤더를 포함 할 수도 있다. 하지만 잘 사용되지는 않는다. HTTP 100 Continue : 지금까지 요청은 정상이며 계속 진행하세요~~ HTTP 101 Switching Protocol : 이제 완전히 다른 작업을 수행하고 싶어요~~ Ex. http -> websocket, Discord 음성 채널 접속시 101 Code 확인가능 Connection: upgrade Upgrade: websocket HTTP 102 Processing : 당신의 요청을 아직 처리중이며 곧 응답하겠습니다~~ HTTP 103 Early Hints : 주로 Link 헤더와 함께 사용되어 서버가 응답을 준비하는 동안 ..

Web

CSS - position: sticky [scroll 중 더 나은 경험을 주는 방법]

See the Pen XWNgjpv by ChanHo Kim (@annyhpk) on CodePen. 예제 콘텐츠 상단을 잘 살펴보세요 설명: scroll될 때 자신의 부모태그 범위안에서만 fixed와 같이 고정시킬수 있습니다. sticky속성은 top, right, bottom, left 속성중 하나이상을 필수로 사용해야합니다. 자신의 부모위치가 뷰포인트에서 벗어나면 일반적인 흐름을 따릅니다. 주의 : IE11에서는 작동하지않습니다.

Web

메타 태그 <meta>

메타 데이터 메타데이터는 데이터를 설명하는 데이터이다. 메타 태그 의 구성 ( name은 정보의 형태, content는 실제 메타데이터의 컨텐츠 ) 페이지 콘텐츠 관련 키워드를 포함시키는 것은 검색엔진에서 이 페이지가 더 많이 표시될 가능성이 생길 수 있다. 그러나 많은 기능들은 더이상 사용되지 않는다. 스팸 발송자들이 이를 악용한 사례로 인해 검색 엔진들이 무시해버린다. 다른 종류의 메타데이터 Open Graph Protocol- Facebook이 웹사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜이다. Twitter 에서도 유사한 형태의 독점적인 자체 메타데이터를 가지고 있는데, 특정 웹사이트의 url이 twittr.com에 표시 될 때와 유사한 효과가 있다. 아래는 국내 ..

Web

URL 끝에 / 가 붙는 이유?

https://www.google.com/ => 디렉토리 https://www.google.com => 파일 URL 끝에 /(슬래시)가 붙는 것은 트레일링 슬래시(trailing slash) 라고 부른다. 트레일링 슬래시가 URL끝에 붙는 것은 해당 URL 리소스가 디렉토리(directory)라는 뜻이다. 반대로 트레일링 슬래시가 붙지 않으면 URL 리소스가 파일(file)이다. (번외) 마케팅 전문가가 웹사이트 홍보를 할때는 더 깔끔해보이기 위해 트레일링 슬래시를 제거한다. 하지만 트레일링 슬래시를 붙이면 더 빠른 속도로 리소스를 찾을 수 있다. 트레일링 슬래시 미사용 : 파일검색 -> (없을 경우)디렉토리 검색 -> (디렉토리 존재시)내부 파일(index.html) 확인. 트레일링 슬래시의 경우 : ..