React 기술면접 예상질문 미리보기 <3>

Q (1). Arrow Function 이란 무엇인지 설명해주실 수 있을까요?

🧑‍💻 수강생 답변

🗣️멘토님 피드백

😄 좋은 부분

• 애로우 함수의 장점을 나타내서 설명한 부분 ” Arrow Function은 this를 바인딩하지 않기 때문에 Arrow Function 안에서 this를 사용하면 상위 스코프의 this를 가리키게 됩니다. “ ” 불필요한 함수 키워드나 중괄호를 생략할 수 있어서 코드를 더 간단하게 작성할 수 있고, 가독성을 높여준다는 장점이 있습니다.”

• 애로우 함수가 어떤 기능을 개발할 때 적용하면 좋을지에 대한 예시 설명한 부분 ” 이러한 특징 때문에 this와 관련된 혼동을 줄일 수 있고, 이벤트 핸들러나 콜백함수에서 유용하게 사용됩니다.”

Q (2). ‘==’와 ‘===’ 연산자의 차이는 무엇인지 설명해주실 수 있을까요?

🧑‍💻 수강생 답변

🗣️멘토님 피드백

😄 좋은 부분

• ‘==’와 ‘===’가 비교 연산자라고 말한 부분 ”‘=='와 '===' 연산자는 값을 비교하는 연산자입니다.

• 각각 연산자를 사용함으로써 얻을 수 있는 이점을 잘 설명한 부분 ”'==' 는 동등 연산자로, 두 값을 비교하기 전에 강제 형 변환을 수행합니다.피 연산자들의 자료형이 다르더라도 자료형을 공통 타입으로 변환한 후, 그 값을 비교하게 됩니다.” (동등 연산자) ”일치 연산자 '===' 는 강제 형 변환 과정을 수행하지 않고, 자료형과 값이 모두 동일해야 true를 반환하는 엄격한 비교를 합니다.”(일치 연산자)

• 일치 연산자를 사용함으로서 얻을 수 있는 이점을 잘 설명한 부분 ”따라서, 문자열 '5'와 숫자 5를 '===' 연산자로 비교하면 false가 반환됩니다.자바스크립트에서는 값과 함께 자료형까지 정확하게 비교하고자 할 때 === 연산자를 사용하는 것을 권장합니다. 이 방법은 예상치 못한 결과를 방지하고, 코드의 예측성을 높여줍니다.”

Q (3). 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은 무엇인가요?

🧑‍💻 수강생 답변

🗣️멘토님 피드백

😄 좋은 부분

• 무한 스크롤 구현시 프론트엔드 입장에서 고려해야할 부분 잘 설명한 부분 ⇒ 학생 답변 전체에 해당함

🤔 아쉬운 부분

• 백엔드 쪽과 소통 시 어떤 점을 유의해야하는지 설명하지 않은 부분 ⇒ API 호출 최적화, 적절한 데이터 페이징을 고려하지 않으면 사용자 경험과 성능에 부정적인 영향을 줄 수 있다는 내용 추가할 것. "백엔드와의 통신에서는 API를 통한 데이터 요청 시, 페이지네이션 또는 데이터 스트리밍 방식을 적절히 적용하여 서버 부하를 최소화하고 데이터 전송 시간을 최적화하는 것이 중요합니다. API 호출의 최적화와 적절한 데이터 페이징을 고려하지 않을 경우, 사용자 경험과 시스템 성능에 부정적인 영향을 줄 수 있으며, 이는 전체 시스템의 반응 속도를 저하시킬 수 있습니다.” (예시)

Q (4). JSX란 무엇인가요?

🧑‍💻 수강생 답변

🗣️멘토님 피드백

😄 좋은 부분

• JSX 정의 ”JavaScript XML의 약자로, React서 사용되는 문법입니다.”

• JSX의 장점, 단점 ”JSX를 사용하면 UI 구조를 더 명확하게 표현할 수 있어, 코드의 가독성이 높아집니다. 하지만 JSX는 브라우저에서 직접 실행되지 않습니다.”

• JSX의 실행 프로세스 ”Babel과 같은 트랜스파일러를 통해 일반 JavaScript 코드로 변환된 후 실행됩니다.”