목록reactjs (16)
언젠가는 펼쳐 볼 아카이브
React 테스팅 코드 테스트가 필요한 경우 코드 작성 후, 원하는 대로 동작하는지 알려고 할 때 코드에 버그가 있으면 어떤 상황에서 버그가 발생하는지 확인할 때 코드를 리팩토링 한 후에, 원래대로 동작하는지 테스트할 때 리액트 앱의 컴포넌트가 늘어날 수록 컴포넌트끼리 서로 영향을 미치는 경우가 많아짐 특정 코드가 수정되면, 어떤 컴포넌트에서 에러가 발생할 수 있음 테스팅 코드 작성의 이점 언급한 상황들에 대한 테스팅 코드를 작성하여, 미연의 에러를 방지 TDD(Test Driven Development) 등의 방법론을 적용하여 생산성을 향상함 테스트가 늘어나면서 테스트 코드가 구현 코드에 대한 문서화가 됨 테스트가 용이하게 코드를 작성하여, 코드 품질과 신뢰성을 높임 mocking : 특정 동작을 흉내..
Redux 앱 전체 상태를 쉽게 관리하기 위한 라이브러리 Redux의 많은 개념들이 Flux pattern에서 차용됨 주로 React 앱과 같이 사용함 Redux를 언제 써야하나? 앱 전체의 상태 관리가 필요할 때 복잡한 비동기 처리가 있는 상태 관리가 필요할 때 앱의 상태가 복잡하고, 이를 체계적으로 관리하고 싶을 때 상태 관리 패턴을 도입하여, 여러 개발자와 협업하고 싶을 때 logger, devtool 등을 활용하여 상태를 관리할 필요하 있을 때 Redux의 핵심 원칙 Single source of truth : Store는 단 하나이고, 모든 앱의 상태는 이곳에 보관됨 Immutability : 상태는 오로지 읽을 수만 있고, 변경하려면 모든 상태가 변경되어야 함 Pure function : 상태..
상태관리 상태 관리 기술이란 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함 MPA에서의 상태관리 SPA에서의 상태관리 - 서버의 데이터를 이용해 페이지를 렌더링하므로, 클라이언트의 데이터와 서버의 데이터가 큰 차이를 가지고 있지 않음 - 자체적으로 데이터를 갖고, 서버와의 동기화가 필요한 데이터만을 처리함 - 그 외의 데이터는 client만의 데이터로 유지 상태 관리 기술의 도입 상태가 많지 않거나, 유저와의 인터렉션이 많지 않다면 매 작업 시 서버와 동기화하더라도 충분함 앱이 사용하는 데이터가 점점 많아지고, 유저와의 인터렉션 시 임시로 저장하는 데이터가 많아지는 경우 상..
MPA(Multi Page Application)란? 서버에 미리 여러페이지를 두고 유저가 네비게이션 요청 시 적합한 페이지를 전달하는 방식 미리 서버에서 전체 페이지를 빌드해 브라우저로 전송됨 서버에 라우팅을 처리하는 기능이 있고, 서버가 여러 페이지를 관리함 페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지간 데이터를 재활용하기 힘듦 SPA(Single Page Application)란? 하나의 페이지 요청으로 전체 웹 앱을 사용하는 방식 Client-side routing 기술을 활용해, 페이지 진입 시 리로드 없이 라우팅 함 AJAX 기술을 활용, 페이지 이동 시 서버에 데이터만 요청하여 자바스크립트로 페이지를 만듦 MPA와는 다르게 여러 페이지를 하나의 앱의 구성요소로 보고 여러 페이지 간..