거북이개발자

1. 이미지의 중요성 (1) 화소 밀도 : 화소 밀도란 물리 스크린 공간 안에 얼마나 많은 픽셀이 압축되어 있는가를 의미한다. 1x, 2x, 3x, 등의 기기 픽셀 비율(DPR)로 표현한다. - DPR(Device Pixel Ratio) : 단위 길이 안에 존재하는 픽셀의 개수를 상대적으로 나타내는 단위이다. - 포인트 : 1x 에서는 40픽셀, 2x 에서는 80픽셀, 3x 에서는 120픽셀의 너비를 가진 이미지를 뜻한다. - Hero 이미지(대문 이미지) : 사이트 처음 접속시 보는 가장 크고 특색 있는 이미지를 뜻한다. 사용자는 Hero 이미지를 보는 순간 홈페이지가 대부분 로딩되었다고 느낀다. - 개발자 고민 : 고품질 이미지를 그대로 사용하면서 웹 성능 문제가 생기지 않게 하는 것. 2. 디지털 ..

1. HTTP 요청 수 줄이기 (1) HTTP 요청 : 웹 페이지에서 요청하는 콘텐츠의 수가 많을수록 로딩 시간이 길어진다. 콘텐츠는 동일하게 유지하며 HTTP 요청 수를 줄이는 방법을 찾아야 한다. (2) 클라이언트가 웹 서버와 통신하는 법 : - 브라우저는 DNS 시스템으로 특정 도메인의 접속 IP를 알아내 접속을 하고 - HTML 파일을 먼저 응답받은 후 HTML 내에 있는 CSS, JS, Image 등을 차례로 호출한다. - 브라우저가 HTML을 모두 해석하여 콘텐츠를 전부 받아오기까지 호출이 계속 진행 된다. (3) 스크립트 파일 병합 : -소프트웨어 공학에서 제안하는 정복과 분할 : HTTP 요청 수를 증가시키므로 웹 성능에 부정적인 영향을 미친다. - 기능 단위 모듈화 : 여러 파일을 하나의..

1. 웹 최적화란? (1) 웹 최적화란 : 웹 최적화란 최고의 웹 성능을 구현하기 위해 최고의 조건을 만드는 다양한 노력을 의미한다. 즉 최고의 성능을 만드는 최적화 조건을 갖추는 것이다. 최적화에는 크게 세 가지 방법이 있다. (2) 프런트엔드 최적화 : 웹 UI/UX 관련된 최적화이다. 주로 HTML, JS, CSS, Image을 최적화를 진행한다. 최적화가 잘되어 있는 웹사이트는 브라우저에서 콘텐츠를 다운로드, 로딩, 렌더링 할 때 속도가 빨라진다. 브라우징 시간별 콘텐츠를 볼 때 대부분 프런트엔드에서 발생한다. 프런트엔드 최적화하는 대표적 기술은 표와 같다. 스트립트를 병합하여 브라우저의 호출 개수를 줄인다. 도메인 수를 줄여 DNS조회를 최소화한다. 스크립트 크기를 최소화해 바이트자체를 줄인다...

1. 웹이란? (1) 웹 : 오늘날 인터넷에 연결된 컴퓨터를 통해 정보를 공유할 수 있는 인터넷 대표적 서비스이다. (2) 웹 3요소 : - URL(Uniform Resource Locator) : 웹 자원이 인터넷상 어느 위치에 존재하고 있는지 알려주는 방법. 구성 요소로는 클라이언트와 서버가 어떤 방식으로 주고받을지 결정하는 프로토콜, 서비스의 이름을 대표하는 도메인 영역, 해당 자원이 위치하는 장소를 구조적으로 나눈 디렉터리 실제 자원이 존재하는 파일 확장자를 포함하는 자원의 결로 - 네트워크 프로토콜 : URL을 통해 알게 된 웹의 자원 위치에 접근하는 방식이다. 웹에서는 대부분 HTTP를 사용한다. HTTP는 정보를(클라이언트와 서버 사이에 필요한 정보) 주고받는 헤더 부분과 실제 데이터를(HT..

1. HTTP/1.1의 문제점 -HOLB(Head Of Line Blocking) : -HOLB(Head Of Line Blocking) : HTTP 요청을 할 때는 요청을 하고 나서 응답이 와야 다음 요청을 할 수 있었는데 HTTP/1.1에 들어오면서 파이프라이닝 기법을 통해 응답을 받지 않고도 여러개의 요청을 연속적으로 할 수 있게 되었다. 하지만 이 또한 처음의 요청에 대한 응답이 오래 걸리는 경우, 그 다음 응답까지의 시간이 지연되는 현상이 발생한다. 이렇게 파이프라이닝 기법은 심각한 문제를 안고 있었으며 이를 Head Of Lin Block 문제라고 한다. -무겁고 중복 많은 헤더 구조 : 요청을 할 때 요청에 메타정보를 넣어서 보내게 되는데, 매 요청마다 보내는 정보가 많아져서 헤더가 무거워지..

1. HTTPS란? -HTTPS는 HTTP over Secure Socket Layer의 약자로 SSL(Secure Socket Layer)을 이용한 HTTP통신 방식을 의미한다. -HTTPS는 HTTP 통신을 함에 있어서 데이터를 암호화하여 통신한다. 따라서 중간에 통신을 도청할지라도 내용을 알아볼 수 없습니다. 2. SSL란? - 클라이언트와 서버 간의 통신을 공인된 제삼자(CA) 업체가 보증해주는 전자화된 문서 - 대칭키 암호화 방식 : 인코딩과 디코딩에 같은 키를 사용하는 알고리즘 - 공개키 암호화 방식 : 인코딩과 디코딩에 다른 키를 사용하는 알고리즘 - CA : 디지털 인증서를 제공하는 공인된 기업 3. HTTPS 동작방식 1. 클라이언트와 서버에게 접속 요청을 하면 서버는 CA에서 발급받은 ..

1. HTTP(Hyper Text Transfer Protocol) -client와 web server가 통신하는 규칙 -Request : Client가 Server에 요청하는 행위 -Response : Server가 Client한테 응답하는 것 -Request Headers : 웹 브라우저가 웹 서버한테 요청한 데이터 -Response Headers : 응답하는 헤더. 2. HTTP Request message -GET : method이다. 브라우저와 서버가 어떤 방식으로 통신할 것인가 알려준다. GET은 데이터를 브라우저로 가져올 때 쓰는 것이다. -text.html : 우리가 웹서버에 요청하는 정보가 무엇인지 나타낸다. -HTTP/1.1 : 브라우저가 현재 사용할 수 있는 HTTP 버전이 1.1이다..

1. 브라우저 구조 -사용자 인터페이스 -브라우저 엔진 : 인터페이스와 렌더링 인젠 사이 동작 제어 -렌더링 엔진 : 요청한 콘텐츠를 표시 -통신 : 네트워크 호출에 사용 -자바스크립트 해석기 : 자바스크립트 코드 해석 및 실행 -UI백엔드 : 캄보 박스와 창 같은 기본 장치를 그림 -자료 저장소 : 자료를 저장하는 계층(ex 쿠키) *) 렌더링 : 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정. 2. 렌더링 엔진 -요청한 내용을 브라우저 화면에 표시하는 작업을 수행 -브라우저마다 다른 엔진 사용 -렌더링 과정 : HTML파싱(*파싱 : 읽어드린다.) -> 렌더 트리 구성 -> 렌더 트리 배치 -> 렌더 트리 그리기 (렌더링 과정에서 HTML과 CSS파일을 DOM트리 형태로 구성) 1. HTM..