Jerry

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

PAT(Personal Access Tokens) error handling vs code에서 커밋을 해당 레포에 푸시하려고 했는데 아래와 같은 에러가 발생했다. 에러가 안내하는 레퍼런스로 이동하였다. https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ 1년 전 만들어서 사용해왔던 PAT의 유효기간이 만료된 것으로 파악했고 새로운 PAT를 만들어야 했다. 아래 url(레퍼런스)의 가이드를 기준으로 새로운 PAT을 만들었고 https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating..

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 사용, 구조 등 관련한 내용을 익히는 중이다. 한숨자고 복습하고 프로젝트에 리덕스를 연동해보면서 리덕스와 더더욱 친해지도록 해보겠다!