프론트엔드 면접준비 [ 37 - 48 ]

37. Flexbox 사용해봤나요? 사용해봤다면 어떻게 사용했나요?

- 반응형 웹을 제작하면서 헤더나 푸터의 요소의 수직정렬을 위해 사용 경험 장바구니 페이지를 연습삼아 만들어 본 경험이 있는데 요소를 수직에서 관리할 때 사용 용이

38. css margin, padding 각각 어떻게 사용하며, 차이점은 무엇인지 설명해보세요

- margin과 padding은 css 박스모델 기준으로 content를 감싸는 것은 padding,

                                                                         border을 감싸는 것은 margin으로 border기준 내부와 외부의 차이가 있음

39. position을 어떻게 적용했는지 설명해보세요

- static, relative, absolute, fixed설명

40. Restful API에 대해서 아는대로 설명해보세요

- Rest 규칙을 잘 지키는 API를 Restful 하다고 함
- Rest 는 두 컴퓨터간 인터넷을 통해 데이터를 주고받는 기능

41. http와 https의 차이에 대해 아는대로 설명해보세요

- http에 보안인증을 추가함 통신간 암호화와 복호화를 통해 값을 전달

42. HTTP Method 중 GET, POST의 차이를 설명해보세요

- GET은 서버 → 클라이언트로 값을 전달하여 조회 - POST는 클라이언트 → 서버로 값을 추가하거나 수정, 갱신함

43. React 18버전에 어떤 내용이 업데이트 되었는지 아나요?

- 1. 모든 업데이트(setState)를 하나로 묶고 리렌더링 ( Auto Betching )

- 2. suspense를 위한 SSR 지원

- 3. RootAPI에서의 콜백함수 삭제

- 4. Transition ( useTransition, [ isPending, startTransition ] ) 

- 5. useDeferredValue - 느린 컴포넌트 성능향상 가능 (늦게 처리가 필요한 기능들)

44. props와 state의 차이점은 무엇인가요?

- 둘다 일반 자바스크립트 객체, 렌더링 결과물에 영향을 주는 정보를 가진다는 공통점

- props는 컴포넌트에 전달, state는 컴포넌트안에서 관리, 외부접근의 차이

45. websocket을 사용해보셨나요? socket.Io, stompJS, sockJS 중 아는대로 설명해주세요

- stomp : 메세지 브로커 역할, pub/sub 구조

- sockjs : http기반을 통해 전달 (웹소켓을 지원하지 않는 브라우저에서 정상동작 지원)

- socket.io : 웹소켓 기반 클라이언트와 서버의 양방향 통신을 가능하게 해주는 모듈
                   소켓기반 웹소켓을 지원하지 않는 어느 브라우저라도 메세지를 일관된 모듈로 보낼 수 있음

46. JSX 엘리먼트의 key는 어떻게 사용되나요?

- 어떤 항목을 변경, 추가,삭제할지 식별을 도움 - 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정

47. state변경 시, 왜 setState, useState를 사용하나요?

- 라이프사이클의 shouldComponentUpdate의 값이 true일 때 렌더링됨

- Update의 진입하는 상황은 state,props 변경, 부모 컴포넌트 렌더링, forceUpdate될때

- state는 객체 메모리 주소임으로 state 값을 수정하면 변경된 것으로 인지 못함

48. prop drilling은 무엇이고 어떻게 피할 수 있나요?

- prop를 하위 컴포넌트로 보내기위해 연결되어 있는 컴포넌트를 타고타고 보냄

- prop drilling 자체는 문제가 아니지만, 규모가 커질수록 관리 어렵

- 전역 저장소를 이용한 해결 전역 저장소를 통해 데이터의 중앙화가 가능하여, 데이터를 불러올 수 있음