I'm a Fig, Not a Pig

토이 프로젝트를 시작하면서, Vite를 빌드 툴로 사용하기로 했다. 예전에 Vite가 빠르다고 들어서 사용해보고 싶었는데, 이번에 사용하게 되어 어떤 툴인지 정리해보려 한다.   Vite란?Vite는 프랑스어로 빠르다라는 의미이며 Vue, React, Svelte 등 주요 프론트엔드 라이브러리, 프레임워크 커뮤니티에서 주목하고 있다. 이유가 뭘까? Vite를 사용하는 하는 이유와 등장배경을 알아보자.   Vite를 사용해야 하는 이유?1. JavaScript의 모듈화공식문서에 따르면, ESM(ES Modules)을 지원하기 전까지는 브라우저에서 JavaScript 코드를 모듈로 나눠서 사용하는 게 쉽지 않았다.여기서 모듈이란 간단하게 말해서 코드를 기능별로 나눠서 관리하기 쉽게 만든 작은 단위이다. 예를..

Tailwind CSS에서 기본 스타일(텍스트 색상, 글꼴 등)을 추가하기 위해서는 두 가지 방법이 있다. 첫번째는 index.html 파일에 클래스를 추가하거나   두번째는 @layer 지시문을 이용해서 추가하는 것이다.@tailwind base;@tailwind components;@tailwind utilities;@layer base { h1 { @apply text-2xl; } h2 { @apply text-xl; } /* ... */}   나는 두번째 방법으로 전역 폰트를 적용하기 위해 아래와 같이 코드를 작성했다. 폰트는 Pretendard를 적용했고 CDN을 이용해 Pretendard를 사용할 수 있기 때문에 https://github.com/orioncactus/pr..

매번 검색하는 스크롤바 숨기기.. 이참에 정리해보자! 가로 스크롤이나 세로 스크롤 영역이 생기면 자동으로 스크롤바가 생기게 된다. 스크롤바를 없애려면 스크롤바가 생기는 부분에 브라우저 별로 스크롤바를 없애주는 css를 추가해주면 된다.  아래와 같이 코드를 사용하면 IE, Edge, Firefox, Chrome, Safari, Opera 등의 브라우저에서 스크롤바를 없애도록 대응할 수 있다..no-scroll { -ms-overflow-style: none; /* IE, Edge */ scrollbar-width: none; /* Firefox */}.no-scroll::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */}   참고http..

1. initial 모든 CSS 속성에는 기본값(initial/default value)이 있다. 예를 들면 대부분의 브라우저에서 color 속성의 기본값은 black이다. initial 속성값은 해당 속성을 기본값으로 초기화 시켜준다. 따라서 태그의 중첩이 있을때 부모 요소의 속성을 상속받지 않고 기본값으로 초기화 하고 싶은 경우 사용할 수 있다. 다음 예제를 살펴보자. This is heading This is a paragraph.This is child element! h1 { font-size: 2rem; } p { font-size: 1.5em; } span{ font-size: initial; color: tomato; } body 태그는 자식 요소로 h1 태그와 p 태그를 가진다. p 태그..

목차 1. 고차 함수 2. 콜백 함수 일급 객체란? 일급객체란 일반 객체처럼 모든 연산이 가능한 객체를 뜻한다. 보통 변수에 할당, 다른 함수의 전달인자로 전달, 다른 함수의 결과로 리턴 같은 연산을 지원할 때 일급 객체라고 한다. 또한 JavaScript에서 함수는 일급 객체이다. 일급 객체의 특성은 다음과 같다. 함수의 매개변수로 전달이 가능하다 함수의 반환 값으로 전달할 수 있다 할당 명령문을 통해 값을 할당할 수 있다 동일 비교 대상으로 사용할 수 있다 const firstClassObj1 = { name : 'QQ', age : 20 }; // 1) 함수의 매개변수로 전달 ! function func1 (firstClassObj1) { console.log(`name : ${firstClassO..

목차 1. innerHTML 2. innerText 3. textContent 4. 정리 매번 찾아보는 셋의 차이점.. 텍스트를 읽어오고 설정할 수 있다는 점이 비슷하지만 조금씩 다른 차이가 있어서 이 차이를 아는게 중요하다. 1. innerHTML 먼저 innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML 마크업을 읽어오거나 설정 할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있다. // html 코드와 함께 작성 가능 document.documentElement.innerHTML = "innerHTML" // 스타일 적용 document.documentElement.innerHTML =..

목차 1. Rest Parameter란? 2. Arguments란? 3. Rest Parameter와 Arguments 비교 1. Rest Parameter Rest Parameter 구문을 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다. 이름 그대로 먼저 선언된 매개변수에 할당된 전달인자를 제외한 나머지 전달인자들이 모두 배열에 담겨 할당된다. 따라서 Rest parameter는 반드시 마지막 매개변수여야 한다. 다음은 Rest Parameter를 사용해서 전달된 모든 숫자를 더하는 예제이다. function sum(...numbers) { let total = 0; for (let number of numbers) { total += number; } return total; }..

오늘은 요소의 속성 값을 가져오는 방법인 getAttribute()에 이어 요소의 속성을 설정하는 방법인 setAttribute()에 대해 다룰 것이다. 1. setAttribute() 문법 element.setAttribute(, ); 이 메소드는 두 개의 필수 매개변수가 있다. 하나씩 살펴보자. setAttribute() 매개변수 attributeName: “href”, “type”, “style” 와 같이 속성명을 지정하면 된다. attributeValue: 지정한 속성명에 대한 속성값을 지정하면 된다. 만약 attributeName이 “href” 이면 값은 “https://shinyks.com”, 속성이 “type” 이면 값으로 “text” 등을 넣으면 된다. 2. 예제 Example Div Ad..

목차 1. getAttribute() 문법 2. 예제 3. 정리 오늘은 요소의 속성 값을 가져오는 방법인 .getAttribute()에 대해 다룰 것이다. 1. getAttribute() 문법 element.getAttribute(attributename); 여기서 attributename은 얻고자 하는 속성 값에 해당하는 속성 이름이다. 2. 예제 Example Div 개발자 도구(f12)를 확인해보면 "Example Title"이 출력된 것을 확인할 수 있다. getAttribute() 메소드를 사용하면 버튼 요소의 onclick같은 속성 값도 가져올 수 있다. 다음의 예제는 요소의 onclick 속성 값을 가져와 콘솔창에 출력하는 코드이다. Click Me 3. 정리 getAttribute() 메소..

목차 1. 이벤트 버블링 2. 이벤트 캡처링 3. 이벤트 위임 오늘은 이벤트 버블링, 이벤트 캡처링, 이벤트 위임에 대해 다룰 것이다. 모두 JavaScript에서 이벤트 처리와 관련된 중요한 개념이기 때문에 잘 알아두어야 한다. 1. 이벤트 버블링 (Event Bubbling) 이벤트 버블링은 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 말한다. 간단한 예시를 통해 알아보자. Click me! document.getElementById('inner').addEventListener('click', function() { console.log('Inner clicked'); }); document.getElementById('outer').addEventListener('click', functio..