무야홍 ~

개요 👋 프로젝트를 진행하다보면 사용자를 위한 UI 는 필수적으로 고려해야 하는 사항이다. 웹 서비스를 제작 해 보았다면 Bootstrap 을 들어보았을것이다. Bootstrap 🌟 Bootstrap 은 웹 서비스를 보다 쉽게 제작 할 수 있게 도와주는 프레임워크로 CSS 와 JS 로 제작되어 있다. 하지만 대게 HTML 파일로 제작되어 있어 React 앱에 가져오게 되면 무수히 많은 className 지옥을 경험할 수 있다. 이를 보완하기 위해 React-Bootstrap 을 사용한다. React-Bootstrap 💥 React-Bootstrap 은, 기존의 Bootstrap 의 className...

에러 확인 사이드 프로젝트로 청첩장 앱을 개발하던 중 생긴 에러이다. App.js 에서 data.json 파일을 import 하여 데이터를 props 로 넘겨주어 Area1.jsx 에서 데이터 url 을 props 하여 화면에 뿌려주는 과정을 진행하고 있었다. 어제까지만 해도 에러 없이 정상적으로 실행되어 Git Hub 에 Push 까지 마친 상태였지만, 오늘 다시 앱을 실행 해보니 아래와 같은 에러가 콘솔창에 보여지고 있었다. 에러를 확인 해 보니, 이전에 포스팅 했던 에러와 같은 에러였다. https://wavescats.github.io/react/2022/11/14/React-prop...

카카오톡 친구 목록을 클론코딩 중이다. 다음과 같이 친구 목록들이 나열되어 있을 때, 버튼을 클릭 시 친구 목록이 숨겨지는 Toggle 을 구현하려 한다. 먼저, 부모 컴포넌트에서 친구 목록을 보여주기 위한 State 를 생성했다. 하단에는 버튼을 클릭 시 setIsOpened State 가 false 로 변경되는 함수를 생성해 주었다. 이를 자식 컴포넌트에서 사용할 수 있도록 props로 보내줄 것이다. 자식 컴포넌트인 Body2 에서는, 버튼에 onPress 이벤트를 주었고, 아이콘에는 props 로 내려받은 isOpened 가 true 일땐 up false 일땐 down 이 되는 옵션을 주...