들어가며 JavaScript의 기본 Date 객체만으로 날짜를 다루다 보면 포맷 변경이나 날짜 계산이 번거롭게 느껴질 때가 있습니다. 이럴 때 날짜 라이브러리를 사용하면 원하는 형식으로 날짜를 보여주거나, 특정 날짜를 더하고 빼는 작업을 쉽게 처리할 수 있습니다. 이번 글에서는 moment의 기본 사용법을 정리해볼게요. 설치하기 npm i...

Scroll Snap이란? Scroll Snap은 사용자가 스크롤했을 때 특정 요소 위치에 스크롤이 자연스럽게 맞춰지도록 하는 CSS 기능입니다. 예를 들어 상품 카드나 섹션이 하나씩 딱 맞춰 보이게 만들 때 사용할 수 있습니다. JavaScript 없이 CSS만으로 구현할 수 있어서 간단한 스냅 UI에는 매우 유용합니다. 기본 구조 Sc...

들어가며 서비스를 만들다 보면 로그인한 사용자만 접근할 수 있는 페이지가 필요합니다. 예를 들어 마이페이지, 결제 페이지, 관리자 페이지 같은 화면입니다. 로그인하지 않은 사용자가 이런 페이지에 접근하면 로그인 페이지로 이동시키는 처리가 필요합니다. PrivateRoute 만들기 React Router에서는 조건에 따라 Navigate를 ...

들어가며 무한 스크롤이나 등장 애니메이션을 만들 때는 특정 요소가 화면에 들어왔는지 감지해야 합니다. 브라우저에는 Intersection Observer API가 있지만, React에서 더 편하게 쓰고 싶다면 react-intersection-observer 라이브러리를 사용할 수 있습니다. 이번 글에서는 useInView를 사용해 요소 감지와 ...

발생한 문제 styled-components로 컴포넌트를 만들고 props를 전달하다 보면 React 콘솔에 경고가 나타날 수 있습니다. 예를 들어 스타일 계산에만 쓰려고 backgroundColor 같은 prop을 넘겼는데, 이 값이 실제 DOM 요소까지 전달되는 경우입니다. React는 알 수 없는 DOM 속성을 발견하면 경고를 보여줍니다. ...

들어가며 버튼 컴포넌트를 만들다 보면 색상, 폰트, 배경색이 조금씩 다른 버튼이 필요해집니다. 이때 매번 새 컴포넌트를 만들기보다 props로 값만 바꿀 수 있으면 재사용성이 좋아집니다. styled-components에서는 props와 theme을 함께 사용해 스타일 값을 동적으로 선택할 수 있습니다. theme 예시 먼저 theme 객...

들어가며 JavaScript 객체는 key와 value로 데이터를 저장합니다. 객체 안의 값을 사용하려면 속성에 접근해야 합니다. 가장 자주 사용하는 방법은 점 표기법과 대괄호 표기법입니다. 점 표기법 점 표기법은 가장 기본적인 객체 속성 접근 방법입니다. const person = { name: "taewok", age: 23,...

들어가며 JavaScript에는 브라우저에서 바로 사용할 수 있는 기본 대화상자 함수가 있습니다. alert, prompt, confirm입니다. 요즘 서비스에서는 커스텀 모달을 더 많이 사용하지만, 간단한 테스트나 학습용으로는 여전히 유용합니다. alert() alert()는 사용자에게 간단한 메시지를 보여줍니다. alert("저장이 ...

들어가며 React Native는 React 문법을 사용하지만, 웹의 HTML 태그를 그대로 사용하지는 않습니다. 웹에서는 div, p, button, input을 사용하지만 React Native에서는 모바일 네이티브 UI에 맞는 컴포넌트를 사용합니다. 이번 글에서는 React Native를 처음 시작할 때 자주 만나는 기본 컴포넌트를 정리해볼...

들어가며 React Native 개발을 시작하려면 프로젝트를 생성한 뒤, 앱을 실행해볼 환경이 필요합니다. 실행 방법은 여러 가지가 있습니다. Expo Go로 실제 기기에서 확인하기 Android Studio 에뮬레이터에서 확인하기 개발 빌드로 실행하기 이번 글에서는 Expo 프로젝트를 만들고 Android Studio 에뮬레이터...