Jerry

[webpack/babel]프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) 수강하면서 웹팩과 바벨에 대해서 좀 더 알아보려고 한다. 이런 개발환경에 대해 알아야 하는 이유로는 시간과 상황이 변해서 개발 셋팅을 바꿔야하는 경우가 발생한다면, 해당 것이 업데이트 될 때까지 기다릴수도 있지만, 개발도구를 다룰 수 있는 지식이 있다면 직접 바꿀 수 있다. 오늘은 에러 핸들링한 내용만 적고 그 후 웹팩에 대한 내용들을 적어보았다. http://juicyjerry.tistory.com/243 PAT error handling PAT(Personal Access Tokens) error handling vs code에서 커밋을 해당 레포에 푸시하려고 했는데 아래와 같은 에러가 발생했..

redux-toolkit는 리덕스에서 많이 쓰이는 라이브러리를 모아놓은 것 thunk, saga, immer 다 내장되어있어 따로 안 싸도 된다. action creator도 toolkit이 만들어준다. toolkit에서 action 항목에서 fulfiiled는 payload, rejected는 error에 requestId가 있는데 요청별로 다른 id를 부여해 같은 짝을 찾을 때 참고하면 유용하다 immer 쓰다가보면 가끔씩 불변성이 깨지는 경우가 있는데 그럴 땐, 해당 변수 리턴문을 추가한다. cf) 자바스크립트에서 논블로킹으로 delay를 구현하는 방법은 setTimeout과 Promise밖에 없습니다. setTimeout에 await를 못 붙이니 Promise밖에 쓸 것이 없습니다. 하나의 컴포넌..

Action Reducer Store Dispatch 오늘도 어김없이 [인프런] Redux vs MobX (둘 다 배우자!), 조현영 강좌를 수강해 공부를 하였다. 이번에 배운 내용은 리덕스의 미들웨어, thunk, devtools와 immer library, 클래스 컴포넌트를 사용하는 유저를 위한 connect 기능을 알아보았다. 먼저, 미들웨어에 대해서 적어보겠다. 리덕스에서 Action은 기본적으로 객체 형태로 동기적으로 동작한다. Dispatch라는 함수는 해당 객체를 받아 전달하는 역할이다. 이 둘 사이(Action과 Dispatch)의 들어가 위치해 동작하는 것이 미들웨어다. 미들웨어로 thunk와 saga가 많이 쓰인다고 한다. (근데 toolkit이 나온뒤로 이걸로 thunk와 saga를 ..

[인프런] Redux vs MobX (둘 다 배우자!), 조현영 리덕스 개념이 잘 안 잡혀서 예전에 수강한 강의를 다시 보았다. 모를수록 자주 보고 계속 파보는게 해당 개념을 익히는데 효과적인 거 같다. 속도는 욕심에 비해 더디지만, 포기하기 않고 다양한 시도를 통해 나에게 맞는 학습법을 찾는거 같아서 한편으로 기쁘다. 배운 내용 리덕스를 할 땐, 데이터 중심 사고를 해야한다. (화면은 안 중요해요. 리덕스의 장점이 데이터가 바뀌면 화면이 알아서 바뀌는거잖아요. ) Q. 전체 페이지의 게시글을 다 state로 가져와야 하는건지 한 페이지마다 state를 가져와야 되는 건지 궁금합니다. 게시판 리스트를 구현할 때 리덕스에 담아요. 뒤로가기가면 캐싱되어서 서버에서 안 불러와도 되니깐 리덕스 쓴다. 글로벌리라..

리덕스 공식 문서, Redux Essentials, Part 2: Redux App Structure 를 학습을 하였다. 다시 보면 좋을 내용은 노션에 메모하였다. https://www.notion.so/Redux-Essentials-Part-2-Redux-App-Structure-c185491791d542c7be659eb706bf7544 Redux Essentials, Part 2: Redux App Structure In Part 1: Redux Overview and Concepts, we looked at why Redux is useful, the terms and concepts used to describe different parts of Redux code, and how data flo..

리덕스 공식 문서, Getting Started with Redux, Redux Essentials, Part 1: Redux Overview and Concepts 를 학습하였다. 다시 보면 좋을 내용은 노션에 메모하였다. https://www.notion.so/Getting-Started-with-Redux-4df0d4799ec647f8aa192a6eabffdc6f https://www.notion.so/Redux-Essentials-Part-1-Redux-Overview-and-Concepts-812cc5760e184808b5cf666cf74fef7b 참고 https://redux.js.org/tutorials/essentials/part-1-overview-concepts#state-managem..

오늘 한 것 React로 NodeBird SNS 만들기 - Redux 연동하기 개인적으로 리덕스와 친해지려고 하는데 쉽지 않다... 디버깅하느냐 시간을 많이 소비했다..ㅠ 기존에 작성했던 코드에 리덕스를 연동하는 내용을 학습을 하면서 리덕스의 개념부터 redux devtool 사용, 구조 등 관련한 내용을 익히는 중이다. 한숨자고 복습하고 프로젝트에 리덕스를 연동해보면서 리덕스와 더더욱 친해지도록 해보겠다!

오늘 한 것 React로 NodeBird SNS 만들기 강좌에서 Redux 연동하기, 리덕스 파트를 끝내는 것이 목표였다. 하지만, 다 못 끝냈다 배운 내용 버전 6들어와서 Provider로 페이지를 감싸주는게 자동으로 되도록(생략되어 알아서 감싸준다) 업데이트돼서 한 번더 쓰면 중복처리가 된다. return ( 공통메뉴 ); 리덕스 - 중앙 데이터 저장소 역할 컨텍스트api, mobex, redux의 가장 큰 차이점은 비동기를 지원하기 쉽냐? 어렵냐? 보통 중앙 저장소가 있다면, 서버에서 데이터를 많이 받아오고 비동기로 받아온다. 데이터를 받는건 100%가 아니다. 실패를 대비해야한다. 비동기는 3단계로 나뉜다. 요청→ 성공(받는것)→ 실패 컨텐스트api는 3단계를 직접 만들어줘야한다. 아래와 같은 코..