[면접대비] React 뽀개기(2)👊

 

안녕하세요 :)

22-23 GDSC Ajou Member 이채민입니다.

다들 React 뽀개기 1편은 보셨나요?!

 

React를 시작한지 반 년이 넘었는데도 아직 모르는 게 많은 것 같아요😹

저도 이번 포스팅을 통해서 더 많이 배워가도록 하겠습니다!

 

이번 2편에서는 React뿐만 아니라 JavaScript와 CSS 및 백엔드와 관련된 내용도 추가해보았습니다.

전체적으로 실제 면접 때 나왔던 사례들과 정보들을 수집하여 작성해보았는데, 혹시나 틀린 부분이 있거나 피드백 하고싶은 부분이 있다면 댓글로 마음껏 의견을 공유해주시면 감사하겠습니다! 🙂

 

 

---

11) RESTful API란?

RESTful API는 Representational State Transfer의 약자입니다. 우선 RESTful하다는 것은 'REST'라는 것을 잘 지켰다는 걸 뜻합니다. REST API는 결과적으로 REST 형식으로 설계된 API를 말하는데, 여기서 REST 형식이란 프로그램 간 정보 교환 등의 상호작용을 가능케 하는 것을 말합니다. 즉 HTTP를 잘 사용하기 위한 아키텍쳐 스타일의 형태로 설계된 API를 말합니다. HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP 메소드를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미합니다. 리소스의 표현에 의해 상태를 전달한다는 특징이 있습니다.

 

12) HTTP 메소드에 대해 설명해라.

HTTP 메소드란 클라이언트와 서버 사이에 이루어지는 Request와 Response 데이터를 전송하는 방식을 말합니다. 즉 서버가 수행해야 할 동작을 지정함으로써 요청을 보내는 방법입니다. 주요 메소드로는 GET, POST, PUT, PATCH, DELETE가 있습니다. GET은 리소스를 조회하는 메소드이고, POST는 요청된 데이터를 처리하고 주로 등록하는 부분에서 대개 사용됩니다. PUT은 리소스를 대체(수정)하는 메소드입니다. 요청 메세지에 리소스가 있으면 덮어쓰고, 없으면 생성할 때 사용합니다. PATCH는 PUT과 달리 일부 리소스를 변경할 때 주로 사용하고, DELETE는 리소스를 삭제할 때 사용합니다.

 

13) async와 await가 무엇인지 설명해라.

React에서는 원래 비동기 처리를 위해 Promise를 사용했었습니다. 그런데 이후 ES7에서 async와 await이 추가되면서 더 쉽게 사용할 수 있게 되었습니다. 비동기 함수로 만들기 위해서 단순히 함수 앞에 async를 붙여 사용하는데, await는 기다리다라는 의미처럼 프로미스가 처리될 때까지 함수 실행을 기다리는 역할을 합니다. 이후 처리가 완료되면 그 결과와 함께 실행이 재개됩니다. 프로미스가 처리되길 기다리는 동안에는 엔진이 다른 일을 할 수 있기 때문에 CPU 리소스가 낭비되지 않는다는 장점이 있습니다. 저는 주로 API 호출할 때 async와 await을 사용하였는데, 이 부분에서 try & catch로 에러를 핸들링할 수 있다는 장점도 직접 경험했습니다.

 

14) flex와 grid의 차이는? 각각은 언제 사용하는지?

한마디로 말하자면, 1차원적인 부분만을 고려한 레이아웃이 flex라면, grid는 2차원적인 부분도 고려한 레이아웃이라고 할 수 있습니다. 따라서 flex 레이아웃은 컨테이너 안에 있는 flex item을 중앙 정렬이나 균등하게 설정할 때 사용하기 좋습니다. 주로 한 방향으로 스타일을 설정할 수 있습니다. 반면에 grid는 카드 형식으로 되어있는 신문 형태의 레이아웃을 쉽게 제작할 수 있고 여백을 쉽게 조절할 수 있다는 장점이 있습니다. 2차원으로 수평과 수직 영역을 동시에 나눌 수 있으며, grid-template-columns 속성과 grid-template-rows 속성을 이용하여 바꿀 수 있습니다. 
따라서 grid는 flex보다 좀 더 복합적인 레이아웃 표현이 가능하고, flex는 1차원적으로 컨텐츠 중심인 속성이라고 정리할 수 있습니다.

 

15) var, let, const 각각의 차이점은?

우선 var는 변수 중복 선언이 가능하고, var 키워드로 선언한 변수는 function 내의 블록만을 지역 스코프로 인정하기 때문에 함수 외부에서 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다는 특징이 있습니다.
let은 변수 중복 선언이 금지되어 있으며 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따릅니다. 또한 var와 달리 선언 단계와 초기화 단계가 분리되어 진행되는 것이 가장 큰 특징이라고 할 수 있습니다.
const로 선언한 변수는 반드시 선언과 동시에 초기화되어야 하고, let과 마찬가지로 블록 레벨 스코프를 가지며 재할당이 금지되기 때문에 상태 유지가 필요할 때 주로 사용합니다. 하지만 객체를 할당한 경우에는 값을 변경할 수 있다는 특징이 있습니다. 

 

16) http와 https의 차이점은?

HTTP는 Hyper Text Transfer Protocol의 약자로, 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜입니다. 이는 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 프토를 사용하고 있습니다. 반면에 HTTPS는 Hyper Text Transfer Protocol Secure의 약자로, HTTP에 데이터 암호화가 추가된 프로토콜입니다. HTTPS는 HTTP와 다르게 443번 포트를 사용하며, 네트워크 상에서 중간에 제3자가 정보를 볼 수 없도록 암호화를 지원하고 있습니다. 정리하자면 HTTPS는 HTTP보다 더 안전한 보안용 프로토콜입니다. 브라우저 URL에서 도메인 이름 앞에 자물쇠 아이콘이 있다면 HTTPS로 인해 안전하다는 뜻으로 받아들일 수 있습니다.

 

17) useMemo와 useCallback에 대해 설명해라.

useMemo는 메모이제이션된 값을 반환하는 함수입니다. 여기서 메모이제이션은 기존에 수행한 연산의 결과값을 다른 곳에 저장해둔 다음 동일한 입력이 들어오면 재활용하는 기법입니다. 상태 값이 변할 경우에만 연산을 실행할 수 있도록 useMemo를 사용해 변수에 의존하도록 등록하는 것입니다. 즉, 리렌더링이 발생할 경우 특정 변수가 변할 때에만 useMemo에 등록한 함수가 실행되도록 처리하면 불필요한 연산을 하지 않을 수 있습니다. 
반면에 useCallback은 메모이제이션된 함수 자체를 반환한다는 특징이 있습니다. useMemo의 경우에는 의존하는 변수값이 변했을 때 함수를 실행하라는 의미로 활용이 가능한 반면, useCallback은 자식 컴포넌트에 props로 함수를 전달할 경우나 외부에서 값을 가져오는 api를 호출할 때 주로 사용됩니다.

 

18) 웹사이트 성능 최적화에는 어떤 방법이 있는지?

웹 성능을 최적화할 수 있는 부분은 크게 2가지로 나눌 수 있습니다. 렌더링 성능 최적화와 로딩 성능 최적화로 나눌 수 있는데, 렌더링 성능 최적화는 주로 css와 js 파일에서 이루어집니다. reflow를 고려해 repaint 속성을 사용하여 스타일을 작성함으로써 css를 최적화할 수 있고, 인라인 스타일을 지양하거나 불필요한 css는 제거하는 것이 하나의 방법입니다. 로딩 최적화 부분에서는 picture 태그를 사용해 이미지를 최적화하거나 웹팩을 사용해 리소스 요청을 줄이는 방법이 있습니다.

 

19) CORS는 무엇이고, 이를 처리해본 경험이 있는지?

CORS는 Cross Origin Resource Sharing의 약자로, 교차 출처 리소스 공유 정책을 의미합니다. 보통 이 정책에 부합하지 않을 때 에러가 발생하는데, 예를 들어 다른 사이트에서 localhost:3000 출처로 가져올 수 있는 액세스가 CORS 정책에 의해 차단되는 경우가 발생합니다. 여기서 출처를 의미하는 origin은 프로토콜, 도메인, 포트로 구성됩니다. 동일 출처란 이 세 가지가 모두 같을 때를 말하며, SOP(Same-Origin Policy)는 같은 출처에서만 리소스를 공유할 수 있다는 규칙을 말합니다. 즉 CORS는 다른 출처의 리소스 공유에 대한 허용/비허용 정책이라고 할 수 있습니다.
이러한 CORS 에러를 마주했을 때 프론트 쪽에서 프록시 속성을 설정하여 서버에서 해당 요청을 받아주는 과정으로 해결한 경험이 있습니다. 중간 역할을 하는 프록시 서버 덕분에 같은 도메인에서 온 요청으로 인식하기 때문에 에러가 발생하지 않았습니다. 이외에도 서버 측 응답에서 접근 권한을 주는 헤더를 추가함으로써 해결하는 방법도 있는 것으로 알고 있습니다.

 

20) context API와 Redux를 비교해 설명해라.

context API와 Redux 모두 상태 관리를 한다는 공통점이 있습니다.
Redux는 리액트에서 많이 사용되는 상태 관리 라이브러리로, 컴포넌트에 state를 prop으로 넘겨줄 때 어느 컴포넌트의 깊이와는 상관 없이 넘겨줄 수 있다는 특징이 있습니다. 연결된 state가 바뀌었을 때만 컴포넌트를 다시 렌더링합니다.
Context API는 Redux와 비슷하지만, 코드를 통해서 렌더링을 할지 안할지의 선택이 불가능합니다. 추가적인 dependency 없이 사용할 수 있지만, 상태를 넘겨주는 경우 값이 여러 개라면 중첩해서 내려줘야한다는 단점이 있습니다. 
결과적으로 Redux는 로컬 스토리지에 상태를 영구적으로 저장하고 시작할 때 다시 불러올 때 매우 유용합니다. 또한 로직의 대부분을 재사용하면서 UI를 변경할 수 있기에 전역 상태 관리 외의 다양한 기능을 제공한다는 장점이 있습니다.