1. Background 컴포넌트 지정 .... 2. 컴포넌트 props 전달 const renderBackground = useCallback( props => , [], ); 3. 컴포넌트 생성 및 스타일 지정 const BottomSheetBackground = ({style}: any) => { return ( ); };
Bottom Sheet 위 그림처럼, 아래에서 부터 위로 올라오는 일종의 보조 페이지를 Bottom Sheet 라고 한다. react-native-bottom-sheet 내가 사용한 Bottom Sheet 라이브러리이다. 최근까지도 업데이트가 이루어지고, 내가 원하는 형태의 UI라서 사용해야겠다고 생각했다. gothom Bottom Sheet 의 Document 사이트이다. 정리가 꽤 잘되어있는 것 같아 많아 참고했다. 설치 및 설정 방법 Getting Start 를 따라 따라하면 된다. 처음에는 적당히 설치 CLI만 보고 설치했다가, 실행이 안되어서;; 뭐가 문제인지 몰랐는데 제대로 읽지도 않고 설치했던 게 문제였다. 1. bottom sheet library 설치 $ yarn add @gorhom/b..
회사에서 리액트 네이티브로 프로젝트를 만드는데... 프로젝트 구조부터 만들어야 해서 버전 선택과 타입스크립트 사용 여부 등 모든 것을 처음부터 결정해야 했다. 우리 부서에서 구축된 개발 환경은 아래와 같다. (최신버전..) ✅ 우리부서 ✅ react : 18.0.0 react-native : 0.69.1 typescript 사용예정 O 다른 부서는 어떻게 하고있는지 궁금해서 다른 부서 선임 개발자분들의 자문을 구한 현재 개발 환경은 아래와 같았다. 사용 이유는 0.68 버전이 현재로서 그나마 안정적이고, 0.69 버전은 너무 최신이라 호환성와 안정성이 떨어져 선택하지 않으셨다고 한다. 👨🏻🏫 타부서 👨🏻🏫 react : 17.0.2 react-native : 0.68.2 typescript 사용 X ..
리액트 네이티브로 Adroid와 iOS 앱을 빠르게 개발이 가능하며, 여러가지 장점이 있고 점차 발전해왔다는 점은 좋지만 ... 단점이라면 초기 세팅할게 너무 많다. 1. Homebrew 설치 Homebrew : MAC/Linux에서 패키지를 설치하고 관리할 수 있는 맥용 패키지 관리자 ## 설치여부 및 버전 체크 $ brew --version ## 설치하기 $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" homebrew 사이트에서 복사하여 설치 가능 참고로, 기존 Homebrew 경로는 Intel칩 기준이라, /opt 경로로 바꿔줘야 한다고 한다. 아래 명령어도 입력해준다. #..
카카오톡 PC버전을 쓰고있는데 카톡에서 팁을 알려줬다! 단축키 총 정리라길래 후닥 눌러보았다. 윈도우랑 맥 단축키 전부 있어서 좋았당 ~ 1. 윈도우 PC버전 카카오톡 2. MacOS https://cs.kakao.com/helps?articleId=1073182634&service=8&category=24&device=15&locale=ko 고객센터 카카오 고객센터를 통해 각 서비스 도움말을 확인해보세요. cs.kakao.com 이상 카카오톡 pc버전의 단축키였습니다 ~ 도움이 되었다면 좋아용 눌러주세요 :)
안드로이드를 한다면 모르는 사람이 없는(!?) 테드박님의 블로그 글을 퍼온다. 사실 옛날에도 봤는데 그 땐 슥 훑어보기만 했었다. (메일 구독은 이 글보고 따라했다 ㅎ) 공유를 안해놓아 눈에 안보이니... 처음 본 것마냥 새롭고 흥미로운 글이었다. 그리고 지금 당장 나에게 필요한 포스팅이었다! 저런 선배 개발자들의 사소한 팁과 개발자로서 가져야할 자세들이 필요했었다. 링크는 요기 !
import kotlin.math.PI import kotlin.math.sqrt fun main() { val squareCabin = SquareCabin(6, 60.0) val roundHut = RoundHut(3, 10.0) val roundTower = RoundTower(4, 10.0) with(squareCabin){ println("\nSquare Cabin\n==================== ") println("Capacity : ${capacity}") println("Material : ${buildingMaterial}") println("Floor area : %.2f".format(floorArea())) println("Has room? ${hasRoom()}") } w..
테스트가 중요한 이유에 중점을 두고 단위 테스트에 대해 자세히 알아보자. 1. 테스트가 중요한 이유 2. 단위 테스트의 모양 3. 단위 테스트를 작성하고 실행하는 방법 테스트의 철학에 대해 살펴본 후, Android 프로젝트에서 자동 생성된 테스트를 자세히 알아보고 마지막으로 주사위 프로젝트의 앱 테스트를 진행해보자. 테스트가 중요한 이유 처음 앱의 규모가 작고 기능이 제한 되어있을 때는 쉽게 수동으로 모든 기능이 정상작동 하는지 테스트 할 수 있다. 하지만 규모가 커지면서 수동 테스트는 자동 테스트를 작성하는 것 보다 더 많은 노력이 필요하다. 전문가 수준의 앱 작업을 시작하면, 테스트는 사용자층이 넓을 때 중요해진다. 다양한 버전과 여러 디바이스를 고려해야 한다. 그러다 보니 수동 테스트보다 자동 테..
앱이 실행되는 동안 ImageView를 업데이트 하는 방법을 알아본다. 다양한 조건에 따라 앱 동작을 맞춤설정하는 방법을 알아본다. (when) Button으로 주사위를 굴리고 화면 이미지를 업데이트 하는 Dice Roller App 이제 버튼을 누를 때 마다 TextView가 아닌 이미지를 바꿔야하기 때문에, TextView 를 지우고 ImageView를 추가한다. 적절히 Constraint 제약을 줘 화면 가운데에 오도록 정렬한다. 주사위 이미지 추가 주사위 이미지 다운로드 여기에서 주사위 이미지를 다운로드 할 수 있다. 앱에 주사위 이미지 추가 Android 스튜디오의 메뉴에서 View > Tool Windows > Resource Manager를 클릭하거나 Project 창 왼쪽에 있는 Resou..
인프런의 "자바(Java) 알고리즘 문제풀이 : 코딩테스트 대비" 강좌를 수강했습니다. C, C++, Python, Js 등 다른 언어의 강의도 있으니 본인에게 맞는 강의를 선택하시면 됩니다. 😁 https://inf.run/pCPH 자바(Java) 알고리즘 문제풀이 : 코딩테스트 대비 - 인프런 | 강의 자바(Java)로 코딩테스트를 준비하시는 분을 위한 강좌입니다. 코딩테스트에서 가장 많이 출제되는 Top 10 Topic을 다루고 있습니다. 주제와 연동하여 기초문제부터 중급문제까지 단계적으로 구성 www.inflearn.com Q2-04. 피보나치 수열(Fibonacci Sequence) 피보나치 수열 : 앞의 두 수를 합하여 다음 숫자가 되는 수열 피보나치 수열을 출력하라. 피보나치 수열의 총 항의..