1. 크로스브라우징
1. 정의
1. 크로스브라우징의 정의
- 웹페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업
- HTML5, CSS3, Javascript작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서라도 사이트가 의도된 대로 보여지고 작동되는 기법
- 크로스 브라우징은 일반인이 아닌 다양한 사용자, 즉 나이가 어린 사람, 시각 장애인, 노약자가 웹을 쉽게 사용할 수 있도록 돕는다. 텍스트, 폰트 설정, 테이블, 대체 태그, 접근성 시험에 대한 W3C의 웹 표준을 활용하면 다양한 웹 브라우징 환경에서도 동일한 웹을 균등하게 표현할 수 있다.
- 동일성X, 동등성O
2. 원인
- 브라우저마다 랜더링 엔진이 다르기 때문
3. IE
- 보통의 브라우저는 최신 버전으로 자동 업데이트가 되지만, IE는 사용자가 직접 업데이트를 진행해야 하며, 윈도우 버전에 따라 최대 버전이 한정되어 있음
4. 브라우저 대응 순서
- 가장 점유율이 높은 브라우저부터 맞추는 것이 좋음
- 점유율 확인 사이트 : https://gs.statcounter.com/
(현재 1위 크롬, 2위 사파리...)
5. 크로스브라우징 작업
1. https://caniuse.com/ or https://developer.mozilla.org/ko/ or https://modernizr.com/
해당 사이트를 참고하여 해당 브라우저에 사용할 수 있는 코드인지 확인하고 작업한다
2. 브라우저별 벤더프리픽스
- 크롬 : -webkit-
- 안드로이드 : -webkit-
- 사파리 : -webkit-
- 파이어폭스 : -moz-
- 오페라: -o-, -webkit-
- 익스플로러: -ms-
3. CSS 초기화 작업
- 웹 브라우저마다 default값이 다르기 때문에 default값을 초기화해주어야 함
- css태그 새롭게 생성 / 브라우저에서
4. 핵 (Hack) : 비추
- 스타일을 줄 때, 특수문자를 넣어서 IE특정 버전에서 인식되도록 하는 방법
5. IE용 주석을 사용
6. 메타 태그를 이용한 IE모드
<head>
...
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
...
</head>- head 태그 안에 넣어두며 IE가 문서를 읽고 랜더링 할 때는 원하는 모드로 랜더링을 하게 해줌.
- 만약 content값이 "IE=edge"라면 해당 브라우저가 할 수 있는 가장 최신의 모드로 랜더링 함
7. 호환성 테스트
- 모든 부분을 테스트할 순 없길래 필수사항 중 아래와 같이 기능을 분류할 수 있음
1. 기본 기능: 링크, 대화상자, 메뉴 등
- 모든 대화상자, 메뉴가 잘 동작하는가?
- 양식 필드의 유효성 검사가 올바르게 작동하는가? 등
2. 그래픽 사용자 인터페이스: 응용 프로그램의 모양과 느낌
- 폰트, 이미지, 레이아웃 등이 디자인대로 잘 나오는가?
3. 응답: 애플리케이션이 사용자 작업에 얼마나 잘 반응하는가
4. 반응형: 다양한 화면 크기와 방향에 맞는지 확인
8. Babel
- 크로스 브라우징 이슈를 해결하기 위해 생겨난 툴
1. 동작방식
- 파싱(parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계
- 변환(Transforming) : 추상 구문 트리를 변경
- 출력(Printing) : 변경된 결과물을 출력
트랜스파일
2. 예상질문
1. 알고있는 크로스브라우징 기법
2. 웹표준을 지키기 위해 사용했던 기법
2. 웹 캐시
1. 정의
- client가 요청하는 html, image, js, css등에 대해 첫 요청 시에 파일을 내려받아 복사본을 저장하고 추후 동일한 URL에서 요청이 들어오면 저장한 파일을 사용해 더 빠르게 서비스하기 위한 것
2. 웹 캐시의 종류
1. Browser Caches
- 브라우저 또는 HTTP요청을 하는 Client Application에 의해 내부 디스크에 캐쉬
- Cache된 Resource를 공유하지 않는 한 개인에 한정된 Cache
- 브라우저의 Back버튼 또는 이미 방문한 페이지를 재방문하는 경우 극대화
2. Proxy Caches
- Browser Cache와 동일한 원리로 동작하며 Client나 Server가 아닌 네트워크 상에서 동작
- 큰 회사나 IPS의 방화벽에 설치되며 대기시간 & 트래픽 감소, 접근정책 & 제한 우회, 사용률 기록 등 수행
- 한정된 수의 클라이언트를 위하여 무한대의 웹서버를 캐쉬
3. Gateway Caches
- 서버 앞단에 설치되어 요청에 대한 캐시 및 효율적인 분배를 통해 가용성, 신뢰성, 성능 등을 향상
- Encyption / SSL acceleration, Load balancing, Serve/cache static content, Compression등을 수행
- 무한대의 클라이언트들에게 한정된 수(또는 하나)의 웹서버 컨텐츠를 제공
3. 캐시 컨트롤 방법
1. HTML Meta Tags
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">- HTML Meta tag를 페이지에 삽입하는 방법
- 과거의 몇몇 브라우저에만 유효했으며 지금은 사용하지 않음
2. HTML Headers
- HTML Headers를 사용하는 방법은 지금 현재 사용하는 방식
1. HTML Headers의 옵션
- validation: 파일이 이전과 비교하여 변경되었는가를 체크
- freshness: 캐시의 만료여부 체크
2. HTML 1.1의 Cache-Control의 지시자
4. 캐시 동작과정
1. 첫 요청
- 브라우저가 서버에 index.html파일 요청
- 서버가 index.html파일을 찾아보고 존재하는 파일이면 파일 내용을 몇가지 header값과 함께 응답함
- 브라우저는 응답받은 내용을 브라우저에 표시하고 응답헤더에 따라 캐시 정책 수행
(응답 헤더에 Last-Modified, Etag, Expires, Cache-Control:max-age항목이 존재한다면 복사본을 생성하고 값을 저장)
2. 재 요청
1. LAST-MODIFIED
- 브라우저는 최초 응답시 받은 Last-Modified값을 if-Modified-Since라는 헤더에 포함시켜 페이지를 요청함
- 서버는 요청파일의 수정시간을 if-Modified-Since값을 비교하여 동일하다면 304 Not Modified로 응답하고, 다르다면 200 OK와 함께 새로운 Last-Modified값을 응답 헤더에 전송함
- 브라우저는 응답코드가 304인 경우 캐시에서 페이지를 로드하고 200이라면 새로 다운 받은 후 Last-Modified값을 갱신함
2. ETAG (ENTITY TAG)
- 브라우저는 최초 응답시 받은 Etag값을 If-None-Match라는 헤더에 포함시켜 페이지를 요청함
- 서버는 요청 파일의 Etag값을 If-None-Match값과 비교하여 동일하다면 300 Not-Modified로 응답하고 다르다면 200 OK와 함께 새로운 Etag값을 응답 헤더에 전송함
- 브라우저는 응답 코드가 304인 경우 캐시에서 페이지를 로드하고, 200이라면 새로 다운 받은 후, Etag값을 갱신함
3. Expires
- 브라우저는 최초 응답 시 받은 Expires시간을 비교하여 기간 내라면 서버를 거치지 않고 바로 캐시에서 페이지를 로드함. 만약 기간이 만료됐다면 위에 설명한 validation작업을 수행
4. Cache-Control
- 브라우저는 최초 응답 시 받은 Cache-Control중 max-age값(초 단위)를 GMT와 비교하여 기간 내라면 서버를 거치지 않고 캐시에서 페이지를 로드함. 만약 기간이 만료되었다면 validation작업을 수행함
5. 캐시 설정 방법
- 캐시는 서버에서 설정하는데 파일 확장자 명으로 다르게 설정하거나 디렉토리 별로 다르게 설정할 수 있음
6. 출처
항상 재밌는 뭔가를 찾고 있는 프론트엔드 개발자