본문 바로가기

전체 글77

React Native 하단 탭 내비게이션 구현 방법(BottomTabNavigation) 오늘은 본격적인 앱 만들기에 앞서 앱의 기초가 되는 하단 탭 내비게이션을 구현하는 방법에 대해 포스팅하고 구현하는 과정에서 발생한 상태 바와 화면이 겹쳐지는 현상을 해결해 보는 과정에 대해 포스팅하겠습니다. 하단 탭의 경우 대부분의 앱에서 많이 사용하는 내비게이션으로 이번에는 홈화면과 프로파일 화면, 그리고 세팅 화면으로 이루어진 하단 내비게이션을 구현해보려고 합니다. 1. 기본 하단 탭 내비게이션 구현하기우선 아래 명령어를 통해 하단 탭 내비게이션 라이브러리를 설치해 줍니다. npm install @react-navigation/bottom-tabs 그리고 아래 코드를 입력해 탭 내비게이션을 import 해주고 하단 탭 내비게이터 객체를 BottomTab에 생성해 줍니다. BottomTab은 본인이 원.. 2024. 6. 22.
스페인 바르셀로나 숙소 추천 및 아고다 싸게 예약하기 오늘은 곧 있으면 떠나게 될 여행지의 숙소를 예약하기 위해 알아본 내용들이 너무 아까워 포스팅하고 남겨놓으려고 합니다. 원래 여행을 잘 가지도 않지만 이번엔 항상 제 옆에 있어주는 사람이 가고 싶어 하는 곳이기 때문에 직접 알아보려고 합니다. 어떻게 선택해야 할지 막막해 이것저것 찾아보고 정리해 놓은 내용들로 스페인 바르셀로나의 좋은 숙소 추천과 아고다에서 싸게 예약한 방법에 대해 소개해드리겠습니다. 첫번째 바르셀로나 지역별 특징역시나 유명 관광지답게 호텔, 에어비앤비, 게스트하우스 등 너무나 많은 종류의 숙소들이 있었고 특별한 여행이기 때문에 호텔로 한정했는데도 너무 많은 선택지가 있었습니다. 여러 영상 및 글들을 보니 공통적으로 우선 지역에 대한 특징을 알고 맞는 지역에 숙소를 잡는 것이 좋을 것 같.. 2024. 6. 19.
피그마(Figma) 시작하기 – 피그마 인터페이스 지난 포스팅에서 앱 기획 도구에는 어떠한 것들이 있는지 알아보았고 이제 앱을 본격적으로 기획해 보기 위해 한 가지 툴을 선택해 공부해보려고 합니다. 어도비XD, sketch, figma 등 여러가지 좋은 툴들이 있었지만, 저는 일정 부분 무료로 사용할 수 있고 초기 학습이 그래도 쉽다고 느껴지는 피그마를 공부해보려고 합니다. 그 첫번째 시간으로 피그마 인터페이스에 대해 공부해 보겠습니다.  피그마 인터페이스 전체 구성 알아보기 피그마는 인터페이스는 상단 툴 바와 좌측패널 그리고 우측패널로 구성되어 있으며, 가운데에는 작업 공간이 있습니다. 좌측패널을 보면 페이지와 리스트들이 있고 페이지는 프로젝트 안에서 각각의 작업장이라고 생각하면 되고 리스트형태로 나열되어 있는 것들은 작업장안에 있는 레이어들을 의미합.. 2024. 6. 17.
React Native Android 에뮬레이터 연결 및 Button과 TouchableOpacity 이용해 버튼 만들기 지난 포스팅에서는 React Natvie의 컴포넌트에 대해 알아보고 Image 컴포넌트를 사용해 보았습니다.오늘은 앱의 기본이 되는 버튼 컴포넌트에 대해 알아보고 실제 버튼을 구현하는 과정에 대해 포스팅해보려고 합니다. 그리고 버튼 컴포넌트 외에도 버튼의 기능을 제공할 수 있는 다른 컴포넌트에 대해서도 알아보려고 합니다. 사실 버튼 컴포넌트를 공부하지만 기본적인 앱을 구현할 때 오히려 다른 컴포넌트를 이용해 버튼을 많이 구현합니다. 그럼 시작하겠습니다. 1. React Native Android 에뮬레이터에서 실행하기우선 하단 네비게이션 바를 구현하기에 앞서 기존에는 실제 디바이스에서 Expo 앱을 통해 만들어진 앱을 확인했지만 사용하고 있는 PC와 스마트폰의 와이파이를 동일하게 연결해야만 하는 번거로움.. 2024. 5. 25.

티스토리툴바