객체 간 타입 호환성 (feat. 슈퍼 타입과 서브 타입)type Type1 = { name: string; color: string; phone: number;}type Type2 = { name: string; color: string;}let user1: Type1 = { name: 'Kim', color: 'blue', phone: 1234}let user2: Type2 = { name: 'Lee', color: 'red'}user2 = user1; // 정상user1 = user2; // Error! 여기서 에러가 나는 이유는?타입스크립트의 슈퍼 타입과 서브 타입을 공부하면서 객체끼리 서로 할당이 될 때, 어떤 객체가 슈퍼 타입인지에 대해 공..

Vite로 React 프로젝트 시작하기npm create vite@latest예전에는 React 프로젝트를 시작할 때, 일반적으로 CRA(create-react-app)로 개발환경을 구성했지만 요즘에는 Vite를 많이 사용한다. 시간이 흘러 이제 CRA는 더 이상 권장하지 않는 방법이 되었고, 심지어 CRA로 만든 프로젝트를 Vite로 마이그레이션 하는 추세인 것 같았다. Vite는 CRA에 비해 상대적으로 작은 크기와 빠른 빌드 속도를 가지고 있기 때문에 빠르게 변화하는 개발 생태계에서 Vite가 대세로 자리 잡게 되었다. 어쨌든, Vite를 이용해서 빠르게 개발 환경을 세팅해 주고 이 글의 메인 주제인 ESLint와 Prettier를 세팅해 주겠다. (이 글의 카테고리가 React인 이유는 단순히 내..

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()}는 안 돼?" 이 질문에 나는 "음... 함수 자체를 호출하는 것과 함수의 껍데기를 벗겨서 호출하는 것의 차이아닐까...?"라는 추상적인 답변을 한 적이 있다. 물론, 느낌(?)은 얼추 맞다고 할 수는 있지만 명확한..