Styled-components란? Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리 기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고 태그나 id, class이름으로 가져와 쓰지 않고 컴포넌트 이름을 쓰듯 스타일을 지정하는 방식 css 파일을 밖에 두지 않고 컴포넌트 내부에 넣기 때문에 css가 전역으로 중첩되지 않도록 만들어주는 장점이 있음 Styled 컴포넌트를 만들어 전달받은 props를 이용해 선택적으로 css를 사용할 수 있음 글 작성 이유 className에 대한 고민이나, BEM 사용법이 맞는지 등.. 고민을 안 하게 되어서 좋았지만 styled-component의 이름을 어..

useRef로 특정 DOM 선택 자바스크립트에서 특정 DOM을 선택해야 하는 경우, getElementById, querySelector과 같은 DOM selector 함수를 사용했다. 리액트를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 상황이 있다. 특정 input에 포커스 주기 특정 엘리먼트 크기 가져오기 스크롤바 위치 가져오거나 설정 Canvas 요소에 그리 그리기 등 이러한 경우에 DOM에 직접적으로 접근하기 위해 ref를 사용한다. 더보기 서로 다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용한다면 이는 잘못 사용된 것이다. 사용은 가능하지만 리액트 사상에 어긋난 설계이다. 컴포넌트끼리 데이터를 교류할 때는 언제나 데이터를 부모 ↔ 자식 흐름으로 교류해야 한다. 이러한 ref를 함수 ..

고차 함수 함수를 호출할 때마다 반환 함수를 생성하는 함수를 고차함수라고 한다. 고차함수를 이용하면 코드의 중복을 제거하는 것이 용이하다. const func = () => { return () => { console.log('hello'); }; }; 반환된 함수는 다른 변수에 저장할 수 있고, 그 변수에 저장된 함수를 다시 호출할 수 있다. const innerFunc = func(); innerFunc(); // hello 반환하는 값을 바꾸고 싶을 때는 매개변수를 사용한다. const func = (msg) => { return () => { console.log(msg); }; }; 화살표 함수 문법에 따라 함수의 본문에서 바로 반환되는 값이 있으면 {와 return을 생략할 수 있다. cons..

querySelector 자바스크립트에서는 HTML 태그를 가져오는 것을 선택한다고 표현한다. querySelector는 선택하기 위해 사용하는 함수이고, 사용 방법은 다음과 같다. document.querySelector('선택자') 선택자는 HTML 태그를 선택할 수 있게 도와주는 문자열을 의미한다. 태그가 여러 개 있는 경우에 모두 선택하고 싶을 경우 querySelectorAll 함수를 사용한다. 1번째 참가자 제시어: 입력 버튼2 버튼3 버튼이 세 개 이므로 콘솔 창에 세 개의 태그가 동시에 표시된다. 여러 개를 한 번에 표시하려고 배열을 사용한 것처럼 보이지만, 실제로는 배열이 아니라 NodeList라는 특수한 객체이다. 세 개의 버튼 중 두 번째와 세 번째 버튼을 동시에 선택하고 싶을 경우 ..

Auto-wiring (의존 관계 자동 설정) 개념 Dependency Injection을 명시적으로 설정하지 않아도 container가 bean의 타입이나 이름을 이용하여 DI를 자동으로 수행하는 기능 XML 설정 방법 엘리먼트에 autowire 속성을 이용하여 자동 설정 방식 지정 모든 bean 객체들에 대해 특정 방식을 적용하려면 엘리먼트에 default-autowire 속성 이용 autowire 값 의미 no (default) auto-wiring을 수행하지 않음 byName property와 같은 이름 또는 id 값을 갖는 bean을 찾아 주입 (setter-based injection) byType property와 같은 타입을 갖는 bean을 찾아 주입 (setter-based injecti..