Jerry

[인프런] 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단계를 직접 만들어줘야한다. 아래와 같은 코..

Project https://juicyjerry.tistory.com/233 배운 내용 1. lazy loading과 code splitting의 차이점 우리가 번들러 같은 빌드 툴 체인(소스 빌드 과정에 필요한 도구)을 사용하여 번들링 하는 이유로 여러 개로 흩어져 있는 파일들(static file: html, css, image...)을 압축, 난독화하여 하나의 파일로 모아주어 최적화를 해주면 웹에서 여러 개로 나눠진 파일을 받는 경우보다 하나로 된 파일로 받는 경우의 속도가 훨씬 빠릅니다. 이런 번들링 툴인 웹팩은 번들링을 할 때 dependency graph라는 것을 호출합니다. 이 그래프는 모든 import 되는 파일이 서로 연결되어 있는 그래프입니다. 웹팩은 이 그래프를 이용해 번들링해야할 파..

SideProject 오늘 기존 정적 웹 페이지인 HTML 마크업을 리액트 코드로 전환하였다. next.js를 적용해서 하다보니 에러 핸들링 하면서 시행착오가 많았다. 1. Prerender Error prelendering error가 특히 많이 발생했는데 이 에러 대한 레퍼런스를 보긴했지만, export 설정을 잘 해주었고 pages 폴더 안에 해당 페이지를 잘 위치해두었기에 결국에 발견하지 못한 에러를 찾으려고 시간을 많이 보냈다. cf) Prerender Error : https://nextjs.org/docs/messages/prerender-error 2. styled-components 활용한 리렌더링 방지 또한, 인라인 스타일로 css 속성을 적용할 경우, 불필요한 리렌더링을 발생하게 되는..

Project https://juicyjerry.tistory.com/231 오늘 배운 내용 scss content extends: 같은 코드를 중복하고 싶지 않을 때 쓰는거야, 말그대로 다른 코드를 확장하거나 너가 코드를 재사용하고 싶을 때 사용 minxins: 상황에 따라 다르게 코딩을 하고 싶으면 사용 varialbes: 해당 css속성은 변수화 _의 의미는 기본적으로 css로 변하지 않았으면 하는 것 ex. _varialbes scss는 기본적으로 css preprocessor다. scss을 compile해서 css로 바꾼다. sass가 먼저 만들어졌는데 syntax가 달라서 scss를 쓰게 되었고 scss가 scss를 위한 공식적인 syntax로 릴리즈되었다. scss나 sass를 같은 것을 의..