[기술면접] Frontend 부분 2

<목차>

5. 쿼리 스트링
6. 브라우저에 URL을 입력하면 일어나는 순서
   
   

5. 쿼리 스트링

• URL의 일부
• 웹 서버에 특정 데이터를 전달하기 위해 사용
• URL의 뒤에 입력 데이터를 함께 제공하는 가장 단순한 데이터 전달 방법
• 웹개발에서 데이터를 요청하는 방식
• 주로 GET 방식으로 데이터를 요청할때 쓰이는 방법
• 주소 뒤에 물음표를 붙이고 데이터를 요청
• 쿼리 파라미터들을 url뒤에 덧붙여서 추가적인 정보를 서버 측에 전달
• 클라이언트가 어떤 특정 리소스에 접근하고 싶어하는지 정보가 담긴
• parameter=value 로 필요한 파라미터의 값을 적는다.
• =으로 key와 value가 구분
• 각 쌍은 &로 구분
• 웹 페이지의 내용이나 기능을 사용자의 요구나 선택에 따라 동적으로 변경할때
• 특정 작업을 수행하거나 정보를 검색할때 필요한 매개변수를 전달할 때
• 트래킹, 로깅, 사용자 세션 관리 등을 위해 사용자에 대한 정보를 전달할 때

예시

https://example.com/products?category=books&price=20

• "category=books&price=20" : 쿼리스트링
• "catagory"라는 키에 대한 "books"라는 값과 price라는 키에 대해 "20"이라는 값 전달

Q. 쿼리 스트링은 주로 어디에 사용하셨나요?
=> 쿼리 스트링은 웹 서버에 특정 데이터를 전달하기 위해 URL 뒤에 입력 데이터를 함께 제공하는 데이터 전달 방법입니다. 주소 뒤에 물음표를 붙이고 쿼리스트링을 구성하며 key,value로 필요한 파라미터의 값을 전달합니다. 쿼리 스트링은 웹페이지의 내용이나 기능을 사용자의 요구나 선택에 따라 동적으로 변경할 때 예를 들어 특정 작업을 수행하거나 정보를 검색할 때 사용됩니다. 아쉽게도 저는 쿼리 스트링을 사용해본 경험은 없습니다.

6. 브라우저에 URL을 입력하면 일어나는 순서

• URL 해석 - DNS 조회 - TCP 연결 - HTTP 요청 전송 - 서버 응답 - 콘텐츠 렌더링 - 외부 자원 로딩 - 상호작용
• 사용자가 브라우저에 URL을 입력
• URL 해석 : 프로토콜, 도메인 이름, 경로 등을 분석
• DNS 조회 : 도메인 이름을 IP주소로 변환하기 위해 DNS 조회
• TCP 연결 : DNS 조회를 통해 얻은 IP 주소에에 접속하기 위해 TCP 연결 설정
• HTTP 요청 전송 : 연결 후 브라우저는 서버에 대한 HTTP요청 전송
• 서버 응답 : 웹 서버는 HTTP 요청을 받고 처리, 요청받은 데이터를 HTTP응답, HTML문서, CSS, 자바스크립트 파일 등이 포함
• 콘텐츠 렌더링 : 브라우저는 서버로 받은 자료 분석하고 웹페이지 렌더링, HTML 파싱, CSS 스타일링, 자바스크립트 실행등 포함
• 외부 자원 로딩 : 외부자원이 필요한 경우 추가적인 HTTP요청을 통해 렌더링 과정에 포함
• 상호 작용 : 페이지 로딩이 완료된 후 필요에 따라 추가적인 HTTP요청이 발생할 수 있음

=> 브라우저 URL을 입력하면 일어나는 순서를 설명하겠습니다. 브라우저에 URL을 입력하면 가장 먼저 URL해석을 하여 프로토콜, 도메인 이름, 경로등을 분석합니다. 분석이 되면 DNS 조회를 통해 도메인 이름을 IP주소로 변환합니다. 조회를 통해 얻은 IP주소로 접속하기 위해 TCP연결을 합니다. 잘 연결된 후 브라우저는 서버에 대한 HTTP요청을 전송하고 서버는 그 응답을 처리해줍니다. 브라우저는 서버로 부터 받은 HTML,CSS,자바스크립트 파일을 실행하여 랜더링 합니다. 추가외부자원이 필요하거나 사용자와 상호작용하는 경우 추가적인 HTTP요청이 발생할 수 있습니다.