interview_02[react]

React

• JSX란 무엇인가요?

  • jsx는 javascript에 xml을 추가한 확장 문법이다.
  • jsx는 리액트에서 사용되는 문법으로 공식적인 자바스크립트 문법은 아니다.
  • 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 코드로 변환한다.

• React란 무엇인가요?

  • react는 페이스북에서 만든 자바스크립트 UI 라이브러리다.
  • react는 컴포넌트 기반이며 컴포넌트에 데이터를 보내면 설계된 대로
  • UI가 조립되어 사용자에게 보여진다.

• React를 사용하는 이유는 무엇인가요?

  • 사용자와의 인터렉션을 UI로 쉽게 구현하고 대규모의 웹페이지를 관리하기 위해서이다.
  • 기존의 DOM은 페이지가 바뀔 때마다 새 HTML을 로드하면서 DOM전체를 바꾼다.
  • Virtual Dom[가상돔]은 React 컴포넌트가 리턴하는 값에 의해 만들어져서 실제 보이고 있는
  • Dom과 비교해서 달라진 부분만 찾아내어 바꾸게 됩니다.

• CRA란 무엇인가요?

  • react는 프레임워크가 아닌 라이브러리로 초기 설정이 어렵게 다가올 수 있습니다.
  • 따라서 명령어(crest-react-app)하나로 초기 설정시 필요한 환경을 제공해 줍니다.

• 컴포넌트란 무엇인가요?

  • 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 말한다.
  • 이미 만들어진 컴포넌트들을 조합하여 화면을 구성할 수 있다.
  • 반복되는 부분의 화면을 하나의 컴포넌트로 반복문을 돌려 만들 수 있다.

• React Sass란 무엇인가요? 사용하는 이유는 무엇인가요?

  • react에서 사용하는 css로
  • 복잡한 작업을 쉽게 할 수 있고 코드의 재사용을 높여줄 뿐만 아니라
  • 코드의 가독성을 높여주며 유지보수를 쉽게 해준다.

• React Router란 무엇인가요? 사용하는 이유는 무엇인가요?

  • React-router는 페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따라
  • 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 입니다.

• 라이브러리와 프레임워크의 차이점은 무엇인가요?

  • 제어 흐름에 대한 주도성이 누구에게 있는가에 있습니다.
  • 프레임워크는 전체적인 흐름을 스스로가 쥐고 있으며 사용자가 그 안에서 필요한 코드를 작성하고
  • 라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다가 사용합니다.

• mock data를 사용하는 이유는 무엇인가요?

  • 프론트엔드 개발을 진행하는데 필요한 백엔드 API가 완성이 안되어 있을 때
  • mock data를 만들어 데이터가 들어오는 상황을 대비하고
  • 데이터가 내가 만든 UI에 맞게 구현되는지 확인하기 위해

• SPA란 무엇인가요?

  • react는 spa(single page application) 방식으로
  • 여러개의 페이지를 사용하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태입니다.

• useEffect는 무엇인가요?

  • 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다.

• 함수형 컴포넌트에서 side effect를 발생해야하는 경우는 언제인가요?

  • 함수가 어떤 동작을 할 때 input, output 이외의 다른 값을 조작한다면,
  • 이 함수에는 sideEffect가 있다고 표현한다.
  • 대표적으로 Data Fetching , DOM에 직접 접근 구독(setInterval, setTimeout) 과 같은 행위가 있다.

• state와 props의 차이는 무엇인가요?

  • state는 내부 컴포넌트에서 생성하고 활동하고 데이터를 변경하며
  • props는 외부[부모 컴포넌트]에서 상속 받는 데이터이며 데이터를 변경할 수 없다.

• state를 선언하기 위해서 어떤 훅을 사용하나요?

  • useState 를 사용해 state를 선언한다.
  • 배열을 사용하며 첫 번째는 state가 저장될 이름을 두번째는 값을 업데이트 할 메스드가 위치한다.

• React의 특징(으로 시작해서 연계 질문 계속 가능)

  • 선언적이다 [대화형 UI를 작성하는데 유리하다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있다.]
  • 컴포넌트 기반이다. 캡슐화된 컴포넌트가 스스로 상태를 관리하고 복잡한 UI도 효과적으로 구성할 수 있다.

• map 함수가 무엇인지 설명해주세요.

  • Map 함수는 callback을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다.

• 버튼을 클릭했을 때 alert 창을 띄우고 싶습니다. 리액트에서 어떻게 구현할까요?

  • 버튼에 onclick 메서드를 통해 구현할 수 있다.
  • useState() 훅을 활용해 구현할 수도 있다.

• Virtual DOM이란 무엇인가요?

  • DOM을 추상화한 가상의 객체, 즉 가상의 DOM을 의미하며
  • 수정사항이 여러가지 있더라도 가상 DOM은 한 번만 렌더링을 일으킵니다.

• 리액트에서 단방향 데이터 흐름이란 무엇인가요?

  • 부모로부터 자식으로만 데이터 전달이 가능함을 의미합니다.
  • 이는 유지보수를 편리하게 만들어 줍니다.
  • 가상돔은 뷰를 통째로 바꾸어주는 역할을 하기 때문에 단방향 데이터 방식은
  • DOM을 갱신할 때 큰 장점이 있습니다.

• fetch 함수는 무엇인가요?

  • HTTP 요청 전송 기능을 제공하는 web api 입니다.
  • Server 와의 비동기 요청 방식을 합니다.

• 코드리뷰란 무엇인가요? 코드리뷰는 필요한가요? 왜 필요한가요?

  • 더 나은 퀄리티의 코드를 만들뿐만 아니라
  • 새로운 기술적인 지식을 얻을 수 있고
  • 내가 해결해야 하는 문제에 대해 새로운 관점을 습득할 수 있습니다.

• json이란 무엇인가요?

  • Javascript object notation라는 의미의 축약어로 데이터를 저장하거나
  • 전송할 때 많이 사용되는 경량의 DATA 교환 형식
  • Json 표현식은 사람과 기계 모두 이해하기 쉬우며 용량도 작다.
  • json은 데이터 포맷일 뿐이며 어떠한 통신 방법도 프로그래밍 문법도 아닌
  • 단순히 데이터를 표시하는 표현 방법일 뿐이다.

• json 목 데이터와 javascript 변수로 만든 목 데이터의 차이에 대해 설명해주세요.

  • Js object는 js engine 메모리 안에 있는 데이터 구조이며
  • json은 객체의 내용을 기술하기 위한 파일이다.
  • Json으로 서버와 클라이언트가 데이터를 주고 받는다.

• 인증 인가 흐름에 대해서 설명해주세요.

  인증은

  유저의 아이디와 비번이 맞는지 확인하는 절차이다.

  로그인 절차로

  • 아이디 비번 생성
  • 아이디 비번 암호화해서 DB 저장
  • 유저 로그인
  • DB의 정보와 비교
  • 일치하면 성공 access token 클라이언트에게 전송
  • 한번 로그인 성공이후에는 access token을 이용해 매번 로그인 하지 않는다.

  인가는

  유저가 요청하는 request를 실행할 수 있는 권한이 있는

  유저인가 확인하는 절차이다.

  할 수 있는 행동을 제한하는 역할을 하기도 한다.

  절차

  • 유저 정보를 확인할 수 있는 정보가 들어있는 access token을 생성한다.
  • 유저가 request 보낼 때 access token을 첨부해서 보낸다.
  • 서버에서는 유저가 보낸 access token 을 복호화 한다.
  • 복호화된 데이터를 통해 user id를 얻는다.
  • User id를 이용해 DB에서 유저의 권한을 확인한다.
  • 충분한 권한을 가지고 있으면 해당 요청을 처리한다.
  • 권한이 없다면 401 혹은 다른 에러를 보낸다.