Web + APP 썸네일형 리스트형 [리액트 스터디] - Choosing the State Structure State를 얼마나 잘 구조화 하는가가 리액트 숙련도를 좌지우지함State 구조화 원칙state를 만들 때 더 나은 선택을 할 수 있는 선택지들이 있음 1. 연관된 state 그룹화하기 => 단일 state로 변수를 하나로 합치도록 병합하기2. state의 모순 피하기 => 여러 state가 모순되면 제거하기3. 불필요한 state 피하기 => props나 기존의 state 변수로 일부 정보를 계산할 수 있으면, 제외하기4. state의 중복 피하기 => 동기화 유지가 어려우니 중복을 없애자5. 깊게 중첩된 state 피하기 => 업데이트가 쉽지 않으니, 평탄화를 하자 결국 최종 목표는 오류 없이 상태를 쉽게 업데이트 하는 것임 아이슈타인이 아래와 같은 말을 했다.당신의 state를 가능한 단순하게 만들.. 더보기 [리액트 스터디] - Reacting to Input with State 리액트는 UI를 직접 조작하는거 대신 State를 따라서 UI를 변경하게 된다.선언형 UI와 명령형 UI 비교명령형 프로그래밍이 뭘까 ? 예시를 사용자가 폼을 제출한다고 했을 때로 하나 들어보자 - 폼에 무언가를 입력하면 "제출" 버튼이 활성화될 것- "제출" 버튼을 누르면 폼과 버튼이 비활성화되고 스피너가 나탈 것- 네트워킹 요청이 성공하면 폼은 숨겨질 것이고, "감사합니다." 메시지가 나타날 것- 네트워크 요청이 실패하면 오류 메시지가 보일 것이고 폼은 다시 활성화될 것 위 요청대로 개발을 하면 명령형 프로그래밍임 정확한 지침에 따라 코드를 자겅해야 JS가 정상적인 동작을 하게 되는 구조 UI가 복잡해질수록 구현 난이도가 어려워짐 그러니 UI 조작은 리액트에게 맡기고, 무엇을 보여주고 싶은지만 선언.. 더보기 [리액트 스터디] - Updating Arrays in State 배열 JS에서는 변경 가능하지만, state로 저장할 때에는 변경할 수 없도록 처리해야함. 객체랑 마찬가지로, state에 저장된 배열을 업데이트하고 싶을 땐, 새 배열을 생성한 뒤 이를 이용하여 업데이트해야함. 학습내용- React state에서 배열의 항목을 추가, 삭제 또는 변경하는 방법- 배열 내부의 객체를 업데이트하는 방법- Immer로 덜 반복해서 배열을 복사하는 방법변경하지 않고 배열 업데이트하기JS에서 배열은 객체의 다른 종류임. 객체처럼 React state에서는 배열도 읽기 전용이 되어야함. 재할당 이런거 하지마셈 (arr[0] = 'test' / push() / pop()) 왜 state 변경 권장하지 않을까 ?1. 디버깅 힘듦, 렌더링 사이에 state가 어떻게 바뀌었는지 명확하게.. 더보기 [리액트 스터디] - Queueing a Series of State Updates state 변수를 설정하면 큐에 다음 렌더링이 들어간다고 했음. 근데, 다음 렌더링을 큐에 넣기 전에 그 값을 가지고 다른 수행도 하고 싶을 때가 있을거 같은데,,,, 이 시점을 어떻게 조절할 수 있을까 ? React state batches 업데이트 react.dev - CodeSandboxreact.dev using react, react-dom, react-scriptscodesandbox.io 이 전 장에서 한 번에 3씩 증가하는게 아닌 1씩 증가하는 것으로 알 수 있었다. state의 값은 그 시점의 값으로 고정되어 있기 때문이라 했는데, 한 가지 더 알아둬야 할 점이 있다. React는 state 업데이트 하기 전 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다. 어떤 손님이 "양념 .. 더보기 [리액트 스터디] - State as a Snapshot State읽고 쓴다는 점에서 JS 변수와 유사해보이지만, state를 이용하면 리렌더링을 발생시킬 수 있다. State 설정하면 렌더링이 동작사용자 이벤트가 UI가 바뀐다고 생각할 수 있는데, React의 개념에서는 state가 UI를 바꾸는거임. 즉, event => state 변경 => 리렌더링 개념 react.dev - CodeSandboxreact.dev using react, react-dom, react-scriptscodesandbox.io 위 예시에서 "Send"를 누르게되면 ? 1. onSubmit 실행2. setIsSend(true)가 실행됨. isSent를 true로 설정하고, 새로운 렌더링을 큐에 넣음3. React가 윙 돌면서 컴포넌트를 다시 렌더링 렌더링은 그 시점에 스냅샵을.. 더보기 Angular Hydration Angular는 예전부터 SSR과 Hydration에 대해 지속적인 관심을 가져왔다. 공식 문서에서도 크롬 오로라 팀이랑 협업해서 어떻게든 성능 올리려고 노력했다고 한다. 그렇다면 Hydration이 무엇일까 ? Hydration이란 서버단에서 정적으로 DOM 구조를 넘겨주면, 그걸 받아서 동적인 event를 붙여넣는거라고 하더라. Why is hydration important ? hydration은 DOM 구조를 재생성하지 않는다는 점에서 app 성능을 향상시킬 수 있다. hydration 없이도 SSR이 가능하긴 하지만, app의 DOM을 re-render해야한다. 그렇게 되면, 우리가 app 만들 때, "깜빡" 하는 이슈가 발생하게 되는 것이다. (UI flicker라고 한다) hydration은.. 더보기 Angualr v16 - signal Angular v16가 release가 됐다. 사실 된 지 오래됨 ㅋ 이제서야 부랴부랴 좀 영상 좀 챙겨보는데, 재밌는 기능이 나와서 이거 좀 풀어보려고 한다. Angular에서 Change Detection을 zone JS에 의존하고 있었다. Change Detection 앱 내의 상태가 변화할 때, 브라우저 안 UI를 Angular가 변화시키는 개념 zone JS Angular에게 변화 생겼다고 말해주는 중간 띄기 사업자 몽키패치하여 비동기 변화를 감지한다. 몽키패치 원래 있던 기능에 자기가 원하는 코드 삽입하는 행위 근데, 솔삐 중간 중개업자한테 굳이 수수료 떼면서 동작을 해야하나 싶었는데, Angular 팀에서도 이걸 알았는지, 이제 signal 이라는 기능을 만들었다. 지들도 적합한 솔루션이 아.. 더보기 providers와 viewProviders의 차이 / content child와 view child 안녕하세요. 꼬동입니다. 일을 하다, 모듈 서비스를 Dependency Injection으로 꽂았는데, NullInjectorError가 뜨더라고요 ? 아뿔싸 providers 명시를 안했더라고요 ㅎㅎ 그래서 Service 꽂으려고 하는데 읭 ? viewProviders와 providers 두 방식으로 꽂을 수 있더라고요 엄.. 선택지가 많아지면, 공황이 오는 성격상 둘을 명확하게 알고 가는게 좋을거 같아서 키보드를 잡아봅니다. 사실 간단합니다. viewProviders로 인해 꽂힌 Service를 자식들이 사용하려고 하면, 사용이 안되며, provider로 꽂힌 Service는 자식들이 사용하려하면, 제공해주는 방식입니다. 위의 그림에서도 이를 설명하고 있는데, SimpleService가 Provide.. 더보기 이전 1 2 3 4 ··· 8 다음
