오전
WIL 제출- 유데미 리액트 라우터 파트
리덕스 에러 해결
오후
- 과제 리뷰 영상 다시보기
리액트 심화 강의 1-3까지TIL 제출
리액트 프로젝트 클론 후 실행하기
스터디에서 하는 라이브코딩 프로젝트를 클론해왔다.
yarn start로 어디까지 진행했는지 보려고하니 에러가 뜬다.
아~ CRA 세팅을 안해줘서 그렇구나?yarn create react-app .으로 환경세팅을 해본다.
어라 설치가 안된다.
아 이미 프로젝트에 package.json이랑 yarn.lock 같은 것도 깔려있어서 그런가.. 그럼 난 어떻게 실행시켜야 되지?
yarn install
yarn start
정상적으로 실행이 되었다. 하하
리액트 심화
toolkit 설치
yarn add react-redux @reduxjs/toolkit
Slice API
- 이 API를 통해 일반 리덕스를 사용했던 코드처럼 Action Value, Action Creator를 직접 만들지 않아도 되고,
Action Value, Action Creator, Reducer가 하나로 생성된다.
//createSlice API 뼈대 const counterSlice = createSlice({ name: '', // 이 모듈의 이름 initialState : {}, // 이 모듈의 초기상태 값 reducers : {}, // 이 모듈의 Reducer 로직 })
name,initialState,reducer는 필수 작성
counter 실습
// src/redux/modules/counterSlice.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
number: 0,
};
const counterSlice = createSlice({
name: "counter",
initialState,
reducers: {
addNumber: (state, action) => {
state.number = state.number + action.payload;
},
minusNumber: (state, action) => {
state.number = state.number - action.payload;
},
},
});
// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;
reducers: { addNumber: (state, action) => { state.number = state.number + action.payload; }, minusNumber: (state, action) => { state.number = state.number - action.payload; }, }, });
- 리듀서 객체 안에 작성한 함수가 리듀서의 로직인 동시에 Action Creator가 된다!
실행 화면
소스트리 에러
로그인 키체인 암호 요구
맥북으로 바꾼 뒤 소스트리를 통해 깃헙에 올리는 건 처음해봤는데, 30분이 넘게 푸시와 기싸움을 했다..ㅎ 윈도우는 안이랬는데~?
암호? 깃허브 로그인 암호 구나! << 아님
토큰 생성하면 받는, 한번 밖에 안보여주는 그것임
💡 for 맥
finder>shift+command+G>Library>Application Support>SourceTree>"깃헙유저이름"@STAuth-github.com 파일 삭제
키체인 접근 열기>sourcetree 검색>기존에 있던 깃허브 계정 키체인 제거
다시 소스트리로 가본다.
원격저장소로 푸시하려할 때 암호 입력하라고 나올텐데 여기에 토큰을 입력해주면 끝!
이렇게 하면 곧바로는 잘되는데 다른 파일로 시도하면 또 같은 이슈가 생기고, 심지어 지웠던 파일도 생겼당.. 하하
해뜰날