프론트엔드 공부/Web Server
-
웹페이지(브라우저) 렌더링 과정 렌더링 엔진은 HTML 파일과 SytyleSheet를 해석해서 렌더트리를 만든다. HTML 해석 -> DOM Tree SytyleSheet 해석 -> CSSOM Tree // CSS Object Model DOM Tree + CSSOM Tree -> Render Tree Render Tree는 화면에 표시되는 모든 노드의 컨텐츠와 스타일 정보를 포함하고있고 렌더트리가 형성되면 레이아웃 단계로 진행이 된다. 브라우저 내에서 뷰포트와 노드들의 정확한 위치와 크기들을 계산하는 단계를 레이아웃(Layout)이라고 하고 전문용어로 리플로우(Reflow)라고 합니다. Reflow(Layout이라고도 함), Repaint(Redraw라고도 함) 그런데 브라우저 렌더링 과정과 reflo..
리플로우(Reflow)와 리페인트(Repaint)웹페이지(브라우저) 렌더링 과정 렌더링 엔진은 HTML 파일과 SytyleSheet를 해석해서 렌더트리를 만든다. HTML 해석 -> DOM Tree SytyleSheet 해석 -> CSSOM Tree // CSS Object Model DOM Tree + CSSOM Tree -> Render Tree Render Tree는 화면에 표시되는 모든 노드의 컨텐츠와 스타일 정보를 포함하고있고 렌더트리가 형성되면 레이아웃 단계로 진행이 된다. 브라우저 내에서 뷰포트와 노드들의 정확한 위치와 크기들을 계산하는 단계를 레이아웃(Layout)이라고 하고 전문용어로 리플로우(Reflow)라고 합니다. Reflow(Layout이라고도 함), Repaint(Redraw라고도 함) 그런데 브라우저 렌더링 과정과 reflo..
2023.04.10 -
OAuth 이란? OAuth(Open Authorization)는 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 권한을 위임(Delegated Authorization)을 위한 개방형 표준 프로토콜이다. OAuth 2.0은 승인을 위한 업계 표준 프로토콜이다. OAuth 2.0은 웹 애플리케이션, 데스크톱 애플리케이션, 기타 장치에 대한 특정 인증 권한을 제공하면서 클라이언트 개발자 작업을 단순화시켜준다. OAuth는 인증 정보를 제공하는 웹사이트(서비스 제공자)와 이 정보를 이용하려는 웹사이트나 앱(클라이언트) 사이의 인증을 관리한다. 클라이언트는 사용자 인증 정보를 직접 수집하지 않..
OAuth이란?OAuth 이란? OAuth(Open Authorization)는 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 권한을 위임(Delegated Authorization)을 위한 개방형 표준 프로토콜이다. OAuth 2.0은 승인을 위한 업계 표준 프로토콜이다. OAuth 2.0은 웹 애플리케이션, 데스크톱 애플리케이션, 기타 장치에 대한 특정 인증 권한을 제공하면서 클라이언트 개발자 작업을 단순화시켜준다. OAuth는 인증 정보를 제공하는 웹사이트(서비스 제공자)와 이 정보를 이용하려는 웹사이트나 앱(클라이언트) 사이의 인증을 관리한다. 클라이언트는 사용자 인증 정보를 직접 수집하지 않..
2023.03.09 -
HTTP의 특성 토큰에 대해 알아보기 전에 HTTP의 중요한 특성을 이해하고 있어야 합니다. HTTP는 서버와 클라이언트가 데이터를 주고 받는 대표적인 통신 프로토콜 중 하나입니다. 이러한 HTTP 프로토콜은 각 연결과 상태가 독립적이라는 특성을 갖고 있습니다! 즉, HTTP는 connectionless(연결을 유지 하지 않음)하며, stateless(상태를 유지하지 않음)합니다(쉽게 말해 전에 무슨 일이 있었는지 전혀 모르고, 또 알려고도 하지 않는 특성입니다). 따라서 쿠키 또는 세션 등 이전 정보를 기억할 수 있는 추가적인 조치가 없다면, 사용자가 로그인 한 다음 페이지를 이동하면 바로 다시 로그인을 해야하는 불편한 일이 발생할 수 있습니다. 토큰 토큰(Token)은 말 그대로 동전이라는 뜻 이지만..
토큰, JWT(JSON Web Token)HTTP의 특성 토큰에 대해 알아보기 전에 HTTP의 중요한 특성을 이해하고 있어야 합니다. HTTP는 서버와 클라이언트가 데이터를 주고 받는 대표적인 통신 프로토콜 중 하나입니다. 이러한 HTTP 프로토콜은 각 연결과 상태가 독립적이라는 특성을 갖고 있습니다! 즉, HTTP는 connectionless(연결을 유지 하지 않음)하며, stateless(상태를 유지하지 않음)합니다(쉽게 말해 전에 무슨 일이 있었는지 전혀 모르고, 또 알려고도 하지 않는 특성입니다). 따라서 쿠키 또는 세션 등 이전 정보를 기억할 수 있는 추가적인 조치가 없다면, 사용자가 로그인 한 다음 페이지를 이동하면 바로 다시 로그인을 해야하는 불편한 일이 발생할 수 있습니다. 토큰 토큰(Token)은 말 그대로 동전이라는 뜻 이지만..
2023.03.08 -
해싱(Hansing)이란? 해싱은 암호 및 기타 중요한 데이터를 암호화하는 데 사용되는 기술입니다. 해싱은 입력을 받아 고정된 크기의 문자열을 생성하는 단방향 함수입니다. 이 출력을 해시라고 합니다. 해시는 그것을 생성한 입력에 대해 고유합니다. 즉, 입력에 약간의 변화가 있어도 완전히 다른 해시가 생성됩니다. 해싱은 해시 함수(Hash Function)을 사용하여 암호화를 진행하는데, 해시 함수는 다음과 같은 특징을 가집니다. 항상 같은 길이의 문자열을 리턴합니다. 서로 다른 문자열에 동일한 해시 함수를 사용하면 반드시 다른 결과값이 나옵니다. 동일한 문자열에 동일한 해시 함수를 사용하면 항상 같은 결과값이 나옵니다. 비밀번호 해시 함수(SHA1) 리턴 값 ‘password’ ‘5BAA61E4C9B93..
Hashing해싱(Hansing)이란? 해싱은 암호 및 기타 중요한 데이터를 암호화하는 데 사용되는 기술입니다. 해싱은 입력을 받아 고정된 크기의 문자열을 생성하는 단방향 함수입니다. 이 출력을 해시라고 합니다. 해시는 그것을 생성한 입력에 대해 고유합니다. 즉, 입력에 약간의 변화가 있어도 완전히 다른 해시가 생성됩니다. 해싱은 해시 함수(Hash Function)을 사용하여 암호화를 진행하는데, 해시 함수는 다음과 같은 특징을 가집니다. 항상 같은 길이의 문자열을 리턴합니다. 서로 다른 문자열에 동일한 해시 함수를 사용하면 반드시 다른 결과값이 나옵니다. 동일한 문자열에 동일한 해시 함수를 사용하면 항상 같은 결과값이 나옵니다. 비밀번호 해시 함수(SHA1) 리턴 값 ‘password’ ‘5BAA61E4C9B93..
2023.03.08 -
보호되어 있는 글입니다.
세션(블로깅중)보호되어 있는 글입니다.
2023.03.07 -
쿠키란 무엇인가요? 쿠키는 인터넷 사용자가 어떤 웹 사이트를 방문할 때 그 사이트에서 사용자의 컴퓨터나 모바일 기기에 저장하는 작은 텍스트 파일입니다. 쿠키는 사용자가 웹 사이트를 방문할 때마다 브라우저가 서버로부터 전송받아 저장합니다. 이후 사용자가 동일한 웹 사이트를 방문할 때마다 쿠키는 해당 웹 사이트에 사용자 정보를 제공하게 됩니다. 쿠키의 역할은 무엇인가요? 쿠키는 웹 사이트에서 사용자 정보를 저장하고, 다음에 해당 웹 사이트를 방문할 때 사용자 정보를 불러와 편리한 이용을 제공합니다. 예를 들어, 웹 사이트에서 로그인을 할 때 사용자 정보를 저장하여 사용자가 로그인을 다시 하지 않아도 되도록 합니다. 또한 쿠키는 사용자가 웹 사이트에서 설정한 언어, 테마, 글꼴 등의 환경 설정 정보를 저장하여..
쿠키란 무엇일까? 개념, 필요성, 속성, 문제점쿠키란 무엇인가요? 쿠키는 인터넷 사용자가 어떤 웹 사이트를 방문할 때 그 사이트에서 사용자의 컴퓨터나 모바일 기기에 저장하는 작은 텍스트 파일입니다. 쿠키는 사용자가 웹 사이트를 방문할 때마다 브라우저가 서버로부터 전송받아 저장합니다. 이후 사용자가 동일한 웹 사이트를 방문할 때마다 쿠키는 해당 웹 사이트에 사용자 정보를 제공하게 됩니다. 쿠키의 역할은 무엇인가요? 쿠키는 웹 사이트에서 사용자 정보를 저장하고, 다음에 해당 웹 사이트를 방문할 때 사용자 정보를 불러와 편리한 이용을 제공합니다. 예를 들어, 웹 사이트에서 로그인을 할 때 사용자 정보를 저장하여 사용자가 로그인을 다시 하지 않아도 되도록 합니다. 또한 쿠키는 사용자가 웹 사이트에서 설정한 언어, 테마, 글꼴 등의 환경 설정 정보를 저장하여..
2023.03.07 -
01. 동일 출처 정책(SOP)에서 동일한 출처(Origin)로 보기 위해 동일해야 하는 요소를 고르세요. (정답 세 개) A. protocol B. host C. port D. url-path E. query 더보기 A. protocol B. host C. port D. url-path E. query 동일 출처 정책(SOP)에서 protocol, host, port가 같으면 동일한 출처로 보고 있습니다. 02. CORS 설정 방법에 대한 설명으로 옳지 않은 것을 고르세요. A. Node.js에서 setHeader 메서드를 이용해 설정할 수 있다. B. Node.js에서 writeHead 메서드를 이용해 설정할 수 있다. C. Node.js에서 Access-Control-Allow-Origin에 출처를..
[Web Server] 기초 종합퀴즈01. 동일 출처 정책(SOP)에서 동일한 출처(Origin)로 보기 위해 동일해야 하는 요소를 고르세요. (정답 세 개) A. protocol B. host C. port D. url-path E. query 더보기 A. protocol B. host C. port D. url-path E. query 동일 출처 정책(SOP)에서 protocol, host, port가 같으면 동일한 출처로 보고 있습니다. 02. CORS 설정 방법에 대한 설명으로 옳지 않은 것을 고르세요. A. Node.js에서 setHeader 메서드를 이용해 설정할 수 있다. B. Node.js에서 writeHead 메서드를 이용해 설정할 수 있다. C. Node.js에서 Access-Control-Allow-Origin에 출처를..
2023.02.08 -
1. statesairline statesairline/app.js 는 서비스에 필요한 미들웨어와 웹 서버를 실행하는 코드가 작성되어 있습니다. 2. router statesairline/router/ 안에는 airport API, book API, flight API 요청을 수행하는 라우터가 작성되어 있습니다. 작성된 라우터 내용을 통해 API 요청을 받을 수 있습니다. 3. controller statesairline/controller/ 안에는 정의된 API 요청을 수행하는 코드를 작성해야 합니다. ( airportController.js 에 작성된 내용을 참고하여 작성합니다. ) 4. repository statesairline/repository/flightlist.js 는 서비스에서 제공하는 ..
StatesAirline Server1. statesairline statesairline/app.js 는 서비스에 필요한 미들웨어와 웹 서버를 실행하는 코드가 작성되어 있습니다. 2. router statesairline/router/ 안에는 airport API, book API, flight API 요청을 수행하는 라우터가 작성되어 있습니다. 작성된 라우터 내용을 통해 API 요청을 받을 수 있습니다. 3. controller statesairline/controller/ 안에는 정의된 API 요청을 수행하는 코드를 작성해야 합니다. ( airportController.js 에 작성된 내용을 참고하여 작성합니다. ) 4. repository statesairline/repository/flightlist.js 는 서비스에서 제공하는 ..
2023.02.08