뭔가 어질어질한 오늘😵
오늘 공부한 것
React 심화 강의 - 1일차
1. ProtoType
: 프로토 타입은 사실 '패턴'이다. 원본이 있고 복사해서 만드는 것.
- 자바스크립트의 모든 객체(함수 포함)는 프로토타입을 갖고 있다.
- 자바스크립트의 객체는 함수의 프로토타입 객체를 복사해서 만든다.
- 객체는 자기가 어디서 복제되어 생성되었는지 알고 있다.
- 부모 객체 = 프로토타입 객체
- 부모 객체를 참조하는 것 = 프로토타입 링크
프로토타입은 볼 때마다 새롭고 어렵다😅
이전에도 읽고 보관해두었던 링크인데, 애초에 prototype이 어려워서 그렇지 글 자체는 제일 잘 정리되어 있는 것 같다.
2. 컴포넌트 쪼개기
기본 강의에서는 컴포넌트를 크게 가져갔다면, 이번에는 컴포넌트를 잘게 쪼개서 사용한다.
Page > 중간 Component > 최소단위 Component
컴포넌트를 어떤 식으로 쪼개가면 좋을 지, 또 폴더 구조는 어떻게 하면 좋을 지 튜터님의 방식을 따라해 볼 수 있어서 좋은 기회인 것 같다😁
3. image비율 맞추는 팁(반응형)
직사각형의 이미지를 화면 크기와 상관없이 비율을 맞추는 동시에 같은 부분의 이미지만 보여줄 수 있을지 사실 잘 몰랐다.
그런데 강의에서 엄청난 팁을 발견✨
const Outer = styled.div`
width: 100%;
min-width: 250px;
`;
const Inner = styled.div`
width: 100%;
padding-top: 75%;
overflow: hidden;
background-image: url("------");
background-size: cover;
`;이 중에 Inner에 있는 padding: 75%가 정말 혁신이었다.
padding은 부모의 너비를 기준으로 하기 때문에 padding-top의 너비는 Outer의 75%가 된다. 또한 height를 따로 주지 않았으므로 padding-top 자체가 height처럼 보이는 효과를 준다.
4. 클라이언트에서 쓸 수 있는 저장소
1) 쿠키
2) 세션 스토리지 : 브라우저를 닫으면 제거됨
3) 로컬 스토리지 : 사용방법은 세션 스토리지와 같지만 브라우저를 종료해도 데이터가 사라지지 않는다.
이전에는 무조건 access token을 쿠키에 저장했다. (쿠키밖에 없었다.)
요즘에는 로컬 스토리지에 많이 저장하는 추세로 바뀌고 있다.
왜 쿠키보다 로컬스토리지에
access token을 저장하고 있을까?
1. 쿠키는 모든 HTTP 통신에 함께 들어간다.(쿠키가 불필요할 때도!)
2. 로컬스토리지는 쿠키보다 더 많은 정보를 저장할 수 있다.
하지만 access token을 무조건 로컬스토리지에 저장하는 것이 좋은 것만은 아니니 상황과 목적에 따라 달라져야 한다!
5. 수많은 패키지들
이번 강의에서는 수 많은 패키지를 설치했다.
redux, react-redux, redux-thunk, redux-logger, history, connected-react-router, immer, redux-actions
아는 게 반, 모르는 게 반이다😟
- redux-logger
액션이 발생할 때마다 console에 예쁘게 변화를 찍어주는 미들웨어.
개발 단계에서만 필요하기 때문에 아래와 같이 환경이 "development'일 때만 보이도록 만들어준다👩🏻🎓
const env = process.env.NODE_ENV;
if (env === "development") {
const { logger } = require("redux-logger");
middlewares.push(logger);
}- history
리덕스 액션 생성 함수에서도history를 쓸 수 있도록 만들어준다.
보통<Route path="/login" component={Login} />처럼 라우팅을 해 주면Login컴포넌트에서는props에 자연스럽게history를 받아왔다.
하지만 리덕스에서는history를 사용할 수 없는데 그걸 가능하게 해준다.
// 일반적으로 history 사용
const Login = (props) => {
const handleClick = (e) => {
history.goBack();
}
const sendMain = () => {
history.push("/")
}
}
// history 라이브러리 이용
const loginAction = (user) => {
return function (dispatch, getState, { history }) {
dispatch(logIn(user));
history.push("/");
};
};- connected-react-router
위에 언급한 history 객체를 관리하며 필요에 의해 꺼내쓸 수 있는 라이브러리다.- 리덕스에서 router상태를 동기화 한다.
- 함수형 컴포넌트를 지원한다.
- redux-thunk나 redux-saga를 통해 히스토리 객체를 dispatch 할 수 있다.
import {connectRouter} from "connected-react-router";
const rootReducer = combineReducers({
user: User,
router: connectRouter(history),
});
- immer
불변성 관리에 도움을 주는 라이브러리.
리듀서를 작성할 때 불변성을 해치지 않기 위해 코드를 작성하는 것이 어려워지는 순간이 있다.
그 때 immer를 사용하면 훨씬 간단하게 리듀서를 생성할 수 있다.
기존에는 새 배열을 만들기 위해[...state.users, action.user]와 같은 식으로 return 해주었다면 아래처럼 그냥push를 이용하여 배열을 바꾸어도 문제가 되지 않는다.
produce로 인해 state 자체에 push되는 것이 아니라 state' 라고 할 수 있는 복제 본에 push가 되고 그 배열로 state에 대입되기 때문이다.
import produce from "immer";
function reducer(state, action) {
switch(action.type) {
case "CREATE_USER":
return produce(state, draft => {
draft.users.push(action,user);
}
}
}
- redux-actions
리덕스의 액션 관리를 좀 더 편하게 하기 위한 라이브러리다.
redux-actions에는createAction과handleActions함수가 있다.
말 그대로createAction은 액션 함수를 만들 때 아주 쉽도록 도와주고,handleActions는 리듀서에서 switch문 대신 사용할 수 있도록 해 준다.
import {createAction, handleActions} from "redux-actions";
// createAction
const login = createAction(LOG_IN, (user) => ({user}));
// handleActions
export default handleActions({
[LOG_IN]: (state, action) => state // format만 확인
})
오늘 회고
심화 강의를 이틀 만에 들으려니 정말 쉽지 않다😂
우선 모르는 개념이나 라이브러리가 쏟아지고, 신경써야 할 점도 많아졌다.
이제는 코드가 한 눈에 들어오지 않는 지경....
여태까지는 복습의 느낌이 더 강해서 모르는 것은 많이 찾아보고 내 것으로 만들 시간이 많았다면 지금은 진도를 일단 쫓아가는 것이 급하다.
그러다보니 이해하지 못하거나 더 궁금한 내용들이 마음의 짐처럼 남는다.
과제 주간에 마음의 짐을 모두 털고 다 내 지식으로 만들 수 있기를 바랄 뿐이다😞
