본문 바로가기

전체 글

(131)
[flutter] 불필요한 rerendering을 피하는 방법 | AutomaticKeepAliveClientMixin state 변경되어도 rerendering 하지 않는 방법 아래 그림은 StatefulWidget의 생명주기(life cycle)이다. build 메서드는 StatefulWidget에서 화면 상에 보여줄 위젯을 그린다. build 메서드는 initState를 실행하거나, 부모 위젯에 의해 config가 업데이트 되었거나, setState로 인해 state가 변경되었을 때 실행된다. 예를 들어 2개의 탭 위젯이 있다고 했을 때, 다른 탭으로 라우팅하면 기존에 그렸던 위젯은 dispose된다. 돌아올 때 다시 build되면서 불필요하게 rerendering하고 탭을 바꿀 때마다 깜빡거리는 현상이 발생한다. 라우팅될 때마다 dispose되어 발생하는 불필요한 rerendering을 막으려면 StatefulWi..
[Flutter] 자식 위젯에서 부모 위젯 state 참조하는 방법 | findAncestorStateOfType 부모 위젯의 state를 참조, 변경하는 법 자기 자신의 state를 업데이트하려면 setState를 쓰면 된다. 하지만 자식이 부모 위젯의 state를 변경하려면 어떻게 해야할까? How to Set/Update State of StatefulWidget from other StatefulWidget in Flutter? For Example in the below code plus button works and able to update the text but the minus button does not. But if we press FloatingActionButton then the State is refreshed . The minus button is cha... stackoverflow.c..
2021.02.26 금요일 - [ ] 아침 명상 - [x] 저녁 명상 - [x] 운동(1) - [ ] 독서(1) - [x] 서평 포스팅 - 불곰 - [x] 나작앱(4) - [x] 드로잉(0.5)
2021.02.25 목요일 - [x] 아침 명상 - [x] 저녁 명상 - [x] 독서(1) - 불곰 주식투자 완독 - [x] flutter cookbook 포스팅(4) - [x] 드로잉(0.5)
2021.02.24 수요일 - [ ] 아침 명상 - [x] 저녁 명상 - [x] 독서 (1) - [x] 나작앱(4) - [x] 드로잉(0.5)
git으로 함께 일하기 | merge 전략, PR, 커밋 컨벤션 내가 속한 팀은 신생 팀이고 팀 단위의 git 전략은 딱히 존재하지 않았다. release log를 남기기 위해 커밋 컨벤션을 만들어놓은 정도였다. 사내 다른 개발자들의 브랜치 머지 전략, 커밋 로그 컨벤션 등을 보고 팀원들에게 제안해 적용해보았다. 브랜치 머지 전략 🧚‍♀️참고: https://moonsupport.oopy.io/f8a56d78-1425-4987-9a34-30ed30885d2c 군데군데 merge commit이 섞여 있어서 히스토리를 매끄럽게 알기 어렵다. 그래서 PR을 머지할 때 push 브랜치와 base 브랜치에 따라 머지 전략을 다르게 하기로 했다. 현재는 merge commit이 사라지고 의미있는 커밋들만 남아서 히스토리가 깔끔해졌다. 1. develop(or stage) → m..
css rendering2 | box-sizing? position:absolute? box-sizing을 content box로 했을 때와 border box로 했을 때 레이아웃이 다른 이유가 뭘까요? 하나의 div로 stitch border를 표현하려면 어떻게 할까요? position: absolute 속성을 쓰면 왜 엘리먼트가 엉뚱한 곳에 위치하는 일이 생길까요? modern box와 position을 통해 알아봅시다. 코드스피츠 css 렌더링 2 코드스피츠 css 렌더링 2 모던 박스 www.notion.so another-light.tistory.com/65 css rendering - 기본 레이아웃 | CSS 속성은 사실 OO이다? CSS란? CSS(Cascading Style Sheets)는 종속형 스타일 시트 언어입니다. *마크업 언어의 스타일을 웹사이트에 표현하는 데 사용..
Component Pattern | Context API 를 활용하자. Prop Drilling 참고: https://kentcdodds.com/blog/prop-drilling 하나의 컴포넌트를 여러 컴포넌트로 쪼개고, 쪼갠 컴포넌트에서 또 쪼개는 것. 하나의 컴포넌트에서 전부 다뤄지던 state가 props로 전달 된다. 깊이가 깊어질 수록 prop을 전달하는 과정이 드릴로 뚫고 들어가는 것 같아서 Prop Drilling이라고 한다. Card → CardContent, CardBottom CardContent → Title, Description, Thumbnail CardBottom → LikeButton, HateButton 좋은 점 한 컴포넌트 안에서 코드가 매우 길어지면 수정이 어려워진다. global로 변수를 관리할 때처럼 하나의 컴포넌트 안에 여러 state..
리액트 번들 사이즈 최적화 Bundle Size 최적화 참고: https://dev.to/mbernardeau/6-tips-to-optimize-bundle-size-50n9 default import 사용 default import와 member style import(global import) 했을 때 가져오는 파일 사이즈가 다르다. // member style imports(global import): import { Row, Grid as MyGrid } from 'react-bootstrap'; import { merge } from 'lodash'; // default style imports: import Row from 'react-bootstrap/lib/Row'; import MyGrid from 'react-b..
2021.02.23 화요일 - [x] 아침 명상 - [x] 저녁 명상 - [x] modern box - css rendering포스팅 (3) - https://youtu.be/NFvSbFJmoWo modern css - https://css-tricks.com/snippets/css/stitched-look/ css tricks - https://codepen.io/chriscoyier/pen/Brcpe codepen - [x] 독서(1): 주식투자 - [ ] 드로잉(0.5)