cs

1. TDD란 무엇인가?
   Test-Driven-Development의 약자로서, 설계 이후 코드 개발 및 테스트 케이스를 작성하는 기존의 개발 프로세스와 다르게 먼저 테스트코드를 작성한 후에 구현을 하는 방식이다.
   작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현한다. 따라서 실패→ 성공 → 리팩토링의 과정을 반복하게된다.
   코드가 방대해지지 않고, 코드의 모듈화가 자연스럽게 잘 이루어진다는 장점이 있다.

2. useEffect란 무엇인가?
   컴포넌트가 렌더링 되거나 업데이트 될 때 그 안에 있는 기능을 실행할 수 있는 React Hooks중 하나다. 컴포넌트가 mount, unmount, update됬을떄 특정작업을 수행가능하다.
   기본구조 : useEffect(수행하고자하는 작업(function), 배열형태이며, 배열안에는 검사하고자하는 특정 값이나 배열(deps())
   참조링크 : https://xiubindev.tistory.com/100

3. import와 require의 차이점은 무엇인가?
   모두 외부 라이브러리나 다른 파일을 불러오는 동일한 목적을 가지고있지만 약간의 차이점이 있다.
   우선 import의 경우 비동기적으로 모듈을 로드한다. 따라서 코드 실행이 멈추지 않으므로 성능에 미치는 영향이 적다. 하지만 종속성 관리에 더 신경 써야 한다. 반명 require의 경우 동기적으로 모듈을 로드하기 때문에 모듈 로딩이 완료되기 전까지 코드 실행이 중지되므로, 종속성 관리가 용이하지만 성능에 악영향을 줄 수 있다.
   import는 그냥 바로 키워드를 사용하여 직관적으로(import moment from "moment";) 모듈을 불러 올 수 있지만 require은 다른 변수를 할당하듯이 불러와줘야한다.(const moment = require("moment");
   import는 ES6 모듈 시스템을 사용한다. 웹 개발에서 주로 사용되며, 최신 브라우저에서 지원된다. Node.js에서 사용하려면 Babel과 같은 트랜스파일러(ES6 코드를 변환해주는 도구)를 사용한다. Node.js의 버전에 따라서는 기본적으로 지원되기도 합니다.반면 require은 CommonJS 모듈 시스템을 사용한다. Node.js에서 기본적으로 지원되고 있으며, 커뮤니티에서 널리 사용되고 있다.

4. 스코프란? 스코프체인이란 무엇인가?
   스코프는 어떤 변수들에 접근할 수 있는 유효범위이다.
   코드 어디서든 참조할 수 있는 전역스코프, 함수 자신과 하위 함수에서만 참조할 수 있는 지역스코프가있다. 함수안에서 선언된 변수는 해당 함수안에서만 사용할 수 있으니 전역변수에 영향을 끼칠 수 없다.
   스코프체인이란 내부함수는 호출된 변수를 찾기위해 먼저 자신의 스코프에서 찾고 없으면 한단계씩 외부로 나가면서 찾는데 이렇게 꼬리를 물고 계속 범위를 넓히면서 찾는 관계를 의미한다.

5. HTTP요청 메소드 POST와 GET의 차이점은 무엇인가?
   POST의 경우 update나 create에 주로 사용되고, GET의 경우 검색이나 읽기에 사용된다.(예: 검색페이지=get요청, 비번 수정 form=post요청) GET의 경우 데이터변형위험이 없어서 POST보다 상대적으로 더 안전하다. POST요청은 클라이언트에서 서버로 전송할 때 추가적인 데이터를 body에 포함할 수 있지만 GET요청은 필요한 데이터를 URL에 포함하여 요청한다.

6. List, Set, Map의 특징 및 차이점은 무엇인가?
   List는 순서와 중복이 있는 자료구조이다. 따라서 비어있는 데이터가 없고, 가변적인 특징을 갖고있어 배열이 자동적으로 늘어난다. 단점으로는 순회를 해야하기때문에 내가 원하는 데이터가 뒤쪽에 위치하는 경우, 속도의 문제가 있을 수 있다.
   Set은 순서가 없고, 중복이 허용되지않는 자료구조이다. (aka집합) 인덱스가 따로 존재하기않기때문에 iterator(hasNext(), next(), remove()...)를 사용하며, 검색속도가 빠르다는 장점이 있다.
   Map은 키와 데이터를 함께 저장할 수 있는 자료구조이다. Key, Value의 한 쌍으로 이루어진 데이터의 집합이며, key에는 중복값이 허용되지않지만, value에는 허용된다. 또한 순서가 유지되지않는다. 마찬가지로 검색속도가 빠르고, 인덱스가 존재하지 않기 때문에 iterator(hasNext(), next(), remove()...)를 사용한다.

7. event.target 과 event.currentTarget의 차이점은 무엇인가?
   event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다. 하지만 currentTarget은 이벤트가 부착된 부모의 위치를 반환한다.
   참조링크 : https://velog.io/@edie_ko/JavaScript-event-target%EA%B3%BC-currentTarget%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

8. 리액트와 제이쿼리의 차이점은 무엇인가?
   제이쿼리와 리액트 모두 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리이다.
   가장 큰 차이점은 제이쿼리의 경우 DOM을 직접 제어하고, 리액트의 경우에는 Virtual DOM(가상돔)을 사용하여 속도가 더 빠르다는 차이점이 있다. 따라서 간단한 웹을 만들땐 제이쿼리도 좋지만 DOM조작이 발생하는 규모가 큰 앱일수록 리액트를 사용하게된다.
   React는 보다 정교한 기능을 수행하는 데 도움이 되며, 주로 UI개발, DOM 조작 등을 강조한다.

9. 콜백함수가 무엇인가?
   다른함수의 인자로서 사용되는 함수이다. 즉 파라미터로 전달받은 함수를 의미한다. 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행한다.
   콜백지옥에 빠지면 들여쓰기 수준이 높아지며 가독성이 떨어진다. Promise나 Async/Await를 이용해 보완한다.
   참조링크 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98

10. Function.prototype.bind가 무엇인가?
    새로운 함수를 반환한다. 따라서 보통 변수를 할당하여 호출하는 형태로 사용하며, 첫번째 인자로는 this 키워드를 지정하고 그 뒤의 인자들은 바인드 된 함수에 매개변수로 제공된다.
    bind() 메소드가 호출되면 새로운 함수를 생성합니다. 받게되는 첫 인자의 value로는 this 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공됩니다.
    참조링크 : https://velog.io/@chojs28/Function.prototype.bind-%EC%A0%95%EB%A6%AC

11. <어려움>자바스크립트의 this는 몇가지로 추론될 수 있는가?
    (5가지만 기억)
    this는 전역범위에서 사용될 때, 전역객체를 가르킨다.
    함수에서 사용될 때에도 전역객체를 가리킨다.
    객체에 속한 메서드에서 사용될때는 그 메서드의 객체를 가리킨다.
    객체에 속한 메서드의 내부함수에서 사용될때는 전역객체를 가르킨다. 생성자에서 사용될 때, 생성자로 인해 생성된 새로운 객체를 가리킨다.

12. "attribute"와 "property"의 차이점은 무엇인가요?
    Attributes는 HTML 요소의 추가적인 정보를 전달하고 이름="값" 구조를 갖고 있다. 예를들어 <div class="my class"></div> 를 보면 div 는 element(요소) 이고 class 는 attribute(속성) 가 되며 ‘my class’ 는 class attribute의 value(값)가 된다.
    Property는 attribute에 대한 HTML DOM트리 안에서의 표현이다. 같은 예시에서 attribute는 값이 "myclass"이고 이름이 className인 property를 가진다.
    html 문서 안에서는 class가 attribute를 의미하지만 html DOM 안에서는 property를 의미한다.
    둘의 차이는 Attribute는 HTML 텍스트 문서에 있는 것이고, property는 HTML DOM 트리에 있는 것이다. attribute는 변하지 않고, property는 변할 수 있다. 가령 사용자가 체크박스를 체크하면 property의 값은 변하는 것이다.(DOM안에 존재하고 동적이기 때문에)
    참조링크 : https://medium.com/hexlant/attribute-%EC%99%80-property-%EC%9D%98-%EC%B0%A8%EC%9D%B4-c6f1c91ba91

13. 리액트의 useCallback, useEffect등을 사용할 때 의존성 배열을 받게 됩니다. 이 배열의 역할은 무엇인가요?
    useEffect의 의존성 배열은 두 번째 매개변수로, 의존성 배열의 내용이 변경되었을 경우, 부수 효과 함수(이펙트 함수)가 실행된다. 의존성 배열안의 값이 바뀔때만 렌더링 되는 특성을 이용해 state 혹은 props값이 변경될 때 특정 함수를 실행하거나, 컴포넌트가 마운트 될 때 API를 이용해 데이터를 가져오거나 하는데 사용할 수 있다. 빈 배열을 넣게 되면 최초 마운트 될 때 한번만 호출되도록 할 수 있다. 이펙트 내부에서 사용되는 모든 변수는 deps에 명시를 해야 버그가 발생하지 않는다.
    useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 훅으로 함수 안에서 사용하는 상태나 props가 있다면 의존성 배열에 추가하게 된다. 추가하지 않으면 함수 내에서 해당 값들을 참조할 때 가장 최신의 값을 참조할 것이라는 보장이 없다. 의존성 배열에 넣은 값이 변할 때만 함수를 새로 만들게 된다.

14. 원시값과 참조값(array, object)의 차이점을 메모리 관점에서 설명해주세요
    원시값은 복제할 때 값이 담긴 주솟값을 바로 복제하고,
    참조형은 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주솟값을 복제한다.
    원시값은 불변값이므로 원시값을 재 할당하면 새로운 메모리 공간을 확보하고 재 할당한 값을 저장하고 참조하던 메모리 공간 주소를 변경한다.
    참조값은 가변값이므로 객체가 할당된 메모리 공간에는 실제 객체의 주소가 저장된다. 객체를 할당한 변수는 재할당없이 객체를 직접 변경할 수 있다. 프로퍼티를 동적으로 추가할 수 있고, 갱신, 삭제도 가능하다.

15. 크로스 브라우징이란 무엇인가?
    어떤 환경(다른 기종, 다른 플랫폼)에서 접근하여도 동등하게 작동하는 것을 말한다. (동일하게 작동되는것이 아니다. -> 이는 불가능)
    웹 표준 기술을 채용하여 다른 기종/플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듬과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법이다.
    쉽게 말하자면 익스플로러에서 이용할 수 있던 사이트가 크롬이나 오페라에서는 보이지 않아 이용할 수 없는 것을 크로스 브라우징을 이용하여 사이트를 100% 이용할 수 있게 만드는 기술이다.
    크로스 브라우징을 해야하는 이유는, 여러가지 브라우저들은 각각 다른 속성을 가지고 있기 때문에(즉, 각각의 렌더링 엔진이 다르기 때문에) 동일한 코드를 작성하더라도 브라우저마다 화면이 다르게 보일 수 있기 때문이다.
    내가 쓰는 css가 사용되지 않는 브라우저를 can I use 사이트 같은 곳에서 확인하고, 제이쿼리 라이브러리를 사용하거나, css 속성 앞에 브라우져별 접두사인 벤더 프리픽스를 사용하는 것도 해결 방법이다.

16. NPM이란 무엇인가?
    Node Packaged Manager의 약자로서, Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램이라로 볼수 있다.
    자바스크립트 패키지 매니저고 Node.js에서 사용할 수 있는 모듈들을 패키지화에서 모아둔 저장소 역할이며 설치, 관리를 수행할 수 있는 CLI를 제공한다.
    많은 자바스크립트 프로그래머들이 유용한 패키지들을 만들어 npm에 코드를 공개한다. npm은 npm i <패키지명> 명령어로 설치할 수 있다. 이와 별개로 yarn 이라는 패키지 매니저가 있다. yarn은 facebook 에서 만든 것으로 npm 서버에 비해 속도가 빠르고 사용법이 npm과 비슷하여 쉽게 사용할 수 있다.

17. 라이브러리, 프레임워크의 정의는 무엇인가?
    라이브러리는 응용프로그램 개발을 위해 필요한 기능을 모아놓은 소프트웨어이고, 기능 사용법은 사용자가 결정합니다. 리액트가 UI를 만들기 위한 대표적인 자바스크립트의 라이브러리이다.
    프레임워크는 소프트웨어 개발을 위한 개발 환경, 토대, 기반시설을 제공하는 것이고 프로그래머는 프레임워크가 제공하는 전체적인 규칙을 따라가면서 개발해야한다. 코드를 프레임워크가 제어하는것이 라이브러리와의 차이점이다. 예시로는 spring,vue.js 등이 있다.
    참조링크 : https://cocoon1787.tistory.com/745

18. 이벤트 바인딩과 이벤트 헨들링이란 무엇인가?
    이벤트 헨들링이란 클릭, 키보드입력과 같은 사용자의 어떤행위 즉 이벤트를 처리하는것을 의미한다. 이러한 이벤트 헨들링은 다음과 같은 과정(이벤트를 받아줄 요소를 선택 -> 그 요소와 이벤트를 연결해주는 바인딩 -> 이벤트가 발생했을 때 실행될 코드를 작성)으로 이루어진다.
    이벤트 바인딩이란 발생하는 이벤트와 그 후에 어떤일이 일어나는지 알려주는 콜백함수와 연결해주는 것을 의미한다.
    이벤트 바인딩이는 총 3가지 방법이 있는데, HTML이벤트 핸들러, 전통적인 DOM핸들러, EventListener을 이용한 핸들러가있다.
    HTML핸들러는 HTML요소의 이벤트 Attribute에 이벤트 핸들러를 넣는 방식이다. 현재에서는 지양하는 방식이고, HTML과 JS가 혼용될 수 있는 문제가 생긴다.
    전통적인 DOM이벤트 핸들러는 HTML과 JS가 혼용되는 문제를 해결했으나, 이벤트 핸들러에 하나의 함수만 바인딩 할 수 있고, 함수에 인수를 전달하지 못한다.
    앞에서 설명한 것의 단점을 보완하기 위해 만든 것이 EventListener을 이용한 이벤트 핸들러이인데, addEventListener함수를 이용하여 대상 요소에 이벤트를 바인딩하고, 해당 이벤트가 샐행될 콜백함수를 지정한다.하나의 이벤트에 대해 다수의 핸들러를 추가할 수 있고, 캡쳐링과 버블링을 지원하며 HTML뿐만 아니라 DOM요소에도 동작한다는 장점이 있다.
    참조링크 : https://victorydntmd.tistory.com/85

19. 고차 컴포넌트(HOC)란 무엇인가?
    고차 컴포넌트란 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다. 즉 리액트 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴한다. 컴포넌트 로직을 재사용하기 위해서 사용되며, 주로 유저 인증 로직 처리 혹은 로딩 중 화면 처리등의 목적을 갖고있을 때 사용된다.

20. 깊은복사, 얕은복사란 무엇인가?
    얕은 복사란 참조 타입 데이터가 저장한 '메모리 주소 값'을 복사한 것을 의미한다. 즉 객체를 복사할 때 원래값과 복사된 값이 같은 참조를 가리키고 있다. 따라서 값을 변경시키면 안된다.
    깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법이다. 즉 새로운 메모리 공간을 확보해 완전히 복사하는것을 의미한다. 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다.
    참조링크 : https://velog.io/@ellyheetov/Shallow-Copy-VS-Deep-Copy

21. "==" 와 "==="의 차이가 무엇인가?
    "=="는 동등 연산자로, 비교하는 대상의 형(타입)이 다르더라도, 강제로 비교한다. 즉 두 값의 타입이 다르더라도, 형 변환된 값이 같다면 true를 리턴한다. "==="는 일치 연산자로 동등 연산자보다 엄격하게 비교한다. 타입과 값이 모두 같을 경우에만 true를 리턴한다.

22. 화살표 함수와 일반함수의 차이점
    화살표함수는 ES6에서 새로 추가된 내용이다. 기존 함수 표현식과 비교하면 간결한표현으로 간단하게 사용가능하다.
    일반 함수는 this가 동적으로 바인딩되는 반면, 화살표 함수는 바로 상위 스코프의 this와 같다. 즉 일반 함수는 자신이 종속된 객체를 this로 가리키고 화살표 함수는 자신이 종속된 인스턴스를 가리킨다.
    화살표함수는 프로토타입 프로퍼티를 가지고있지않기때문에 생성자 함수로 사용이어렵고, (일반함수는 생성자 함수로 사용 가능)
    일반함수에서는 함수가 실행될때 암묵적으로 arguments변수가 전달되어 사용할 수 있지만, 화살표 함수에서는 arguments변수가 전달되지않는다.

23. <어려움>이벤트 루프란 무엇인가?
    싱글 스레드 기반의 언어인 자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원한다.
    이벤트 루프는 콜스택과 콜백큐의 상태를 체크하여, 콜스택이 빈 상태가 되면 콜백 큐의 첫번째 콜백을 콜 스택으로 밀어주는 역할을 한다. 즉, 자바스크립트 엔진이 코드 조각을 하나씩 처리할 수 있도록 작업을 스케쥴하는 동시에 JS에서 비동기 작업을 처리할 수 있게 해준다.
    모든 비동기 방식의 API들(setTimeout, ajax 등)은 이벤트 루프를 통해 콜백 함수를 실행한다고 볼 수 있다.

24. forEach와 Map의 차이점은?
    두 메소드 다 배열의 모든 원소를 돌면서 해당 요소에 관한 작업을 실행하는데, forEach는 원본을 변경시키는데, map은 새로운 배열을 반환한다.

25. undeclared란 무엇인가(null, undefined와 비교)?

    undefined과 null의 차이는 둘다 선언은 되어있지만, 값의 할당 차이

• Undefined: 접근 가능한 스코프에 변수가 선언되었으나 현재 아무런 값도 할당되지 않은 상태
  var amy; console.log(amy) => undefined

• Undeclared: 접근 가능한 스코프에 변수 선언조차 되어있지 않은 상태.

• Null: 변수를 선언하고 "null" 이라는 빈값을 할당한 경우 (null은 객체임)
  var amy; (선언), amy = null; (할당)
  

26. Prototype이란? Prototype Chaining은 무엇인가?
    자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있다. 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다. 이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 한다.
    프로토타임 체이닝은 자바스크립트에서 객체가 어떤 속성이나 메서드를 사용할 때, 해당 객체의 프로토타입으로 연결된 객체들을 순차적으로 검색하여 원하는 속성이나 메서드를 찾는 과정이다.

    즉 프로토타입이란 객체가 만들어지기 위해서는 자신을 만드는데 사용된 원형인 프로토타입 객체를 만든다. 이때 만들어진 객체 안에 proto 속성이 자신을 만들어낸 원형을 의미하는 프로토타입 객체를 참조하는 숨겨진 링크가 있다. 그 링크를 프로토타입이라고 한다. 어떤 데이터의 proto 프로퍼티 내부에서 다시 proto 프로퍼티가 연쇄적으로 이어진것을 프로토타입 체인(prototype chain)이라 하고, 이 체인을 따라가며 검색하는 것을 프로토타입 체이닝(prototype chaining) 이라고 한다.
    참조링크 : https://velog.io/@sik2/JS-CoreJavaScript-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85-%EC%B2%B4%EC%9D%B4%EB%8B%9DPrototype-Link-Prototype-Object

27. Box model은 무엇인가?
    모든 HTML 요소는 BOX모양으로 구성되며, 이것을 박스모델이라고 한다. 문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다.
    박스 모델은 총 네 부분(영역)으로 이루어진다.
    이 네가지 부분은 패딩(padding), 테두리(border), 마진(margin), 내용(content)로 구분한다.
    내용은 텍스트나 이미지가 들어가있는 박스의 실질적인 부분으로 색상, 너비, 높이 등을 지정할 수 있다. 패딩은 내용과 테두리 사이의 간격이다. 패딩은 눈에 보이지 않는다. 테두리(border)는 내용과 패딩 주변을 감싸는 테두리이다. 마진은 테두리와 이웃하는 요소 사이의 간격이고 마진은 눈에 보이지 않는다.

28. use strict은 무엇인가? (장단점)
    ES5부터 추가된 use strict는 자바스크립트의 제한된 버전을 선택함으로써 런타임시, 보다 엄격한 parsing 및 error handling을 자발적으로 시행하도록 적용함을써 일반적인 코딩 실수나 안전하지 않은 동작을 포착하는 것이다.
    자바스크립트 언어의 문법을 보다 엄격히 적용하여 기존에는 무시되던 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. 전역에서 선언하면 모든 소스코드가 대상이고, 로컬로 선언하면 함수 내에서만 대상이 된다. use strict 모드에서는 삭제가 불가능한 프로퍼티를 삭제하거나 함수의 매개변수를 중복해서 사용하는 것 등이 금지된다.
    코드의 문제를 더 빨리 알게되기에 디버깅이 쉬워지고 실수로 전역변수를 만드는 것이 불가능하지만, 단점으로는 엄격모드를 지원하지 않는 브라우저에서는 엄격 모드의 코드가 다른 방식으로 동작할 수 있다는 것이다. 또한 기존에 허용되던 일부 유연한 문법들이 제한되므로 개발자들에게 어려움을 줄 수 있다.
    

29. AJAX에 대해 자세히 설명하세요 (장단점)
    AJAX(Asynchronous JavaScript and XML)는 웹 애플리케이션에서 비동기적으로 데이터를 서버와 교환하기 위한 기술입니다.
    쉽게 말해서 비동기식으로 XML을 이용해 서버와 통신하는 방식이라고 볼 수 있다.
    웹 페이지 전체를 업데이트 하는게 아니라 부분적으로 업데이트를 하기 위해 사용한다. 따라서 장점은 SPA와 마찬가지로 웹페이지를 업데이트시 새로고침 없이 필요한 부분만 업데이트 되어서 UX가 향상된다. 그러나 단점으로는 SEO가 까다롭고, 동적화면에서 History 관리와 북마크가 어려울 수 있다.

30. .call과 .apply의 차이점은 무엇인가요?
    자바스크립트 함수 메서드로, 모두 함수를 호출할 때 사용되지만 인자를 전달하는방식에서 차이가 있다.
    .call 메서드는 함수를 호출할때, 첫 번째 인자로 전달한 객체를 해당 함수의 컨텍스트(또는 this 값)로 지정합니다. 이후에 전달하는 인자들은 호출된 함수의 매개변수로 전달됩니다. 즉, .call() 메서드는 일반적인 함수 호출과 같이 매개변수를 하나씩 넘기는 방식입니다.
    .apply 메서드는 함수를 호출할 때, 첫 번째 인자로 전달한 객체를 해당 함수의 컨텍스트로 지정합니다. 하지만 .apply()의 두 번째 인자는 배열 형태로 함수의 매개변수를 전달합니다. 즉, .apply() 메서드는 배열의 요소들을 함수의 매개변수로 전달하는 방식입니다.
    일반적으로 매개변수를 개별적으로 전달해야 할 때는 .call(), 배열 형태로 전달해야 할 때는 .apply()를 사용합니다.
    call과 apply의 유일한 차이점은, 첫 번째 인자(this를 대체할 값)를 제외하고, 실제 필요한 parameter를 입력하는 방식이다. call과는 다르게 apply함수는 두 번째 인자부터 모두 배열에 넣어야 한다.

31. props와 state가 무엇인가요?
    props와 state는 리액트(React) 컴포넌트에서 데이터를 다루는 두 가지 중요한 개념이다.
    props는 컴포넌트의 외부에서 읽기 전용으로 전달되는 데이터이며, state는 컴포넌트의 내부에서 관리되는 변경 가능한 데이터입니다. props를 사용하여 컴포넌트 간에 데이터를 전달하고, state를 사용하여 컴포넌트의 내부 상태를 관리할 수 있습니다.
    props와 state 모두 리액트 컴포넌트에서 다루는 데이터로 그 중 props는 부모 컴포넌트에서 받아온 데이터이다. 리액트는 부모에서 자식으로만 데이터가 흐르는 단방향 형식으로, 이미 상속된 props는 수정이 불가능하다. 반면 state는 해당 컴포넌트 내부에서 선언되기때문에 수정이 가능하다는 차이점이 있다. setState를 사용하여 state값을 업데이트 해주면 자동으로 리렌더링되지만 주의할 점은 setState의 비동기적 특성을 기억하고 사용 해야한다. (setState가 있을 경우, 리액트는 다른 state변경까지 한꺼번에 통합해서 리액트 자신이 판단하기에 가장 적절한 시기에 돔을 리렌더링한다. 해결하기 위해 콜백 혹은 useEffect를 사용한다)

32. <어려움>redux-thunk를 사용한 이유와 작동원리가 무엇인가요?
    <일단 패스>
    <리액트 구조가 머릿속에 더 잘 잡혀있고난 후에 다시 생각해보기>

33. 클래스형 컴포넌트와 함수형 컴포넌트를 비교하시오
    리액트에서 컴포넌트를 선언하는 방식에는 클래스형 컴포넌트와 함수형 컴포넌트 2가지가 있다.
    클래스형의 경우 state의 사용이 가능하여 상태 저장이 가능하고, 리액트 라이프 사이클 메서드를 사용 가능하다. 함수가 아닌 클래스이기 때문에 return문이 없고 render() 함수가 필수적으로 있어야
    JSX(JSX(JavaScript XML)는 자바스크립트의 확장 문법으로, 리액트(React)에서 사용되는 리액트 요소를 작성하는 데 사용됩니다. JSX는 HTML과 유사한 문법으로, 자바스크립트 코드 안에 XML 형태로 작성할 수 있게 해줍니다.)
    반환이 가능하다. 함수형 컴포넌트보다 먼저 나왔기 때문에 유지보수를 위해 알아두어야 한다.
    함수형 컴포넌트는 클래스보다 선언하기 좀 더 편하고, 함수는 한번 실행되고 나면 메모리 상에서 사라지기 때문에 메모리 자원을 덜 사용하는 것이 장점이다. 함수형 컴포넌트에서는 hook을 사용할 수 있고, return문을 사용한다.

34. Rest API가 무엇인가?
    REST API는 'REST하게 클라이언트와 서버간에 데이터를 주고받는 방식'인데, 여기서 REST란 HTTP URI를 통해 자원을 명시하고, HTTP메소드(POST, GET, PUT, DELETE)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것이다.
    (URI란 웹상의 자료의 id 즉, 내가 올린 블로그 글의 특정 id를 입력해줘야 글을 볼수 있는 것처럼 URI는 인터넷 자원을 나타내는 고유 식별자)
    REST의 특징에는 유니폼 인터페이스(HTTP 표준에만 따른다면, 안드로이드/IOS 플랫폼이든, 특정 언어나 기술에 종속되지 않고 모든 플랫폼에 사용할 수 있으며, URI로 지정한 리소스에 대한 조작이 가능한 아키텍처 스타일을 의미), 무상태성(작업을 위한 상태정보를 따로 저장하고 관리하지 않음)
    참조링크 : https://khj93.tistory.com/entry/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-REST-API%EB%9E%80-REST-RESTful%EC%9D%B4%EB%9E%80

35. CORS와 그의 해결방법은 무엇인가
    CORS에러의 정의 : 웹 브라우저에서 발생하는 보안 정책으로 인한 오류
    CORS에러의 원인 : 도메인 혹은 포트가 다른 서버의 자원을 요청할 때 생긴다. 즉 웹 애플리케이션이 다른 출처(Origin)의 리소스에 접근하려고 할 때 발생
    CORS에러의 해결방법 : Access-Control-Allow-Origin 헤더를 API 서버의 응답에 포함하여 허용할 출처를 명시적으로 설정하거나 프록시 서버를 사용하여 CORS 정책 우회하면 된다.

36. React Hook에 대해 설명하시오
    React 버전 16.8에서 도입된 기능으로, 함수형 컴포넌트에서도 상태 관리와 라이프사이클 기능 등을 사용할 수 있게 해주는 API이다.
    Hook을 사용하면 클래스형 컴포넌트에서만 사용할 수 있었던 기능들을 함수형 컴포넌트에서도 간단하게 사용할 수 있어서 코드의 가독성과 재사용성이 높아집니다.
    React Hook을 사용하면 재사용 가능한 로직을 쉽게 만들 수 있고, 또 React의 내장된 훅 말고 새로운 커스텀 훅을 만들수도 있다. 또한 코드 가독성이 좋아지는 장점이 있다

37. <어려움> 리덕스가 무엇인지 그리고 장단점 설명하시오
    리덕스(Redux)는 자바스크립트 애플리케이션 상태를 관리하기 위한 상태 관리 라이브러리입니다. 특히, 대규모 애플리케이션에서 복잡한 상태를 효과적으로 관리하고 예측 가능한 방식으로 데이터 흐름을 제어할 수 있도록 도와줍니다. 리덕스는 리액트(React)와 함께 주로 사용되지만, 다른 프레임워크와 라이브러리와도 함께 사용할 수 있습니다.
    리덕스의 주요 개념과 동작 방식:

    상태 중앙 저장소(Store):
    리덕스는 애플리케이션의 상태를 중앙 저장소(스토어)에 저장합니다.
    애플리케이션의 모든 컴포넌트가 동일한 상태에 접근할 수 있습니다.

    불변성(Immutability):
    상태는 불변성을 유지하여 변경되지 않도록 관리됩니다.
    상태를 직접 수정하지 않고, 변경된 복사본을 생성하여 사용합니다.

    액션(Action):
    상태를 변경하기 위해 발생하는 이벤트를 나타냅니다.
    특정 액션은 타입(type)과 함께 추가적인 데이터(payload)를 가집니다.

    리듀서(Reducer):
    액션에 따라 상태를 업데이트하는 함수입니다.
    리듀서는 이전 상태와 액션을 받아서 새로운 상태를 반환합니다.

    장점:
    예측 가능한 상태 관리: 상태를 중앙 저장소에 저장하여 예측 가능한 데이터 흐름을 가지고 상태를 관리할 수 있습니다.
    상태의 통제: 상태가 중앙에 저장되므로, 데이터를 쉽게 추적하고 디버깅할 수 있습니다.
    컴포넌트 분리: 상태를 별도로 분리하여 UI 컴포넌트의 역할을 단순화시키고 관심사를 분리할 수 있습니다.
    중복 감소: 리듀서를 통해 공통 상태 변경 로직을 모듈화하여 중복을 제거할 수 있습니다.

    단점:
    러닝 커브: 처음에는 익숙하지 않을 수 있으며, 초기 구축 시간이 더 걸릴 수 있습니다.
    코드 양 증가: 작은 규모의 애플리케이션에서는 리덕스가 추가적인 코드를 요구할 수 있습니다.
    

38. async/awiat이란 무엇인가?
    자바스크립트에서 비동기적인 코드를 작성하고 처리하는 데 사용되는 문법이다. 비동기적인 작업은 일반적으로 프로미스(Promise)나 콜백(callback)을 사용하여 처리되는데,
    async/await를 사용하면 비동기 코드를 더 간결하고 동기적으로 작성할 수 있다.
    함수 선언자 앞에다가 async를 붙여주고, 비동기가 필요한 작업 앞에다가 await를 붙여줘소 결과를 기다린다. 다수의 비동기 처리 작업을 할 때 유용하고, try/catch를 이용해서 에러를 핸들링 할 수 있다.

39. <어려움> JWT 방식이 무엇이고, 사용이유는 무엇인가?
    JWT는 JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰(인증)을 말한다.
    JWT 방식은 세션 기반 인증과 달리, 서버가 상태를 유지하지 않고도 인증 정보를 전달할 수 있으므로, 서버의 확장성과 성능을 향상시킬 수 있다. 또한 JWT는 토큰 자체에 인증 정보를 포함하고 있기 때문에, 별도의 데이터베이스 조회가 필요 없어 빠른 인증이 가능하다. 하지만 토큰이 클라이언트에 저장되므로 보안적으로 조심해야 하며, 중요한 정보는 페이로드에 포함하지 않도록 주의해야 한다.

    토큰은 주로 세 가지 요소로 구성됩니다:

    헤더(Header):
    토큰의 유형과 암호화 알고리즘 등의 메타데이터를 포함합니다.

    페이로드(Payload):
    실제로 전달하고자 하는 데이터, 즉 클레임(Claim) 정보를 포함합니다.
    클레임은 등록된(registered) 클레임, 공개(public) 클레임, 비공개(private) 클레임으로 나뉩니다.

    서명(Signature):
    헤더와 페이로드를 인코딩하고, 비밀 키를 사용하여 생성되는 문자열로서, 토큰의 무결성과 유효성을 확인하는 데 사용됩니다.
    

40. 웹팩과 바벨은 무엇인가?
    웹팩(Webpack)은 모듈 번들러로서, 웹 애플리케이션을 구성하는 여러 리소스(HTML,CSS,JS,이미지,등...)을 하나의 파일로 번들링하는 역할을 하며, 의존성 관리를 통해 모듈들 간의 의존 관계를 파악하고, 번들링을 통해 최적화된 하나의 번들 파일을 생성한다. 따라서 웹팩은 모듈 번들링을 통해 코드를 최적화하고 하나의 파일로 관리가 가능하다.
    즉 간단하게 말하자면 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리이다.

    바벨(babel)은 자바스크립트의 새로운 문법을 사용하여 개발하고자 할 때, 이를 구 버전의 자바스크립트로 변환해주는 도구이다. 따라서 최신 문법을 구 버전으로 변환하여 브라우저 호환성을 확보합니다
    즉 간단하게 말하자면 JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리이다.

    두개 다 라이브러리이다.

41. DOM 과 가상 DOM이란?

    두가지 모두 웹 애플리케이션의 UI를 효율적으로 관리하기 위해 사용된다.
    DOM은 Document Object Model 의 약자로, HTML, XML 문서의 프로그래밍 인터페이스를 의미한다. HTML은 브라우저에서 실행될 수 있게끔 DOM Tree로 파싱되고, 이를 바탕으로 렌더링이 된다. DOM은 HTML 문서의 모든 요소들을 트리 형태로 구성하고, 각 요소를 객체로 표현하여 프로그래밍적으로 접근하고 조작할 수 있게 합니다.
    가상DOM은 추상화된 DOM을 뜻한다. 기존 DOM을 조작하고 렌더링하는 부분에서 오는 시간을 줄이기 위해 사용됬다. DOM과 유사한 객체를 메모리에 올려놓고, 변경 사항이 생기면 가상돔을 바꾸고, 실제 돔에서는 변경 사항만 변경하여 더 반응성 빠른 웹을 구현할 수 있다. 리액트도 가상돔을 이용하여 구현되어있다.

42. ES6 문법에 추가된 것들을 아는대로 말하시오
    ES6는 자바스크립트의 최신 버전 중 하나이다.
    let과 const: let과 const는 블록 스코프를 가지는 변수를 선언하는 키워드입니다. let은 재할당이 가능한 변수를 선언하고, const는 재할당이 불가능한 상수를 선언합니다.

    화살표 함수(Arrow Function): 간결한 문법으로 함수를 정의할 수 있게 해줍니다. function 키워드 대신 화살표(=>)를 사용하여 함수를 선언합니다.

    클래스(Class): 객체지향 프로그래밍을 지원하기 위해 클래스 문법이 도입되었습니다. 클래스를 통해 생성자, 메서드, 상속 등을 더 쉽게 정의할 수 있습니다.

    디스트럭처링(Destructuring): 배열이나 객체에서 값을 추출하여 변수에 할당하는 문법을 제공합니다. 배열이나 객체의 특정 요소를 빠르게 추출할 수 있습니다.

    템플릿 리터럴(Template Literal): 역따옴표(``)를 사용하여 문자열 안에 변수를 쉽게 삽입할 수 있으며, 멀티라인 문자열을 정의할 수 있습니다.

    Spread 문법: ...을 사용하여 배열이나 객체를 펼칠 수 있습니다. 배열이나 객체의 요소를 복사하거나 다른 배열이나 객체와 병합하는데 사용됩니다.

    Rest 파라미터: 함수 정의에서 ...을 사용하여 가변 인자를 나타낼 수 있습니다. 나머지 인자를 배열로 받아서 처리할 수 있습니다.

    프라미스(Promise): 비동기 작업을 더 편리하게 다룰 수 있는 프라미스 객체가 도입되었습니다. 콜백 지옥을 방지하고 비동기 코드를 더 읽기 쉽게 만듭니다.

    모듈(Module): import와 export를 사용하여 모듈화된 자바스크립트 코드를 작성할 수 있게 되었습니다. 다른 파일에서 필요한 코드를 불러와서 사용할 수 있습니다.

    for...of 루프: 배열의 요소들을 순회하기 위한 새로운 루프 구문이 도입되었습니다. for...of를 사용하여 간단하게 배열을 순회할 수 있습니다.

43. ESLint에 대해 설명하시오
    자바스크립트 언어와 소스코드를 분석하는 도구로 eslint패키지를 설치해주면 코드에 특정 스타일과 규칙을 적용해 에러를 찾고 패턴을 적용시킬 수 있는 분석 툴이다. 사용시 ECMAScript코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정해주는 유용한 도구이다. 코드의 가독성을 높이고 잠재적인 오류와 버그를 제거해 단단한 코드를 만드는 것이 목적이다. 추가로 코드를 더 보기좋도록 포맷팅 해주는 prettier를 ESLint와 함께 사용해주면 더 효율적이다.

44. Async, Await와 Promise의 차이점은 무엇인가?
    Async/Await와 Promise는 자바스크립트에서 비동기 처리를 다루는 데 사용되는 두 가지 방법입니다. 비동기 처리는 오래 걸리는 작업을 블로킹하지 않고 비동기적으로 처리하여 웹 애플리케이션의 성능을 향상시키는데 사용됩니다.
    두 방법의 차이점은 다음과 같습니다.
    Promise는 .then()과 .catch()를 사용하여 비동기 작업의 성공과 실패를 처리하고, Async/Await는 try/catch 문을 사용하여 에러 처리를 합니다.
    Async/Await를 사용하면 더 간결하고 읽기 쉬운 코드를 작성할 수 있어, 코드가 길어질 수록 복잡한 비동기 작업을 처리하는데 더 편리합니다.

45. Promise는 무엇인가?
    비동기 처리에 활용되는 객체로서, 웹 페이지에서 서버로 데이터를 요청했을 때, 데이터를 모두 받기 전에 웹에 출력하려고 하는 경우를 방지하기 위해 활용됩니다. 즉, Promise 객체는 비동기 로직을 마치 동기처럼 사용할 수 있는 기능을 가집니다. 예를 들어 비동기 로직인 A, B, C 로직이 있다고 했을때 이를 Promise를 사용하지 않고 실행시키면 먼저 로직이 끝나는 순서로 출력이 되지만, Promise를 사용하면 A, B, C 순서대로 출력을 시킬 수 있습니다.
    동기 요청을 보내면 성공 또는 실패가 다양한 형태로 발생한다. 프로미스를 사용하면 이러한 성공(resolve)이나 실패(reject)를 편리한 방식으로 환원할 수 있다. new 연산자와 함께 호출한 promise의 인자로 넘겨주는 콜백함수는 호출할 때 바로 실행, 그 내부에 resolve 또는 reject 함수를 호출하는 구문이 있으면 둘 중 하나가 실행되기 전까지는 다음 then or catch 구문으로 넘어가지 않는다.
    pending(대기, 비동기 로직처리의 미완료 상태) ->
    fulfilled(이행, 비동기 로직 처리가 완료된 상태로 Promise 결과 값 반환상태) ->
    rejected(실패, 비동기 로직 처리의 실패 또는 오류 상태)
    3가지 상태를 가진다.
    참조링크 : https://narup.tistory.com/215

46. 비동기 함수에 대해 설명하세요
    현재 실행중인 코드 완료 여부와 무관하게 즉시 다음 코드로 넘어간다. 즉 요청과 응답이 동시에 이루어지지 않는다. 비동기 방식이 필요한 이유는 화면에서 서버로 데이터를 요청했을 때, 요청에 대한 응답을 계속 기다릴 수 없으니깐(빈 화면을 보여줄 수 없으니까) & 기다리는 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다.
    참조링크 : https://velog.io/@khy226/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%9E%80-Promise-asyncawait-%EA%B0%9C%EB%85%90

47. useMemo vs useCallback
    Memoization(메모이제이션)은 기존에 수행한 연산의 결과값을 어딘가에 저장해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍기법이다. 즉 중복연산을 피할 수 있기 때문에 성능을 최적화 할 수 있다.
    둘 다 메모이제이션 훅은 리액트의 불필요한 랜더링(예: 자식 컴포넌트의 상태가 변경되지않아도 랜더링 해버리는 경우)을 방지하여 퍼포먼스 최적화에 사용된다.
    useMemo는 메모이제이션된 값을 반환하는 함수이다.
    useMemo(() => fn, [deps])
    여기서 지정한 deps의 값이 변하게된다면 ()=>fn 함수를 실행하고, 그 함수의 반환 값을 변환해준다.
    useCallback은 메모이제이션된 함수를 반환하는 특징을 가지고있다.
    useCallback(fn, [deps])
    함수 컴포넌트에서 불필요하게 함수를 업데이트하는 것을 방지해주고, 함수자체를 반환해주기때문에 const변수와 함께 주로 사용한다.
    즉 둘의 차이점은 useCallback은 전달된 함수 그 자체를 캐싱하지만, useMemo는 전달된 함수가 실행되고 반환된 결과를 캐싱한다는 것이다.(=useMemo는 메모이제이션 된 값을 반환하고 useCallback은 메모이제이션 된 콜백을 반환한다.)
    참조링크 : https://whales.tistory.com/117

48. OOP의 특징에 대해서 설명하시오
    OOP는 Object Oriented Programming의 약자로서, 객체지향 프로그래밍을 뜻한다. 객체지향프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고, 그 객체들간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법으로 OOP의 장점은 코드 재사용성이다. 클래스를 한번 만들어 놓으면 계속 이용 가능하고, 상속을 통해 확장 가능하다. 수정해야할 부분이 클래스 내부에 멤버 변수 혹은 메서드로 있기 때문에 해당 부분만 수정하면 되어 유지보수가 쉽다. 단점은 처리속도가 느리고, 객체가 많으면 용량이 커진다는 것이다.
    OOP의 특징으로는 캡슐화, 상속성, 추상화, 다형성 4가지가 있다.

• 캡슐화 : 객체의 상태와 행위를 하나로 묶고, 객체의 상태를 외부에서 직접 접근하지않도록 제한하는 개념이다. 객체의 내부 상태를 숨기고, 외부에서는 객체의 메서드를 통해 상태를 변경하고 접근하도록 한다. 이를 통해 코드의 안정성과 보안성을 높히고, 객체 간의 결합도도 낮출 수 있다.

• 상속성 : 기존에 정의된 클래스(부모클래스)의 속성과 메서드를 다른 클래스(자식클래스)가 물려받는 개념이다. 부모클래스의 모든 멤버를 그대로 사용하면서, 추가적인 멤버나 메서드르 정의할 수 있다. 상속을 통해 코드의 재사용성을 높이고, 계층적인 관계를 표현하는데 유용하다.

• 추상화 : 객체의 공통된 특성과 기능을 추출하여 모델화하는 개념이다. 객체의 중요한 특성만을 간추려 표현함으로써 복잡성을 감소시키고, 개념적으로 문제를 해결할 수 있도록한다. 추상화를 통해 실제 구현과 분린된 인터페이스를 정의할 수 있다.

• 다형성 : 동일한 이름의 메서드가 다양한 객체에 따라 다른게 동작하는 개념이다. 같은 메서드 이름을 사용하여 객체에 따라 다른 동작을 수행하도록 함으로써 유연하고, 확장성 있는 코드를 작성할 수 있다. 다형성을 통해 객체들 간의 상호작용을 통일적으로 다룰 수 있으며, 코드의 가독성과 재사용성을 높일 수 있다.

  클래스는 집단에 속하는 속성과 행위를 변수와 메서드로 정의한 것이고, 객체 즉 인스턴스는 클래스에서 정의한 것을 토대로 실제 메모리 상에 할당된 데이터이다.
  상속은 부모 클래스의 속성과 기능을 그대로 이어받아 사용할 수 있게 하고, 코드의 중복을 없애기 좋다.

  이러한 객체 지향 프로그래밍의 특성은 코드의 재사용성, 가독성, 유지보수성을 높여주며, 대규모 프로젝트에서 코드의 구조화와 모듈화를 용이하게 해줍니다. OOP는 현대적인 소프트웨어 개발에서 널리 사용되는 중요한 프로그래밍 패러다임 중 하나입니다

49. HTTP와 HTTPS의 차이점은?
    HTTP(Hypertext Transfer Protocol)와 HTTPS(Hypertext Transfer Protocol Secure)는 둘 다 인터넷에서 데이터를 전송하는 데 사용되는 프로토콜이다.

    HTTP는 서버/클라이언트 모델을 따라 데이터를 주고받기 위한 프로토콜이다. HTTPS는 HTTP에 데이터 암호화가 추가된 프로토콜이다. 공개키/개인키 암호화 방식을 이용해 데이터를 암호화한다. HTTP는 암호화가 추가되지 않았기 때문에 보안에 취약한 반면, HTTPS는 안전하게 데이터를 주고받을 수 있다. 하지만 HTTPS를 이용하면 암호화/복호화 과정이 필요하기 때문에 HTTP보다 속도가 느리다(그러나 실 사용에서는 크게 차이는 없다.) HTTPS는 인증서를 발급하고 유지하는데에 추가 비용이 발생한다. 개인정보와 같은 민감한 데이터를 주고 받는다면 HTTPS를 이용해야 하지만, 단순 정보 조회 같은 사이트는 HTTP를 적용하면 된다.
    

50. 주소창에 naver.com을 입력하면 생기는 일
    사용자가 입력한 url 주소 중에서 도메인 네임을 DNS 서버에서 검색한다. -> DNS 서버에서 해당 도메인 네임에 해당하는 IP주소를 찾아 사용자가 입력한 URL 정보와 함께 전달함. -> 웹 페이지 URL + IP 주소는 HTTP 프로토콜을 사용하여 HTTP 요청 메세지를 생성한다 -> HTTP 요청 메세지는 TCP 프로토콜을 사용하여 인터넷을 거쳐 해당 IP 주소의 컴퓨터로 전송된다 -> 이렇게 도착한 HTTP 요청 메세지는 HTTP 프로토콜을 사용하여 웹 페이지 URL 정보로 변환된다. -> 웹 서버는 도착한 웹 페이지 URL 정보에 해당하는 데이터를 검색한다 -> 검색된 웹 페이지 데이터는 또다시 HTTP 프로토콜을 사용하여 HTTP 응답 메세지를 생성한다 -> 이렇게 생성된 HTTP 응답 메세지는 TCP 프로토콜을 사용하여 인터넷을 거쳐 원래 컴퓨터로 전달된다. -> 도착한 HTTP 응답 메세지는 HTTP 프로토콜을 이용하여 웹 페이지 데이터로 변환되고, 웹 브라우저에 의해 출력되어 사용자가 볼 수 있게 된다.

51. Flex 속성을 설명해주세요.
    Flexbox(Flexible Box)는 CSS의 레이아웃 모델 중 하나로, 웹 페이지의 요소들을 유연하게 배치하고 정렬하는데 사용되는 기술이다.
    기존 컨텐츠를 수평으로 배치할 때, float나 inline-block으로 마크업할때의 불편함을 쉽게 해결할 수 있도록 추가되었다. 다양한 디바이스 환경에서 언제나 똑같은 레이아웃을 유지시켜줌으로써 반응형 웹 사이트에 유용하게 쓰인다. Flex는 컨텐츠를 감싸는 상위 부모요소인 Flex Container와 각 컨텐츠들인 자식요소 Flex Item으로 구성되어있다. Flexbox css 적용방법은 부모요소인 container에 display:flex를 선언하면 된다. Flex Container에는 전체적인 정렬과 관련된 속성인 display, flex-direction, align-items, flex-wrap 같은 속성을 정의하고, 자식요소인 flex item에는 flex-grow(Flex Items의 확장 비율을 지정), flex-shrink(Flex Items의 축소 비율을 지정) 같은 크기나 순서 같은 속성을 정의한다.

52. MVC, MVVM 모델에 대해 설명하세요
    MVC(Model-View-Controller)와 MVVM(Model-View-ViewModel)은 소프트웨어 개발에서 사용되는 아키텍처 디자인 패턴입니다. 이러한 패턴은 코드를 구조화하고, 역할을 분리하여 유지보수성과 확장성을 향상시키는데 도움이 됩니다.

    MVC(Model-View-Controller)는 웹 애플리케이션과 같은 사용자 인터페이스를 갖는 소프트웨어를 개발하기 위해 많이 사용되는 패턴이다. 각각의 역할이 분리되어 있기 때문에 코드의 재사용성과 유지보수성을 높혀준다.
    Model : 데이터와 데이터의 비즈니스 로직을 담당하며 애플리케이션의 데이터를 관리하고, 데이터의 변경을 추적하며 데이터 간의 관계를 처리한다.
    View : 사용자 인터페이스를 담당한다. 모델의 데이터를 시작적으로 보여주고, 사용자의 입력을 받아 컨트롤러로 전달한다.
    Controller : 사용자 입력을 받아 처리하고, 모델과 뷰를 연결하는 역할을 한다. 사용자의 요청을 받아 모델의 데이터를 업데이트하고, 변경된 데이터를 뷰에 반영한다.
    Model과 View는 서로에게 독립적이며, Controller를 통해 상호작용함.

    MVVM(Model-View-ViewModel)은 주로 클라이언트 측 애플리케이션 개발에서 사용되는 패턴으로, 특히 웹 프레임워크인 Vue.js와 Angular에서 주로 사용됩니다. MVVM 패턴은 데이터 바인딩을 통해 ViewModel과 View를 연결하고, View의 변경이 자동으로 ViewModel에 반영되며, ViewModel의 변경도 자동으로 View에 반영되도록 합니다. 이를 통해 개발자는 수동적으로 View와 Model을 동기화하는 코드를 작성하지 않아도 되므로 개발 생산성을 높일 수 있습니다.
    Model : 데이터와 비즈니스 로직을 담당한다. MVC와 동일하며 즉 데이터 및 데이터를 처리하는 부분이라고 볼 수 있다.
    View : 사용자 인터페이스를 담당한다. MVC와 동일.
    ViewModel : ViewModel은 Model과 View를 연결하는 역할을 한다.
    View가 필요로 하는 데이터와 로직을 제공하고, View의 상태를 관리한다. 사용자의 입력을 처리하고, 필요한 데이터를 Model로부터 가져와 View에 반영한다.
    ViewModel과 View는 양방향 데이터 바인딩을 통해 서로 동기화됨.

53. var, let, const의 차이점
    var : 함수스코프를 가지고있으며, 함수내에서 선언한 변수는 해당 함수 내에서만 유효하다. 블록스코프(변수가 블록(중괄호 {}) 내에서 선언되고 해당 블록 내에서만 유효한 스코프를 가지는 개념)를 무시하고, 변수를 선언한 블록 외부에서도 접근이 가능하며, 호이스팅 현상이 발상하여 변수 선언이 해당 스코프의 최상단으로 끌어올려진다.
    let : 블록스코프를 갖고있는 변수선언 키워드이며, 블록 내에서만 유효하다. 호이스팅은 발생하지만 변수를 선언하기 전에 접근하면 'ReferenceError'가 발생한다.
    const : 상수를 선언하는 키워드로, 재할당이 불가능한 변수를 선언한다. 블록스코프를 가지며, 변수를 선언한 블록 내에서만 유효하다. 선언과 동시에 값을 할당해야하며 , 이후에 재할당이 불가능하다.
    var는 ES6 이후에는 최대한 피하고, let과 const를 사용하여 변수의 범위를 제한하고 의도치 않은 재할당을 방지하는 것이 권장되는 방법입니다.

54. React의 라이프사이클에 대해 설명해주세요
    리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.
    컴포넌트가 처음 실행될때인 Mount, 데이터에 변화가있을때인 Update, 컴포넌트가 제거 될때인 Unmount이렇게 세개로 나눌 수 있다.

55. React의 상태관리 방법에 대해서 설명하시오
    리액트의 상태관리방법은 크게 2가지로 나뉘어서 볼 수 있다.
    부모 혹은 자신이 직접 컴포넌트 안에서 관리하는 로컬 상태 방법과 로컬상태의 불편함을 개선한 전역상태 관리 방법이 있다.

    로컬상태방법
    특정 컴포넌트 내에서만 데이터를 관리하는 것으로, 함수형 컴포넌트 에서는 리액트 hook 과 props를 사용하여 상태관리를 하는 방법이다. 하위 컴포넌트에 데이터를 전달하기 위해, props를 사용하는데 어플리케이션의 크기가 커질수록 props drilling이 증가하여, 반복작업이 많아지고 유지보수가 어려워지는 단점이 있다.

    전역상태관리방법
    전역상태는 프로젝트 전체의 상태관리를 총괄하는 방법으로, 대표적으로 Redux, MobX,Context API등이 존재한다. 전역에서 관리하기 때문에 어떤 컴포넌트에서든 상태 값을 반영하고, 변경시키는 것이 가능하다. props 과정이 생략되어 작업이 적고 유지보수가 간편해지는 장점이 있으나, 상태관리 오류시 나타나는 side effect가 커지는 단점이 존재한다.
    그 중 가장 많이 사용하는 Redux는 전역 상태를 생성하고 관리하며, 상태관리 라이브러리 중 가장 압도적으로 많이 사용된다. 리덕스는 컴포넌트에서 액션 크리에이터를 통해 액션을 만들고, 그 액션을 디스패치 함수로 실행시킨다. 그러면 store에서 해당 리듀서로 매칭되는 액션이 있는지 확인하고 스토어에 저장된 상태를 변경해주는 원리로 작동한다. 리덕스는 context api와 다르게 전역 상태 관리 외에도 redux-saga, reduc-thunk 등 추가 라이브러리를 통해 비동기 작업을 쉽게 해줄 수 있는 장점이 있지만, 코드가 많고 복잡하기 때문에 이런 부가기능이 필요하지 않은 소규모 프로젝트에는 context api를 쓰는 것이 나을 수도 있다.
    

Redux : 리덕스는 컴포넌트에서 액션 크리에이터를 통해 액션을 만들고, 그 액션을 디스패치 함수로 실행시킨다. 그러면 store에서 해당 리듀서로 매칭되는 액션이 있는지 확인하고 스토어에 저장된 상태를 변경해주는 원리로 작동한다. 즉 애플리케이션의 상태를 하나의 저장소(store)에 저장하고, 상태를 변경하는 모든 로직을 순수한 함수인 리듀서(reducer)로 처리리한다. 이를 통해 상태 변화를 예측 가능하게 하고, 애플리케이션의 복잡성을 낮추어 유지보수를 쉽게 만든다

Mobx : 반응형 프로그래밍(Reactive Programming)의 개념을 기반으로 하며, 상태 변화를 감지하여 자동으로 상태를 업데이트하는 상태관리 라이브러리이다. 간단하고 직관적으로 사용할 수 있으며, 코드의 양이 적다.

Context API : 상태를 전역적으로 공유하고 컴포넌트 간에 데이터를 전달하기 위해 사용되는 기능이다. React 컴포넌트 트리 전체에서 데이터를 효율적으로 전달하고 업데이트할 수 있도록 도와준다. 이를 통해 복잡한 컴포넌트 구조에서도 상태를 전파하거나 상태 변경을 관리하는 데 용이하다

56. React, Vue, Angular의 차이는 무엇인가?
    

    일단 3개의 공통점은 SPA기반 프론트엔드 프레임워크/라이브러리이다.
    리액트는 단방향 바인딩으로 부모 컴포넌트에서 props가 자식 컴포넌트로 전달되고, vue나 angular는 양방향 바인딩이 구현 가능하다는 차이가 있습니다. 러닝커브는 뷰가 가장 낮고, 리액트는 jsx 문법을 사용하며, 개발 생태계가 가장 잘 활성화 되어있다. 뷰와 앵귤러는 프레임워크이고, 리액트는 라이브러리이다. 앵귤러는 타입스크립트를 사용함으로써 코드의 가독성과 안정성이 좋지만 러닝커브가 크다.

57. CSR, SSR의 정의와 차이점은 무엇인가?

    모두 웹 애플리케이션의 렌더링 방식을 나타내는 용어이다.

    CSR(Client-Side Rendering)은 페이지의 뷰를 클라이언트에서 동적으로 렌더링하는 발식이다. 초기 로딩 시 서버는 단지 하나의 빈 HTML 페이지만을 제공하고, 클라이언트 측 javascript 코드가 뷰를 생성하고 필요한 데이터를 서버로부터 비동기적으로 요청하여 렌더링한다. 데이터 요청에 대한 응답이 빠르고, 사용자 경험을 개선할 수 있으나, 초기 로딩 시점에서 빈 화면이 나타날 수 있다.

    SSR(Server-Side Rendering)은 서버 측에서 초기렌더링을 처리하여 완전한 HTML 페이지를 클라리언트에게 제공하는 방식이다. 초기 로딩 시, 서버측에서 데이터를 불러와서 페이지를 완성하므로, 첫 화면 로딩이 빠르고, 검색엔진 최적화(SEO)에 유리하다. 클라이언트에서 JavaScript가 실행되지않아도 페이지 컨텐츠를 확인할 수 있으므로, SEO관련 문제를 초소화할 수 있다.

    즉 CSR은 뷰를 클라이언트 측에서 동적으로 생성하며, SSR은 서버 측에서 초기 렌더링을 처리하여 완전한 HTML 페이지를 제공하는 방식이다.

    SSR은 사용자가 웹 페이지에 접근 할때, 서버에 각각 페이지에 대해 요청하고 서버에서 HTML, JS 파일 등을 모두 다운로드하여 화면에 렌더링 하는 방식이다. CSR은 클라이언트측에서 HTML, JS, 리소스 파일들을 받은 이후에 브라우저에서 렌더링을 진행하는 것으로, JS가 동작하면서 데이터만을 주고 받는다.

    초기로딩속도 측면에서, SSR은 필요한 부분의 HTML과 스크립트만 서버에서 렌더링 하여 가져오기 때문에 속도가 빠른 반면, CSR은 HTML, JS 파일을 다운 받고 브라우저에서 렌더링 하기 때문에 초기에 오래걸린다.
    서버 부담측면에서, SSR은 서버와 잦은 응답(View가 바뀔 때마다 서버에 요청)을 하기 때문에 서버에 부담이 되고 UX측면이 떨어진다(새로고침 많음), CSR은 데이터 요청이 있을때만 서버에 요청하기 때문에 서버에 부담이 적다.
    SEO 측면에서, SSR은 HTML에 대한 정보가 처음에 포함되어 있어(SEO에 사용되는 meta 태그들이 미리 정의되어있음) 데이터를 수집할 수 있어 SEO에 유리하지만, CSR은 맨 처음 HTML 파일이 비어있어 구글을 제외한 크롤러가 데이터를 수집할 수 없다.

58. 타입스크립트가 무엇인가?

    타입스크립트는 자바스크립트에 정적 타입을 추가한 언어이다. 즉, 자바스크립트의 모든 기능을 포함하면서 변수의 타입을 명시적으로 지정할 수 있다. 간단하게 설명하면, 자바스크립트는 동적 타입 언어이기 때문에 변수의 타입이 실행 시점에서 결정되고, 변수에 어떤 타입의 데이터를 저장할 수 있는지 런타임 때 확인된다. 그러나 타입스크립트는 컴파일 시점에서 변수의 타입을 체크하고 오류를 발견할 수 있도록 도와준다
    정적타입으로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있고, 강력한 객체지향 프로그래밍을 지원합니다. ES6의 새로운 기능들을 사용하기 위해 바벨과 같은 별도 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔젠에서 실행 가능하다. 명시적인 정적 타입 지정은 코드의 가독성을 높이고 디버깅을 쉽게 한다.

59. 이벤트 버블링에 대해 설명하시오

    이벤트 버블링은 어떤 요소에 대한 이벤트가 발생했을 때, 해당 요소의 최상위 부모까지 이벤트가 전달되어지는 과정이다. HTML 구조상 자식 요소에 발생한 이벤트가 상위 부모요소에 영향을 미치는 것이다. 이벤트 캡쳐링과 정반대이다. (최상위 부모에서 이벤트 발생 요소까지 이벤트 전달 되는 것)
    이벤트 버블링이나 캡처링을 차단 하고 싶을때 e.stopPropagation을 호출하면 이벤트 전파를 막고 해당 이벤트만 실행시킬 수 있다.

60. 브라우저 저장소에 대한 차이점을 설명하시오

    브라우저 저장소란 클라이언트 측에서 웹 애플리케이션의 데이터를 임시로 저장하는 메커니즘을 의미한다. 브라우저 저장소에는 쿠키와 로컬스토리지 크게 두 가지 종류가 있다.
    쿠키는 보통 4KB의 저장용량을 가지며 로컬스토리지는 더 많은 데이터를 저장할 수 있다. 쿠키는 만료기간을 지정하여 일식적으로 사용하거나 브라우저 세션동안만 유지할 수 있다. 반면 로컬 스토리지는 사용자가 데이터를 수동으로 삭제하기 전까지 영구적으로 유지된다. 쿠키는 보안에 취약하며, 클라이언트 측에서 수정가능하다. 로컬스토리지는 더 안전하게 데이터를 저장한다.

쿠키 : 클라이언트의 로컬 브라우저에 작은 텍스트 파일 형태로 저장되는 데이터이다. 서버가 클라이언트의 브라우저에게 보낸 HTTP 응답 헤더를 통해 저장된다. 주로 세션관리, 사용자 로그인 정보유지, 트래킹 등에 사용되며, 만료날짜를 지정하여 영구적으로 저장하거나, 세션쿠키로 설정하여 브라우저를 종료하면 삭제될 수 있다. 보안에 취약하고 저장용량이 제한적이다.

로컬 스토리지 : 로컬스토리지는 클라이언트의 로컬 브라우저에 데이터를 키 - 값 쌍으로 저장하는 메커니즘이다. 웹 애플리케이션이 종료되어도 데이터가 지속적으로 남아있다. 세션스토리지와 로컬스토리지 2가지가 있는데, 세션 스토리지는 브라우저 세션동안만 유지되고, 로컬 스토리지는 사용자에 의해 수동으로 삭제되기 전까지 계속 유지된다. 주로 사용자설정, 데이터캐싱등에 사용된다. 쿠키보다 용량이 더 크고, 더 안전하게 데이터를 저장할 수 있다.

61. this의 용법을 아는대로 설명하시오

    자바스크립트에서 this는 현재 실행 컨텍스트(함수가 실행되는 환경)에서 참조하는 객체를 나타낸다. 따라서 this의 값은 함수를 호출하는 방법에 따라 동적으로 결정된다.
    1.전역범위에서 사용될 때 this는 전역객체를 가르킨다.
    2.함수에서 사용될때도 전역객체를 가르킨다.
    3.객체에 속한 메서드에서 사용될때 그 메서드의 객체(점 앞에 명시된 객체)를 가르킨다.
    4.객체에 속한 메서드의 내부함수에서 사용될땐 전역객체를 가르킨다.
    5.생성자에서 사용될때 생성자로 인해 생성된 새로운 객체를 가리킨다.

62. 클로저는 무엇인가요? 원리와 왜 사용하는지?

    클로저란 함수와 해당 함수가 선언된 렉시컬 환경의 조합이다. 외부 함수가 반환된 후에도 외부 함수의 변수 범위 체인에 접근할 수 있는 함수이다.
    전역 변수의 사용을 억제하고, 정보를 은닉하기 위해 사용한다.

    클로저의 원리:
    함수 내부에서 선언한 변수들은 해당 함수의 렉시컬 스코프(Lexical Scope)에 저장됩니다.하지만, 함수의 실행이 끝나더라도 해당 스코프는 메모리에서 사라지지 않고 유지됩니다.
    클로저는 외부 함수의 변수에 접근할 수 있는데, 이때 클로저는 해당 변수들을 자신의 스코프 체인(Scope Chain)에 포함시켜서 참조할 수 있습니다.

63. 호이스팅에 대해 설명해보시오

    호이스팅은 변수를 선언하고 초기화했을 때, 선언 부분이 최상단으로 끌어올려지는 현상을 말한다.
    var의 경우 변수를 선언하고 초기화하는 과정이 동시에 일어나서 호이스팅이 발생한다. 반면 let/const 의 경우 선언과 초기화 단계가 동시에 일어나지 않고 실행 시점에서 실제 선언부를 만날 때 초기화가 이뤄진다. 그 사이의 시간을 TDZ(Temporary Dead Zone)이라고 한다.
    즉 실행 컨텍스트에 변수가 선언은 되었으나 메모리가 할당되지 않아 ReferenceError가 발생한다. 함수 호이스팅은 선언문에서 발생한다. 선언된 함수는 상단에서 참조, 호출이 가능하다. 함수 표현식은 결국 변수에 할당하는 모습이라 변수 호이스팅의 사례로 볼 수 있다.

    (변수 선언 3단계: 선언 -> 초기화 -> 할당)

    호이스팅은 개발자가 주의해야 할 부분이다. 코드의 가독성을 높이고 에러를 방지하기 위해 변수와 함수를 사용하기 전에 선언하는 것이 권장된다. ES6 이후에는 let, const, class와 같은 블록 스코프를 가지는 변수 선언 방식이 도입되어 호이스팅 문제를 완화했다.
    참조링크 :
    https://yceffort.kr/2020/05/var-let-const-hoisting

64. 브라우저 렌더링 원리에 대해 설명하시오

    1.사용자가 브라우저로 웹사이트에 접속 -> 브라우저가 ip파악
    2.브라우저가 서버에서 HTTP Request
    3.서버가 브라우저에게 HTTP Response
    4.HTML을 파싱하여 DOM Tree 생성
    (중간에 style 태그가 나오면 CSSOM Tree 생성, 중간에 script 태그가 나오면 AST 생성 후 실행)
    5.DOM과 CSSOM이 생성되면 렌더링을 위해 렌더트리로 결합
    6.Render Tree에 있는 node를 배치(Layout)
    7.Render Tree에 있는 node의 UI를 그림(Paint)
    8.Render Tree에 있는 node를 순서대로 구성(Composition)
    9.웹 사용자에게 결과화면을 출력
    참조링크 : https://oliviakim.tistory.com/80#%ED%8C%8C%EC%8B%B1%EA%B3%BC%20%EB%A0%8C%EB%8D%94%EB%A7%81%3F-1