320x100 개발일지20 [React-native]Context API, Recoil 어떤걸 쓸까? (feat. 렌더링) react-native로 앱을 만들면서 전역으로 상태관리를 해야하는 상황이 필연적으로 찾아왔다. Context API 처음에는 Context API를 사용해서 상태관리를 했었다. 하지만 변수값이 많아지면서 점점 렌더링이 느려지는 현상이 생겼다. Provider에 제공한 value가 달라지면 Context API를 쓰고 있는 모든 컴포넌트가 리렌더링 된다는 것을 간과했었다. Provider를 추가하더라도 Provider의 하위컴포넌트가 모두 렌더링되는 현상은 피할 수 가 없다. (memoization을 통해 일부 문제를 해결할 수 있지만, 모든 것을 해결할 수 있는 방법은 아니며 한계가 있다고한다) 3번째 슬라이드에서 Context Provider를 추가한 후 하위의 모든 것이 다시 마운트된다. 성능에도 .. 2023. 4. 12. [RN]모듈 중복생성 오류 Native module RNDatePicker tried to overrideRNDatePicker. [문제상황] Native module RNDatePicker tried to override RNDatePicker. Check the getPackages0 method in MainApplication java, it might be that module is being created twice. If this was your intention, set canOverrideExistingModule=true. This error may also be present if the package is present only once in getPackages but is also automatically added later during build time by autolinking. Try removin.. 2023. 4. 7. [RN]안드로이드 빌드오류 (Task :react-native-wheel-pick:verifyReleaseResources FAILE Derror: resource android:attr/lStar not found.) [문제상황] 앱배포를 준비하기 위해 release용 apk을 빌드하려던 중 아래와 같은 에러가 났다. > Task :react-native-wheel-pick:verifyReleaseResources FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':react-native-wheel-pick:verifyReleaseResources'. > A failure occurred while executing co m.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action > Android resource linking failed ERROR.. 2023. 4. 3. [RN]recoil 중복 키값 에러해결Expectation Violation: Duplicate atom key [문제상황] react-native에서 recoil를 사용중 [Expectation Violation: Duplicate atom key "groupNameState". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement.] 라는 에러를 만났다. 찾아보니 보통 Next.js 개발환경에서 많이 발생하는 에러라는데 SSR환경이 아닌 react-native에서 왜 이와 같은 현상이 일어나는 것인지 궁금했다. 공식문서를 살펴보니 Fast Refresh를 사용하는 환경에서도 일어나는 현상이라는데.. Fast Refresh? 리액트 네이티브 공식문.. 2023. 3. 22. [RN]rbenv: pod: command not foundThe `pod' command exists in these Ruby versions: 2.7.5 문제상황: react-native init을 하면 cocoapods의 오류발생 -> pod install 또한 안됨, rbenv: pod: command not found The `pod' command exists in these Ruby versions: 2.7.5 이와 같은 에러메세지 나옴. 해결방법: sudo gem install cocoapods 설치하고 cd ios pod install pod --version // 버전확인해서 설치 잘 되었나 확인 해주었더니 작동함 2023. 1. 17. [RN]Drawer Navigator 오류해결 문제상황 Drawer Navigator를 사용하려고 모듈들을 설치하면 시뮬레이터 화면이 하얗게 뜨면서 빌드가 안되는 현상 발생.. https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ Installation | React Native Reanimated Installing Reanimated requires a couple of additional steps compared to installing most of the popular react-native packages. docs.swmansion.com 를 따라해보기도 했지만 해결 X 마지막에 SHA-1 for file … is not 오류에서 npm in.. 2023. 1. 5. [React-Native]ios 빌드오류 삽질기.. 안드로이드는 애뮬레이터가 잘 작동되지만 ios는 정말 하라는데로 다해보고 온갖 방법을 총 동원했는데도 ** BUILD FAILED ** 메세지와 함께 run ios가 제대로 되지 않았다.. m1문제인가 싶어서 pod install 할때도 x86_64 아키텍처로 ffi와 pod 를 설치 해줘도 여전히 빌드에러.. (혹시 모르니 기록은 해둔다..) m1 pod install 하기 1. x86_64 아키텍처로 ffi와 pod 설치 sudo arch -x86_64 gem install ffi 2. cd ios 경로로 이동해서 x86_64로 pod install arch -x86_64 pod install (만약 설치중 루비버전에러가 나온다면..) 1. 루비 버전확인 $ rbenv version 2. 원하는 버전.. 2023. 1. 4. [react-native] npx react-native run-android 에러 해결하기 문제상황 npx react-native run-android을 실행하려 하는데 에러가.. error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`. error Failed to start the app. Error: spawnSync adb ENOENT 문제원인 android-platform-tools 가 없어서 나는 오류라고 한다. 공식문서에 보면 안드로이드 스튜디오를 설치할때 설치마법사가 나올때 아래항목을 체크하라 되어있었다. 하지만 그사이에 버전이 업데이트된건지 설치마법사는 안나오고 바로 화면이 나와서 sdk등을 수동으로 다운받았었다. 중간에 설치가 누락이 됐었나보다. 해결방법 br.. 2022. 12. 2. [react-native]error warn Multiple Podfiles were found 발생상황 터미널에 npx react-native init projectName을 입력하고 새로운 에러와 마주쳤다..^^ ✖ Installing CocoaPods dependencies (this may take a few minutes) error warn Multiple Podfiles were found: ios/Podfile,vendor/bundle/ruby/2.7.0/gems/cocoapods-core-1.11.3/lib/cocoapods-core/Podfile. Choosing ios/Podfile automatically. If you would like to select a different one, you can configure it via "project.ios.sourceDir". Y.. 2022. 12. 2. (mac) ruby 버전 업데이트 하기 문제상황 react-native init을 했는데 error Your Ruby version is 2.6.10, but your Gemfile specified 2.7.5 이런 오류가 났다. 찾아보니 맥에선 기본으로 2.6.10버전이 설치되어 있다고하는데 react native와 맞지 않는 버전이였다. 해결방법 1. rbenv 설치(homebrew가 설치되어 있다는 가정하에) brew install rbenv 2. 2.7.5버전 설치 rbenv install 2.7.5 rbenv global 2.7.5 3. 두 개의 버전이 맞는지 확인 rbenv versions // system //* 2.7.5 (set by /Users/user/.ruby-version) ruby --version //ruby 2.7.. 2022. 12. 2. [react-native]ERROR: Error installing cocoapods: 발생상황: react native 개발환경 셋업중, cocoapods설치 중.. sudo gem install cocoapods Ignoring ffi-1.15.5 because its extensions are not built. Try: gem pristine ffi --version 1.15.5 ERROR: Error installing cocoapods: ERROR: Failed to build gem native extension. current directory: /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/ext/ffi_c /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby -I /System/.. 2022. 12. 1. intellij git 단축키 깃 커밋 사이드창 열기: ctrl 또는 command + k 깃 푸쉬하기 : ctrl 또는 command + shift + k 하지만 커밋창에 commit과 push를 같이할 수 있어서 잘 안쓰일것 같긴하다. 2022. 11. 30. build.gradle 바뀐 표기법 스트링부트와 AWS로 혼자 구현하는 웹 서비스(이동욱 저자)를 보며 실습을 하고 있다. 아직 생소한 단어들도 있고, 지금껏 VS studio만 써왔는데 새로운 IDE인 인텔리제이를 사용해보게 되었다. 요즘 자바를 공부하느라 이클립스를 살짝 사용해봤는데 확실히 인텔리제이 GUI가 이클립스보다 훨씬 낫다. 비쥬얼스튜디오도 인텔리제이로 만들어졌다고 한다. 그래서 더 익숙하게 느껴지는 부분도 있는것 같다. 다만 책이 출간이 된지 3년이 지나다보니 버전문제가 조금 있었다. Chapter01 의 build.gradle 작성부터 달라진 부분이 좀 있었다. 기존코드에는 buildscript와 apply plugin부분이 나뉘어져 있지만 개선되면서 plugins안에 기존apply plugin과 ext가 들어가게되었다. .. 2022. 11. 29. [error]404 (Not Found) / Uncaught (in promise) 로그인창을 구현하던중 에러를 만났다. AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …} 오타도 꼼꼼히 확인해보고 import도 잘 되었는지 두번 세번 확인했는데 전혀 문제가 없었다. 왜 안될까... 다시 처음부터 찬찬히 확인하던중 proxy파일의 경로가 src가 아닌 밖에 위치해 있었다. ㅋㅋㅠㅠ 다시 src 폴더에 잘 넣어줬더니 작동을 잘 한다. 다음부턴 경로확인도 꼼꼼하게 확인해야겠다. 😂 2022. 9. 8. [TS]에러해결(Argument of type '' is not assignable to parameter of type ''. Type '' is not assignable to type ''. ) 타입스크립트로 변환 도중 아래 사진과 같은 오류를 만났다. 이러한 에러는 typescript가 예상하고 있는 특정한 type이 아닌, 다른 type을 넘겨줬을 때 발생하게 된다. 해결방법은 아래와 같이 typeof를 활용하여 정확한 javascript의 value type을 확인 하면 해결이 된다. if (typeof token === 'string'){ validateToken(token); } 2022. 5. 30. [React] 단위표시(콤마)가 있는 숫자 계산하기 프로젝트를 만들던중 가격을 입력하는 부분에서 문제점이 발생했다. 1. 천 단위로 콤마를 찍어줄것 2. 리스트에 있는 가격 합산하기 [1. 천 단위로 콤마를 찍어줄것 ] 이 부분은 처음에 react-currency-input (npm패키지)를 설치해서 자동으로 콤마를 찍어주는 방법을 사용했었다. 하지만 input에 입력할땐 잘 작동을 하는데 리스트로 올라가면 1,0000이런식으로 4자리 뒤에 콤마가 생성되고 console창엔 NaN가 나왔다. 타입문제인가 싶어서 number로 바꿔주었지만 해결되진 않았다. 아무래도 패키지 자체 오류인듯 싶어 정규식 방법을 쓰기로 했다. 아래처럼 함수식으로 만들고 사용을 했다. function priceToString(price) { return price.toString.. 2022. 5. 24. 리액트에서 이미지 엑박 이미지를 public 폴더에 넣어놓고 잘뜨던 이미지가 갑자기 엑박이 뜨면서 오류가 났다. 찾아보니 엑박을 해결하는데에는 몇가지 방법이 있었는데 먼저 이방법으로 사용했었지만 해결은 안되었고,,, process.env.PUBLIC_URL를 사용하여 해결하였다. render() { // Note: this is an escape hatch and should be used sparingly! // Normally we recommend using `import` for getting asset URLs // as described in “Adding Images and Fonts” above this section. return ; } 리액트 공식문서 참고: https://create-react-app.dev.. 2022. 5. 9. [React-API]api 불러오기 오류 해결 api를 이용해 영화앱 만들기 강의를 듣는데 강의내용은 메인페이지까지고 세부페이지는 스스로 응용해서 만들어야 하는데 페이지에 영화타이틀이랑 썸네일 등을 넣으려고 했지만 계속 오류... 왜 오류가 날까...ㅎㅎ 콘솔창엔 에러만뜨고 페이지는 아예 보이지 않았다. 알고보니 세부페이지의 json을 살펴보니 메인페이지 api와 조금 달랐다. 메인페이지는 [] 즉, 배열로 되어있고, 세부페이지는 {} 객체로 표기되어 있었다. 아나,, ㅎ 이래서 map함수가 Uncaught TypeError: movie.map is not a function 뜨면서 에러가 났던것.. 원인을 아니 속이 너무 시원하다. 이럴땐 map함수 대신 바로 프로퍼티를 찍어주면 된다. (아래 코드 참고) import { useParams } fr.. 2022. 4. 12. [Planner App/JS] D-day 생성하기 html의 input date타입을 사용하여 D-day 생성기능을 구현하고 싶었다. 구글링시 대다수가 아래와 같은 방식으로 알려주는데 내가 해보면 계속 NaN가 나왔다. 😭 function diffDay() { const masTime = new Date("yyyy-mm-dd"); const todayTime = new Date(); const diff = masTime - todayTime; const diffDay = Math.floor(diff / (1000*60*60*24)); } 이렇게 해보고 저렇게 해봐도 오류가 나서 다른 방법이 없을까 물색하던중 이 글을 참고하기로 했다. function dDay(){ const leftDay = inputDate.value const date = new .. 2022. 3. 14. [Planner App/JS] to do list 전체삭제 하기 구현 JS입문강의를 다듣고 크롬앱을 만드는 강의를 들으며 플래너 앱을 만들어보기로 했다. 드디어 JS를 이용해 만들어보는 첫 프로젝트다 얼추 틀은 갖춰졌지만 강의에 없는 내용을 구현하기 위해 해결해야할 문제들이 있었다. 그중 하나는 clear버튼을 하단에 만들어서 해당 요일의 리스트를 전체삭제를 하는것! 간단한 기능이니 구현하기 쉬울줄 알았다. 하지만 좀처럼 되질 않았고.. (더닝크루거 효과가 생각난다. 우매함의 봉우리에 있었다. 쉬울거라 생각한거 취소!ㅠㅠ) 어제 밤부터 고민하며 잠들다 오늘아침에 해결했다(꿈에서 까지도 이것때매 끙끙거리는 꿈을 꿨다..😂) 어쨋든 구현하느데 성공해서 신나서 글을 쓴다. 투두리스트 하단에 clear 버튼을 만들어서 목록을 전체삭제 하게끔 구현하는데 드디어 성공.! 처음에는 개.. 2022. 3. 3. 이전 1 다음 320x100
