거북이개발자

1. DOCTYPE - DOCTYPE 선언은 HTML 문서에서 태그를 정의하기 전에 먼저 선언되어야만 한다. - 이러한 DOCTYPE 선언은 HTML 태그는 아니지만, 선언된 페이지의 HTML버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문으로, 대소문자를 구분하지 않습니다. - HTML 4.01에서 DOCTYPE 선언은 SGML을 기반으로 하기 때문에 DTD를 참조해야 한다. - DTD는 브라우저가 콘텐츠를 정확하게 표현하도록 마크업 언어에 대한 규칙을 명시한다. - HTML5는 SGML을 기반으로 하지 않기 때문에 DTD를 참조할 필요가 없다. 2. DTD (Document Type Definition) - DTD란 문서 형식을 정의해놓은 것으로 DOCTYPE을 명시할 때 사용한다. 즉, ..

1. WebPageTest (1) WebPageTest란? : 웹 페이지의 성능을 진단하는 방법을 알려주는 페이지이다. (2) 모바일 사이트 성능 측정하기 : - [Test Location] 드롭박스 메뉴에서 선택 가능하다. - 네트워크 환경 : 설정 가능하다. (3) 모바일 사이트 성능 측정하기 : - First Byte Time : First Byte Time은 HTTP 요청을 했을 때 처음 byte가 브라우저에 도달하여 프로세싱이 시작되는 시간을 뜻합니다. 구체적으로 브라우저의 요청 준비 시간, 서버 처리시간, 네트워크 혼잡에 따른 지연시간을 포함한다. First Byte Time이 느린 경우 대부분 서버의 처리 시간이 오래 걸렸다고 의심해 봐야 한다. 일반적으로 500ms 이하의 속도가 나오도록 ..

1. HTTP의 발전 (1) : - HTTP/0.9 : 웹 콘텐츠를 요청하는 GET 메소드만 존재하고 HTML만 읽을 수 있고, 클라이언트의 정보를 서버에 전달할 방법은 없었다. - HTTP/1.0 : HTTP 페이로드 외에도 헤더를 통해 클라이언트와 서버의 정보를 전달할 수 있다. 또한 이미지나 동영상 등 다양한 정보를 주고받을 수 있게 되었다. POST 메소드를 추가하여 클라이언트의 정보를 웹 서버로 전달하는 방법도 지원하기 시작했다. Content-Encoding 헤더를 통해 클라이언트 - 서버 간 지원하는 압축 알고리즘 정보를 서로 공유함으로써 압축을 지원한다. (2) HTTP/1.1 : - HTTP의 첫 번째 공식 표준 버전이다. GET, POST 외에 PUT, DELETE를 이용해 파일 업로드..

CAC(Customer Acquistion Cost)란? - 한명의 유료결제자를 얻는데 드는 비용이다. (2) CAC 계산법 : CAC = (마케팅 프로젝트 한 개에서 사용된 전체 마케팅 비용 / 마케팅을 통해 유치된 고객의 수) 예를 들어 전단지에 100,000원을 투자해 마케팅을 해서 물건을 구매한 고객이 2명이라면 CAC = 100,000/2 = 50,000 이 됩니다. LTV(Live Time Value)란? - 고객 총가치를 의미한다. 즉 이 고객이 우리 서비스에서 평생 얼마 큼의 돈을 지불할 것인가를 측정하는 지표이다. (2) LTV 계산법 : LTV= 해당 코호트 총매출 / 해당 코호트 전체 유저수 Attribution란? 어트리뷰션이란 단어 그대로 할당이라는 의미로 모바일 앱 어트리뷰션은 ..

1. 웹 브라우저 현황 (1) 웹 브라우저 현황 : 2. 웹 브라우저 동작 이해하기 (1) 브라우저 동작 원리 : - 웹 사이트 주소를 입력함으로써 브라우저의 동작이 시작된다. - 브라우저는 가장 먼저 도메인 서버와 통신하여 접속하려는 호스트의 IP를 찾는다. - 그리고 해당 아이피를 가진 서버와 통신을 시도해 TCP 연결을 맺는다. - HTTPS는 암호화된 연결을 생성하려는 협의 단계가 더 추가된다. - 브라우저는 서버로부터 필요한 리소스들을 다운로드해 이를 화면에 표현한다. - 브라우저가 리소스를 다운로드할 때는 랜딩페이지의 HTML을 서버에 요청해 다운로드한다. - 그리고 HTML의 구문을 분석(parsing)하면서 참조된 하위 리소스들을 차례로 다운한다. (2) 브라우저 아키텍처 : 브라우저는 크..

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조회를 최소화한다. 스크립트 크기를 최소화해 바이트자체를 줄인다...