20210804 TIL

Facts

• 무드플레이 리부트 프로젝트 진행 (배포 실패)
• 면접 준비 & 기본 공부 

Feelings

• 여러 회사를 지원하고 면접 일정이 잡히게 되면서 기본 질문들과 답들을 정리하며 공부를 하는 중이다. 공부를 하다보면 이전에 TIL에서 내가 공부했던거 적어 둔게 떠올라 이전 글을 뒤지면서 찾아내게 되는데 나름 그때 공부했던게 뒷받침되어 지금 조금 더 이해하는 시간이 짧아지지 않았나 싶다. 좋다. 자주 정리해서 올려줘야 겠다. 아카이빙은 언제나 옳다. 
• 프로젝트를 진행하면서 개발일지도 작성해나가려고 하고 있다. 오늘은 근데 열심히 작업해두고 배포에 문제가 있어서 하루종일 애를 먹었다. 이것만 잡고 있을 수는 없어서 다른 공부로 넘어갔지만 그래두 마음이 찝찝하다. 내일은 github pages 배포 문제를 해결해야겠다. 그래도 무드 플레이를 다시 만들 수 있어서 좋다.. 뭔가 더 업그레이드 된 코드와 UI를 적용해봐야겠다. 

Finding

리액트란?

• SPA를 지원하는 자바스크립트 페이스북에서 만든 오픈소스 라이브러리
• 모바일과 웹의 뷰 처리를 하는 데 사용된다. 
• 비싼 RealDOM 대신 VirtualDOM을 사용한다. 
• 서버사이드렌더링을 지원한다단방향 데이터 흐름 단방향 데이터 바인딩을 다룬다
• 재사용, 조합이 가능한 ui 구성요소 뷰를 개발한다. 

 

리얼돔이란?

• 문서 객체 모델:  html 파싱을 하는데 자바스크립트같은 언어로 접근하고 사용하기 쉽게 만들어준 객체 모델 
• 웹페이지를 프로그래밍 언어와 연결하는 것

가상돔이란?

• 실제 돔을 추상화시킨 자바스크립트 객체

리얼돔은 한번만 랜더링 되고 실제 돔을 계속 랜더링 하는 비용이 비싸기 때문에 가상돔을 이용해 변화를 감지하고 변화된 부분만 

 

엘리먼트란?

• 돔 노드나 다른 컴포넌트 측면에서 화면에 표시할 것을 설명하는 일반 객체, 엘리먼트는 다른 엘리먼트 안에 속해 있을 수 있고 불변객체이다. 리액트 앨리먼트는 값싸다

컴포넌트란?

• 함수나  render 메서드가 있는 클래스로 선언하여 생성한다. props를 인자로 사용하고 jsx트리를 반환한다.  그런다음 JSX가 React.createElement 함수 트리로 변환된다. 

 

컴포넌트 구성방법 두가지는? 

• 함수: props를 매개변수로 받아서 React 요소를 반환한다. 
• 클래스 React를 확장해서 class를 만들고 render 메서드를 가진다.  

 

component의 라이프 사이클은? 

리액트가 컴포넌트를 감지하고 랜더함수 호출 -> 리액트가 랜더링 출력값을 일치시켜 UI 업데이트를 함 -> componentDidMount 메서드 실행, 콜백 등록  -> 콜백에 의해 브라우저 상태감지,변화 -> DOM 엘리먼트 삭제된다면 -> componentWillUnmount 메서드 실행, 콜백 해제

 

state란?  컴포넌트의 수명동안 변ㄴ경될 수 있는 일부 정보를 보유한 개체

항상 상태를 단순하고 상태 저장 구성요소를 최소화해야한다.

 

props와 state의 차이점은?

공통점: 둘 다 자바스크립트 객체

props는 상위 컴포넌트가 하위컴포넌트로 전달해주는 인자이고 state는 객체 내부에서 가지고 있는 캡슐화된 상태로 외부에서 조작하거나 접근할 수 없으며 오직 내부에서만 관리된다.

 

class 컴포넌트에서의 super(props)는 를 쓰는 이유는?

상속받아서 사용하는데 생성자를 활용하기 위해

 

웹팩을 쓰는 이유와 사용법은?

웹팩은 모듈 번들러로 여러개의 동적파일들을 하나의 정적 파일로 묶어주기 위해 쓰인다. webpack.config.js파일안에 설정을 넣어주어 안에 css-loader, file-loader 등 각각 다른 타입의 정적 파일들을 해석할 수 있는 로더들과 인풋과 아웃풋에 대한 정보들을 넣어서 빌드 실행 명령어로 빌드해준다. 

 

redux란?

redux는 flux 아키텍쳐를 따르는 단방향 데이터 흐름을 가진 라이브러리로 UI로직과 상태관리 로직을 분리시키는 관심사의 분리를 해줄 때 사용한다. redux의 세가지 특징으로는

• 단일 store,
• reducer는 순수함수로 액션을 만들어 발생시키면 기존의 데이터들을 변경시키는 것이 아닌 새로운 데이터를 반환하는 것이다 
  • Reducer는 변화를 일으키는 함수이다.
  • 액션을 만들어서 발생시키면 리듀서는 현재 상태와 액션객체를 매개변수(파라미터,입력값)으로 받는다.
  • 현재상태와 액션객체를 참고하여 이전 데이터를 변경 시키지 않고 새로운 데이터(객체)를 만들어 반환한다.
• 상태는 읽기 전용으로 직접 상태를 변화시킬 수 없고 상태를 변화시키는 유일한 방법은 무슨일이 일어나는지 기술한 액션 객체를 전달하는 것 뿐이다. 

 

왜 상태를 불변객체를 사용하는가?

• 상태가 변경되어도 감지가 안된다.