언젠가는 펼쳐 볼 아카이브

React styling React + styling 도구 CSS module css, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없음 스타일 충돌을 방지하고 코드를 격려하여 체계적으로 CSS 설계가 가능함 스타일링을 직접 하나하나 해야함 CSS in JS 따로 CSS 파일을 만들 것 없이 JSX 파일 안에서 스타일링까지 해결 가능함 JS 값들을 props로 넘겨줘서 해당 JS 값에 의도된 styling을 바로 적용할 수 있음 class 이름에 random string이 생성되기 때문에 선택자 이름이 겹칠 우려가 없음 ex)styled components UI framework 이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋음 styling의 학습 및 훈련이 필요한 초심..

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만의 데이터로 유지 상태 관리 기술의 도입 상태가 많지 않거나, 유저와의 인터렉션이 많지 않다면 매 작업 시 서버와 동기화하더라도 충분함 앱이 사용하는 데이터가 점점 많아지고, 유저와의 인터렉션 시 임시로 저장하는 데이터가 많아지는 경우 상..