반응형 분류 전체보기322 react navigation 배우기 6부 - 네비게이션 라이프 사이클 https://reactnavigation.org/docs/navigation-lifecycle https://reactnavigation.org/docs/navigation-lifecycle/ reactnavigation.org 1. react navigation의 라이프 사이클 한줄 요약하면 리액트의 컴포넌트 라이프사이클 개념을 고대로 가져와서 react navigation에 적용할 수 있습니다. 예를 들어 봅시다. 스택네비게이터 안에 스크린 A와 B가 있습니다. 먼저 스크린 A를 호출하면 componentDidMount가 호출됩니다. 이후 B를 호출하면 역시 componentDidMount가 호출됩니다. 허나 A의 componentWillUnmout는 호출되지 않습니다. 왜냐하면 A는 여전히 스택에.. 2023. 2. 13. react navigation 배우기 5부 - 네스팅 네비게이터 1. 네스팅 네비게이터란 아래와 같이 네비게이터 안에있는 스크린이 네비게이터를 품고 있으면 이를 네스팅 네비게이터라고 합니다. function Home() { return ( ); } function App() { return ( ); } 위 코드의 구조는 아래와 같이 됩니다 Stack.Navigator □ Home (Tab.Navigator) ＊ Feed (Screen) ＊ Messages (Screen) □ Profile (Screen) □ Settings (Screen) 보시는바와 같이 Home 스크린은 스크린이자 네비게이터 역할을 하고 있습니다. 2. 네스팅 네비게이터의 특징 각각의 네비게이터는 독립된 히스토리 스택을 가집니다 각각의 네비게이터는 독립된 option값을 가집니다 네비게이터 안에 있.. 2023. 2. 13. react navigation 배우기 4부 - 헤더 구성하기 https://reactnavigation.org/docs/headers https://reactnavigation.org/docs/headers/ reactnavigation.org 1. 헤더 제목 설정하기 앞서 배운것처럼 option에 title 항목에 값을 주면 된다 function StackScreen() { return ( ); } 2. 파라미터 내용을 헤더제목으로 설정하기 파라미터를 헤더제목으로 설정하려면 아래와 같이 arrow function을 이용한다 function StackScreen() { return ( ({ title: route.params.name })} /> ); } 3. 옵션값을 바꾸고 리렌더링 하기, setOptions 앞서 3부에서 파라미터 값을 바꾸고 rerenderi.. 2023. 2. 13. react navigation 배우기 3부 - 파라미터 넘겨주기 https://reactnavigation.org/docs/params https://reactnavigation.org/docs/params/ reactnavigation.org 1. 파라미터 념겨주는 방법 앞서 2부에서 페이지를 이동할 때 파라미터를 넘겨주는 법에 대해서 배우기로 약속했었다. 페에지를 이동할 때 파라미터를 넘겨주는 방법은 다음과 같다. navigate나 push의 메소드에 두번째 파라미터로 오브젝트 형태로 전달한다 navigation.navigate('Route네임', { /* 파라미터 자리 */ }) 파라미터를 읽는 스크린은 route.params를 통해 접근한다 공식문서는 params들이 JSON-serializable 하는것이 좋다고 한다. 즉, 경로 및 매개 변수에 함수, 클래.. 2023. 2. 12. react navigation 배우기 2부 - 페이지 이동 https://reactnavigation.org/docs/navigating https://reactnavigation.org/docs/navigating/ reactnavigation.org 1. 페이지 이동하는법 StackNavigator안에 있는 모든 스크린 컴포넌트들은 navigation이라는 prop을 받게 된다. 이를 이용하여 페이지를 navigating 할 수 있다. 아래 예제는 1부에서 보았던 예제를 이용하여 home에서 detail 페이지로 넘어가는 예제이다. 테스트하기 import * as React from 'react'; import { Button, View, Text } from 'react-native'; import { NavigationContainer } from '@r.. 2023. 2. 12. react navigation 배우기 1부 - 기초지식 https://reactnavigation.org/docs/hello-react-navigation https://reactnavigation.org/docs/hello-react-navigation/ reactnavigation.org 1. 개요 웹에서는 태그로 링크를 타고 다른페이지로 넘어가고, 백버튼을 눌러서 페이지 뒤로가기가 가능하다. 그리고 이는 stack 의 형태로 관리된다. 허나 리액트 네이티브에서는 자체적으로 웹처럼 built-in으로 내장된 stack 관리가 없다. 그래서 나온것이 react navigation이다. 이를 이용하면 웹페이지처럼 페이지를 스택으로 관리 가능하다 2. 설치 아래 커맨드로 설치하자 npm install @react-navigation/native-stack 또는.. 2023. 2. 12. 자바스크립트 Promise에 대하여 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises Using promises - JavaScript | MDN A Promise is an object representing the eventual completion or failure of an asynchronous operation. Since most people are consumers of already-created promises, this guide will explain consumption of returned promises before explaining how to create them. developer.mozilla.org 1. 개요 프로.. 2023. 2. 7. 자바스크립트 this에 대하여 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this this - JavaScript | MDN A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode. developer.mozilla.org 1. 서론 자바스크립트의 this는 다른 언어의 this와 조금 다르다고 합니다. 자바스크립트의 this는 런타임 시점에서 어떤놈을 가리킬지 결정되며, strict 모드와 non-str.. 2023. 2. 2. 자바스크립트 상속 그리고 프로토타입이란 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain Inheritance and the prototype chain - JavaScript | MDN JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++), as it is dynamic and does not have static types. developer.mozilla.org 1. 개요 상속의 관점에서 자바스크립트는 자바나 C++처럼 일반적인 객체지향 언어와 조금 다릅니다. 자바스크립트는 기본적으로 Object만 .. 2023. 1. 31. 에어팟프로 노캔 지지직 거림 해결한 후기 어느날부터 에어팟프로 노캔만 키면 지지지직 거리기 시작하였습니다. 이전에도 글을 쓴것처럼 이를 해결하려고 별에별 짓을 다 했습니다면 실패하였습니다... 결국에 에어팟프로2를 구입하고 당근에다가 올려서 팔려는 순간 한가지 의심점이 들어서 시도해보았는데 지지직거리는 소리를 해결하였습니다! 정말 어처구니 없네요. 내돈 32만원 흑흑 ㅠㅠ 1. 에어팟프로 노캔시 지지직, 문제의 원인 저는 2020년 10월 이후 모델로 지지직 거리는 이슈가 해결된 버전이였습니다. 그런데도 지지직이 발생하고 as센터도 가 보았는데 2020년 10월 이후 모델이라 한쪽당 14만원씩 내라는 통보를 받았습니다. 아니 그돈이면 팟프로2를 사지. 팟프로 없이 살 수 없던 저는 눈물을 머금고 팟프로2를 샀지요. 어쨋든 문제의 원인은 이어팁에.. 2023. 1. 30. 플러터 vs 리액트 네이티브 승자는 리액트인 이유 요즘 크로스 플랫폼이 유행이지요. 게임도 그렇고 앱개발도 그렇습니다. 회사에서 한창 크로스 플랫폼 기술들을 검토하라 하고 최근들어 정말 많은 프레임워크들을 찍먹해 보았습니다. 코르도바, 리액트, 리액트 네이티브, 플러터 등등. 공부를 하며 결국에는 리액트 네이티브 vs 플러터 둘중 선택해야 하는 경우가 다가왔습니다. 저는 리액트 네이티브가 승자라고 결론내렸습니다. 그 이유에 대해 적어보겠습니다. 1. 플러터 첫 인상은 좋으나 알면 알수록 별로 처음 저의 플러터 첫 인상은 좋았습니다. 리액트네이티브 처럼 자바스크립트 브릿지가 아닌 직접 os의 캔버스에 접근하여 네이티브급 성능을 낸다는 내용이였습니다. 개발자 입장에서 속도는 몹시 중요한 요소이고 네이티브급으로 속도가 나온다니 혹하지 않을 수 없습니다. 허나.. 2023. 1. 28. 원신 아이폰에서 공월축복 창세의결정 싸게 지르는법 얼마전 팀쿡 망할놈이 애플스토어 수수료를 올리는 바람에 아이폰 폰신 유저들은 비싼가격으로 공월축복을 사야만 하도록 되었습니다. 옆동네 안드로이드 유저들은 싼가격에 공월을 지르고 트럭을 지르는데 우리 아이폰 유저들은 이런 핍박을 받아야 한다니요. 한국 아이폰 점유율이 20%인데 앱스토어 매출은 안드로이드이 2배입니다. 팀쿡 망한놈이 감사한줄도 모르고 배은망덕하게 뒤통수를 치는게 괘씸하군요. 공월을 싸게 지르려면 안드폰을 사거나 피시에다가 원신을 깔아야 합니다. 원신 피시 용량이 어마어마한데 깔기 부담스럽고 안드폰 사는건 말도안되고 이런 곤란한 유저들이 분명있으실겁니다. 우리 호요버스는 그런 유저들을 위해 다 방법을 마련해 놓았습니다. 바로 공식홈페이지에서 결재하는겁니다. 짜잔! 공월이랑 창세의 결정이 원래.. 2023. 1. 28. 개발자에게 맥북이 좋은이유 평소에 그램만 사용하다가 집에서 사비로 맥북을 구입하여 사용한지 거진 1년째 입니다. 회사에서도 맥북프로 준다고 했는데 전 그램이 편해요~ 하다가 땅을 치고 후회하고 있습니다. 물론 그램이 가벼워서 재택근무할 때 퇴근길이 몹시 행복하긴 하지만 맥북이 가진 놀라운 장점들을 보니 과거의 선택이 몹시 후회되는군요. 오늘은 개발자가 왜 맥북이 좋은지에 대해서 얘기 해 보겠습니다. 참고로 저는 리눅스도 메인 os로 1년 이상 사용해본 경험이 있습니다. 메인은 안드로이드 앱 개발자이며 현재 회사에서 이것저것 많은 부분에서 찍먹중입니다. 1. 리눅스와 개발환경이 유사하다 개발자라면 누구나 동의하실 겁니다. 윈도우보다 리눅스가 개발환경이 편하다는 사실이요. 리눅스는 각종 필요한 프로그램들 커맨드 한줄로 전부 설치 가능.. 2023. 1. 28. [RN] react native에서 flex : 1 이 동작하지 않을 경우 이 문제는 보통 SafeArea로 뷰를 감 쌀 경우 생기는 문제이다. 이때 해결방법은 아래처럼 해 주어야 한다 style = {{ width:'100%', height:'100%' }} 2023. 1. 27. StyleSheet.create를 사용하는 이유 리액트 네이티브에서 스타일을 줄 때 StyleSheet.create라는 메소드를 사용한다. 그런데 그냥 오브젝트를 넘겨주는것과 무엇이 다를까? 정답은 자동완성에 있어 차이가 있다 StyleShee.create 메소드를 사용할 경우 style에 관련된 내용을 작성할 것을 아니 에디터에서 자동완성 기능이 훨 씬 더 잘먹힌다고 한다. 반면 그냥 오브젝트를 넘겨줄 경우 그렇지가 않다. 2023. 1. 27. Your Ruby version is 2.6.10, but your Gemfile specified 2.7.6 1. 개요 맥에서는 기본적으로 루비가 깔려있다. 그러나 위와같은 에러로 리액트 네이티브에서 요구하는 루비버전과 버전이 다를 경우 버전명을 맞추어야 한다 2. 해결방법 brew update brew install ruby-build brew install rbenv rbenv install 2.7.5 rbenv global 2.7.5 echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc echo 'eval "$(rbenv init -)"' >> ~/.zshrc 2023. 1. 27. 플러터 코드 가독성 익숙해지기(네스팅 지옥) 최근 들어 플러터를 다시 공부하기로 마음먹었다. 앞으로 나올 퓨시아OS와 Matter OS가 스마트폰이 처음나올 때 만큼은 아니지만 큰 지각변동을 일으킬거라는 예상이 들었기 때문. 다시 공부하려니깐 플러터의 토나오는 코드 가독성때문에 몇 가지 팁을 소개하려 한다 처음에는 제목을 플러터 코드 가독성 향상법 이렇게 적을라 했는데... 생각해보니 그런게 있을리가 없다. 그냥 익숙해질 수 밖에 1. 괄호 꼬이는 문제 해결 방법 플러터를 하다보면 아래와 같은 상황이 발생한다 저놈의 ]) 괄호들이 꼬이기 시작하고 서로 껴안고 뽀뽀하고 떨어지기 싫어하는 문제이다. 이 문제를 해결하면 다음과 같이 해결하면 된다 항상 리스트의 끝이나 괄호의 마지막 부분에 콤마를 넣는 습관을 기르자! 가령 var a = [ 1, 2, 3.. 2023. 1. 26. NAT이란 무엇일까? 1. NAT이란? Network Address Translation 이라는 뜻이다. 네트워크 주소 변환. 무슨 주소를 변환한다는 거지? NAT의 간단한 비유 NAT을 간단하게 아파트 관리실이라고 비유하겠습니다. 아파트 주소는 다음과 같습니다 서울특별시 서대문구 붕어아파트 / 101호 붕어아파트는 보안이 몹시 철저하다고 합시다. 보안이 몹시 철저하여 외부에서는 붕어아파트의 주소만 알고, 내부적인 호수는 알 수 없습니다. 파란색 주소는 공인IP주소이며 외부에서는 이 주소만 볼수있다고 합시다 빨갠색 주소는 사설IP주소이며 아파트관리실만 알 수 있다고 합시다 각 아파트의 호수들은 외부망과 소통을 할 때 아파트 관리실을 통해 소통합니다. 외부망에서는 아파트의 위치만 알고 내부적으로 호수는 알 수 없습니다 아파트 .. 2023. 1. 25. wifi p2p 통신 시 특정 크기의 단위로 데이터 전송 방법 1. 개요 안드로이드에서 wifi p2p로 데이터 통신을 하다보면 특정 데이터 사이즈 크기만큼 자르면서 데이터를 전송하고 싶을 때가 있다. 허나 자바스크립트와 다르게 안드로이드는 이러한 방법에대한 API를 제공하지 않고 그저 continuous하게 데이터를 읽는 방법만 제공하고 있다. 2. 아이디어 read함수는 데이터를 특정 길이만큼 읽어올 수 있다. 허나 실제로 읽어온 데이터의 길이는 내가 요청한 데이터와 다를 수 있고, 함수의 리턴값으로 실제 읽어온 값을 사용한다. 이 리턴값을 이용하면 특정 데이터 크기만큼만 자르면서 읽어오는것이 가능하다 아래는 그 예시이다 val inputStream = socket.getInputStream() var result = ByteArray(614398) var ne.. 2023. 1. 17. 안드로이드 공부시 주의사항 개발자의 가장 중요한 덕목중 하나는 구글링이다. 당연히 안드로이드 개발자들도 구글링을 열심히 한다. 허나 한가지 주의사항이 있다. 만약 당신이 구글링해서 아래 공식문서로 들어갔는데 링크가 training으로 되있다고 하자 똑같은 내용을 공식문서에서 시작해서 다시 들어가 보면 guide 라고 나온다 그리고 둘의 내용이 다르다. 아래내용을 반드시 기억하자 guide의 링크가 걸린 내용이 좀 더 최신이고 설명도 더 알아먹게 되어있다 모든 항목에 대하여 guide url이 존재하지 않는다 그러므로 구글링으로 공식문서에 들어갔는데 url이 training이라 적혀있으면 반드시 공식홈페이지에서 수동으로 다시 들어가보자. 그럼 최신 내용의 문서가 있을지도 모른다 2023. 1. 12. 이전 1 2 3 4 5 6 7 ··· 17 다음 반응형
