728x90
728x90
react에서 아마 가장 많이 사용되는 라우팅 라이브러리는 react-router-dom이다. react native에서는 라우팅을 위해서 react-navigation을 많이 사용하지만, react router dom을 사용하고자 한다면 react router native를 사용할 수 있다. 🍅 react router native의 기본적인 사용법은 다음과 같다. import React from 'react'; import {Text, SafeAreaView} from 'react-native'; import {NativeRouter, Route, Routes} from 'react-router-native'; import Landing from './screens/Landing'; function A..
tailwindcss는 분명 장점이 있는 CSS 작성법이다. 다만, 어떤 경우에는 tailwindcss만 사용하는 것이 생산성을 떨어트릴 수도 있다. 🍋 예를 들면, 스타일이 많이 적용될 경우 인라인으로 클래스명이 너무나도 길어질 수 있다. (코드 가독성 저하) 이런 경우, 기존에 사용했던 styled-component나 emotion과 같은 css-in-js 라이브러리가 그리워지는데 이 둘을 모두 함께 사용할 수 있게 도와주는 오픈소스 라이브러리가 있다. 🍵 twin.macro (with. emotion) twin.macro의 깃허브 리드미를 살펴보면, 친절하게 각 환경에서 세팅하는 방법을 알려주고 있다. 그중에서 난 CRA 환경에서 emotion을 사용하여 개발 환경을 구축해보았다. styled-co..
사실 이번 문제는 문제를 푸는데 애를 많이 먹었고, 검색을 통해서 어떻게 문제에 접근해야할지 알아보았다. 스스로 해결한 문제가 아니어서 아쉽지만, 이런 문제에서 당황하지 않고 어떻게 접근하면 좋을지 생각할 수 있었던 것 같다. function solution(targets) { let answer = 0; let prevRight = -1; const sorted = targets.sort((a, b) => a[1] - b[1]); for(let i = 0; i = prevRight) { prevRight = right; ans..
React Native에서 Drawer를 구현하기 위해서 다양한 라이브러리가 있다. 그런데, React Navigation Stack 등에서 사용하기 위해 설치하는 react-native-gesture-handler에 Drawer에 대한 기능이 이미 구현되어 있다는 것을 최근에 알게 되었다. 이를 모르고, Drawer에 대한 라이브러리나 중복 구현을 하는 것을 막고자 이 글을 남기게 되었다. react-native-gesture-handler는 DrawerLayout 이라는 컴포넌트를 가지고 있다. Drawer를 구현할 스크린 상위에 DrawerLayout를 감싸는 것으로 손쉽게 Drawer를 구현할 수 있다. 다음은 공식 문서를 참고한 소스코드 예제이다. // ~ 생략 ~ const handleDraw..