2021년 02월 04일
React Native 설치 & 에러
공식문서 AOS/iOS 에뮬레이터 설치
https://reactnative.dev/docs/environment-setup
error Failed to install the app
error Failed to install the app. Make sure you have an Android emulator running or a > device connected. Run CLI with –verbose flag for more details.
bash chmod 755 android/gradlew실행- emulator -list-avds 리스트 뜨는지 확인
- ~/.bash_profile 또는 ~/.zshrc 에 path 정상 등록되어있는지 확인
Task :app:stripDebugDebugSymbols UP-TO-DATE Compatible side by side NDK version was not found.
Task :app:installDebug FAILED
Android Studio -> Configure -> SDK Manager -> SDK Tools -> NDK 설치
Failed to run jetifier
yarn
yarn add -D jetifier
npx jetify
npx react-native run-android
or
react-native run-android --no-jetifier
-
2021년 03월 09일
axios timeout 설정
axios은 기본적으로 api timeout이 설정되어 있지 않다. 따라서 API를 호출하면 서버에서 응답 주기 전까지는 계속 연결되어 았다. ## axios timeout 설정하기 axios를 생성하여 timeout을 옵션으로 추가하고 해당 인스턴스로 api를 호출하도록 작업을 진행한다. ```js const instance = axios.create({ timeout: 30000, }); export const baseApi = (method, url, params) => { return instance .request({ method, url, data: params, }) .then(axiosResponseToData) .catch(axiosErrorResToData); }; ``` 기존에 ts로 작성되어 있던 부분들인데, 불필요해 보여 제거 후 함수만 등록하였다.
-
2021년 03월 08일
ERROR: Failed to build gem native extension.
```bash ERROR: Error installing jekyll-sitemap: ERROR: Failed to build gem native extension. ``` gem으로 jekyll 모듈을 설치하는 과정에서 다음과 같은 오류가 나타났다. 검색해보니 xcode 관련 자료만 나오다가 해당 모듈이 사용 중인 jekyll 버전을 미지원하는 내용이 나왔다. #### 해당 모듈의 버전 리스트를 검색한다. ```bash gem list --remote --all jekyll-sitemap *** REMOTE GEMS *** jekyll-sitemap ( [versions] ) ``` #### 지원하는 버전을 설치해보자. ```bash sudo gem install jekyll-sitemap -v [version] Successfully installed jekyll-sitemap-[version] ``` 사용하려는 [jekyll-sitemap](https://github.com/jekyll/jekyll-sitemap)은 현재 jekyll 버전에서 v1.2.0까지만 지원한다고 한다. 지원 여부를 깃헙에서 확인해 봤으면 됐을 텐데, 오류만 검색하다가 시간을 많이 소모했다. --- 이렇게 모듈을 설치하고 빌드하니 gem install을 실행하라고 한다. Gemfile.lock 파일을 삭제하지 않아 의존성 체크가 되었는데, 신기하게 gem install 하니 직접 설치할 때 오류 나던 jekyll-sitemap 1.4.0이 설치되었다. lock 파일의 의존성은 알겠으나 yarn.lock 하고 좀 다르게 동작하는 느낌이다. 아직 gem에 대한 이해가 부족해서 나온 이슈인데, 공부가 필요할 듯하다. ### 참고 자료 [understanding-the-gemfile-lock-file](https://stackoverflow.com/questions/7517524/understanding-the-gemfile-lock-file) [https://stackoverflow.com/questions/4907668/removing-all-installed-gems-and-starting-over/49960935](https://stackoverflow.com/questions/4907668/removing-all-installed-gems-and-starting-over/49960935)
-
2020년 01월 17일
스크롤 맨 하단으로 이동
채팅과 같이 메시지가 도착하면 최하단으로 계속 이동해야하는 경우나 단순 최하단으로 이동하고 싶을 때 구현하는 방법입니다. 자바스크립트에서 스크롤 하단으로 이동 엘리먼트의 height만큼 scroll 위치를 이동합니다. // overflow 스크롤이 걸려있는 엘리먼트 const ele = document.querySelector("ul"); ele.scrollTop = ele.scrollHeight; React에서 응용하기 React에서 채팅 레이아웃에서 메시지가 들어올 때마다 최하단으로 이동하는 코드입니다. import React, { useRef, useEffect } from 'react'; import { useMessages } from 'Hooks'; ... const messagesRef = useRef<HTMLUListElement>(null); // 메시지 엘리먼트를 저장 const { messages } = useMessages(); // Custom Hooks : 메시지 리스트 useEffect(() => { messagesRef.current!.scrollTop = messagesRef.current!.scrollHeight; }, [messages]); ... return ( <ul className="messages" ref={messagesRef}> {messages.map(message => { return ( <li key={message.key}> ... </li> ); })} </ul>; ) firebase를 사용하고 있으며, 메시지를 구독하면 useMessages에서 messages를 내려줍니다. 이후 messages가 업데이트될 때 마다, ul 엘리먼트를 최하단으로 이동합니다. 만일 특별하게 최하단으로 이동하기 싫으시다면, useEffect 내에 if문으로 조건을 설정하시면 됩니다.