[React Native] 폰트 적용하기
·
React Native/JavaScript
react나 react native나 폰트를 적용하는 것은 생각보다 귀찮다. react의 경우 google fonts를 사용한다면 public에 있는 index.html에 링크를 추가해주면 되지만 생각보다 react native는 귀찮았다. 그러다가 이번에 간단하게 처리하는 방법을 알아서 정리한다. 폰트 저장 먼저 원하는 폰트를 /assets/fonts 폴더에 저장한다. 기본적으로 assets 폴더도 없을 것이고 fonts 폴더는 더더욱 없을 것이다. 그러니 해당 폴더를 만들고 내부에 사용할 폰트 파일을 추가해주면 된다. 라이브러리 사용 npm i react-native-asset 원래는 android 폴더 등에 설정을 해야하는데 그런 작업을 간단하게 해주는 라이브러리가 바로 react-native-as..
[React Native] Chat GPT로 개발하기 - 8일차
·
React Native/JavaScript
react-native-shadow-2 말고 다른 방법으로 그림자를 만드는 방법이 뭐가있어? react-native-shadow-2는 그림자를 만들어주는 라이브러리이다. 그런데 해당 방법을 사용하면 생각보다 그림자를 넣는 기능이 자유롭지 않았다. ScrollView에서 그림자를 만드는 작업을 진행할 때 특히 심했다. 좌우 그림자가 짤린다던지 하는 문제 말이다. 물론 이건 내가 React Native를 잘 하지 못해서 그런 문제일 수 있지만 React에 비해서 React Native로 개발하는 것은 많은 불편함을 느끼고 있다. 자바스크립트만으로 개발을 할 수 있다는거에 만족할 수 있겠지만 몇몇개는 정말 이것으로 어플을 만들 수 있는지 의심이 들었다. 어쨋든 해결 방법으로 react-native-svg 같은..
[React Native] Chat GPT로 개발하기 - 7일차
·
React Native/JavaScript
import Sound from 'react-native-sound'; 이걸 사용해서 버튼을 누르면 해당 소리가 나오게 하려고 하는데 어떤 방법을 사용해야할까? 지난번에 진행한 react native tts가 휴대폰 시스템 tts로 실행이 되어서 내가 원하는 국적의 언어를 읽어주긴 하지만 실제로 실행할 때 한국인이 해당 국적을 읽어주는 문제가 있었다. 그래서 결국 mp3로 대체하는 방식을 사용하고 추후 tts로 해결이 가능한 방법이 있다면 그 방법을 사용할 생각이다. 그래서 Chat GPT에게 물어본 결과 react native sound 라는 라이브러리를 추천받아서 사용하기 시작했다. 질문이 너무 급진적으로 라이브러리를 바로 물어본 것 같지만 앞에 많은 내용이 있었다.... GPT를 사용하면서 느낀게 ..
리얼 클래스 11일차
·
취미생활/잉여의 제2외국어
오늘은 스피킹 문법 빌드업 [ Am ] 과 영화 [ 씽 ] 9강을 들었다. 우선 월요일과 화요일에 강의를 듣지 못한 이유를 이야기하자면.... 월요일에는 업무 관련해서 해결해야 할 문제가 있는데 강의를 듣고 해결하려고 하니 도저히 집중이 되지 않아서 문제를 먼저 해결하니 저녁 늦은 시간이라 듣지 못했다. 화요일은 예비군 갔다 와서 어제 업무 마무리 작업 등을 진행하니 마찬가지로 시간이 늦어서 공부를 하지 못했다. 그래도 오늘부터 다시 꾸준하게 학습을 들어갈 것이다. 근데 확실히 강의를 들으니 공부했던 단어 / 문장들을 곳곳에서 볼 수 있어서 좋았다. 당장 No Doubt 라는 말도 몇 곳에서나 들었는지 모르겠다. 스피킹 문법 빌드업 [ Am ] Be 동사 + 명사 : 누구 / 무엇 허허... Be 동사 ..
[React] 빌어먹을 iOS - vh 편
·
React/실험실
웹 개발을 하다보면 가장 큰 스트레스 중 하나가 브라우저이다. IE는 처리했고 남은게 사파리 ( iOS ) 그리고 떠오르는 샛별 카카오 브라우저이다. 카카오톡은 웹사이트 링크를 타고 들어가면 인웹 브라우저로 실행이 된다. 근데 요놈도 참 간혹 예상치 못한 말썽을 일으기키는 뇨속이다. 아무튼 iOS에서 발생한 문제를 하나씩 해결하면 올려보겠다. vh 아이폰에서 vh를 100으로 설정했을 때, 스크롤을 내린다던지 해서 해당 영역이 짤리는 문제가 있다. resize useEffect(() => { const setViewportHeight = () => { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh",..
[React Native] 빌드하기
·
React Native/공통
Expo가 아닌 React Native에서 빌드하는 방법을 작성하려고 한다. Window 환경에서 진행하며 iOS는 유감이지만 진행하지 않고 Android 만 진행할 계획이다. 서명 키 생성 빌드를 하기 위해서는 서명키가 필요하다고 한다. 현재 개발 환경에서 android / app 폴더로 이동해서 명령어를 통해 서명키를 발급받는다. keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 Enter keystore password: Re-enter new password: What is your first and last name? [Unknown]: Wha..
[React Native] Chat GPT로 개발하기 - 6일차
·
React Native/JavaScript
expo에서 글자를 읽어주는 기능을 만들고 싶어 쓰는 부분은 해결했으니 이제 읽어주는 기능이 필요해서 질문을 했다. 지난번 스트레스로 이번엔 미리 Expo라는 것을 알려주고 글자를 읽어주는 기능에 대해서 질문했다. 그래도 이번엔 한번에 필요한 기능을 말해줬다. 일본어를 읽을건데 일본인도 가능해? 읽는 것은 문제가 없는데 나는 다국어 지원이 필요했다. 따로 설정 없이 일본어를 읽게하니 어색하게 글자를 읽었다. 그래서 일본어 설정이 가능한지 물어보고 답변을 받아서 읽어보게 했다. 다른 읽어주는 라이브러리는 없을까? 후.... 일본어 설정을 해도 이상한 기계음이 섞여 있어서 사용에 불편함이 많았다. 그래서 다른 라이브러리가 있는지 물어보고 해당 라이브러리를 사용할 계획을 했다. 바로 알려준 react-nati..
[React Native] Chat GPT로 개발하기 - 5일차
·
React Native/JavaScript
expo에서 터치로 쓰기를 하려면 어떻게 해야해? 간단한 어플을 만들기 위해서 지난번 Native 환경이 아닌 Expo 환경에서 다시 개발을 진행하다가 터치로 그림을 그리는 작업이 필요했다. 어떤게 있는지 궁금해서 간략하게 질문을 했었다. 해당 패키지를 설치하니 ViewPropTypes will be removed from React Native, along with all other PropTypes. We recommend that you migrate away from PropTypes and switch to a type system like TypeScript. If you need to continue using ViewPropTypes, migrate to the 'deprecated-rea..