목록전체 글 (144)
언젠가는 펼쳐 볼 아카이브
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의 학습 및 훈련이 필요한 초심..
성능 측정 키 매트릭 웹 퍼포먼스 웹 페이지가 로드되고 유저와 상호작용하는 모든 것들을 측정함 성능을 측정하여 웹 앱의 사용성을 개선할 수 있음 열악한 네트워크 환경에서도 사용 가능한 앱을 만드는 등, 좋은 유저 경험으로 유저의 만족을 얻음 Time To First Byte 페이지 요청 후, 처음 데이터가 도착하기까지 걸리는 시간 브라우저의 요청이 서버까지 가는 시간 서버에서 요청을 처리하는 시간 서버에서 브라우저까지 응답이 가는 시간 요청을 받았을 때, 서버에서 처리하는 시간이 오래 걸리거나, 네트워크가 딜레이 되는 등의 상황이 발생할 경우 지표가 악화됨 First Contentful Paint (FCP) 페이지에 진입하고부터, 브라우저가 어떤 DOM content를 만들때까지 걸리는 시간 브라우저의 ..
React 테스팅 코드 테스트가 필요한 경우 코드 작성 후, 원하는 대로 동작하는지 알려고 할 때 코드에 버그가 있으면 어떤 상황에서 버그가 발생하는지 확인할 때 코드를 리팩토링 한 후에, 원래대로 동작하는지 테스트할 때 리액트 앱의 컴포넌트가 늘어날 수록 컴포넌트끼리 서로 영향을 미치는 경우가 많아짐 특정 코드가 수정되면, 어떤 컴포넌트에서 에러가 발생할 수 있음 테스팅 코드 작성의 이점 언급한 상황들에 대한 테스팅 코드를 작성하여, 미연의 에러를 방지 TDD(Test Driven Development) 등의 방법론을 적용하여 생산성을 향상함 테스트가 늘어나면서 테스트 코드가 구현 코드에 대한 문서화가 됨 테스트가 용이하게 코드를 작성하여, 코드 품질과 신뢰성을 높임 mocking : 특정 동작을 흉내..
Redux 앱 전체 상태를 쉽게 관리하기 위한 라이브러리 Redux의 많은 개념들이 Flux pattern에서 차용됨 주로 React 앱과 같이 사용함 Redux를 언제 써야하나? 앱 전체의 상태 관리가 필요할 때 복잡한 비동기 처리가 있는 상태 관리가 필요할 때 앱의 상태가 복잡하고, 이를 체계적으로 관리하고 싶을 때 상태 관리 패턴을 도입하여, 여러 개발자와 협업하고 싶을 때 logger, devtool 등을 활용하여 상태를 관리할 필요하 있을 때 Redux의 핵심 원칙 Single source of truth : Store는 단 하나이고, 모든 앱의 상태는 이곳에 보관됨 Immutability : 상태는 오로지 읽을 수만 있고, 변경하려면 모든 상태가 변경되어야 함 Pure function : 상태..