반응형 2022/089 Flux 패턴 Flux패턴은 MVC모델의 단점을 보완하기 위해 페북에서 만든 새로운 패턴이다. MVC 패턴은 보는것과 같이 양방향이다. 양방향 데이터 흐름은 복잡하지 않은 어플리케이션에서는 문제가 없겠지만, 규모가 큰 어플리케이션에서는 view가 또다른 model을 업데이트 시키고 업데이트 된 model이 view2를 업데이트 시키고... 이렇게 되면 개발자들이 어플리케이션의 패턴을 예측하기가 힘들어진다. 페북에서는 이를 해결하기 위해 단방향 데이터 흐름인 Flux 패턴을 도입했다. 리액트에서 무조건 부모컴포넌트만 자식컴포넌트에게 props를 전달할 수 있는 규칙도 Flux 패턴중 하나이다. Action : 새로 발생한 액션타입과 페이로드를 Dispatcher로 전달 Dispatcher : 액션을 스토어에 전달 Sto.. 2022. 8. 11. Suspense react18에 suspense가 정식기능으로 나왔다. 그런데 if(loading) return 로딩 if(error) return 에러 else return (페이지) 위와 같이 하지 않고 아래와 같이 suspense를 쓰는게 왜 좋은것일까?? {data} 먼저 return을 로딩,에러,데이터 별로 분기하는것이 안좋은 이유는 다음과 같다. (사실 나는 체감으로 느껴보진 못했던 것들이었음..) 1. 기본적으로 데이터 로딩과 UI 랜더링이라는 두 가지 전혀 다른 목표가 하나의 컴포넌트 안에 커플링(coupling)되어 코드가 읽기가 어려워짐 2. 초기 랜더링 후에 데이터 로딩 후 다시 랜더링을 수행하는 방법은 좋은 방법이 아님. (리렌더링은 줄이는게 좋음) 3. 비동기통신을 하면 코드가 순서대로 작동한다는.. 2022. 8. 10. CSS 가상요소 ::before , ::after 때는 바야흐로.. 6.15일..(한달반전) 개인정보 처리방침 | 취소 및 환불 정책 이 화면을 만들기 위해 위와 같이 코드를 작성한 일이 있었다. 코드리뷰로 다음과 같이 코멘트가 달렸다. 요거를 before나 after를 사용해서 구현하는건 어떨까요..? 큰 문제는 아니지만.. 나중에 a태그가 더 추가되면 관리하기 더 편할 것 같아서요! 사실 before, after를 보기만 했지 뭔지도 몰랐고 관심도 없었었다. 이번기회에 알아보았다. CSS 가상요소 가상요소 설명 ::before 요소 내용 앞에 새 컨텐츠 추가 ::after 요소 내용 끝에 새 컨텐츠 추가 ::selection 마우스 드래그로 선택한 텍스트 컨텐츠 영역 선택 ::marker 목록 아이템 앞에 붙는 마커 선택 ::first-letter .. 2022. 8. 2. nth-child() : class 일일이 작성하지 않고도 스타일 지정할 항목 골라서 변경하기 그냥 코드 하나 남긴다. 첫번째 글 두번째 글 세번째 글 네번째 글 다섯번째 글 여섯번째 글 일곱번째 글 여덟번째 글 아홉번째 글 열번째 글 열한번째 글 열두번째 글 .list li:nth-child(5) { background-color: #ffff00; } .list li:nth-child(3n) { background-color: antiquewhite; } .list li:nth-child(5n-1) { background-color: skyblue; } .list li:nth-child(odd) { color: blueviolet; } .list li:nth-child(even) { color: lawngreen; } nth-child(5) : 5번째 요소에 적용 nth-child(3n) : 3.. 2022. 8. 1. 이전 1 2 3 다음 반응형
