이재만 교수의 공간

relative 는 원래 위치에서 top, left 떨어진 지점으로 이동

- 원래 있어야 할 지점을 기준으로 상대적인 위치로 이동

 이전에 두면 오른쪽 아래 꽃 모양이 보이고 이게 Devtools 이다

</QueryClientProvider>

<ReactQueryDevtools initialIsOpem={false} position='bottom-right'/>

async / await 함수를 외부로 빼면 된다

1. json-server 설치 (3개 중 하나 실행)

npm install json-server

npm i json-server

yarn add json-server

2. API로 요청해서 얻어올 json 파일 추가 - 루트 디렉토리에 db.json

3. package.json 에 scripts 에 json-server 실행 명령어 추가

- port 4000번으로 실행

4. scripts로 등록한 명령어 실행하여 db 서버 동작

npm run server-json

yarn server-json

5. 입력한 주소로 들어가서 json 데이터 얻어오는지 확인

http://localhost:4000/superheros

나머지는 다 가능한데 subscribe를 호출할 수 있는 방법이 마땅치가 않다

내부 컴포넌트에서는 value로 값을 사용하고 있는데

이것을 그리려면 render로 빼야 하고 그 render 함수를 

store.subscribe(render); 

로 등록하면 된다

클래스 컴포넌트에서는 render( ) 함수가 내부적으로 있어서

등록이 가능하지만 

함수 컴포넌트에서는 render( ) 가 없기 때문에 강제적으로 만들어

주어야 하는 번거로움이 생긴다

그래서 useSelector( ) 로 state 의 값을 가져오고

useDispatch로 reducer를 호출하게 한다

정말 편리하다

npm install @reduxjs/toolkit

1. Reducer  생성

  - 파라미터로 state, action 받음

  - state는 현재 state 값을 받음

  - action은 객체, 첫 번째 키는 type으로 지정

const reducer = (state, action) => {

  if(state === undefined) {

    return { color: 'skyblue' };
  }

  let newState = null;

  if(action.type == 'change') {

    Object.assign({}, state, {color: action.color});

  }

  return newState;

}

2. Store 생성

  - 생성할 때 인자로 reducer 넘겨서 연결

  - store 안에 state 자동 생성

const store = Redux.createStore(reducer);

3. Render 함수를 store에 subscribe 함

store.subscribe(render);

4. dispatch( ) 함수를 호출하면 reducer가 호출되어 직접 실행 후 state 값 변경

store.dispatch({type: 'change', color: 'green'});

5. getState() 로 변경된 값을 얻어와서 화면 업데이트

const render = () => {

  const state = store.getState();

  UpdateColor(state.color);

}

* origin/master

 - 원격 저장소 [origin]의 브랜치인 [master]의 위치를 나타내고 있음

* origin/HEAD

 - 원격 저장소 [origin]을 복제해 올 때 다운로드 되는 커밋의 위치를 나타냄

 - 일반적으로 [origin/master]와 동일한 위치를 가리킴

* master

 - 로컬 저장소 브랜치인 [master]의 위치를 나타냄

쉽게 얘기하면 origin/master는 원격 저장소를 가리키고

master는 로컬 저장소를 가리킨다

https://codingapple.com/

https://backlog.com/git-tutorial/kr/intro/intro1_1.html

main도 branch 이다

현재 내가 commit을 올리는 곳은 main branch 인데

복사본을 만들어서 따로 진행하고 싶으면 branch 를 새로 생성한다

git branch server_modify

그 다음 현재 내가 있는 곳이 head 인데 

git log --online --all --graph