web/react6 CSS Specificity (CSS 명시성) CSS Specificity (명시성)클래스네임 선언 순서가 명시성을 보장하지 않는 경우가 있습니다. 이는 CSS의 기본적인 규칙과 React에서의 클래스네임 병합 방식 때문입니다. CSS의 우선순위는 주로 명시성(specificity), 선언 순서(order of appearance), 그리고 !important 규칙에 의해 결정됩니다. 그러나, 클래스네임 선언 순서만으로는 명시성을 보장할 수 없는 상황들이 있습니다. 그 이유는 다음과 같습니다:1. 명시성(Specificity)의 기본 규칙CSS 명시성은 선택자의 유형에 따라 점수가 매겨집니다:인라인 스타일: 1000점ID 선택자: 100점클래스, 속성, 의사 클래스 선택자: 10점태그, 의사 요소 선택자: 1점명시성이 높은 선택자가 우선순위를 갖습니.. 2024. 11. 8. 번들러 & NextJS turbopack에서 SVGR 세팅 번들러여러 개의 파일을 하나의 파일이나 몇 개의 파일로 묶어주는 도구. 이 과정을 번들링이라고 하고 웹 애플리케이션의 성능을 최적화하기 위해 사용합니다. (Webpack, Turbopack, Rollup)파일 결합: 여러 개의 모듈이나 파일을 하나로 결합하여 브라우저가 불러올 파일 수를 줄입니다.의존성 처리: 파일 간의 의존성을 파악하고, 적절한 순서로 번들에 포함합니다.코드 최적화: 코드 압축, 중복 제거, 코드 분할, 트리 쉐이킹 등을 통해 성능을 향상합니다.다양한 파일 형식 처리: CSS, 이미지, 폰트 파일 등 다양한 리소스를 처리한다.개발 편의성: 핫 리로딩, 트랜스파일링(Babel 사용)등을 통해 개발 환경 편의성을 제공합니다.Webpack loaderWebpack은 기본적으로 js와 json.. 2024. 11. 7. [React] VAC Pattern을 적용해 관심사 분리하기 VAC(View Asset Component) Pattern View Logic과 렌더링을 분리하여 개발하는 설계 방식 const SpinBox = () => { const [value, setValue] = useState(0); return ( setValue(value - 1)}>- {value} setValue(value + 1)}>+ ); }; VAC props를 통해서만 제어 되고 스스로 상태를 관리 하지 않는 Stateless component // VAC const SpinBoxView = ({ value, onIncrease, onDecrease }) => ( - {value} + ); // View Component const SpinBox = () => { const [value, s.. 2023. 12. 5. [React/함수형 컴포넌트] props가 undefined인 경우 default value로 인한 useEffect 무한 루프 (state update와 rendering) Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. 일단 제목과 같은 문제가 발생하게 된 경위부터 이야기해보겠습니다. Parent component에서 비동기적으로 서버에서 데이터를 조회하고 child component에 props로 전달합니다. child component 최초 렌더링 시에 에러를 방지하기 위해 props에 default value를 할당합니다. 그리고 props가.. 2021. 9. 16. [React] SPA, Routing, React-router, History, Hooks SPA(Single Page Application) SPA는 단어 그대로 한 개의 페이지로 이루어진 애플리케이션을 의미합니다. SPA 이전의 애플리케이션은 페이지 전환이 발생할 때마다 서버에 해당 페이지를 요청하는 SSR(Server-side Rendering)방식을 사용했습니다. 이러한 방식은 페이지가 다시 렌더링 될 때까지 사용자가 빈 화면을 보며 대기해야 하므로 사용자 경험에도 좋지 않을 뿐더러 변하지 않는 Header나 Footer도 다시 렌더링하기 때문에 비효율적입니다. SPA는 페이지 전환이 일어날 때마다 서버에 요청을 보내지 않습니다. 대신, 최초로 애플리케이션을 로드하는 시점에 모든 정적 리소스를 받습니다. 이후 사용자 요청에 따라 필요한 데이터만 서버에 요청하고 동적으로 페이지를 변경합니.. 2021. 6. 16. [React/Ant design] Ant design form validation - 회원 가입, 로그인 폼 검증하기 (Form instance/ validator) Ant design validator와 form instance로 form validation하기 : 회원 가입, 로그인 폼 만들고 값 검증하기. Ant Design은 버전 4를 사용해야 합니다. Ant design은 Form 컴포넌트의 Item에 대하여 validation 기능을 제공하고 있습니다. Antd가 제공하는 Rule 필드를 통해 기본적으로 type, required, min length, max length, 정규식 검증이 가능합니다. 필요하다면 custom validation도 가능합니다. 각 필드에 대한 유효성 검증을 위해 pattern을 사용했습니다. 그런데 검증 결과에 대한 부정을 할 수 가 없어서 공백 검증이 안됐습니다. 정규식.test(값) 이렇게 해서 false 면 메세지를 보여.. 2021. 3. 19. 이전 1 다음
