Tailwind CSS란? Tailwind CSS는 클래스 기반으로 스타일링할 수 있는 CSS 프레임워크이다. 우리가 기존에 CSS를 줄 때 클래스 이름에 대한 스타일을 먼저 CSS 파일 안에 만들어두고, 그다음 클래스 이름을 HTML 요소에 추가하는 방식이었다면, Tailwind CSS는 바로 HTML 요소에 클래스 이름(text-3xl font-bold...)으로 직접 스타일링을 하는 방식이다. 굳이 CSS 파일을 따로 만들지 않고 직접 요소에 줄 수 있다는 점과 클래스 이름을 고민하지 않아도 된다는 점에서 개인적으로 선호하는 스타일링 방식이기도 하다. @tailwind로 Tailwind 불러오기 @tailwind base; @tailwind components; @tailwind utilities;..

CORS 오류가 뭔데요?CORS(Cross-Origin Resource Sharing) 오류는 프론트엔드 개발자라면 흔히 겪는 오류 중 하나로, 브라우저에서 서버로 API를 요청할 때 자주 발생한다. 브라우저는 보안 문제에 매우 민감하기 때문에, 다른 출처(다른 도메인, 프로토콜, 포트)에서 들어오는 요청에 대해 항상 검사를 진행한다. 이를 동일 출처 정책(Same-Origin Policy)이라고 하며, 이 정책은 웹 페이지가 자신이 로드된 출처와 다른 출처로부터 리소스를 요청하는 것을 기본적으로 제한한다. 클라이언트(브라우저)에서 다른 출처로 요청을 보낼 때, 요청을 받은 서버는 응답을 보낼 수 있다. 그러나 응답을 받은 브라우저는 그 응답이 사용해도 되는 것인지 확인하고, 서버가 올바른 CORS 헤더..

클릭 이벤트로 함수 호출하는 건 쉽지 않아? 리액트에서 JSX를 통해 onClick 이벤트로 함수를 호출하는 방법은 매우 간단하고 쉽다. 그냥 주고 싶은 요소에 onClick={Func}를 써주면 된다. 물론, onClick={() => {...}} 처럼 콜백 함수를 사용할 수도 있다. 무척 간단한 방법이라 리액트에서 클릭 이벤트 함수 호출 방식에 대해 딱히 의문점을 가져본 적은 없었다. 하지만, 누군가 나에게 물어봤다. "왜 onClick={Func}는 되는데, onClick={Func()}는 안 돼?" 이 질문에 나는 "음... 함수 자체를 호출하는 것과 함수의 껍데기를 벗겨서 호출하는 것의 차이아닐까...?"라는 추상적인 답변을 한 적이 있다. 물론, 느낌(?)은 얼추 맞다고 할 수는 있지만 명확한..

타입 가드 is를 사용하는 이유 타입 가드의 역할은 변수가 특정 타입인지의 여부를 확인하고, 이를 확실히 한 뒤 해당 타입을 안전하게 사용할 수 있도록 하는 것이다. 주로 is...로 시작하는 함수에서 타입 가드를 많이 사용하며, 이것이 문자열인지, 숫자인지 혹은 배열인지 등의 타입을 명시적으로 하기 위해 사용된다. 예시 코드를 보면서 함께 이해하자. function isNumber(value: any): value is number { return typeof value === 'number'; } function printNumber(value: any) { if (isNumber(value)) { console.log(value + 10); } else { console.log('이것은 숫자가 아닙..

쓰로틀링과 디바운싱이 뭘까?쓰로틀링과 디바운싱, 처음 들어보면 굉장히 낯선 단어일 수밖에 없다. 쓰로틀링과 디바운싱을 모르더라도 우리는 코딩 중에 이러한 개념을 이미 코드에 적용하고 있을 수도 있다. 특히, addEventListener를 사용했다면 말이다. 쓰로틀링과 디바운싱은 이벤트 핸들링에서 이벤트의 빈도를 제어하고, 너무 자주 발생하는 이벤트를 제한하는 목적으로 사용된다. 예를 들어서, 특정 함수를 실행하는 클릭 이벤트를 하나 구현했다고 해보자. 쓰로틀링과 디바운싱을 적용하지 않은 클릭 이벤트는 그냥 클릭할 때마다 특정 함수를 계속 실행하기만 할 것이다. 그런데, 클릭할 때마다 특정 함수를 실행하도록 만든 건데 이게 과연 잘못됐다고 할 수 있을까? (잘못됐다고 할 수 있다.) 만약, 세계에서 클릭..