crabLab

React의 state와 props에 대해서 설명해주세요.

crab. — Wed, 17 May 2023 11:33:37 +0900

글의 목적

면접을 대비해서 대답을 정리한다.

레퍼런스

React의 state와 props에 대해서 설명해주세요.

React props와 state 알아보기

기술 면접 part 2.

React의 state와 props에 대해서 설명

본문

리액트의 stste는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용합니다.

useState훅을 사용하여 state를 만들고, setState를 사용하여 값을 변경합니다.

props는 부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 것들을 의미합니다.

props로 넘겨준 값들은 불변하며, readOnly속성을 가지고있습니다.

따라서 자식 컴포넌트에서의 직접적인 props 변경은 불가하며, 내려받은 setState나 함수를 이용하여 props를 바꾸도록 부모 컴포넌트에게 요청할 수 있습니다.

왜 변수가 아닌 state에 데이터를 저장하나?

변수로 저장해도 됩니다.

하지만 변수값이 바뀌었을 때 일반 변수는 리렌더링이 되지 못하지만, state에 저장된 데이터는 리렌더링이 되기 때문입니다.

리액트에서는 분리된 컴포넌트 별로 리렌더링을 하게하여 성능을 높일 수 있으므로, state를 주로 사용한다고 생각합니다.

React에서 state는 변할 수 있는 데이터를 의미합니다.

애플리케이션의 작동 구조를 봤을때, 변할 수 있는 값이면 React의 상태로 적절합니다.

예를 들어서, input의 value는 사용자가 값을 입력하면 변경될 수 있는 값이기 때문에 state로 적절합니다.

또한 Social media에서 게시글 역시 다른 유저가 추가로 게시글을 작성하고 난 뒤에는 게시글의 수가 변할 수 있기 때문에 게시글 배열로 state로 적절합니다.

다만, input의 value는 하나의 컴포넌트에만 영향을 주고 게시글의 배열은 여러 컴포넌트에 영향을 줄 수 있는 차이점이 있습니다.

다른 컴포넌트에 영향을 미치는 정도에 따라 전역 상태와 지역 상태로 구분할 수 있습니다.

props는 외부에서 전달받아 컴포넌트 내에서는 변할 수 없는 값입니다.

그래서 React에서는 props를 중간에 변경하는 것을 권장하지 않고, lifting state up(상태 끌어올리기)를 통해 상태를 변경시키고 변경된 상태값을 props로 내려주어 side effect를 최소화시킵니다.

props는 함수에 전달하는 매개변수, state는 함수 내부에 선언된 변수 라고 볼수 있다.

props

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다.

이런 함수들은 순수 함수 라 호칭한다.

입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 봔환하기 때문이다.

모든 react 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다.

state

state로 정의한 값이나 함수는 변경이 가능하다.

setState란 React의 불변성을 지키며 state의 값을 변경하기 위한 리액트 함수 이다.

리액트에서는 모든 상태 값들을 불변성을 유지하며 관리하게되는데,이렇게 불변성을 유지 하는 것은 virtual-dom이 real dom과 차이를 알아내기 위함 이라는 이유가 있다.

불변성 메모리 영역에서 값이 변하지 않는다.

만약 객체가 직접적으로 값이 변경되게 된다면 변경된 객체를 찾기 위해 실제 돔과 가상 돔 전체 트리를 비교하며 변경사항을 감지해야한다.

하지만 불변 객체가 이전 객체와 다른지를 얕은 평가만으로 확인 할수 있기 때문이다.

순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여설명해주세요.

crab. — Wed, 17 May 2023 11:32:29 +0900

글의 목적

면접을 대비해 대답을 정리한다.

레퍼런스

기술 면접 part 2.

순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여설명해주세요.

본문

순수함수란?

동일한 인자에 대해서는 항상 동일한 값을 리턴하고 함수 외부에 어떠한 영향도 미치지 않는 함수를 말한다.

사이드 이펙트란?

함수에서 값을 반환하는 일 외에 함수 외부와 상호작용하여 부가적인 작업을 수행할때 그 함수는 사이드 이펙트가 있다고 한다.

사이드 이펙트 예

Ajax, setTimeout, console.log 등 호출이 모두 사이드 이펙트이다.

함수 내부를 벗어나 외부와 상호 작용을 하기때문이다.

Ajax, setTimeout 같은 함수들은 브라우저 API를 사용하는 일이고, console.log는 브라우저의 콘솔창에 문자열을 출력하는 함수이다.

불변성이란?

객체나 배열등의 데이터 구조를 생성한 후 그 데이터 구조를 변경 할 수 없는것
기본 객체가 불변!!
자바스크립트 불변성
기본데이터타입 (primitive type)인 숫자, 문자열,불리언, null, undefined와 같은 값들은 불변값으로 취급한다. 이들은 생성된 이후에 변경될 수 없다.

순수함수를 불변성과 사이드 이펙트와 연결하여 설명하면

순수함수는 함수형 프로그래밍에서 자주 사용되는 개념으로, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다.

또한 사이드 이펙트가 없어야 합니다.

사이드 이펙트는 쉽게 말해서 외부 변수를 참조하거나, 변경하는 모든 종류의 코드를 의미합니다.

즉, 순수함수는 함수 body내에 있는 코드만 점검하면 되기 때문에 간결하게 코드를 작성하고 사고하는데 도움이 됩니다.

자바스크립트에서 순수함수를 제작하기 위해서 데이터의 불변성을 유지하는 것이 중요합니다.

함수의 전달인자로 참조 자료형이 전달되는 경우, 해당 객체 자체를 바꿔서 사이드 이펙트를 만들 수 있고, 이는 해당 데이터의 불변성을 손상시킬 수 있습니다.

그래서 배열의 불변성을 보장하는 메서드인 map, filter, reduce 등이 각광을 받게 되었습니다.

Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요.

crab. — Tue, 16 May 2023 11:30:27 +0900

글의 목적

면접을 대비하여 글로 정리한다.

레퍼런스

Cookie의 MaxAge, Expires 옵션

[인증/보안] Cookie 옵션

본문

Session cookies

웹브라우저가 켜져있는 동안 유효하고 끄고 다시 켜면 없어짐 → MaxAge와 Expires 옵션 중 하나라도 설정하지 않을 때

Permanent cookie

웹브라우저를 껐다 켜도 유지됨

Permanent cookie 기간 설정할 때 쓰이는 옵션이 바로 MaxAge와 Expires 이다.

MaxAge와 Expires 옵션은 둘 다 쿠키의 수명을 결정하는 데 사용된다.

MaxAge

쿠키가 유지되는 시간(초)을 정의한다. 이 값은 현재 시간에서 더해져서 쿠키의 만료 시간이 계산된다.
예를 들어, MaxAge가 3600으로 설정되어 있으면, 쿠키는 1시간 동안 유지된다.

Expires

쿠키가 만료되는 날짜와 시간을 정의한다. 이 값은 HTTP Date 형식의 문자열로 설정된다.

MaxAge와 Expires 옵션 중 하나라도 설정하지 않으면?

만약 MaxAge와 Expires 옵션 중 하나라도 설정하지 않으면, 쿠키는 브라우저가 종료될 때까지 유지된다.

이를 **'Session Cookie'**라고 한다.

즉, 쿠키가 브라우저 세션 중에만 유지되고, 브라우저가 종료되면 쿠키가 자동으로 삭제된다.

하지만 MaxAge와 Expires를 함께 설정하면, 쿠키는 세션 종료 후에도 유지된다.

브라우저가 종료되더라도 쿠키가 삭제되지 않고, MaxAge 또는 Expires에 지정된 시간이 지나면 삭제된다.

또한, MaxAge와 Expires를 함께 설정한 경우에는 MaxAge가 우선된다.

MaxAge와 Expires가 동시에 설정되어 있으면, MaxAge를 우선으로 적용하여 쿠키의 수명을 결정한다.

대사로 정리

" Cookie는 HTTP 프로토콜의 비상태성을 보완하기 위한 수단으로,

브라우저에 데이터를 저장할 때 사용합니다.

Cookie의 MaxAge 옵션은 쿠키를 얼마나 유지할 것인지,

Expires 옵션은 언제 폐기할 것인지 지정하는 옵션입니다.

두 옵션을 동시에 설정하면

MaxAge가 더 높은 우선 순위로 적용됩니다.

이 두 옵션중 하나라도 설정하지 않으면,

해당 쿠키는 브라우저가 닫힐 때 폐기 됩니다.

따라서 쿠키를 빠르게 폐기하고 싶다면 옵션을 설정하지 않는 것이 좋고, 쿠키를 계속 사용하고 싶다면 두 옵션 중에 하나라도 설정해주는 것이 좋습니다.

이 때, 브라우저를 종료하면 삭제되는 임시 쿠키를 세션 쿠키(Session Cookie)라고 하고, 설정한 옵션만큼 사용가능한 쿠키를 영속성 쿠키(Persistent Cookie)라고 합니다."

useRef가 필요한 상황을 예시를 들어 설명해주세요

crab. — Tue, 16 May 2023 11:30:11 +0900

글의 목적

면접에서 질문으로 나왔을 때를 대비하여 글로 정리한다.

레퍼런스

[React] useRef - 필요성, 필요한 상황, 사용법

useRef는 처음이라 :: 개념부터 활용 예시까지 - Deeming

본문

react에서는 DOM을 건드리지 않고 거의 대부분의 요구사항을 구현할 수 있지만 특정 상황에 경우는 DOM을 건드려야 하는 경우가 있다.

또 부모의 props나 자신의 state가 변하면 리렌더링이 일어나는데 이 리렌더링을 일어나지 않게 하기 위해서도 쓰는 경우가 있다.

DOM을 건드리는 경우는 회원가입폼의 input에서 포커스를 시키고 싶을 때가 있다.

이때 input요소의 ref에 useRef로 만든 변수를 할당해주고 이 값과 input의 event.target을 비교해준 이후 그 포커스해야하는 특정 input창이 맞다면 (useRef값).current.focus()로 포커싱을 해줄 수 있다.

import React, { useRef } from "react";
const Focus = () => {
  const firstRef = useRef(null);
  const secondRef = useRef(null);
  const thirdRef = useRef(null);
  const handleInput = (event) => {
    console.log(event.key, event);
    if (event.key === "Enter") {
      if (event.target === firstRef.current) {
        secondRef.current.focus();
        event.target.value = "";
      } else if (event.target === secondRef.current) {
        thirdRef.current.focus();
        event.target.value = "";
      } else if (event.target === thirdRef.current) {
        firstRef.current.focus();
        event.target.value = "";
      } else {
        return;
      }
    }
  };
return (
    <div>
      <h1>타자연습</h1>
      <h3>각 단어를 바르게 입력하고 엔터를 누르세요.</h3>
      <div>
        <label>hello </label>
        <input ref={firstRef} onKeyUp={handleInput} />
      </div>
      <div>
        <label>world </label>
        <input ref={secondRef} onKeyUp={handleInput} />
      </div>
      <div>
        <label>codestates </label>
        <input ref={thirdRef} onKeyUp={handleInput} />
      </div>
    </div>
  );
};
export default Focus;

useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않는다.

리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그다음 렌더링 이후로 업데이트된 상태를 조회할 수 있지만, useRef 로 관리하는 변수는 설정 후 바로 조회할 수 있다.

useRef() 를 사용할 때 파라미터를 넣어주면, 이 값이 .current값의 기본값이 된다.

그리고 이 값을 수정할 때는 .current값을 수정하면 되고 조회할 때는 .current를 조회하면 된다.

배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요

crab. — Mon, 15 May 2023 11:52:39 +0900

글의 목적

면접을 대비해서 대답할 수 있도록 정리한다.

레퍼런스

배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유?

본문

Const 변수에 할당된 값은 바뀌지 않지만, 배열/객체가 변수에 할당될 때에는 배열/객체의 요소(값) 자체가 아니라 주소(이 값은 불변, 상수)가 할당되기 때문입니다.

const는 변하지 않는 상수constant 를 선언하는 키워드이며, 이 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.

그러나 배열, 객체는 참조자료형reference data type이며, 참조 값은 변수에 주소를 할당합니다. (cf. 변수에 값을 직접 할당하는 원시자료형primitive data type)

숫자, 문자열 등의 원시 자료형은 stack 영역에 값 자체가 저장되지만 배열, 객체, 함수 등의 참조자료형은 heap 영역에 값이 저장되고, stack에는 heap에 저장된 데이터의 주소만 저장됩니다.

실제 heap 내에 저장되어 있는 배열, 객체 내의 요소를 변경***하더라도, 참조된 주소는 변하지 않으므로 const 사용이 가능합니다.

stack 영역: parameters, automatic and temporary variables / 함수의 호출과 관계되는 지역 변수와 매개변수가 저장되는 영역
* heap 영역: dynamically allocated variables / 사용자에 의해 직접 동적으로 할당되고 해제되는 메모리 공간
** 배열 - push, pop / 객체 - shift, unshift

require와 import차이점을 설명해주세요. 각각 어떤 상황에서 쓸 수 있나요?

crab. — Mon, 15 May 2023 11:51:26 +0900

글의 목적

면접 대비해서 대답할 수 있도록 정리함

레퍼런스

require vs import 문법 비교 (CommonJS vs ES6)

모듈 소개

본문

require는 NodeJS에서 사용하고 있는 CommonJS키워드이고 import는 ES6에서 새롭게 도입된 키워드이다.

즉 require는 서버에서 사용하는 모듈시스템에서의 모듈을 불러오는 문법이고 import는 브라우저에서 사용하는 모듈시스템에서의 모듈을 불러오는 문법이다.

require는 프로그램의 어느 지점에서나 호출 할 수 있지만 import는 파일의 시작 부분에서만 실행할 수 있다.

일반적으로 import는 사용자가 필요한 모듈 부분 만 선택하고 로드 할 수 있기 때문에 더 선호된다. 또한 require보다 성능이 우수하며 메모리를 절약한다.

개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 온다.

이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.

모듈은 단지 파일 하나에 불과하다.

스크립트 하나는 모듈 하나이다.

모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능하다.

브라우저 저장소에 대해서 차이점을 설명해주세요(local storage, sessin storage, cookie)

crab. — Fri, 12 May 2023 12:01:17 +0900

글의 목적

면접 대비 정리

레퍼런스

[단골질문] - 01. 브라우저 저장소에 대해서 설명해보세요.

본문

로컬스토리지와 세션스토리지는 간단한 key와 value를 저장할 수 있는 저장소이다.

이 저장소들은 브라우저에 저장하기 떄문에 새로고침을 해도 데이터가 휘발되지 않는다는 특징이 있는 데

이를 이용해 프론트엔드에서는 로그인시 access token을 로컬스토리지에 저장하고 로그인을 유지하는데 사용할 수 있다.

또한 redux-persist를 사용하면 클라이언트 자체에서 새로고침이나 창을 닫았을 시에도 휘발되지 않게 유저의 정보를 저장할 수 있다.

세션스토리지의 경우는 로컬과는 조금 차이가 있는게 윈도우나 창을 닫으면 그 정보가 사라진다.

그리고 이 로컬과 세션 스토리지 전에 있던 것이 쿠키인데 쿠키는 만료기간이 있는 저장소라고 생각하면 좋다.

따라서 이 각각의 저장소는 목적에 따라 쓰여지는데 정리하자면 다음과 같다.

자동 로그인 -> 로컬스토리지
입력 폼 정보 -> 세션스토리지
비로그인 장바구니 -> 세션스토리지
다시 보지 않음 팝업 창 -> 쿠키

this 가 동작하는 원리와 용법을 아는대로 설명해주세요. 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요?

crab. — Fri, 12 May 2023 12:01:02 +0900

글의 목적

면접 대비로 대답을 정리해놓는다.

레퍼런스

this 가 동작하는 원리와 용법

본문

자바스크립트에서는 함수 호출의 방식에 따라 this에 어떤 객체를 바인딩할 지 동적으로 바뀌게 된다.

this는 클래스나 함수에서 동적으로 값을 할당하기 위해서 쓰는 기능이다.

함수의 호출하는 방식에는 크게 함수 호출, 메소드 호출, 생성자 함수 호출, apply/call/bind가 있는데

함수 호출시에는 기본적으로 전역 객체에 바인딩 된다.

즉, 그냥 console.log(this === window) 를 하면 true가 나오게 된다.

(node.js가 아니라 브라우저에서 사용할 경우의 기준이다. node.js에서는 global객체를 의미한다.)

메소드 호출의 경우 함수가 객체의 프로퍼티 값이면 메소드로서 호출된다.

이 말을 풀어쓰자면 메소드는 객체의 함수인데 이 함수 내부에서 this를 사용할 경우 this는 그 해당 메소드를 호출한 객체를 의미 한다는 말이다.

백문이 불여일견 코드로 써보자면

const myObject = {
  name: 'sujeong',
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

myObject.greet(); // "Hello, my name is sujeong"

생성자 함수 호출의 경우

생성자 함수는 class와 연관이 있는데 객체를 생성하는 역할을 한다.

왜 나오게 되었냐면 개발자들은 초기에는 그냥 단순한 객체들만을 사용하다가 시간이 지날 수록 특정객체의 형태를 계속 써야 됐고 이 중복을 피하기 위해 붕어빵 틀처럼 하나의 틀이 있으면 좋겠다 생각해 나오게 되었다.

이렇게 생성자함수를 쓸때 this는 그 틀에서의 변수를 지칭하는 데 유용하게 쓰인다.

이 틀은 앞으로 어떻게 쓰일지 미리 예측할 수 없다.

따라서 받아들이는 인자값을 생성자 함수내에서 다시 정의해두는 느낌이다.

이번에도 코드로 볼 건데 여기서는 sujeong이라는 객체를 Person이라는 생성자함수로 만들었고 이 틀을 사용했기 때문에 자동으로 name과 age라는 값을 갖게 되며 이때 this를 이용해서 이 객체에 동적으로 값을 정의할 수 있는 것이다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const sujeong = new Person('sujeong', 26);
console.log(sujeong.name); // "sujeong"
console.log(sujeong.age); // 26

this를 명시적으로 바인딩할 수 있는 방법이 있는데, 바로 apply, call, bind 메소드를 사용하는 것이다.

이 메소드들은 모든 함수 객체의 프로토타입 객체인 Function.prototype 객체의 메소드이다.

apply()메서드는 주어진 this값과 배열 (또는 유사 배열 객체) 로 제공되는 arguments로 함수를 호출한다.

call()메소드는 주어진 this값 및 각각 전달된 인수와 함께 함수를 호출한다.

bind()메소드가 호출되면 새로운 함수를 생성한다. 받게되는 첫 인자의 value로는 this 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공된다.

apply, call, bind에서 첫 번째 인자로 다른 것을 넣어주는 게 this를 바꾸는 방법 중 하나다.

func.apply(thisArg, [argsArray])
func.call(thisArg[, arg1[, arg2[, ...]]])
func.bind(thisArg[, arg1[, arg2[, ...]]])
// call 예시
function myFunction() {
  console.log(`Hello, my name is ${this.name}`);
}

const myObject = { name: 'sujeong' };

myFunction.call(myObject); // "Hello, my name is sujeong"
// bind 예시
const myObject = { name: 'sujeong' };

function myFunction() {
  console.log(`Hello, my name is ${this.name}`);
}

const myBoundFunction = myFunction.bind(myObject);
myBoundFunction(); // "Hello, my name is sujeong"

position 을 어떻게 사용하는지 알려주세요

crab. — Fri, 12 May 2023 12:00:45 +0900

글의 목적

면접에서 질문을 받았을 때를 대비하여 대답을 정리한다.

본문

postion의 경우 css에서 중요한 파트 중 하나인 레이아웃을 결정하는 속성입니다.

웹문서는 블럭요소와 인라인 요소로 구분되고 블럭요소들은 가로로 차지할 수 있는 부분을 모두 차지하며 차곡차곡 위에서 아래로 쌓여갑니다.

그래서 특정 박스모델을 웹의 어느 위치에 놓기 위해서는 인라인 요소를 이용하고 마진을 많이 주는 방식으로 놓아야 했습니다.

하지만 웹이 발전하며 헤더나 사이드바 처럼 스크롤에 관계없이 계속 고정시켜두고 싶은 것과, 웹의 구성에서 벗어나 자유로운 위치에 놓고싶은 디자인이 생겼습니다.

이런 부분을 개발자들은 position으로 해결했습니다.

postion을 사용한 요소는 우선 웹의 기본적인 구성에서 벗어나게 됩니다.

이때 값으로 대표적으로 relative, absolute, fixed를 쓸 수 있는데 relative는 웹의 기본위치의 구속에서는 벗어나지만 자신의 원래 기본위치에 존재하게 됩니다.

여기서 top이나 left값을 주면 자신의 기본위치를 기준으로 움직이게 됩니다.

absolute같은 경우는 자신의 상위에 있는 postion으로 기본 구성을 벗어난 요소를 찾고 그 요소를 기준으로 위치를 움직일 수 있습니다.

즉, 자신의 상위에 있는 relative나 absolute, fixed를 찾습니다. (보통은 컨테이너를 relative로 잡고 특정요소는 abolute로 위치를 잡습니다.)

fixed의 경우 absolute와 비슷하지만 fixed는 무조건 viewport를 기준으로 배치됩니다.

즉 우리가 아무리 스크롤을 내려도 viewport는 고정이기 때문에 특정위치에 계속 존재해야하는 플로팅버튼을 만들기에 좋습니다.

HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요

crab. — Fri, 12 May 2023 12:00:30 +0900

글의 목적

면접에서 질문받았을 때를 대비하여 대답할 것을 정리한다.

레퍼런스

[10분 테코톡] 헌치, 써머의 HTTP

HTTP 프로토콜이란?

본문

http란 하이퍼텍스트 트랜스퍼 프로토콜의 약자로 인터넷상에서 데이터를 주고 받기 위한 통신 규약입니다.

즉 클라이언트와 서버사이에서 요청과 응답을 주고받는 과정인데요 이름의 유래는 하이퍼텍스트기반으로 데이터를 전송하겠다라른 뜻입니다.

작동은 클라이언트가 프로토콜, 위치, 자원명으로 서버의 자원에 접근하는 것인데 이는 우리가 브라우저의 주소창에 찾고자 하는 웹사이트의 주소를 적는것과 같습니다.

즉, 우리는 알게 모르게 이미 httpf를 통해서 서버와 통신을 주고받고 있던것입니다.

예를 들어 https://www.naver.com/index.html이라면 https라는 프로토콜로, naver라는 위치에 있는 곳에 index.html이라는 자원을 요청하는 것입니다.

이런 http프로토콜 방식에는 메시지를 전달하는 것이 있는데 메시지의 구성에는

메서드, 요청의 종류를 알려주는 것

프로토콜의 버전, 그리고 헤더가 있습니다.

더 나아가 헤더에는 클라이언트가 어떤 브라우저를 쓰고 있는지, 언어는 무엇인지 같은 다양한 정보들이 담겨 있습니다.