class vs function 리액트에서 컴포넌트를 만드는 두 가지 방법 class 스타일 function 스타일 class 리액트의 기능을 100% 활용할 수 있다. 문법알아야 한다. function 간편하다. 기능이 부족했다. 컴포넌트 내부의 state 를 만들어 사용하는 것을 할 수 없었다. 컴포넌트의 생성, 변경, 소멸에 대한 이벤트인 라이프사이클 API를 사용할 수 없었다. 하지만 hook 개념이 도입되면서, 위의 부족한 것을 할 수 있게돼었다. shouldComponentUpdate shouldComponentUpdate 컴포넌트의 render 함수가 실행돼야 하는지, 실행되지 않아야 하는지를 결정할 수 있게 해주는 함수 render 는 비용이 많이든다. props, state 의 변경에 따라 호출된다. render 이전에 shouldComponentUpdate 실행된다. shouldComponentUpdate 의 반환값이 true 이면 render가 호출되고, false 이면 render가 호출되지 않는다. shouldComponentUpdate 를 통해 새롭게 바뀐 값과 이전 값에 접근할 수 있다. newProps 로 새롭게 바뀐 값 접근 this.props 를 통해 현재 값 접근 shouldComponentUpdatE(newProps, newState) { return fals.. push & concat 배열에 데이터를 추가하는 방법 push 원본 배열의 값이 변경된다. concat 원본은 그대로지만 원본을 변경한 새로운 배열이 반환된다. 불변성(immutable) 를 유지할 수 있다. push 보다는 concat 을 사용하자!! 불변성을 지키기 위한 방법 immutable.js https://immutable-js.com/ Immutable.js Immutable collections for JavaScript Read the docs and eat your vegetables. Docs are automatically generated from README.md and immutable.d.ts. Please contribute! Also, don't miss the wiki which contain.. props & state props read only 컴포넌트 안에서 외부에서 전달된 props의 값을 바꾸는 것은 금지돼 있다. state 수정 할 때는 setState로 바꾼다. state 가 바뀌면 다시 랜더링된다. 참고 https://velog.io/@jeromecheon?tag=React 2. 웹 최적화 웹 최적화란? 최고의 웹 성능을 만드는 최적화 조건을 갖추는 것 프론트엔드 최적화 스크립트를 병합하여 브라우저의 호출 개수를 줄임 스크립트 크기를 최소화해 바이트 자체를 줄임 스크립트를 gzip 등으로 압축하여 전달 WebP 등으로 브라우저 이미지 형식을 최적화 이미지 손실, 무손실 압축 Cache-Control 응답 헤더를 통해 브라우저 캐시를 충실히 사용 도메인 수를 줄여 DNS 조회를 최소화 DNS 정보 미리 읽어오기 CSS를 HTML 상단에, 자바스크립트를 HTML의 하단에 위치시키기 페이지 미리 읽어오기 타사 스크립트가 웹 성능을 방해하지 않도록 조정 백엔드 최적화 DNS 응답이 빨라지도록 서버 증설 DNS 응답을 빠르게 할 수 있도록 DNS 정보를 최대한 캐싱 웹 서버가 있는 데이터 센터와 네.. 04. 부자연스러움을 해결하는 도메인 서비스 서비스란? 소프트웨어 개발에서 말하는 서비스는 클라이언트를 위해 무언가를 해주는 객체를 말한다. 도메인 주도 설계에서 말하는 서비스 도메인을 위한 서비스 애플리케이션을 위한 서비스 도메인 서비스란? 시스템에는 값 객체나 엔티티로 구현하기 어색한 행동도 있다. 도메인 서비스는 이런 어색함을 해결해주는 객체다. 도메인 서비스는 자신의 행동을 바꿀 수 있는 인스턴스만의 값을 갖지 않는다는 점에서 값 객체나 엔티티와 다르다 도메인 서비스의 사용 생각 없이 모든 처리 코드를 도메인 서비스로 옮기면 다른 도메인 객체는 그저 데이터를 저장할 뿐, 별다른 정보를 제공할 수 없는 객체가 되는 결과는 낳는다. 물론 도메인 서비스로 옮기지 않으면 어색한 행위도 있다. 어떤 행위를 값 객체나 엔티티에 구현할지 아니면 도메인 .. 03. 코드 구성하기 계층으로 구성하기 soon |-- domain ||-- Account ||-- Activity ||-- AccountService ||-- AccountRepository |-- persistence ||-- AccountRepositoryImpl |-- web ||-- AccountController 이 패키지 구조는 최적의 구조가 아니다. 애플리케이션의 기능 조각이나 특성을 구분 짓는 패키지 경계가 없다. 애플리케이션이 어떤 유스케이스들을 제공하는지 파악할 수 없다. 패키지 구조를 통해서는 우리가 목표로 하는 아키텍처를 파악할 수 없다. 기능으로 구성하기 soon |-- account ||-- Account ||-- AccountController ||-- AccountRepository ||-- A.. 03.생애주기를 갖는 객체 - 엔티티 엔티티란 ? 엔티티 : 도메인 모델을 구현한 도메인 객체를 의미한다. 값 객체 : 도메인 모델을 구현한 도메인 객체 엔티티와 값 객체의 차이는 동일성을 통해 식별이 가능한지 아닌지에 있다. 속성으로 구별되지 않는 객체 예 : 사용자 사용자는 속성이 아닌 동일성(identity)으로 식별된다. 엔티티의 성질 엔티티는 속성이 아닌 동일성으로 식별되는 객체다. 가변이다. 속성이 같아도 구분할 수 있다. 통일성을 통해 구별된다. 가변이다. 엔티티는 가변성을 갖는 객체다. 값 객체는 불변성을 갖기 때문에 교환(대입)해 수정했지만, 엔티티는 수정을 위해 객체를 교환하지 않는다. 엔티티의 속성을 수정하려면 객체의 행동을 통해 수정하면 된다. 단, 모든 속성이 반드시 가변일 필요는 없다. 속성이 같아도 구분할 수 있다.. 이전 1 2 3 4 ··· 8 다음
