normalize와 modern-normalize 차이점normalize.css와 modern-normalize는 모두 브라우저 간의 기본 스타일 차이를 최소화하기 위한 CSS 파일입니다. 1. normalize.css목적 : 모든 브라우저에서 일관된 스타일을 보장하기 위해 브라우저의 기본 스타일을 재설정하는 것을 목표로 합니다.포함된 스타일 : 보다 포괄적으로 다양한 HTML 요소에 대한 기본 스타일을 재설정합니다. 폼 요소, 리스트, 테이블 등 다양한 요소에 대한 스타일이 포함됩니다.유지보수 : 프로젝트가 비교적 오래되었으며, 브라우저 호환성을 위해 자주 업데이트 되지 않지만 여전히 널리 사용됩니다. 2. modern-normalize목적: normalize.css의 최신 버전으로, 최신 브라우저와의..
Language
Angular에서 React로 변경하면서 원본 페이지의 CSS가 새 페이지에 영향을 미치지 않도록 하기 위한 방법이 필요했습니다. CSS Reset (Normalize)CSS Reset은 브라우저마다 다르게 적용되는 기본 스타일을 초기화하여 일관된 스타일을 보장하는 기술입니다. 이를 통해 원본 페이지의 글로벌 스타일이 위젯에 영향을 미치지 않도록 할 수 있습니다. CSS Reset 라이브러리 사용: Normalize.css와 같은 라이브러리를 사용하여 스타일을 초기화합니다.위젯의 최상위 클래스에 CSS Reset 적용: 위젯의 최상위 클래스에 CSS Reset을 적용하여 원본 페이지의 스타일을 무효화합니다./* normalize.css 또는 reset.css 파일을 프로젝트에 추가 */.container..
위 toggle 버튼을 radio 버튼으로 변경해야 해서 커스텀을 해야하는데내가 원하는 모양은 다음과 같았다 아래 코드를 작성해서 커스텀을 시도했지만 결과는 생각처럼 잘나오지 않았다🤔.radio-button { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 14px; font-weight: 400; input[type="radio"] { width: 20px; height: 20px; margin: 0; border: 1px solid #d1d6db; cursor: pointer; } input[type="radio"]:checked { background-color: #3182f6; // 체크 시 ..
Transpiler한 프로그래밍 언어로 작성된 코드를 다른 프로그래밍 언어로 변환하는 도구JavaScript의 ES6 문법을 ES5 문법으로 변환하거나, React의 JSX 및 Typescript 코드를 브라우저가 이해할 수 있는 Javascript로 변환BabelJavascript Transpiler로 최신 ECMAScript 표준을 따르는 코드를 이전 버전의 Javascript로 변환SWCSpeedy Web Compiler의 약자로 Javascript와 Typescript 코드를 변환하고 최적화하는 컴파일러 Transpiler를 사용할 수 있는 부분반복적, 규칙적으로 코드 변경(작성/수정/삭제)이 필요하고누락과 오타 등 휴먼 에러가 빈번하게 발생하며비즈니스 로직을 침범하는 코드들
형변환 Map 새로운 List를 만들어줌 Key 값만 List로 바꾸고, Value 값만 List로 바꾸기가 가능 Set where where를 사용해서 필터링 가능 reduce prev는 맨 처음만 첫번째 값이 들어감 다음 값 부터는 return 값이 들어감 next에는 다음 숫자들이 들어감 reduce의 return 값은 무조건 최초 선언된 멤버들의 타입과 같아야 함 fold reduce의 단점을 보완한 것 아무 형태나 return이 가능하다. 맨 처음 실행 시 fold의 시작 값이 들어가고, next에 처음 값이 들어감 이후에는 prev, next에 각각 return값, 다음 값이 들어감 cascading operator 여러개의 List를 새로운 List 하나로 합칠 때 사용 functional ..