전체 글57 [web] 브라우저의 구조 ✨브라우저의 주요 기능 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것 자원은 보통 HTML 문서지만 PDF, 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI에 의해 정해진다. ✨ 브라우저의 기본 구조 사용자 인터페이스 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분들 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. 렌더링 엔진 요청 받은 내용을 브라우저 화면에 표시하는 일을 한다. ex) HTML을 요청 시, HTML과 CSS를 파싱해 화면에 표시한다. 대표적으로 파이어폭스가 사용하는 게코Gecko, 사파리가 사용하는 Webkit, 크롬이 사용하는 Blink가 있다. 통신 HTTP 요청과 같은 네트워.. 2023. 1. 16. [web] OAuth HTML 삽입 미리보기할 수 없는 소스 OAuth 참고 자료OAuth 개념 및 동작 방식 이해하기OAuth 란 무엇일까 MDS인텔리전스 블로그 : 네이버 블로그 [OAuth2] 권한 부여 방식의 종류 ( Authorization Grant ) OAuth - 위키백과, 우리 모두의 백과사전 ✨ OAuth란? RFC6749 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준 - wiki 즉, 다른 웹사이트 상 정보(구글, 페이스북 등..)를 웹 사이트나 어플리케이션에게 접근 권한을 부여할 수 있는 공통적인 방법이다. Jumpit 로그인 버튼들 사용자는 어플리케이션.. 2023. 1. 9. [js] ~ tilde와 ~~ double tilde 프로그래머스 코딩테스트를 풀면서 다른 사람들의 코드를 많이 접하게 됬는 데, 그 중에서 ~~를 사용한 코드를 보고 ~ Bitwise Not (~) 연산자에 대해 정리해보기로 했다. ✨ ~ 연산자 비트를 반전 시킨다. 다른 비트 연산자와 마찬가지로 연산 전에 부호가 있는 32비트 정수로 변경한 후 연산을 진행한다. 자바스크립트는 숫자를 표현할 때, 64 bit 부동소수점 방식을 사용한다. 그러나 모든 비트연산들은 연산 전에 32비트 정수로 변환하고 비트 연산을 진행한다. 연산이 끝난 후, 다시 64비트로 변환한다. ✨ ~를 하나만 쓰는 경우 ~N은 -(N+1)을 반환한다. const a = 5; // 0000 0000 0000 0000 0000 0000 0000 0101 const b = -3; // 11.. 2023. 1. 8. [web] 쿠키의 동작 해당 글은 web.dev의 SameSite 쿠키 설명 글을 제가 이해하기 쉬운 방향으로 다시 정리한 글 입니다. 원본 글을 읽으시는 걸 추천합니다. 🍪 쿠키란? 웹 사이트를 방문했을 때, 웹 브라우저를 통해 사용자의 로컬 환경에 설치되는 작은 기록 정보 파일 HTTP 프로토콜에 속한다. 서버가 보내주는 데이터이다. 🍪 쿠키를 사용하는 경우 세션 관리 서버에서 저장해야하는 세션 정보를 관리한다. 민감한 정보 X. ex) 세션ID 개인화 사용자 선호, 테마 등을 관리한다 사용자 트래킹 사용자의 행동을 기록하고 분석 🍪 first-party 및 third-party 쿠키 first-part 쿠키 현재 사이트의 도메인, 브라우저 주소 표시줄에 표시되는 도메인과 일치하는 쿠키를 first-party 쿠키라고한다... 2023. 1. 6. [web]웹 접근성과 HTML의 tabindex 속성 ✨ 웹 접근성 모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것 - 출처 ex. 웹 페이지의 확대 기능을 막아놓는 경우 -> 시력이 나쁜 사람들은 웹 사이트에서 제공하는 정보를 얻기 힘들다. ✨ tabindex란? tabindex가 있는 요소는 포커스 될 수 있고, Tab키를 눌렀을 때 포커스의 이동 순서를 지정한다. tabindex를 사용할 때는 주의해야한다. tabindex를 남용하면 접근성 보조기기(ex. 스크린 리더)를 사용하는 사용자의 페이지 탐색과 조작에 방해가 된다. 0보다 큰 tabindex값을 사용하면 안된다. 접근성 보조기의 페이지 탐색과 조작에 방해가 된다. - tabindex 값을 0보다 큰 값을 쓰지말고, 마크업 순서가 논리적으로 잘 구성되어 자연스럽게 tab이동이 되도.. 2023. 1. 3. [react-redux] 리액트에서 리덕스 사용하기 ✨ 리덕스란? 자바스크립트 어플리케이션을 위한 예측 가능한 상태 관리 라이브러리 리덕스가 생겨난 이유 자바스크립트 싱글 페이지 어플리케이션이 갖추어야하는 요건이 복잡해지면서, 어느때보다 많은 상태를 자바스크립트 코드로 관리할 필요성이 생겨났다. 여기서 상태란, 서버 응답, 캐시 데이터, 지역적으로 생성해 쓰지만 아직 서버에 저장되지 않은 데이터 이외에도 활성화된 라우트, 선택된 탭, 로딩 여부, 페이지네이션 컨트롤 등의 다양한 UI 상태를 의미한다. 리덕스는 이런 복잡한 상태들을 더 편리하게 관리하기 위해서 만들어진 라이브러리이다. 리액트에서만 사용할 수 있는 것이 아니라 자바스크립트 어플리케이션에서는 리덕스를 사용할 수 있다. 리덕스의 3가지 원칙 단일 출처 원칙 상태는 읽기 전용 리듀서는 순수 함수로.. 2022. 12. 28. 이전 1 2 3 4 5 ··· 10 다음
