🧐 포트폴리오에 깃허브 잔디를 보여주고 싶다면? 개발자 포트폴리오를 만들다 보면 깃허브 잔디, 즉 Contribution Graph를 보여주고 싶을 때가 있습니다. 직접 GitHub API를 호출해서 데이터를 가져올 수도 있지만, 간단히 보여주는 목적이라면 react-github-calendar 라이브러리를 사용하면 편합니다. 이번 글에서는 re...

🧐 this는 왜 헷갈릴까요? JavaScript를 공부하다 보면 this는 꽤 헷갈리는 개념 중 하나입니다. 어떤 코드에서는 this가 객체를 가리키고, 어떤 코드에서는 undefined가 나오기도 합니다. 핵심은 this가 대부분의 경우 함수가 어떻게 호출되었는지에 따라 달라진다는 점입니다. 이번 글에서는 일반 함수의 this와 화살표 함수...

🧐 origin null CORS 에러가 왜 발생할까요? HTML과 JavaScript만으로 간단한 예제를 만들다 보면 파일을 브라우저에서 바로 열어 확인하는 경우가 있습니다. 예를 들어 VS Code에서 HTML 파일을 바로 열거나, 파일을 더블 클릭해서 브라우저로 실행하는 방식입니다. 그런데 JavaScript 모듈을 사용할 때 다음과 같은 ...

🧐 어떤 에러인가요? React에서 input을 다루다 보면 콘솔에 다음과 같은 경고가 나타날 수 있습니다. Warning: `value` prop on `input` should not be null. 프로젝트를 진행하던 중 백엔드에서 받아온 값을 input의 value에 넣었는데, 해당 값이 null로 들어오면서 이 경고를 만났습니다. 화...

🧐 React에서 클릭 이벤트는 어떻게 처리할까요? React에서 사용자와 상호작용할 때 가장 자주 사용하는 이벤트 중 하나가 onClick입니다. 버튼을 클릭했을 때 콘솔을 찍거나, state를 변경하거나, API 요청을 보내는 등 다양한 작업을 할 수 있습니다. 이번 글에서는 onClick의 기본 사용법과 핸들러 함수를 분리하는 방법을 정리해...

🧐 JavaScript에서 날짜는 어떻게 다룰까요? 웹 개발을 하다 보면 날짜와 시간을 다뤄야 하는 경우가 많습니다. 예를 들어 회원가입 일자, 게시글 작성 시간, 디데이 계산, 예약 시간 표시 같은 기능이 모두 날짜와 관련되어 있습니다. JavaScript에서는 이런 날짜와 시간을 Date 객체로 다룰 수 있습니다. 이번 글에서는 Date 객...

🧐 React에서 페이지 이동은 어떻게 할까요? 일반 HTML에서는 <a> 태그를 사용해 다른 페이지로 이동합니다. 하지만 React 앱에서 <a> 태그로 페이지를 이동하면 브라우저가 새로고침되면서 앱의 상태가 초기화될 수 있습니다. React Router를 사용하면 페이지를 새로고침하지 않고 URL에 따라 필요한 컴포넌트만...

🧐 스프레드 연산자는 언제 사용할까요? JavaScript를 작성하다 보면 배열이나 객체를 복사하거나, 기존 값에 새로운 값을 추가해야 하는 경우가 많습니다. 이때 자주 사용하는 문법이 스프레드 연산자입니다. ... 점 세 개로 이루어진 이 문법은 배열, 객체, 문자열처럼 여러 값을 가진 데이터를 펼쳐서 사용할 수 있게 해줍니다. 이번 글에...

🧐 React에서 아이콘은 어떻게 사용할까요? React 프로젝트를 만들다 보면 버튼, 메뉴, 입력창 등에 아이콘이 필요한 경우가 많습니다. 아이콘 이미지를 직접 다운로드해서 관리할 수도 있지만, 매번 파일을 찾고 크기를 맞추는 일이 번거로울 수 있습니다. 이럴 때 편하게 사용할 수 있는 라이브러리가 react-icons입니다. react-ic...

🧐 React에서 반복되는 UI는 어떻게 만들까요? React를 사용할 때 반복되는 UI를 하나하나 직접 작성하는 것은 비효율적입니다. 예를 들어 이름 목록을 <li>로 출력해야 한다면, 배열과 map을 함께 사용하는 편이 훨씬 좋습니다. 이번 글에서는 map으로 HTML 태그를 반복 렌더링하는 방법과, 이때 자주 만나는 key pro...