react 3

React State 관리: 10년간의 교훈

출처: https://www.youtube.com/watch?v=-IqIqJxC-wo Mistake : Separating related state Solution : Unify related state 코드를 분리할 때 가장 일반적으로 볼 수 있는 것 중 하나인 관심사를 분리하는 것부터 시작합니다. 해답은 매우 간단하며, 즉 관련된 상태에 대해 이야기 할 때 관심사가 같은 상태를 통합하는 것입니다. 여기서 개념은 속성이 서로 관련되어 서로 적용되는 상태에 대해 생각하는 것 입니다. function App() { const [address, setAddress] = useState(""); const [city, setCity] = useState(""); const [country, setCountry..

Front-End 2024.03.03

React-Native에 대해서 알아보자!

참고: Do it! 리액트 프로그래밍 요즘 리액트 네이티브에 빠져 있어서 리액트 네이티브로 앱을 만들어보고 있습니다. 모바일에서 보여지는 UI를 보면서 신기하기도 하고, 내가 표현할 수 있는 범위가 확장함에 따라서 재미가 많이 컸던 것 같습니다. 기본적으로 셋팅하면서 스트레스를 많이 받았지만 공기계도 꺼내보고 이것저것 코드를 치면서 핸드폰에서 나오는 결과물이 신기하여서 너무 좋았습니다. 그러나 앱을 만들고 싶어서 시작한거라 리액트 네이티브가 어떻게 동작하는지 알아보지 않고 사용하였습니다. 그러다보니 이게 어떻게 동작하는지 알아보고자 글을 정리하게 되었습니다. React Native 모바일 앱 개발에서 ‘네이티브’라는 단어는 ‘운영체제를 만들 때 사용하는 프로그래밍 언어와 똑같은 언어로 만든’이라는 의미입..

Front-End 2024.02.17

Virtualize List with react-window

글또 9기로써 첫 글이다. 저번 달부터 갑작스럽게 살고 있는 집이 경매로 넘어가버려서 시작부터 1회차를 패스하였는데, 이제 글을 제대로 써보려고 한다. 올해 5월 회사에서 LCK Korea에서 사용할 웹 사이트를 제작할 때의 일이다. 그 당시 제품의 필터 구조에서 (list)와 (list)가 있었다. 리그(예시: 2023 LCK Summer)를 선택하면 해당 리그의 모든 경기를 의 으로 보여주는 방식이었다. 한 리그를 onClick하면 에서 약 90개 정도의 을 보여주었다. 그때까진 웹에서 크게 부담이 없었고, 무사히 넘어갈 수 있다고 생각했다. 그러나 쉽게 넘어가는 날이 없었다. 고객사 측에서 연락이 왔다. “에 [전체]라는 list item을 추가하고 에는 지금까지 있었던 모든 게임을 보여주세요.” ..

Front-End 2023.12.17