전체 글
-
img Lazy loading: loading="lazy" 옵션을 사용하자Web Dev/8. 메모 2021. 2. 26. 13:42
img lazy loading을 구현하기 위해서 별의별 기법을 다 써보곤 했는데, 브라우저 단에서 아주 잘 지원하고 있다. (크롬 기준) web.dev/browser-level-image-lazy-loading/ Browser-level image lazy-loading for the web This post covers the loading attribute and how it can be used to control the loading of images. web.dev
-
정규표현식Web Dev/8. 메모 2021. 2. 24. 11:58
www.youtube.com/watch?v=Gg0tlbrxJSc&ab_channel=MINIMILAB 정규표현식: 문자열에 특정한 규칙이 있는 경우, 이를 추출하기 위해 사용하는 것 - 직접 라우터를 만들어보는데 이때 parameter나, fragment를 추출할때 사용한다. - 이를 통하면 복잡한 처리가 줄어든다 - 쉽게 사용할 수 있는 곳: regexr.com/ RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com - developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Reg..
-
Npx to run command of locally installed packagesWeb Dev/4. Node Js 관련 2021. 2. 23. 16:17
www.freecodecamp.org/news/npm-vs-npx-whats-the-difference/ npm vs npx — What’s the Difference? If you’ve ever used Node.js, then you must have used npm for sure. npm (node package manager) is the dependency/package manager you get out of the box when you install Node.js. It provides a way for developers to install packages both globally and locall www.freecodecamp.org NPX 가 그저 module 설치 안하고 run ..
-
Client-side storage: 브라우저를 통해 웹사이트가 유저의 컴퓨터에 데이터를 저장하는 여러 방법Web Dev/8. 메모 2021. 2. 21. 18:06
developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage Client-side storage - Learn web development | MDN Modern web browsers support a number of ways for web sites to store data on the user's computer — with the user's permission — then retrieve it when necessary. This lets you persist data for long-term storage, save sites or documents for offline use, r deve..
-
HTTP 완벽 가이드 13장 다이제스트 인증Web Dev/7. 네트워크 2021. 2. 21. 14:53
기본 인증을 안전하게 사용하는 유일한 방법은 SSL과 결합해서 사용하는 것이다 다이제스트 인증은 기본인증과 호환되는 더 안전한 대체채로서 개발되었다. 많이는 안쓰이지만, 개념자체는 중요하다 다이제스트 인증의 특징 비밀번호를 절대로 네트워크를 통해 평문으로 전송하지 않는다 인증 체결을 가로채서 재현하려는 악의적인 사람들을 차단한다 구현하기에 따라서,메시지 내용위조를 막는 것도 가능하다 그외 몇몇 잘알려진 형태의 공격을 막는다 1)비밀번호를 안전하게 지키기 위해 요약 사용하기 다이제스트 인증은 "절대로 비밀번호를 네트워크를 통해 보내지 않는다". 대신에 비밀번호를 비가역적으로 뒤섞은 지문(fingerprint), 혹은 요약(digest)을 보낸다 2)단방향 요약 md5같은 요약함수를 통해 일반적으로 입력 가..
-
HTTP 완벽 가이드 12장 기본인증Web Dev/7. 네트워크 2021. 2. 21. 14:52
웹사이트에 있는 개인의 프로필이나 개인이 작성한 문서는 해당 소유자의 동의 없이는 권한이 없는 사용자가 볼 수 없어야한다. 인증이란? 당신이 누구인지 증명하는 것 완벽한 인증이란 없다 인증 프로토콜과 헤더 www-authenticate 단계 헤더 설명 메서드/상태 요청 첫번째 요청에는 인증 정보가 없다 GET 인증 요구 WWW-Authenticate 서버는 사용자에게 사용자 이름과 비밀번호를 제공하라는 의미로 401상태 정보와 함께 요청을 반려한다. 서버에는 각각 다른 비밀번호가 있는 영역들이 있을 것이므로, 서버는 WWW-Authenticate 헤더에 해당 영역을 설명해 놓는다 401 Unauthorized 인증 Authorization 클라이언트는 요청을 다시 보내는데, 이번에는 인증 알고리즘과 사용..
-
HTTP 완벽 가이드 11장 클라이언트 식별과 쿠키Web Dev/7. 네트워크 2021. 2. 21. 14:52
HTTP 는 Stateless한데 요새 웹사이트들은 개별 사용자에 맞춤형 서비스를 제공하고 싶어한다. 그렇기 때문에 어떠한 방식으로 사이트를 개인화 시켜서 사용자한테 제공하려고 한다 사용자를 식별하는 여러가지 방법 HTTP 헤더사용 HTTP 요청 헤더를 이용해서 사용자 정보를 전달할 수 잇다. 헤더이름 헤더타입 설명 From 요청 사용자의 이메일 주소(스팸때문에 잘 쓰이지 않음) User-Agent 요청 사용자의 브라우저 Referer 요청 사용자가 현재 링크를 타고 온 근원 페이지 Authorization 요청 사용자 이름과 비밀번호 Client-ip 확장(요청) 클라이언트의 IP 주소 X-Forwarded-For 확장(요청) 클라이언트의 IP 주소 Cookie 확장(요청) 서버가 생성한 ID 라벨 클..
-
[Chrome Extension 개발] 선대 개발자들이 이룩한 React를 도입해보자(Parcel과 함께!)Web Dev/5. Projects 2021. 2. 18. 23:40
오늘 작업한양 Chrome Extension을 개발하려면 크게 1. background 관련 파일 2. popup 관련 파일 3. content 관련 파일 4. option 관련 파일이 필요하다 background 관련 파일을 제외하고는 다 UI를 개발하는 일반 웹개발과 동일했다. 그런데 popup, option 은 popup.html, option.html 로 엔트리 포인트를 잡을 수 있는데, content관련의 경우 content.js 같이 js로 진입을 해야해가지고 document.createElement로 한땀한땀 태그를 생성했는데, 사람이 할짓이 아닌것 같아...(선대 개발자들을 존경한다...ㅜㅠ) 문명의 산실인 React를 적용하고, Bundling은 Parcel로 했다. { "name": "..