본문 바로가기

📂 기술 면접/Web7

Semantic HTML의 필요성을 예시를 들어 설명해 주세요. 👩🏻‍💻 Semantic HTML의 필요성을 예시를 들어 설명해 주세요. 💁🏻‍♀️ 요약하자면 , Semantic HTML은 웹 페이지의 각 요소에 의미를 부여하는 HTML 마크업 방법입니다. 이는 웹 페이지의 구조와 의미를 더 명확하게 전달하며, 결국 검색 엔진 최적화(SEO)와 웹 접근성을 향상시키는 데 기여합니다. 예를 들어, HTML 안에 제목, 내용, 푸터로 내용이 나눠져 있음에도 불구하고 모든 요소를 태그로 씌운다면 코드를 보는 개발자 입장에서 웹 페이지 구조와 의미가 정확하게 보이지 않을 뿐 아니라, 우리가 애써 만든 웹 사이트가 검색 엔진에 최적화되지 않을 것입니다. 제목 내용 따라서, HTML의 각 영역은 각 영역의 의미에 맞게 요소는 웹 페이지의 제목, 요소로는 섹션을 정의, 요소로는 .. 2023. 5. 9.

HTTP 메세지 구조에 대해 설명해 주세요. 👩🏻‍💻 HTTP 메세지 구조에 대해 설명해 주세요. 💁🏻‍♀️ 요약하자면 , HTTP 메시지는 크게 start line, HTTP header, empty line, body로 나뉩니다. 메시지의 구조 1. start-line 요청이나 응답의 상태를 나타내며 항상 첫 번째 줄에 위치합니다. 어떤 프로토콜을 사용하는지, 어떤 HTTP 메서드인지, 상태 코드는 무엇인지 등을 나타냅니다. 2. HTTP header 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합입니다. 3. empty line 헤더와 본문을 구분하는 빈 줄이 있습니다. 4. body 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함합니다. 요청과 응답의 유형에 따라 선택적으로 사용되는데요. GET, DELETE,.. 2023. 4. 10.

GET 메서드와 POST 메서드의 차이점에 대해 설명해 주세요. 👩🏻‍💻 GET 메서드와 POST 메서드의 차이점에 대해 설명해 주세요. 💁🏻‍♀️ 요약하자면 , GET은 서버에서 데이터를 조회할 때 쓸 수 있는 메소드고, POST는 서버에서 데이터를 추가할 때 사용하는 메소드 입니다. GET과 POST 요청에는 각각 어떻게 정보를 담을 수 있나요? GET은 단순히 조회를 요청하기 때문에 body를 보내지 않는 것이 보편적이기에 query parameter나 path parameter를 씁니다. POST 요청에서는 추가하고자 하는 데이터를 HTTP body에 담아 전달합니다. 각 요청의 특징은 어떻게 되나요? GET은 요청을 무한대로 보내도 같은 요청을 회신받을 수 있는 멱등성을 가지고 있습니다. 반면 POST는 요청을 무한대로 보내면 최초 응답과는 다른 회신을 받게.. 2023. 4. 10.

SOP와 CORS에 대해서 설명해 주세요. 👩🏻‍💻 Same-Origin Policy와 CORS에 대해서 설명해 주세요. 💁🏻‍♀️ 요약하자면 , SOP는 '동일 출처 정책'으로, 같은 출처의 리소스만 공유가 가능하다는 정책이며, CORS는 '교차 출처 리소스 공유' 입니다. 브라우저는 SOP에 의해 기본적으로 다른 출처의 리소스 공유를 막지만, CORS 설정을 통해 접근 권한을 얻을 수 있습니다. SOP(Same-Origin Policy) SOP의 출처는 프로토콜, 호스트, 포트의 조합으로 되어 있는데, 이 중 하나라도 다르면 동일한 출처로 보지 않습니다. 덕분에 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주기 때문에 해킹 등의 위협으로부터 안전해질 수 있습니다. 기본적으로 모든 브라우저는 SOP 정책을 사용하고.. 2023. 4. 5.

HTML의 id 속성과 class 속성의 차이에 대해서 설명해 주세요. 👩🏻‍💻 id 속성과 class 속성의 차이에 대해서 설명해 주세요. 💁🏻‍♀️ 요약하자면 , 고유성의 차이 입니다. id는 고유한 값이므로, id를 가진 요소들 또한 고유하기 때문에 하나의 HTML 요소에만 사용할 수 있습니다. 이에 반해 class는 고유하지 않으므로 같은 class name을 여러 요소에 사용하는 것이 가능합니다. 더 자세히 설명하자면, id란 identification 즉 구별/식별 하고자 하기에 해당 요소가 '유일함'을 확인할 수 있는 수단입니다. 우리에게 주어지는 주민등록번호(identification number)과도 같다고 생각하면 됩니다. 마치 getElementById 메소드는 있어도 getElementsById는 없는 것처럼 말입니다. 협업 시에도 중요 id 값이 같은.. 2023. 3. 12.

HTML의 <li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요? 👩🏻‍💻 요소는 왜 요소의 자식 요소여야만 하나요? home1 home2 home3 home4 💁🏻‍♀️ 요약하자면 , 요소는 말 그대로 list의 item들을 보여주기 위한 요소 이기에, 목록을 담는 요소의 자식 요소여야 합니다. 구슬과 주머니 요소는 주머니고, 요소는 주머니에 담긴 구슬들이라고 보면 됩니다. 따라서 주머니 안에 구슬인 가 담겨야 합니다. 협업 시 특히 중요 화면 상으로는 문제가 없어 보이더라도, 요소와 요소 각각의 의미에 맞게 sementic하게 HTML을 작성해야 협업 시 다른 개발자가 보더라도 쉽게 이해할 수 있기 때문에 위와 같은 규칙을 지키는 것이 중요합니다. 📎 내용 참조 - velog: 기술 면접 준비 - velog: Section 1 회고 2023. 3. 12.

일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요? 👩🏻‍💻 일반적으로 CSS를 불러오기 위해 요소를 💁🏻‍♀️ 요약하자면 , CSS 요소가 head 요소의 자식 요소일 때 전반적인 UX(user expression)을 향상시키기 때문이며, 요소가 요소가 끝나기 직전에 위치하는 경우, HTML과 CSS 로딩이 끝난 직후에 JavaScript를 로딩하기 때문에 DOM 렌더링 후 JavaScript 적용까지의 시차를 최소화할 수 있습니다. CSS 일반적으로 HTML과 CSS 정보가 담긴 정보들이 우선적 점진적으로 렌더링되기 때문에 유저에게 최대한 빠르게 정보가 담긴 화면을 전달할 수 있습니다. 만약 CSS 요소를 document의 위가 아닌 아래에 위치시킨다면, 몇몇 브라우저는 스타일이 변경될 때 페이지 요소를 처음부터 다시 그리는 것을 피하기 위해 점진적 .. 2023. 3. 12.

이전 1 다음

티스토리툴바