본문 바로가기

programming study/web

 (42)
CORS 본 내용은 10분 테코톡 코나스님의 강의를 토대로 작성하였습니다. 1. 동일 출처 정책(SOP: Same-Origin Policy) 어떤 출처(origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식 출처가 같다는 것은 두 URL의 프로토콜, 호스트, 포트 세 개가 모두 같다는 것 2. 크로스 도메인(Cross Domain) 이슈 SOP 때문에 자바스크립트 (XMLHttpRequest)로 다른 웹 페이지에 접근할 때 같은 출처(Same Orign)의 페이지에만 접근 가능 SOP를 우회해서 서로 다른 도메인 간에 통신을 할 수 있게 해줄 무언가 필요 개발자들이 만든 해결책 JSONP Reverse Proxy Flash Socket 3. CORS의..
SPA 본 내용은 10분 테코톡 주모님의 강의를 토대로 작성하였습니다. 1. MPA(Multi-page Application) 두개 이상의 페이지로 구성된 애플리케이션 상호작용이 발생할 때마다 해당 링크로 이동하여 앱이 다시 새로고침 되는 전통적인 방식 렌더링 방식으로 Sever Side Rendering을 채택 2. SSR (Server Side Rendering) 서버로부터 완전하게 만들어진 HTML파일을 받아와 페이지 전체를 렌더링 SSR의 동작 방식 초기 화면을 로드하기 위해서 서버에 요청을 보낸다. 서버는 HTML로 화면에 표시하는데 필요한 완전한 리소스를 응답한다. 일부가 바뀌었더라도 서버는 항상 완전한 리소스를 응답한다. 앱이 다시 시작되고 화면이 깜빡인 후에 표시 3. MPA with SSR의 장..
웹 접근성 & 표준 본 내용은 10분 테코톡 미키님의 강의를 토대로 작성하였습니다. 1. 웹 표준 웹표준이란? 어떠한 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹 에서 표준적으로 사용되는 기술이나 규칙 웹 표준은 팀 버나스 리를 중심으로 한 world wide web consortium이라는 조직에 토론에 의해 결정 Recommendation - 확정 권고안이 표준 웹 표준의 장점 브라우저, OS에 관계없이 하나의 코드로 모든 플랫폼에 대응할 수 있다. 개발의 효율성, 서버 비용 절감, 운영의 효율성 검색엔진 최적화 웹 페이지가 검색 결과에서 좀 더 높은 순위로 나오는 것 웹 크롤러 봇은 웹 페이지를 탐색하여 분류하는데, 의미를 가진 시멘틱 태그를 사용하여 웹 표준을 지키면 크롤러 봇이 더 이해하기 쉽..
Web Server vs WAS 본 내용은 10분 테코톡 알리님의 강의를 토대로 작성하였습니다. 1. Web Server Web Server란? 웹 브라우저(클라이언트)로부터 HTTP 요청을 받아, HTML 문서와 같은 정적 컨텐츠를 제공하는 프로그램 정적 컨텐츠 요청 인자 값에 상관없이 달라지지 않는 컨텐츠(HTML, CSS, image…) 어느 사용자 요청이든 항상 동일한 컨텐츠 Web Server의 기능 클라이언트로부터 HTTP 요청을 받을 수 있다. 정적 컨텐츠 요청 시 정적 컨텐츠를 제공 동적 컨텐츠 요청 시 Web Application Serv er(WAS)로 전달하여 WAS가 처리한 결과를 클라이언트에 전달 2. Web Application Server Web Application Server란? DB 조회나 다양한 로직 ..
브라우저 렌더링 본 내용은 10분 테코톡 체프님의 강의를 토대로 작성하였습니다. 1. 웹 브라우저의 구조 User Interface 주소 표시줄, 이전 / 다음 / 새로고침 버튼 등 웹페이지를 제외하고 사용자와 상호작용 하는 사용자 인터페이스 Rendering Engine HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진 Browser Engine 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진 Networking 각종 네트워크 요청을 수행하는 네트워킹 파트 UI Backend 체크박스나 버튼과 같은 기본적인 위젯을 그려주는 UI 백엔드 파트 Data Persistence localSotrage나 Cookie와 같이 보조 기억장치에 데이터를 저장하는 파트 JavaScript Interprete..
REST API (2021.3.14) 01. API란? Application Programming Interface 사용자가 기능을 활용할 수 있도록 하는 제어장치 리모콘, 자판기의 버튼, 키보드와 마우스 기기와 인간의 소통창구 소프트웨어의 측면에서 제어 정보를 볼 수 있도록 하는 것 브라우저는 web API를 통해서 자바스크립트로부터 특정한 동작을 지시받는다. 윈도우는 개발자들이 시스템이나 하드웨어에 대한 세세한 지식 없이도 프로그램을 개발할 수 있다. 지정된 명령어로 윈도우에서 동작을 수행하도록 소프트웨어를 짤 수 있는 windows API를 제공한다. 02. REST API란? REST API란 HTTP 요청을 보낼 때 어떤 URI, method를 사용해야 할지 개발자 사이에 지켜지는 약속 기존의 SOAP 형식을 대체 각 요청이 어떤 ..
HTTPS (2021.3.9) HTTPS를 사용하는 이유 Hyper-Text Transfer Protocol Secure 기존의 HTTP 사이트보다 안전하다. 웹 사이트에 보내는 정보를 누군가 보지 못한다. 암호화된 텍스트로 전송 신뢰할 수 있는 사이트의 지표 피싱 사이트 판별 기관으로부터 검증된 사이트만 주소에 사용 가능 HTTP Hyper-Text Transfer Protocol 서버와 클라이언트(브라우저)가 주고받는 메시지의 형식 인터넷 상에 커뮤니케이션에 사용되는 형식 우편 주소창에 일일이 명시 기술적 접근 내가 사이트에 보내는 정보들을 제 3자가 못 보게 한다. 접속한 사이트가 믿을만한 곳인지를 알려준다. 두 보안 기능이 어떤 원리로 구현되는지 알아보자 대칭키와 비대칭키 대칭키: 메시지를 보내는 쪽과 메시지를 받는 쪽이 메시..
HTTP (2021.3.7) 등장배경 1990년대 웹은 크게 4가지의 중요한 요소로 이루어졌다. HTML: 웹 페이지를 만드는 컴퓨터 언어 URL, URI 웹 브라우저, 웹 서버 HTTP HTTP소개 클라이언트가 무엇(컨텐츠)을 요청한다. (Request) 서버가 응답한다. (Response) 이 두개를 나타내는 것이 HTTP Hyper Text Transfer Protocol 인터넷에서 가장 중요한 통신 규칙 HTML, CSS, JavaScript와 같은 컨텐츠를 주고받기 위해서 서버와 클라이언트가 서로 이해할 수 있는 공통의 약속(메시지) 매우 단순한 통신규칙이었다. 이후, 보다 풍부한 기능을 가진 프로토콜로 발전 HTML을 포함한 이미지, 오디오, 동영상 등의 멀티미디어 파일 전송 개발자 도구 살펴보기 개발자 도구의 Netwo..

티스토리툴바