⭐️ Arrow Function이란 무엇인지 설명해주실 수 있을까요?

• JavaScript의 화살표 함수를 뜻한다.
• 함수를 훨씬 간단하게 표현할 수 있다.
• function이라는 키워들 없이 =>를 이용해 함수를 생성하는 방법이다.
• 화살표 함수는 return 명령어 없이도 함수 실행을 종료시키고 값을 반환한다.

화살표함수의 특징

• function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않는다.
• 화살표 함수는 항상 익명이다.
• 메소드 함수가 아닌 곳에 가장 적합하다.
• 생성자로서 사용할 수 없다.

1. 화살표 함수의 기본 문법

var/let/const 함수명 = (매개변수) => {실행문}

2. 기본적으로 화살표함수는 익명 함수로만 사용할 수 있기 때문에, 함수를 호출하기 위해서는 표현식으로 써야한다.

+익명함수: 함수를 재사용하지 않을 목적으로 함수에 이름을 붙이지 않는 것

//표현식을 이용한 화살표함수 
var addNumber (a, b) => {
  return a + b; 
}; 

//표현식을 이용하지 않은 화살표함수 
function (a, b) => { 
  return a + b; 
};

화살표함수는 일반함수보다 간결하게 콜백함수로 사용될 수 있다.

var numbers = [1, 2, 3, 4, 5]; 
var newArray = numbers.map(a => a + a);

console.log(newArray); //[2, 4, 6, 8, 10]

3. 화살표함수를 사용할 수 없는 경우

1. 객체의 메소드를 정의하는 경우
2. prototype에 메소드를 할당하는 경우
3. 생성자 함수로 사용하는 경우

화살표함수와 this

• 일반함수는 함수가 어떻게 호출되었는지에 따라 바인딩할 객체가 결정된다.
• 화살표함수의 this는 화살표함수가 호출되는 시점과 무관하게 선언되는 시점에 결정되며 상위 스코프의 this를 가리킨다.
• 화살표함수에는 this와 argument가 없다.

[참고링크]

• https://velog.io/@grinding_hannah/JavaScript-%ED%99%94%EC%82%B4%ED%91%9C%ED%95%A8%EC%88%98arrow-function-%EC%95%8C%EA%B8%B0

⭐️ ‘==’와 ‘===’ 연산자의 차이는 무엇인지 설명해주실 수 있을까요?

• ==는 Equal Operator이고, ===는 Strict Equal Operator이다.

'=='

• ==는 a == b 라고 할때, a와 b의 값이 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.

'==='

• ===는 Strict, 즉 엄격한 Equal Operator로써, "엄격하게" 같음을 비교할 때 사용하는 연산자이다.
• ===는 a === b 라고 할때, 값과 값의 종류(Data Type)가 모두 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.

기본 자료형

• 값은 똑같이 1이지만 값의 종류가 숫자냐, 문자열이냐에 따라 === 연산자를 사용할 때 결과가 false라고 나온다.

  var a = 1; 
  var b = "1"; 
  console.log(a == b); // true 
  console.log(a === b); // false 

• null과 undefined는 공통적으로 값이 없음을 뜻하지만, 값의 종류(Data Type)가 다르기 때문에, === 연산자를 사용할 때 결과가 false라고 나온다.

  console.log(null == undefined); // true 
  console.log(null === undefined); // false 

• 기본적으로 1은 true, 0은 false로 나타낼 수 있지만, 데이터 타입은 다르다.

  console.log(true == 1); // true 
  console.log(true === 1); // false 

• 숫자 0과 문자열 “0”, ""

  console.log(0 == "0"); // true 
  console.log(0 === "0"); // false 
  console.log(0 == ""); // true 
  console.log(0 === ""); // false 

• NaN은 Not a Number라는 뜻으로, 숫자가 아닌 것을 의미하지만 그 값 자체끼리는 같지 않다.

  console.log(NaN == NaN); // false 
  console.log(NaN === NaN); // false 

객체형

• 배열을 할당할때, 각 변수는 각 메모리의 주소를 참조한다.
• 두 변수 a, b의 값과 데이터 타입이 같지만, 이와 상관없이 참조하는 메모리의 주소가 다르기 때문에 두 a, b는 같지 않다.

  var a = [1,2,3]; 
  var b = [1,2,3]; 
  console.log(a == b); // false 
  console.log(a === b); // false 

• 새로운 변수 c에 변수 b를 할당해주면, 변수 c도 b가 참조하는 같은 메모리의 주소를 참조하게 되어, 두 변수 c, b는 같다.
• 이때, c, b의 값과 데이터 타입이 같기 때문에, ==와 ===의 결과값이 동일하다.

  var a = [1,2,3]; 
  var b = [1,2,3]; 
  var c = b; 
  console.log(b === c); // true 
  console.log(b == c); // ture 

  var x = {}; 
  var y = {}; 
  var z = y; 
  console.log(x == y) // false 
  console.log(x === y) // false 
  console.log(y === z) // true 
  console.log(y == z) // true 

[참고링크]

• https://steemit.com/kr-dev/@cheonmr/js-operator

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

1. 성능 최적화: 한 번에 모든 10,000개의 데이터를 로드하는 것은 브라우저에 부담을 줄 수 있으므로, 특정 개수만큼 쪼개서 로드하는 것이 좋습니다. 예를 들어, 한 페이지당 20개 혹은 50개의 아이템을 로드하도록 구현할 수 있습니다.
2. 스크롤 감지: 사용자가 페이지 하단에 도달하면 새로운 데이터를 로드해야 합니다. 스크롤 위치와 뷰포트 높이를 감지하여 적절한 시점에 데이터를 로드하는 로직이 필요합니다.
3. 로딩 상태 표시: 사용자에게 다음 데이터가 로드 중임을 알리는 로딩 표시가 중요합니다. 이를 통해 사용자는 시스템이 반응하고 있음을 인지할 수 있습니다.
4. 데이터 캐싱: 이미 로드된 데이터는 캐싱해두는 것이 좋을 수 있습니다. 이렇게 하면 사용자가 스크롤을 위로 올릴 때 다시 로드하지 않아도 되므로 더 나은 사용자 경험을 제공합니다.
5. 메모리 관리: 만약 모든 데이터를 DOM에 계속 추가하면 메모리 소모가 커져 성능이 저하될 수 있습니다. 이를 방지하기 위해 가상 스크롤(Virtual Scrolling)과 같은 기법을 사용해 현재 화면에 보이는 아이템만 실제로 DOM에 렌더링하고 나머지는 제거하는 방식을 적용할 수 있습니다.
6. 에러 핸들링: 네트워크 요청이 실패할 수도 있으므로, 에러 발생 시 사용자에게 알리는 방법이 필요합니다. 재시도 옵션을 제공하는 것도 좋은 방법일 수 있습니다.
7. 접근성: 키보드나 스크린 리더를 사용하는 사용자들도 무한 스크롤을 사용할 수 있게끔 접근성을 고려하는 것이 중요합니다.
8. SEO 최적화: 무한 스크롤은 검색 엔진 최적화에 영향을 줄 수 있으므로, 적절한 페이징 구조와 함께 사용해야 합니다.
9. 디자인 일관성: 사용자가 무한 스크롤의 동작을 예측하고 이해할 수 있도록 디자인과 상호작용이 일관성 있어야 합니다.
   무한 스크롤 구현은 간단해 보이지만 성능, 사용자 경험, 접근성 등을 고려하면 복잡한 작업이 될 수 있습니다. 이러한 요소들을 잘 고려하여 구현하면 사용자에게 효과적인 인터랙션을 제공할 수 있을 것입니다.

포인트

적당한 양의 데이터를 정기적으로 요청하게 만들고 , 기존의 데이터는 가상돔에 렌더링하고 실제 데이터는 받아오는 새 데이터로 교체하는 방식으로 메모리에 누적되지 않게 만든다. React-query의 InfiniteQuery를 활용하여 다음 스크롤의 데이터를 캐싱하고 중간에 로딩이 생기는 경우 스켈레톤UI/로딩애니메이션/LAZYQUERY등을 활용해 사용자 경험에 신경쓰는 것이 좋다.

면접에서 할 대답

intetcection Observer를 활용한 Inview로 보이지않는 100px짜리 컨테이너를 페이지 바닥에 생성하고 이를 ref로 감시하는 방식으로 해당 컨테이너가 스크롤에 들어올때마다 InfiniteQuery를 통해 캐싱된 데이터를 적당량 가져오며, 기존 데이터는 렌더링시키고 새 데이터로 메모리를 교체하는 식으로 효율적인 구조를 만들고, 트렌드에 맞게 중간에 로딩이 발생할시 next/image의 blur이미지로 스켈레톤UI를 보여주는 방식으로 구현하게 될 것 같습니다.

[참고링크]

• https://velog.io/@theon2/%EB%8D%B0%EC%9D%B4%ED%84%B0-10000%EA%B0%9C%EB%A5%BC-%EA%B0%80%EC%A7%80%EA%B3%A0-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84%EC%8B%9C%EC%97%90-%EA%B0%80%EC%9E%A5-%EC%A4%91%EC%9A%94%ED%95%98%EA%B2%8C-%EA%B3%A0%EB%A0%A4%ED%95%B4%EC%95%BC-%ED%95%A0%EC%A0%90%EC%9D%80#:~:text=%EB%8D%B0%EC%9D%B4%ED%84%B0%2010%2C000%EA%B0%9C%EB%A5%BC%20%EA%B0%80%EC%A7%80%EA%B3%A0%20%EB%AC%B4%ED%95%9C%20%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%9D%84%20%EA%B5%AC%ED%98%84%ED%95%A0%20%EB%95%8C,%EC%AA%BC%EA%B0%9C%EC%84%9C%20%EB%A1%9C%EB%93%9C%ED%95%98%EB%8A%94%20%EA%B2%83%EC%9D%B4%20%EC%A2%8B%EC%8A%B5%EB%8B%88%EB%8B%A4.

⭐️ JSX란 무엇인가요?

JSX란?

• JSX란 Javascript + XML 의 약자로써 자바스크립트와 XML이 합쳐진 문법이다.

❓XML이란?

• XML(eXtensible Markup Language) 은 HTML과 같은 마크업 언어이지만, HTML은 데이터를 표현하는 마크업 언어라면, XML은 데이터를 기술하는 언어이다.
• 예를 들어 HTML에서는 h1, p 같은 이미 만들어진 태그를 사용해야 하지만, XML은 정의된 부분을 제외하고는 사용자가 태그를 임의로 만들 수 있다.
• 엄밀히 말하자면 XML은 마크업 언어라기 보다 마크업 언어를 정의하기 위한 언어라고 할 수있다.

1. JSX에서는 class가 아닌 className을 사용한다.

JS

import './App.css';

function App() {
  return (
    <div class="App">
      <div class='black-nav'>
        <h4>블로그</h4>
      </div>
    </div>
  );
}

export default App;

JSX

import './App.css';

function App() {
  return (
    <div className="App">
      <div className='black-nav'>
        <h4>블로그</h4>
      </div>
    </div>
  );
}

export default App;

2. JSX에서는 변수를 사용할 때, {}를 사용한다.

• 제로 블로그를 제작했을 때는 저렇게 직접 글 제목을 작성하는것이 아니라 서버에서 보내준 데이터를 띄울것이다.

  import './App.css';
  
  function App() {
  
    let post = '블로그 글 제목'; 
  
    return (
      <div className="App">
        <div className='black-nav'>
          <h4>블로그</h4>
        </div>
        <h4> {post} </h4> 
      </div>
    );
  }
  
  export default App;

• 위에 써있듯이 변수를 {}로 감싸서 저 return문 안에서 바인딩하면, 언제든지 저 변수안에 있는 내용을 그대로 사용 할 수가 있다.

3. HTML안에 스타일 지정할 때는 style = {{ style} }

• JSX에서는 스타일을 지정할때도 { }로 감싸주어서 그 안에 지정할 스타일들을 작성해주어야 한다.

  import './App.css';
  
  function App() {
  
    let post = '블로그 글 제목';
  
    return (
      <div className="App">
        <div className='black-nav'>
          <h4 style= { {color : 'red', fontSize : '16px'} }>블로그</h4>
        </div>
        <h4>{ post }</h4>
      </div>
    );
  }
  
  export default App;

• style = { } 안에 { }로 한번 더 감싸주어서 지정할 스타일들을 작성해야한다.

• 안에 스타일 내용들은 객체형으로 key : value 형태로 작성해야한다.

• HTML에서는 폰트사이즈를 font-size 였지만, 자바스크립트에서는 font (마이너스) size로 인식하므로 붙여서 fontSize로 작성해야한다.

4. 하나의 div 태그로 감싸주어야한다.

• 리액트 내에서 Virtual DOM 이 내부의 요소들의 변화를 감지 할때, 효율적으로 비교를 할수 있도록 내부는 하나의 DOM 트리 구조를 이루어야 하므로, 무조건 안에 코드를 작성할 때, div태그로 감싸주어야한다.

import './App.css';

function App() {

  let post = '블로그 글 제목';

  return (
    <>
      <div className='black-nav'>
        <h4 style= { {color : 'red', fontSize : '16px'} }>블로그</h4>
      </div>
      <h4>{ post }</h4>
    </>
  );
}

export default App;

[참고링크]

• https://velog.io/@brgndy/%EB%A6%AC%EC%95%A1%ED%8A%B8-JSX-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC
• https://developerntraveler.tistory.com/54