들어가며 서비스를 만들다 보면 로그인한 사용자만 접근할 수 있는 페이지가 필요합니다. 예를 들어 마이페이지, 결제 페이지, 관리자 페이지 같은 화면입니다. 로그인하지 않은 사용자가 이런 페이지에 접근하면 로그인 페이지로 이동시키는 처리가 필요합니다. 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 에뮬레이터...

들어가며 React Native는 JavaScript와 React를 기반으로 모바일 앱을 만들 수 있는 프레임워크입니다. React를 공부한 경험이 있다면 컴포넌트, props, state 같은 개념을 이어서 사용할 수 있다는 장점이 있습니다. 이번 글에서는 React Native를 처음 시작할 때 필요한 개발 환경 구축 흐름을 정리해볼게요. ...

비동기 테스트가 필요한 이유 실제 프로젝트에서는 API 요청, 타이머, Promise처럼 바로 결과가 나오지 않는 코드를 자주 다룹니다. 이런 함수는 테스트에서도 결과가 나올 때까지 기다려야 합니다. Jest에서는 async와 await를 사용해 비동기 코드를 자연스럽게 테스트할 수 있습니다. 테스트할 함수 만들기 아래 함수는 3초 뒤 "...