리액트 면접준비 [ 21~30문항 ]

21. GET, POST 방식의 차이점

- GET : 클라이언트 → 서버 리소스 정보 요청

- POST: 클라 → 서버로 리소스 생성 or 업데이트

22. Webpack 써보신 적 있나요

- webpack - 여러개 파일을 하나로 합쳐주는 모듈 번들러

  html파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어줌

  사용 이유 : 옜날에는 html을 여러개 사용했으나,

  요새는 SPA방식으로 하나의 html페이지에 여러개의 자바스크립트를 포함하여, 관리편이

  컴파일시 여러 모듈의 파일을 읽어오는데 시간이 오래걸림

   babel - ES6버전 → ES5 변환 , 지원하지 않는 브라우저 지원..(최신문법 → 최대 호환버전)

23. 쿠키, 세션, 웹스토리지의 차이를 설명해보세요

- 쿠키 - 클라이언트에 저장되는 키와 같이 들어있는 작은 파일,

  하나의 쿠키는 4kb로 제한 요청하지않아도 브라우저가 자동으로 서버에 헤더 전송

- 세션 - 사용자 정보를 서버측에서 관리 서버에서 클라이언트 구분을 위해 id 부여,

  브라우저 종료시까지 인증상태 유지,

  접속 제한시간을 두어 응답없으면 유지되지 않게 설정 가능 쿠키는 만료기간까지 생존,

  세션은 브라우저 닫으면 삭제 보안은 쿠키보다 좋지만, 메모리 차지 증가

- 웹 스토리지 - html5부터 추가된 저장소 간단한 key-value 스토리지

  자동전송 위험성 x, 큰 용량 지원(PC 5~10MB,모바일 2.5MB) 문자형 데이터 타입만 지원(String)

  로컬, 세션 스토리지 - 메소드가 동일

24. 동기와 비동기의 차이

- 동기 - 데이터 요청과 결과가 한자리에서 동시에 일어나는 것

  * 장점 : 설계가 간단하고 직관적

  * 단점 : 결과가 주어질 때까지 아무것도 못함

- 비동기 - 동시에 일어나지 않는다는 의미

  * 장점 : 요청 결과 반환까지 다른 동작 가능

  * 단점 : 동기식보다 설계가 복잡함

25. Array vs LinkedList

- 배열 - 특정 크기만큼 연속된 메모리 공간에 데이터 저장하는 자료구조

  배열은 연속된 메모리라 삭제, 중간 추가 불편 연결 리스트는 주소값 변경으로 연결

   array - 컴파일 시 정적 메모리

- 링크드 리스트 - 각 데이터가 메모리 공간의 고유한 노드로 존재 자신의 앞 뒤 데이터의 주소값을 기억

  (따라서 순차적 탐색) 

 연결리스트는 런타임 시 할당 동적 메모리 배열 - 스택 영역 할당,

  링크드 리스트 - 힙 영역에 할당

26. 서버 사이드 렌더링이란?

- 서버에서 페이지를 그려 클라이언트로 보낸 후 화면에 표시하는 기법

- 서버 사이드 렌더링 : 클라이언트 사이드 or 유니버셜 앱 html로 렌더링

- 클라이언트 사이드 렌더링 : 주로 DOM을 사용하여 브라우저 렌더링

27. MVC 패턴이란 무엇인가?

- MVC = 모델 - 뷰 - 컨트롤러 사용자 인터페이스, 데이터 및 논리 제어를 구현하는 널리 사용되는 소프트웨어 디자인 패턴 - controller를 조작하면 모델을 통해 데이터를 가져오고 그 정보를 바탕으로 view를 제어하여 사용자에게 전달

- 모델 - 어플리케이션의 정보, 데이터, 데이터 베이스, 변수 등 정보값 이러한 data, 정보들의 가공을 책임지는 컴포넌트

- 뷰 - input 텍스트, 체크박스 항목 등 사용자 인터페이스 요소 데이터 및 객체의 입력, 출력을 보여주는 담당,

       사용자가 보는 화면

- 컨트롤러 - 사용자 인터페이스 요소들을 잇는 다리역할 이벤트들을 처리하는 부분

28. 아토믹 디자인 패턴에 대해 아는가?

-가장 작은 컴포넌트 단위를 원자 (Atoms)로 설정 상위 컴포넌트를 만들어 코드 재사용을 최대화 하는 방법론

  상위 컴포넌트는 분자 - 유기체 - 템플릿으로 가며, 최종적으로 페이지를 관리

- 원자 - 컴포넌트 : 레이블, 텍스트, 컨테이너, 버튼, 아이콘 등

- 분자 - 입력폼, 네이게이션, 카드 등

- 유기체 - 입력 폼과 헤더를 감싸거나, 여러 카드를 관리하는 그리드 등

- 템플릿 - 여러 유기체가 모여 있는 페이지보다는 낮은 단위

- 단점 : 하위 컴포넌트에서 예상치 못한 에러가 발생하면, 상위도…

            중간 수정이 생기면, 수많은 컴포넌트가 어떤 기능을 하는지 구분어렵

- 공략 : 분자수준의 컴포넌트에서 관리하는게 방어적 프로그래밍이 될 수 있음

29. 웹 스토리지의 차이점

- 웹스토리지 - 로컬 스토리지, 세션 스토리지

- 로컬 - 영구성, 동일 브라우저 적용, 지속 데이터(자동로그인 등)

- 세션 - 브라우저 탭 종속, 닫을 경우 제거, 일시 데이터 (일회성 정보 등)

30. http vs https 차이점에 대해 설명해주세요

- http : 포트번호 80

- https : 포트번호 443

- https 는 http에서 암호화가 추가된 프로토콜 중간에 제 3자가 정보를 볼수 없도록 암호화를 지원

- http는 서버/클라이언트 모델을 따라 데이터를 주고받기 위한 프로토콜