Window 객체는 ? Window 객체는 브라우저의 요소들과 자바스크립트 엔진, 모든 변수를 담고 있는 객체입니다. Window 인터넷 브라우저를 보면 탭들도 있고, 주소창, 즐겨찾기, 툴바 등이 있습니다. 그 다음부터는 웹사이트가 표시됩니다. 여기서 브라우저 전체를 담당하는 객체가 Window객체입니다. 웹사이트만 담당하는 게 Document 객체 이구요. 물론, Document 객체 또한 Window 객체 안에 들어있습니다. Document 객체는 양이 어마어마하게 많기 때문에 다음시간에 다뤄보겠습니다. 콘솔에 window를 쓰고 .(점)을 치는 순간 여러 추천 목록이 나옵니다. 이게 바로 윈도우(window) 객체의 속성과 메소드들입니다. 이 포스트에서는 자주 사용하는 것들만 추려볼 생각입니다. ..
PostCard 역시 큼직큼직하게 컴포넌트를 생각하고 기획하고, 기획을 하면 됩니다. 그리고 살을 붙이듯 구현을 해나가면 됩니다. post를 props로 데이터를 index.js에서 받아오기때문에 propTypes를 설정해주어야합니다. proptypes설정시 object 항목을 더 자세하게 적어주고 싶다면, shape({ }) 안에 넣어주면 됩니다. 또한, 옵셔널체이닝 연산자로 const id = me && me.id; 에서 const id = me?.id;로 변경할 수 있으며, 이또한 const id = useSelector((state) => state.user.me?.id) 처럼 사용할 수도 있습니다. state 값이 false일 때, 값을 true로 변경하거나 true값을 false로 변경하려면 ..
Reducer들도 컴포넌트들처럼 쪼갤 수 있습니다. reducers 디렉토리 안에 분리시킬 post, user.js를 만들어주고, index.js에서 있던 initialState와 action들을 각 파일에 옮겨줍니다. 리듀서들도 옮겨서 적어주고, index.js에 분리시킨 리듀서들을 import 시켜줍니다. 리덕스에서는 분리시킨 리듀서들을 가져오려면 combineReducers을 사용하여 묶을 수 있고, const rootReducer = combineReducers({ user, post, }); 로 할 수 있지만, 추후 SSR(Server Side Rendering) 때문에 HYDRATE를 위해 index 항목을 추가해줍니다. 리듀서들을 combineReducers로 묶어주는 이유는 리듀서들은 함수..
