🖍️ CS 일부 지식 다시 돌아보기
-
Q. SSR 에 대해서 설명하고 어떻게 동작하는지-
페이지를 클라이언트로 보내기 전 서버에서 페이지를 렌더링하여 웹 애플리케이션의 성능과 SEO 를 향상
-
동작방식
- 1) 요청
- 2) 서버는 이 작업을 수행
- 클라이언트 브라우저에 의존 X
- 데이터 가져오기
- 데이터로 렌더링
- HTML 사전 렌더링
- 3) HTML 콘텐츠 준비
-
사용법
-
렌더링에 필요한 데이터를 getServerSideProps 함수와 함께 구성요소로 내보낼때 사용
- 페이지가 렌더링되기 전에 데이터베이스, API 또는 기타 소스에서 데이터를 가져오기
- 전체 HTML이 클라이언트에 도달하기 전에도 준비가 완료되었음을 의미
-
-
-
Q. React Hook 에 대해서 설명하기-
useState
- Function 컴포넌트 상태를 추가
- 현 상태 값과 이를 업데이트할 기능을 제공
- 언제든지 컴포넌트 렌더링 전반에 걸쳐, 상태를 유지
-
useEffect
- Function 컴포넌트의 Effect 를 수행
- 두개의 인수, Effect 코드가 포함된 콜백과 종속성 배열을 사용
- 종속성이 변경되면 렌더링이 완료될 때마다 Effect 실행
- network 요청, dom 업데이트, 구독 등 컴포넌트 외부의 항목과 동기화 할 때
-
useRef
- .current 속성이 전달된 인수를 초기화되는 변경 가능한 참조 객체 반환
- 반환된 개체는 컴포넌트의 전체 라이프 사이클 동안 유지
- Dom 노드에 직접 액세스
- 업데이트 시 리렌더링 되지 않는 변경 가능한 값 보유
-
useCallback
- 종속성 중 하나가 변경된 경우에만 변경된 콜백 함수의 메모화된 버전을 반환
- 불필요한 렌더링 방지
- 참조 동일성에 의존하는 최적화
- 자식 구성요소에 콜백을 props 로 전달할 떄 유용
-
useContext
- 컨택스트 객체를 허용
- 해당 컨텍스트에 대한 현 컨텍스트 값을 반환
- 중첩을 도입하지 않고 컴포넌트가 React 컨텍스트를 구독 가능하도록 동작
- 현 컨텍스트 값을 읽고 해당 변경사항 구독
-
useMemo
- 메모된 값을 반환
- create 함수와 종속성 배열을 전달
- 종속성 중 하나가 변경된 경우에만 메모된 값을 재계산
- 비용이 많이 드는 계산을 메모하여 성능 최적화
-
Q. React Life Cycle 에 대해서 설명하기- mount => update => unmount
- componentDidMount
- componentDidUpdate
- componentWillUnmount
- mount => update => unmount
-
Q. state 와 store 에 대해서 설명하기state
- 컴포넌트 블록 스코프 내의 로컬 상태 관리
store
- 전역 상태 관리, 구성요소 전체에서 액세스 가능한 사태를 저장하고 관리 가능한 중앙 장소 제공
- props drilling 방지
Q. 무한스크롤 설명하기-
사용자가 페이지를 아래로 스크롤할 때 콘텐츠를 지속적으로 로드하는 데 사용되는 널리 사용되는 웹 기술
-
대량의 데이터를 원활하게 소비하는 방법을 제공하여 사용자 경험을 향상
-
스크롤 위치 추적
- useRef, DOM 요소에 대한 참조
- 이는 사용자가 페이지 하단이나 특정 컨테이너에 얼마나 가까이 있는지 확인하는 데 필수적
-
Dom 이벤트 Effect
- useEffect 로 Mount, Update, Unmount
- Scroll Height 이벤트 동작할 조건부 수치 적용
-
범위 이벤트 제한
- Debounce, 빠른 스크롤이나 연속 스크롤 중에 너무 많은 API 호출을 피하기
- 스크롤이 안정될 때까지 새 데이터 가져오기를 지연하려는 경우에 사용
-
데이터 가져오기
- useCallback, 데이터 가져오기 기능을 래핑하는 데 사용
- 함수가 기억되고 종속성이 변경되지 않는 한 변경되지 않으므로 불필요한 다시 가져오기가 방지
-
프로세스
- useEffect 를 사용하여 스크롤 이벤트 리스너 설정
- 스크롤 이벤트 처리를 위해 Debounce 사용
- useCallback 을 사용하여 데이터 가져오기 함수 만들기
- 렌더링
-
-
Q. 제어 컴포넌트와 비제어 컴포넌트-
제어 컴포넌트
- 입력 양식 데이터는 react 구성요소의 상태에 따라 처리
- 장점
- 예측 가능한 상태
- React 데이터 흐름과 일치
- 유효성 검사 및 조건부 동작할 때 유용
- 상호 작용 제어하고 데이터 변경 사항에 즉각적인 동적인 컴포넌트에 유용
<input type="text" value={this.state.value} onChange={this.handleChange} />
-
비제어 컴포넌트
- 상태를 통해 양식 값을 관리하는 대신, 참조를 사용하여 Dom 에서 양식 값 호출
- 장점
- 더 적은 코드
- React 가 아닌 Dom 에 직접 작업하므로 타사 Dom 기반 라이브러리와 통합이 더 쉬움
- 기존 HTML 양식에 대한 친숙한 접근 방식
- 단순한 양식에 유리하고 직접적인 제어를 기다리는 비 React 라이브러리와 통합할 때 유리
<input type="text" ref={this.inputRef} />
-
-
Q. React.memo 와 PureComponent 비교React.memo
- 기능적 구성요소에 대한 고차 구성 요소
- props 가 동일하게 유지되는 경우 불필요한 렌더링을 피하기 위해 결과 메모
PureComponent
- React.memo 와 유사
- 클래스 구성요소의 경우 props 와 state 를 얕게 비교하여 리렌더링 결정
-
Q. 애자일 스프린트 개발 면접 내용 정리스프린트
- 특정 작업을 완료하고 검토 준비를 해야 하는 설정된 기간
- 전달 작업이 정의되는 계획 회의로 시작
역할
- 개발자로서 애자일 스프린트에서 계획, 실행, 진행 상황을 보고하기 위한 일일 스탠드업, 스프린트 검토 및 회고가 포함
-
Q. RESTFul API 정리-
개념
-
Representational State Transfer API 웹 서비스를 구축하고 상호 작용하기 위한 일련의 규칙 이는 주로 HTTP Method 를 사용하는 Stateless Client-Server 통신에 의존 웹의 기존 프로토콜을 활용하도록 설계 리소스는 REST의 주요 추상화 모든 것은 URI 로 식별할 수 있는 리소스
-
-
장점
-
확장성: 상태 비저장을 통해 더 쉽게 확장 가능
-
유연성: 리소스는 특정 표현 방법에 얽매이지 않으므로 JSON, XML 등과 같은 다양한 형식을 사용 가느
-
단순성: 표준 HTTP 메서드와 상태 코드를 사용하므로 이해하고 구현하기가 더 쉬움
-
-
단점
-
오버페칭/언더페칭
- 응답이 미리 정의되어 있으므로 부적절한 데이터 수신 가능
-
복잡한 쿼리에 대한 기본 지원 없음
- 일반적으로 복잡한 데이터 구조를 검색하기 위해 여러 엔드포인트가 필요
-
상태 비저장 특성
- 서버가 클라이언트 상태를 유지하지 않으므로 각 요청에 더 많은 오버헤드가 필요
-
-
GraphQL 비교
- 쿼리 유연성
- 학습 곡선이 더 복잡
-
일단 한다