프론트엔드 정복하기

구조 분해 할당(Destructuring Assignment) 구문은 배열이나 객체의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. var foo = ["one", "two", "three"]; var [one, two, three] = foo; console.log(one); // "one" console.log(two); // "two" console.log(three); // "three" 배열 구조 분해 변수에 기본 값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용한다. (객체도 동일) var a, b; [a=5, b=7] = [1]; console.log(a); // 1 console.log(b); // 7 필요하지 않은 반환 값을..

1. clsx 활용 2. 템플릿문자열 활용 www.python2.net/questions-191191.htm javascript - reactjs 질문 - 삼항 연산자를 사용하여 구성 요소에 여러 클래스를 어떻게 적용합니까? 삼항 연산자를 사용하여 구성 요소에 여러 클래스를 적용하고 싶습니다. 일반 버튼 스타일을 포함하는 공유 ts 테마 파일이 있지만 화면 너비에 따라이 특정 구성 요소에 크기를 다르게 표시하 www.python2.net

보호되어 있는 글입니다.

render 함수를 실행하고 나면 그 결과물 안에는 다양한 쿼리 함수들이 있다. 이 쿼리 함수들은 Variant와 Queries의 조합으로 이루어져있다. RTL 공식사이트에서는 다음 우선순위에 따라 사용할 것을 권장한다. getByLabelText getByPlaceholderText getByText getByDisplayValue getByAltText getByTitle getByRole getByTestId ( ** 아래 Queries 리스트 순서대로임) Variant Variant명 기능 getBy getBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리먼트 하나를 선택합니다. 만약에 없으면 에러가 발생합니다. getAllBy getAllBy* 로 시작하는 쿼리는 조건에 일치하는 DOM 엘리..

TDD의 장점 - 무엇을 개발해야하는지, 무엇이 문제인지 명확히 알고 시작할 수 있다. - 문제를 먼저 정의한 뒤 ---->> 문제의 해답을 찾아가는 루트라 할 수 있다. - 완성된 코드가 문제없이 동작하는지 console.log() 등을 통해 알필요 없다. - 코드 변경이 일어난 경우 또다시 console.log() 등을 통해 테스트할 필요 없다. - 아무리 설계를 잘하고, 유연하게 짰다고 해도, 테스트 코드가 없다면 코드 변경을 주저하게 된다. TDD의 핵심 과정 실패 (문제 정의, 테스트 코드를 실제코드보다 먼저 작성) --->> 성공 (문제 해결, 테스트를 통과할 수 있는 최소한의 코드를 작성) --->> 리팩토링 (불필요하고 비효율적인 코드를 개선한다.) 무엇을 테스트해야할까? : 내가 만든 기..

CSS 의 resize 속성은 - 요소의 size가 조정 가능한지의 여부 - 를 결정한다. IE는 지원하지 않는다! div{ resize:none | horizontal | vertical | both | initial | inherit ; } ** resize 속성이 적용되지 않는 요소 ======>>>> inline요소 or overflow:visible인 block요소