wazac

기본 사용법 router에서 navigate로 이동시 state에 객체 형태로 값을 넘겨서 주고 받을 수 있다. 또한 parameter 방식과는 달리 따로 router url 뒤에 값을 설정해주지 않아도 되고, url에 넘기는 값이 노출 되지 않아서 좋았다. // 보낼때 navigate(URL, {state: {id: "user1"}}) // 받을때 import {useLocation} from "react-router"; const location = useLocation(); const id = location.state ? location.state.id : null; //

버전은 amchart5 로 진행 했다. 많이 쓰는 라이브러리인 만큼 미리 정리를 해두어서 추후에는 같은걸 검색하면서 시간낭비를 하지 않도록 하나씩 나올때마다 정리를 해두어야 겠다. 1. axis의 x, y 컬럼사이즈 조정 데이터는 4개인데, 화면사이즈가 작다보니 amchart에서 자동으로 2개만 label 을 표시하는 현상이 있었다. 그래서 x의 사이즈를 줄이거나 해주는 옵션이 있을꺼 같아서 열심히 width나 min, max 를 열심히 찾아보았는데, 정답은 render를 할때 최소 grid distance 값을 조정해주면 되었다~ 😥 x뿐만아니라 y의 값을 조정하고 싶으면 마찬가지로 y의 데이터를 만들때 같은 옵션값을 넣어주면 된다~ let xAxis = chart.xAxes.push( am5xy.Ca..

react-router로 구조를 짜고 나면 자동으로 헤더에 name이 들어가 있고 기본적으로 흰색에 검은 글씨로 되어있다. 이를 커스텀하기 위해 screenOption값을 넣어줄 수 있다. 공통으로 처리하려면 Stack.Navigator에 일괄로 처리할 수 있고, 같은 navigator에 있는 screen들을 group으로 묶어서 따로 처리해 줄 수 도 있다. 1. 공통으로 옵션 주기 title을 옵션에 넣게 되면, HomeStack.Screen 안에 name 대신 HomeStack.Navigator 안의 title을 보여준다. 스타일은 headerStyle 안에 작성해 주면 된다. 2. 페이지별로 각각 주기 페이지별로 각각 커스텀을 하고 싶다면 Stack.Group을 사용하여 각각 묶을 수 있다. he..

- react navigation: https://reactnavigation.org/docs/getting-started/ - 다음 버전을 사용하였습니다. "@react-navigation/native": "^6.0.11", "@react-navigation/stack": "^6.2.2", 리액트 네이티브에서 사용하는 react-navigation은 stack 방식을 사용한다. stack 방식은 클릭을 했을때 화면이 하나씩 stack에 쌓이는데 그중 최상위 것을 보여주는 방식이다. 그리고 back 버튼을 누르면 최상단의 화면을 제거하므로써 이전 화면을 보여준다. * 설치 expo install @react-navigation/native expo install @react-navigation/stack..

사실 expo 공식 문서에 다 나와있다. 근데 공식문서 뒤지기도 귀찮으니 정리해 두기로 했다. 공식 문서 url : https://docs.expo.dev/guides/using-custom-fonts/ 1. 설치 @expo-google-fonts/inter 를 먼저 설치해 준다. $ expo install expo-font @expo-google-fonts/inter 2. 적용할 폰트 찾기 https://fonts.google.com/ 사이트에 들어가서 원하는 폰트를 찾고 다운로드한다. 혹은 이름만 알아도 되는 모양이다. 나는 눈에 띄게 비교하기 위한 폰트를 찾았다. "Edu SA Beginner" 라는 글씨체를 찾았다. 3. App에 component가 render되기전에 적용하기 import { u..

입력을 해야하는 화면에서 TextInput에 focus 가 되면 자동으로 Keyboard가 올라오는데, 아무곳이나 클릭했을때 이를 다시 내려가게 하고싶다. TouchableWithoutFeedback, Keyboard 를 사용하여 간단하게 구현할 수 있다. \ TouchableWithoutFeedback 태그로 전체 영역을 감싼되 onPress 함수에 Keyboard.dismiss() 함수만 호출하면 간단하게 해제된다. 예제코드) return ( { console.log('dismissed keyboard') Keyboard.dismiss() }}> ); } 생각보다 정말 간단하다. 습관적으로 javascript로만 해결하려고 했는데... 그냥 웬만하면 다 불러오면 된다. 허허 머쓱코쓱🙄

최근에 리액트 네이티브 공부도 시작했다. 아직 초반이라 해매는 중이지만 하나씩 정리하려고 한다. 기본 현재 디렉터리에 설치하는 경우 디렉터리명 대신 . 를 사용한다. expo init (디렉터리명) expo init . 네비게이션 ## react navigation : https://reactnavigation.org/ npm install @react-navigation/native expo install react-native-screens react-native-safe-area-context ( for expo ) - stack npm install @react-navigation/stack npm install react-native-gesture-handler ## icons : https:/..

firebase 연동 후 실행시 이런 에러가 발생하였다. While trying to resolve module 'idb' from file….this package itself specifies a `main` module field that could not be resolved firebase 버전 문제인것 같다. @9.6.11로 재설치 해주니 에러가 사라졌다. npm uninstall firebase npm install firebase@9.6.11 재설치 후 재실행 해주면 된다.

본 포스팅은 javascript에 입문하고자 하려고 할때 가볍게 학습 할 수 있도록 나름의 커리큘럼을 짜본 것입니다. todo-list 프로젝트는 다른 게시글이나 유투브에도 많이 나와있기는 하지만, 초보자가 좀 더 접근하기 쉽도록 순차적으로 진행 과정을 쪼개 보았습니다. 순서 1. 글 추가하기 2. 글 삭제하기 3. 글 수정하기 4. localStorage에 저장하기 * html과 css는 대충 만들어 놓았습니다. (정말 대충 ㅎ..) 이 소스를 다운받아 시작하면 됩니다. 기능 목록을 참조하여 미리 소스를 만들어본 뒤, 완성된 소스와 비교해 보세요! 1. 글 추가하기 구현할 기능 목록 - input 입력 후 "ADD" 버튼 누르면 하단에 추가 - input 이 빈값인 경우 "ADD" 버튼 클릭시 "값을 ..

처음 메타마스크를 설치하면 "이더리움 메인넷" 이외에 다른 테스트넷이 나타나지 않습니다. 테스트넷을 활성화 해줘야지 나타납니다. 설정 > 고급 > Show test networks 를 활성해 해주면 됩니다.