TIL/React Native

[React Native] 그림자 효과 주기 (Box Shadow, dropshadow)

원래 찾았던 코드들은 진짜 너무 못생겨서 내 화를 돋궜다... 후... (못생긴 코드는 접어두겠다...) 더보기 shadowColor: "#000", shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5, Box Shadow Generator라는게 있는데 거기서 받아 온 건 박스 내부까지 침투ㅠㅠ InnerShadow처럼 들어와서 내가 원한게 아니었고 다시 구글링을 하다 찾은 빛과 같은 코드!! { shadowColor: 'black', shadowOpacity: 0.26, shadowOffset: { width: 0, height: 2}, shadowRadius: 10, elevation:..

[React Native] 패키지 설치 시 spawn yarnpkg ENOENT 에러가 뜰 때

expo-app-loading을 설치하는데 다음과 같은 오류가 떴다 검색했더니 구선생은 다 알아..! yarn을 깔라는 말도 있었지만 혼자하는 플젝도 아닌데다 뭘 더 깔기 싫어서 더 찾아보니 그냥 마지막에 --npm만 추가해주면 됐다! expo install 설치하려는패키지이름 --npm 잘 깔렸다 ㅎㅎ 참고 사이트 : https://stackoverflow.com/questions/58906007/spawn-yarnpkg-enoent

[React Native] 누른 버튼만 색 바뀌게 하기(TouchableOpacity)

이걸 위해 정말 정말 정말 애를 썼는데 하루를 다 쓰고 나서야 완성... 눈물이 나요... 그치만 난 울지 않아 으른이니까!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 처음 생각했던 방식은 월~금 다섯 버튼의 isPressed T/F를 확인할 배열을 만들고 버튼을 누르면 누른 버튼만 true, 나머지는 false로 돌려서 true인 경우에 배경 색을 바꾸는 방식을 하려고 했었다 근데 웬 걸 true 출력은 잘 되는데 막상 색은 안 바뀌더라고ㅠㅠ 그래서 다시 구글구글링... 구선생님의 도움으로 정말 좋은 코드를 하나 찾았다! TouchableOpacity background change onClick - Snack Change background color of particular Toucha..

[React Native] 마운트 된 이후에 axios 응답이 도착할 때!

페이지를 최초로 마운트할 때! axios 요청을 보내고 받은 데이터(응답)를 컴포넌트에게 넘겨서 보여줘야 하는데 이자식이 너무 늦게 와... 늦게 와서 빈 컴포넌트가 뜨거나 오류가 날 때... 정말 이것 때문에 새벽 5시에 잔 거 실화ㅠㅠ? 덕분에 자바스크립트도 많이 배우고 (axios의 scope) 여러모로 지식은 늘었겠지만 힘들었습니다... 일단 구글링하면 React 얘기만 산더미임 리액트에서는 조건부 렌더링이라는 걸 써서 내가 원하는 값이 잘 도착했을때! undefined가 아닐때! 렌더링을 해줄 수가 있는데 리액트 네이티브는 못 찾음.. 그래서 헤매고 헤매다가 내가 찾은 방법을 적으려고 함 일단 문제파악부터! js파일을 보면 axios 요청이 훨씬 먼저인데도 불구하고 얘는 요청 보내놓고 자바스크립..

[React Native] expo-font와 Font.loadAsync 오류

fontFamily "material-community" is not a system font and has not been loaded through Font.loadAsync. 눈누에서 받은 폰트 설치를 위해서 expo-font를 설치했는데 그 이후로 미친듯이 오류가 나기 시작했다... 빨간 화면이 뒤덮는 수준은 아니지만 ㅠ 시작화면부터 꼭 아래에 작게 오류창이 떴다 저걸 눌러보면 이렇게... ㅠ 그래서 expo-font를 삭제했더니, 이전에 설치해서 사용중이던 vector-icons에서 expo-font 컴포넌트를 쓰는 중이라 또 오류!!! 그렇다고 다시 깔면 또 오류!!!!! 그래서 어떡하나 했는데 터미널에 떡하니 답이 있었다; ㅎㅎ 왜 못 봤지 stackoverflow에서도 버전의 문제라는 얘길..

[React Native] 서버 켜는 방법 (java spring boot)

서버를 켜보겠습니다. 일단 JAVA JDK를 설치합니다 저희는 팀원 모두 1.8버전을 쓰고 있어서 그걸 받았어요 프로젝트마다 폴더 구조가 다를 수 있어요 저는 저희 팀 기준으로 하겠습니다! 프로젝트폴더/Back-End/{프로젝트명-은 저희 기준} 경로에서 git bash를 켜고 (프로젝트명은 저희 팀 기준이고.. 일단 저는 AAA라고 하겠습니다) ./gradlew build 기다려주세요 지금 빌드 되는 중입니다 기다리면 0%에서 숫자가 점점 올라가요! 빌드 완성! 그럼 이제 bash를 켰던 폴더에 build라는 폴더가 새로 생겨있을 거예요 거기로 이동하셔서 명령어를 쳐주면됩니다 cd ./build/libs java -jar libs폴더안에 있는 jar 파일명.jar 이 파일을 실행해주면 돼요 plain말..

[React Native] 라이브러리 없이 자바스크립트로 날짜 포맷팅하기!

흠 아무래도 리액트 네이티브가 아니라 자바스크립트 카테고리로 가야할 것 같지만 리액트 네이티브 앱 개발 중에 알게 된거니까 일단 여기에 나중에 네 옮겨보도록 하겠음 나의 목표 + 계획 1. 오늘이 무슨 요일인지 알아 낸다. 2. 월요일이라면 오늘 날짜를, 월요일이 아니라면 이번주의 월요일 날짜를 YYYYMMDD 의 포맷으로 만들어서 axios 요청을 보낸다 여기서 필요한 건 1. 월요일부터 금요일까지 0~4 번호로 인덱싱하기 2. 인덱스를 기준으로 이번주 월요일 찾기 3. 이번 주 월요일을 YYYYMMDD string으로 반환하기 하나씩 해보겠습니다 1. 월요일부터 금요일까지 0~4 번호로 인덱싱하기 let today = new Date(); let todayDay = today.getDay() - 1;..

[React Native] 날짜 관련 라이브러리 moment vs. date-fns

우리팀에 만든 API Docs에 따르면 일주일치 일정을 요청할 때에는 startdate를 보내야 한다. 포맷은 YYYYMMDD 오늘 날짜에 맞춰서 그 주의 월요일 날짜를 알아내서 위의 포맷에 맞춰서 string을 보내야 했는데, React Native는 MM이 아닌 M으로만 반환이 되어서 내가 원하는 대로 포맷팅하기 위해서는 라이브러리를 설치해야 했다. (방법 찾았음) 그 전에 일단, 리액트 네이티브 자체에서 날짜를 구하기 위해서는 아래 코드를 입력하면 된다. (나는 날짜를 매일 다르게 받아 오므로 let으로 선언함) let date = new Date() 그러면 date에는 아래 값이 담긴다. 2022-08-08T06:05:30.461Z 나는 여기서 20220808을 만들고 싶어서 let startDa..

[React Native] 서버에 요청해서 JSON 받아 오는 방법 (fetch vs. axios)

매주 한 번씩 또는 앱을 켤 때마다 서버에 요청해서 서버가 가지고 있는 일주일치 스케쥴 정보를 받아와야 하는데 이 때 사용하는 게 axios 또는 fetch다. 처음에 구글에 react native json request 라고 검색했더니 fetch가 많이 나와서 fetch로 하려고 했는데, 팀원은 axios를 했다고 하길래 두 개 비교글을 검색해봤다. 아래 글을 참고(라고 쓰고 번역이라고 읽음)해서 적도록 하겠다 :) 결론만 먼저 말하자면 나는 fetch가 아닌 axios를 선택했다. Difference between Fetch and Axios.js for making http requests - GeeksforGeeks A Computer Science portal for geeks. It conta..