CORS가 무엇인지 설명해주세요.
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.
브라우저가 웹 페이지를 랜더링하는 과정을 설명해주세요.
- DOM, CSSOM생성: 가장 첫번째 단계로 서버로부터 받은 HTML, CSS를 다운받는다 → 단순한 텍스트인 HTML, CSS파일을 Object Model로 만든다. HTML은 DOM으로, CSS는 CSSOM으로 만들어진다. (html이 여기서 파싱된다)
DOM Tree와 CSSOM Tree가 만들어진다- Render Tree생성: DOM Tree와 CSSOM Tree가 만들어졌으면 그 다음으로는 이 둘을 이용하여 Render Tree를 생성한다. 렌더트리에는 스타일 정보가 설정되어있고, 실제 화면에 표현되는 노드들로 구성된다.
- Layout 단계: 브라우저의 뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산한다. 생성된 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면의 어느위치에 어느크기로 출력될지 계산하는 단계이다. 레이아웃 단계에서 %, vh, vw와 같이 상대적인 위치, 크기 속성은 실제 화면에 그려지는 픽셀 단위로 변환된다.
- Paint: Layout 계산이 완료되면 이제 요소들을 실제 화면을 그리게 된다. 처리해야하는 스타일이 복잡할수록 paint 단계에 소요되는 시간이 길다. (가령 그라데이션, 그림자 효과 > 단색 배경)
GET 방식, POST 방식에 대해 설명해주세요
1.GET 방식
우리가 필요한 정보를 얻기 위해 도서관에서 책을 빌려 가져오는(GET)상황과 유사하게 GET은 어떠한 정보를 가져와서 조회하기 위해서 사용되는 방식이다.
[ GET방식의 특징]
URL에 변수(데이터)를 포함시켜 요청한다.
데이터를 Header(헤더)에 포함하여 전송한다.
URL에 데이터가 노출되어 보안에 취약하다.
2.POST 방식
예를 들어 우리가 어디에 서류를 제출하는 것은 우리에 대한 정보를 제출하여(POST) 추가하기 위해서이다. 이러한 상황과 유사하게 POST 방식은 데이터를 서버로 제출하여 추가 또는 수정하기 위해서 사용하는 방식이다.
[ POST방식의 특징 ]
URL에 변수(데이터)를 노출하지 않고 요청한다.
데이터를 Body(바디)에 포함시킨다.
URL에 데이터가 노출되지 않아서 기본 보안은 되어있다.
3. GET VS POST 비교표
아래의 그림에서는 GET 방식과 POST 방식의 차이를 표로 정리하고 있다.
section 요소와 article 요소의 사용 용도에 대해 설명해 주세요.
article은 제목을 가진 독립적인, 재사용 가능한 범위를 나타낸다.
article은 독립적으로 쓸 수 있는 하나의 단위에 사용한다
section은 제목을 가진 범위를 나타낸다.
section은 하나의 논리적인 단위로 묶을 수 있는 경우에 사용한다.
CSS Sprite기법에 대한 정의와 장단점에 대해 설명해주세요.
CSS Sprites는 페이지의 첫 로딩 속도를 줄여주는 여러 방법중, 서버로의 요청 횟수를 최소화 하는 것은 최적화요소 중에서도 중요하며, 실제 적용하기에도 아주 손쉬운 방법중에 하나이다.
아이콘, 버튼같은 자주 쓰는 이미지들을 쓸 때마다 여러 이미지들을 불러오는 것이 아니라, 한 이미지파일로 통합한 후 배경이미지로 만들어 놓고 position(좌표)값으로 각각의 이미지를 불러오는 것이다.
장점은 트래픽이 절약되고 HTTP요청 횟수를 줄어들어 빠른 웹 브라우징을 할 수 있다.
단점은 너무 많은 이미지를 포함할 시 좌표계산과정이 복잡해질 수 있다는 것이다.
형상관리도구(버전 관리 시스템)에 대해 전반적인 설명을 해주세요.(주 사용 도구도 서술해주세요.)
형상관리란 한마디로 개발과정의 시작부터 끝까지 변하는 모든 사항을 관리하는 작업이라고 할 수 있다.
형상관리의 장점
1. 소스코드의 변경이력을 관리할 수 있어서 추적성이 높다.
2. 배포가 편리하다.
3. 여러 사람이 동일한 소스코드를 공유해 개발할 수 있으며 공유할 때 생기는 버전 충돌 문제 등을 스무스하게 해결할 수 있다.
4. 기능상 필요하거나 장애가 생길 시 이전 버전이나 Baseline으로 소프트웨어를 되돌릴 수 있다.
형상관리를 사용하는 이유
1. 가시성의 결핍 : 소프트웨어는 무형물이기 때문이다.
2. 통제의 어려움 : 눈에 보이지 않는 상품의 제작은 통제하기 어렵기 때문이다.
3. 추적의 어려움 : 프로젝트의 중간 목표들을 연결시키고 개발과정을 추적하기 어렵기 때문이다.
4. 감시의 미비 : 가시성과 추적성의 결핍은 프로젝트의 진행을 감시하기 어렵게 한다.
5. 무절제한 변경 : 통제되지 않고 관리되지 않는 소프트웨어의 무절제한 변경이 발생하기 때문이다.
alt와 title의 차이에 대해서 설명해 주세요.
- alt(alternative) : '이미지의 대안, 이미지에 대한 설명'이라고 보시면 됩니다. 용도는
① 인터넷 속도, 또는 컴퓨터 사양 문제로 웹브라우저 설정을 '이미지 출력 안 함'으로 한 사용자에게 이미지에 대한 간략한 설명을 볼 수 있음. (데스크탑이 아닌 모바일기기로 접속시에도 유용함.)
② 시각장애인의 웹서핑시 사용하는 리더(reader) 프로그램이 텍스트는 읽어주나, 이미지는 읽을 수 없으므로 alt태그 안의 설명을 읽어줌.
③ 일반인 웹서핑시 인터넷 접속 등의 문제로 해당 이미지를 불러오지 못했을 때, 배꼽과 함께 이미지 설명을 보여줌.- title : 이미지 위에 마우스 포인터를 올려 놓았을 때 풍선 도움말처럼 뜨게 함.
① 이미지뿐 아니라, a태그, span태그, td태그 등 거의 대부분의 태그에 사용할 수 있고, '클릭하시면 다음 사진으로 바뀝니다.' 등의 간단한 풍선도움말 형식을 사용할 수 있음. 특히 웹표준에서는 a태그에 title 속성은 필수항목임. 링크주소에 대한 설명을 넣어, 링크주소에도 의미를 부여할 수 있음.
② 터치스크린 모바일기기에서 웹브라우징시에는 a링크 또는 이미지에 마우스 포인터를 올려놓을 수 없으므로, 한 번 터치시 title내용을 보여주고, 두 번 터치시 해당 링크로 접속이 됨.
③ 일반적인 게시판 리스트 페이지에서 게시물 제목을 일정 길이로 잘랐을 때, title속성에 전체 제목을 넣어주면, 해당 게시물을 클릭할 필요 없이 마우스 오버만으로 전체 제목을 볼 수 있음.
