걸음마 개발자

• DOM (  Document Object Model )
  
  • 렌더링
    • == 랜더링 엔진
    • HTML, CSS
    • 볼 화면을 그려내는거 == 압축 풀어서 실행하는 거
• React
  • User Interface 배치 위한 자바스크립트 라이브러리
    • 컴포넌트를 이용한 배치
      • 클래스형 컴포넌트 ( 지는 해 )
        • 코드 안에서 라이프사이클 기능, state 기능
          • 라이프 사이클 기능
            • 실행 or 업데이트 or 제거될 때 특정 이벤트 호출되는 것
        • render 함수가 필수
          • 랜더 : 화면에 띄우는 거
      • 함수형 컴포넌트
        • hook을 사용하여 라이프사이클 기능과 state 기능을 구현
      • 왜 함수형 컴포넌트가 뜨는 해인가 ?
        • 가독성 -> 요건 맞는 거 같음.
        • props 에 따른 결과를 보장받음
        • 메모리 자원 덜 쓴다고 카더라.
        • 빌드 후 파일 크기가 더 작다고 카더라.
  • Props 이용하여 데이터 전달
  • State 이용하여 상태 변화 감지
    • 이 후 컴포넌트 업데이트
  • 직접 랜더링 하지 않음. 배치만 해줄 뿐.
  • React 에서 변경이 감지되면 React DOM 에게 알림
    • 뭐를 알림 ? 알린다기보다는 virtual DOM 을 전달함
      • 가상의 DOM 을 React DOM 에게 줌
        • 가상의 DOM 과 실제 DOM 이 서로 똑같으면 업뎃 안 함
        • 가상의 DOM 과 실제 DOM 이 다른 부분이 있으면 그 부분만 업뎃 함

src/App.js( react, 함수형 컴포넌트 )

import React from 'react';

export const App = () => {
  return <div>Hello world</div>;
}

export default App;

src/App.js ( react, 클래스형 컴포넌트 )

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        Hello World!
      </div>
    )
  }
}

export default App;

src/index.js ( react DOM, 랜더 해주는 곳 )

import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(
  <App>
  </App>,
  document.getElementById('root')
);

사실은 굉장히 복잡하다.

행렬로 이루어진 DB라 할지라도 어쩌면 3차원 공간인 우리 실세계를 

2차원으로 표현한다는게 직관적으로 생각해봐도 복잡하다.

그렇기 때문에 DB를 잘 배열하고 직관적으로 배열하고 조직화하는게 중요하다.

오죽하면 DBA 라는 직업까지 있겠는가.

이 DB를 바탕으로 SW 를 작업하기 때문에, DB가 직관적으로 잘 짜여진 환경이라면 SW 를 작성하기에 아주 천국같은 환경이라 하겠다.

원하는 DB를 제공할테니, 마음 껏 그 위에서 뛰어놀아 보라(정확성을 놓치지 않으면서 '효율성을 극대화' 해보라) 이런 느낌인 것.

프로세스가 하나 진행하면서,

변수 하나를 할당해서 거기에 데이터를 집어넣는 메모리(힙이든 스택이든) 저장 부터

프로세스가 꺼지더라도 휘발되지 않고 남아있을 수 있도록 하는 파일로의 저장까지.