피리부는 사나이 (pied piper)

* { margin: 0; font-family: 'Noto Sans KR', sans-serif; box-sizing: border-box; } html { font-family: 'Noto Sans KR', sans-serif; // html에 본문 폰트 사이즈에 패밀리를 보통 준다. } body { font-family: 'Noto Sans KR', sans-serif; } h1 { margin: 0; } a { color: inherit; // anchor에 속해있는 것의 값을 상속받겠다는 이야기 // ex) p태그 (파란색) 안에 감싸져있으면 a도 파란색 text-decoration: none; } button, input, textarea, select { background-color: tr..

SVG 파일을 사용하는 대표적인 방식이 두 가지가 있다 1. 이미지 태그 'src' 속성에 넣어서 사용하기 2. css의 background-image에 넣어서 사용하는 방법 이 두 가지는 일반적으로 사용하는 방식이다. 그러나 이 두 가지 방법보다 더 유용하고 활용성이 좋은 방식이 있다. svg파일이 위대한 이유 => svg 코드를 그대로 복붙해서 태그처럼 사용할 수가 있다! **좋은점? svg 태그에 그대로 'attribute'값을 적용할 수 있다 ex) fill 속성을 이용해서 currentColor값을 적용해서 부모의 Color를 상속시키거나, aria-label을 그대로 부여할 수 있음 But, 항상 좋은 점만 있는 것이 아니다. 코드가 매우 길다는 것이다. 이 문제는 리액트에서는 1줄의 코드로 ..

useRef : 순수 자바스크립트 객체를 생성한다 값의 접근은 refContainer.current로 할 수 있다. const refContainer = useRef(initialValue); useRef를 사용해야하는 상황 렌더링 상관없이 값을 변경해야할 때 컴포넌트 태그에 직접 접근해야할 때 리액트에선 useRef를 사용한다. (바닐라 js에서는 querySelector or getElementById) 결국에는 useRef는 렌더링 없이 접근한 태그 요소의 값을 바꿀 때 사용하는 것 (data, state 상관없이 component에 DOM을 제어하고 싶을 때 ref를 사용) 단 Ref는 남발하지 않는 것이 좋다 ref 없이 구현할 수 있는지 고려 후 사용하는 것이 중요 재사용면에서 Ref는 전역..

한 번에 수많은 데이터가 존재한다면, 같은 코드를 단순하게 반복하여 작성할 수 있다. 하지만 매우 비효율적이다. 이때 map 함수를 이용하면 효율적으로 데이터 결과를 나타낸 컴포넌트 리스트를 만들 수 있다. map() 메서드는 리스트 내 모든 요소 각각에 대하여 함수를 호출한 결과를 모아 새로운 배열을 반환한다. [리스트].map((i) => {return 로직} function App() { return ; } function Hello(props) { const name = props.name; const num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; //1~10호를 만들 것입니다. // list map을 이용하여 h1 태그들의 리스트를 만듭니다. const numCompone..

#그리드 시스템의 개념 1. container : 그리드 시스템이 전체 적용되는 범위 2. column : 한 칸을 한 컬럼이라고 이야기함 3. gutter : 컬럼 양쪽에 여백을 주는 것 #부트스트랩 사용법 부트스트랩 그리드 기본 문법 (항상 row는 넣어줘야함, 한 줄을 뜻함) Contianer부터 Col까지 내려가는 자식은 반드시 지켜줘야하는 부트스트랩 문법 예시) 그런데 왜 아래로 떨어지는가? 1줄의 col의 최대값은 12인데 1 + 12 = 13이니까 col 12를 넘어서는 순간 자동으로 떨어짐 + 각각의 브레이크마다 컬럼을 달리줄 수 있다. 클래스를 주면 된다. col-12, col-sm-6, col-md-4 (... 더 큰 사이즈도 가능 lg, xl) => 모바일 사이즈일때는 col-12 =..

이벤트 핸들러 : 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수. 1. 이벤트 핸들러 어트리뷰트 방식 : HTML 요소의 어트리뷰트 중에 이벤트에 대응하는 핸들러 어트리뷰트 값으로 함수 호출문 등의 statement를 할당하면 핸들러 등록 됨 CLick me! 하지만 HTML과 JS는 관심사가 다르므로 혼재하는 것보다 분리하는 것이 좋음. 그러므로 이 1번 방식은 사용하지 않는 것이 더 좋음 2.이벤트 핸들러 프로퍼티 방식 : window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 핸들러 프로퍼티를 가지고 있음. 프로퍼티에 함수를 바인딩하면 이벤트 핸들러 등록 됨 const $button = document.querySelector('button');..

자바스크립트 언어내에서 비동기를 가능케하는 대표적 3가지 방법 콜백 : 자바스크립트에서는 함수의 인자 값으로 함수를 이용할 수 있다. 인자를 통해서 바깥에 있는 함수를 내부에서 실행시키는 것이다. 그러므로 콜백이라는 것은 다른 함수에 불러오는 함수다. 그리고 그것은 두 번째 함수를 실행 시킬 것이다. 콜백함수의 예시를 보자 function printString(){ console.log("Tom"); setTimeout(function() { console.log("Jacob"); }, 300); console.log("Mark") } printString(); 만약 이 코드가 일반적으로 동기적 코드라면 아래 순서대로 나와야할 것이다 Tom => Jacob => Mark (동기적 순서) 그러나 setTi..