공부/기타등등8 [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. [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. [nginx] failed to start the nginx http and reverse proxy server. nginx 상황 failed to start the nginx http and reverse proxy server. nginx 면접 중에, 메인 로딩 로직에대해서 조언을 해주셔서 해당 방법으로 수정 후, 재배포를 하는데 엄청난 에러가 발생했다. 위 에러가 뜨면서 그냥 nginx가 실행이 안되고...nodeapp도 pm2로 안되고... 원인 위에 써진 말처럼 3005번 포트가 사용중이라서 안되고 있었다. 문제는 근데 3005번 포트는 우리 서버가 사용해야하는데 왜 nginx가 사용하려고 하는 지??🤔? 해결 > 일단 죽이는 방법은 아래 접은 글 더보기 netstat -tulpn # 걜 죽인다. # 정상 종료 -15 kill -15 pid # 강제 종료 kill -9 pid netstat 네트워크 프로토콜 통계 -p.. 2021. 8. 27. 정규 표현식 regex 실제 문자열 관련 알고리즘을 풀 때, 많이 사용하는 것같아서 정리한다. 🍳 정규 표현식 정규 표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴이다. 자바스크립트에서 정규 표현식을 사용하는 메서드들 RegExp 객체 exec 메서드, test 메서드 String 객체 match 메서드, replace 메서드, search 메서드, split 메서드 등 정규 표현식 만들기 자바스크립트에서 정규 표현식을 만드는 방법은 두 가지가 있다. 정규 리터럴 '/'로 감싸서 사용하는 패턴 스크립트가 불려와 질 때, 컴파일된다. 정규식이 상수라면 리터럴 방식 사용하기 const reg = /ab+c/; RegExp 객체의 생성자 함수 사용 실행 시점에 컴파일된다. 정규식 패턴이 변경될 수 있는 .. 2021. 7. 4. 이전 1 2 다음
