YumeHANA YUME'S DEV

https://yumedev.tistory.com/103 [ Next ] 공휴일 Open Api 만들기만드는 프로젝트에 캘린더가 들어가면 항상 공공데이터포털에서 api를 호출해서 사용해야하기 때문에이전 라이브러리는 직접 공공데이터포털 api를 호출해서 뿌려주기때문에 결국에는 직접 공yumedev.tistory.com이전 공휴일 open api를 만들고 나서 앱에서 해당 api를 호출하도록 했다.redis를 사용했지만 redis도 무료 제한이 있기때문에 나중에는 해당 부분이 문제가 생기면 따로 local에 저장해서 날짜 업데이트 하는 시기에 맞춰서만 api를 호출하도록 수정해야할 수도.. 우선 공휴일 데이터를 불러왔으니 이제 캘린더에 공휴일 표시를 해줘야한다.React Native Big Calendarh..

공휴일 데이터를 관리자 페이지에서 공공데이터포털 api를 활용헤서 저장후이걸 가져와서 처리할까 고민했지만무료로 사용할 수 있는 것이 있어서 해당 라이브러리를 사용하기로했다. git에 해당 라이브러리가 있었고,국내 공휴일 데이터를 쉽게 가져올 수 있길래, 이를 활용했다.https://github.com/kyungseopk1m/holidays-kr GitHub - kyungseopk1m/holidays-kr: [NPM] 🇰🇷 South Korea Public Holidays / 대한민국 공휴일 데이터[NPM] 🇰🇷 South Korea Public Holidays / 대한민국 공휴일 데이터 - kyungseopk1m/holidays-krgithub.comInstallnpm i @kyungseopk1m..

React Native에서 캘린더를 구현할려고하는데처음에는 React Native Calendar를 사용했는데 캘린더의 일정 표시를 하루는 되지만 범위가 안되어서 다른 라이브러리를 사용. React Native Big Calendar는 일정 range표시까지 되어서 해당 라이브러리로 바꿔서 사용했다.하지만 web에서 full calendar처럼 css로 막 바꿀 수 없어서 라이브러리의 일부를 커스텀했다. React Native Big Calendar우선 사용하기위해 두개의 라이브러리를 설치한다.https://github.com/acro5piano/react-native-big-calendar GitHub - acro5piano/react-native-big-calendar: gcal/outlook lik..

메인 화면에 추가 컨텐츠를 bottom sheet를 활용하여 구현해보고자 하여 기능을 구현Installment아무생각 없이 했다가 버전의 호환때문에 계속 오류가 나다가 버전을 낮췄더니 정상적으로 되었다.bottom-sheet 4.x.x 버전과 reanimated 3.x.x 버전을 사용npm install @gorhom/bottom-sheet@^4 react-native-reanimated^3 react-native-gesture-handler 설치완료 후에는 babel.config.js에 plugin을 추가해준다.module.exports = { presets: ['@react-native/babel-preset'], plugins: ['react-native-reanimated/plugin'..

grid layout을 할려고 style을 적용해보는데 react native에는 flex: grid가 없어서 찾아보다가그리드 기능을 해주는 flatList를 이용UseageflatList는 가로 세로 두가지를 할 수 있으며 각각 사용법이 다르다. 1. vertical우선 flaticon에서 해당 월의 개수만큼 박스를 만들려고해서해당 월의 마지막날을 data로 넣어주었다. numColums는 한 줄에 몇개를 할지 설정할 수 있다.이후 박스 영역 안에 넣어줘야하므로 onLayout을 이용해 박스 영역의 크기를 계산하여 박스 영역 안에 들어가는 item 박스의 크기를 계산 columWrapperStyle로 각 아이템의 간격을 설정이후 renderItem으로 아이템 박스를 생성const GAP = 4; con..

react native 앱에서 언어 변경을 하기 위해서 i18n을 사용직접 언어변경을 만들까 하다가 그냥 i18n을 사용하기로 했다. i18n 초기 세팅 이후에는 테마 변경처럼 동일하게 사용한다.Initialized세개의 패키지를 설치react-native-localize는 시스템 언어를 가져오기 위해서 사용한다.npm install i18next react-i18next react-native-localize 한국, 영어 언어 json을 생성// i18n/ko.json{ "translate": "언어", "theme" : "테마"}// i18n/en.json{ "translate": "Language", "theme" : "Theme"} 이후 i18n 초기화 작업을 한다.기본 언어는 한국어로 처..

항상 프로젝트를 하면 라이브러리를 많이 사용하는데popup이나 modal같은 경우는 항상 직접만들게 된다.라이브러리를 사용하면 커스텀이 복잡하여 원하는 디자인으로 만들기가 어려워서 직접 만들게 된다.react native에서도 마찬가지로 직접 만들어 보았다. react native에서는 Modal컴포넌트가 있어서 좀 쉽게 구현이 되는데 이것저것하다가 Modal이 재대로 적용이 안되어서그냥 다른 방식으로 만들기로했다.Initializedportal은 portal로 감싼 자식들을 최상위로 보내준다.web으로 따지만 자식 컴포넌트이지만 최상위로 보내주는 것과 같다고 생각하면 된다. Modal 컴포넌트도 portal처럼 작동하지만 뭔가 꼬여버린지 잘 안되어서 portal을 그대로 사용했다.npm install ..

이전에 bottom tabs을 했다가 bottom tabs을 빼고 진행하기로 결정.이후 버튼을 누르면 페이지 이동이 필요하여 stack navigation을 사용Initializednative-stack 패키지를 설치npm install react-native-screens @react-navigation/native-stackStack Navigation사용방법은 이전 bottom-tabs와 비슷했다.각 페이지별로 option에 애니메이션 진행 방향을 설정해서 뒤로가기나 이동이 자연스럽게 이루어지도록 설정첫 페이지는 home 페이지로 설정 App.tsx자체에서 만들어도 되지만,App.tsx에는 나중에 provider나 이것저것 추가하게 되면 지저분해보일까봐 navigation을 따로 만들었다.impor..