회사에 면접을 다녀오고

받은 질문들 정리

useRef 란 무엇인가요

useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻한다.

왜 DOM 요소에 직접 접근하지 않고 useRef를 써야할까?

• React에서 DOM 요소에 직접 접근하는 대신 useRef를 사용하는 이유는 React의 가상 DOM(Virtual DOM)과 관련이 있습니다.
• 1. useRef는 실제DOM 을 건드리지 않고 참조만하며 업데이트 프로세스를 방해하지않고 가상DOM을 통해 효율적인 업데이틀 합니다.
• 2. useRef는 애니메이션 및 스크롤과 같은 DOM 요소의 특정 기능을 제어하는 데 유용합니다.
• 결론 useRef는 React의 가상 DOM과 성능 최적화를 위해 사용되는 도구로, DOM 요소에 직접 접근할 때 발생할 수 있는 문제를 피하면서도 필요한 시점에 DOM 요소를 조작할 수 있는 유연성을 제공합니다.

useMemo,useCallback 무엇이고 차이가 뭔가요

메모이제이션 ( Memoization )

먼저 메모이제이션이라고 하는 개념에 대해 확실히 알아가야하는데, 메모이제이션은 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다.

• useMemo는 연산된 값을 반환하는 반면, useCallback은 함수 자체를 반환합니다.
• useMemo와 useCallback은 메모이제이션(기억)하는데 사용되는 React Hooks입니다.

useEffect, 의존성 배열 은 무엇인가요?

useEffect는 side effect를 수행하는 React Hook입니다. side effect는 데이터를 가져오거나, 구독하거나, DOM을 수동으로 변경하는 등의 작업을 말합니다. 의존성 배열(dependency array)은 useEffect 내부에서 참조하는 상태 또는 props가 변경되었을 때만 side effect가 실행되도록 하는 배열입니다.

side effect 란 ?

Side effect는 함수나 프로그램 외부에 영향을 주는 동작이나 상태를 말합니다. 일반적으로 함수가 호출될 때, 함수의 주요 목적 이외의 다른 동작이 발생하거나 외부 상태가 변경되는 것을 의미합니다.
1. 외부 API 호출: 함수가 외부 API에 요청을 보내고 응답을 받는 경우, 이는 함수 외부에 영향을 주는 side effect입니다.
파일 시스템 접근: 함수가 파일을 읽거나 쓰는 경우, 파일 시스템에 영향을 주는 side effect입니다.
2. 데이터베이스 접근: 함수가 데이터베이스에 접근하여 데이터를 읽거나 수정하는 경우, 데이터베이스에 영향을 주는 side effect입니다.
3. 네트워크 요청: 함수가 네트워크 요청을 보내는 경우, 네트워크에 영향을 주는 side effect입니다.
4. 상태 변경: 함수가 전역 변수나 외부 객체의 상태를 변경하는 경우, 이는 side effect입니다.
5. UI 업데이트: 함수가 화면에 표시되는 UI를 업데이트하는 경우, UI에 영향을 주는 side effect입니다.

useEffect 의존성 배열이 비워져있는 경우는 왜그런건가요?

의존성 배열이 비워져 있는 경우, 해당 useEffect는 컴포넌트가 마운트될 때 한 번만 실행됩니다. 그 이후로는 상태나 props의 변경에 관계없이 실행되지 않습니다. 이는 componentDidMount와 유사한 동작을 수행할 때 유용합니다

useEffect 를 이용해 state의 결과 값을 얻을려면?

useEffect 내부에서 state를 변경하는 함수를 호출하여 state의 결과 값을 얻을 수 있습니다. 예를 들면 아래와 같습니다:

const [data, setData] = useState(null);

useEffect(() => {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []);

배열을 거꾸로 출력하고 싶다면?

1번 reverse 메소드를 사용한 경우

const array = [1, 2, 3, 4, 5];
const reversedArray = array.reverse();
console.log(reversedArray); // [5, 4, 3, 2, 1]

2번 조건문을 이용해 거꾸로 출력

const array = [1, 2, 3, 4, 5];
const reversedArray = [];

for (let i = array.length - 1; i >= 0; i--) {
  reversedArray.push(array[i]);
}

console.log(reversedArray); // [5, 4, 3, 2, 1]

메타 마스크 란 무엇인가?

MetaMask는 웹 브라우저의 확장 프로그램으로, 이더리움 기반의 웹 사이트를 사용하도록 해주는 이더리움 지갑입니다. 블록체인 애플리케이션을 안전하게, 쉽게 사용할 수 있도록 도와주며, 이더리움 기반의 토큰이나 NFT(Non-Fungible Token)를 보관하고 관리할 수 있습니다.

SRR 과 CSR 의 차이 와 장점

1. 검색 엔진 최적화(SEO): 서버 사이드 렌더링은 웹 페이지의 콘텐츠를 서버에서 렌더링하고, 클라이언트에게 완전한 HTML 페이지를 제공합니다. 이는 검색 엔진이 페이지의 콘텐츠를 쉽게 파악하고 색인화할 수 있게 합니다. CSR은 초기에 빈 HTML 페이지를 제공하고, 클라이언트에서 JavaScript를 실행하여 페이지를 렌더링하기 때문에 검색 엔진에서 페이지의 콘텐츠를 인식하기 어렵습니다.
2. 초기 로딩 속도 개선: 서버 사이드 렌더링은 클라이언트에게 렌더링된 HTML 페이지를 바로 제공하여 초기 로딩 속도를 개선합니다. 사용자는 페이지의 완전한 콘텐츠를 볼 수 있으며, JavaScript 파일의 다운로드 및 실행을 기다릴 필요가 없습니다. CSR은 초기에 빈 HTML 페이지를 제공하고, JavaScript 파일이 다운로드되고 실행됨에 따라 페이지가 동적으로 렌더링되기 때문에 초기 로딩 속도가 느릴 수 있습니다.
3. 효율적인 검색 엔진 캐싱: 서버 사이드 렌더링은 콘텐츠가 서버에서 렌더링되기 때문에 검색 엔진이 콘텐츠를 캐싱할 수 있습니다. 이는 동일한 콘텐츠를 가진 페이지에 대한 검색 결과를 더 빠르게 제공할 수 있게 합니다. CSR은 클라이언트에서 JavaScript를 실행하여 동적으로 페이지를 렌더링하기 때문에 검색 엔진은 콘텐츠를 캐싱하기 어렵습니다.
4. 네트워크 대역폭 절약: 서버 사이드 렌더링은 클라이언트에게 완전한 HTML 페이지를 제공하므로 초기 렌더링에 필요한 데이터 양이 적습니다. CSR은 초기에 빈 HTML 페이지를 제공하고, 필요한 데이터를 JavaScript를 통해 API 요청으로 가져와야 하기 때문에 더 많은 네트워크 대역폭을 요구합니다.

SSR은 초기 로딩 속도 개선, 검색 엔진 최적화, 검색 엔진 캐싱 및 네트워크 대역폭 절약 등의 이점을 가지며, 서버로드에 더 유리한 방식으로 간주됩니다.

CSR은 동적인 UI나 복잡한 상호작용을 요구하는 경우에 유용할 수 있으므로 상황에 맞게 적절한 렌더링 전략을 선택하는 것이 중요합니다.

strict mode 가 무엇이고, 언제 사용하고 지우면 어떻게 되는지?

Strict Mode를 사용하면 컴포넌트에서 발생하는 잠재적인 문제를 감지하고 경고 메시지를 표시하여 개발자에게 알려줍니다.
1. 잠재적인 문제 탐지: Strict Mode는 컴포넌트 렌더링 중 발생할 수 있는 문제를 감지하여 경고를 표시합니다. 예를 들어 부적절한 사용 또는 부작용이 있는 코드를 감지할 수 있습니다.
2. 미래의 React 업데이트에 대한 준비: Strict Mode는 향후 버전의 React에서 추가될 예정인 기능들에 대한 경고를 표시할 수 있습니다. 이를 통해 애플리케이션을 미래의 변경에 대비할 수 있습니다.
3. 개발자 경험 향상: Strict Mode는 개발자에게 레거시 기능의 사용을 방지하고 모던한 방식으로 개발하도록 유도합니다. 이는 애플리케이션의 유지보수성과 가독성을 향상시킬 수 있습니다.

css로 마름모꼴 만들기

.ladder {
  width: 200px;
  height: 100px;
  background-color: #ff0000;
  transform: skewX(-30deg);
}

transform 속성의 skewX() 함수를 사용하여 가로 방향으로 -30deg만큼 기울임 변형을 적용합니다.

pritter 사용했는지