React Native 로그인: 알아야 할 모든 것!

로깅은 개발 단계 자체에서 앱을 디버깅하는 가장 쉽고 빠른 방법 중 하나이므로 React Native 앱 개발 프로젝트에서 중요한 측면입니다. 로깅은 코드가 실행되는 동안 문제에 대한 자세한 정보와 피드백을 제공합니다. 또한 개발자가 앱의 동작을 이해하는 데 도움이 됩니다.

단, 로깅은 앱 개발 과정에서 수행되어야 합니다. 앱이 배포되면 더 이상 유용하지 않습니다. 이는 이러한 로그가 클라이언트 측에서 생성되기 때문입니다. 따라서 배포 후 단계에서 로그를 통해 감지된 오류는 사용자만 액세스할 수 있으며 브라우저에서 손실됩니다. 개발팀은 사용자가 발생할 가능성이 가장 낮은 버그 보고서를 작성하는 경우에만 이러한 오류를 식별할 수 있습니다. 사용자는 대부분 문제를 보고하는 대신 앱을 버립니다.

이 게시물은 React Native 프로젝트 로그인과 제한 사항을 해결하는 방법에 대한 포괄적인 통찰력을 제공합니다. 그러나 더 깊이 들어가기 전에 React Native App의 아키텍처를 살짝 살펴보겠습니다.

기본 아키텍처/실행 환경 반응

React Native 실행 환경은 "Native" 스레드, "JS" 스레드 및 섀도우 노드를 처리하는 백그라운드 스레드의 세 가지 주요 스레드로 구성됩니다. 이러한 스레드는 "Bridge"라는 라이브러리를 통해 서로 통신합니다.

React Native 로그인: 고려해야 할 주요 단계

이제 React Native 환경에서 로그인에 대한 종합적인 인사이트를 수집해 보겠습니다.

로그를 읽는 방법

JavaScript 로그는 "개발자 도구" 섹션의 "콘솔" 부분에서 볼 수 있습니다. 원격 JavaScript 디버깅에 사용되는 브라우저에서 "개발자 도구"를 찾을 수 있습니다. 그러나 React Native 개발자는 디버거가 연결되어 있을 때 이러한 로그를 볼 수 있으며 이로 인해 앱 실행 프로세스가 어느 정도 느려질 수 있습니다. 그래서 해결책은 무엇입니까? 로깅이 진행되는 동안 장치가 느려지지 않도록 react-native log-ios(iOS 앱용) 및 react-native log-android(Android 앱용)와 같은 명령을 사용해야 합니다. 이렇게 하면 JavaScript 스레드뿐만 아니라 전체 앱에서 진행되는 작업에 대해 더 많이 알게 됩니다.

로그를 더 명확하게 읽을 수 있도록 자세히 논의하겠습니다!

콘솔 로그

콘솔 로그를 보려면 npx expo start 명령을 실행하고 장치를 연결해야 합니다. 콘솔 로그는 터미널 프로세스에 나타납니다. 런타임은 웹 소켓을 통해 이러한 로그를 Expo CLI로 보냅니다. 여기서는 개발 도구가 엔진에 직접 연결되어 있지 않기 때문에 충실도가 낮은 로그를 얻습니다. 충실도가 높은 로그를 생성하려면 console.table과 같은 고급 로깅 ​​기능을 사용할 수 있습니다. 이를 위해서는 Hermes를 사용하여 개발용 빌드를 생성한 후 인스펙터를 연결해야 합니다. Hermes는 React Native 환경에 최적화된 JS 엔진입니다. Hermes는 사전 JS 컴파일을 바이트코드로 수행하여 앱의 시작 시간을 개선합니다.

시스템 로그

이러한 유형의 로그는 장치에서 발생하는 모든 로그와 운영 체제 및 기타 앱에서 생성된 로그를 보려는 경우에 유용합니다. 이를 위해 터미널에서 다음 명령을 사용해야 합니다.

Android 기기의 경우: npx react-native log-android

iOS 기기의 경우: react-native log-npxios

로그 작성 방법

로그를 작성하는 방법은 다음과 같습니다! React Native 콘솔 로그에 대한 출력은 애플리케이션 로그에 나타납니다. 로그를 작성하는 동안 적절한 로그 수준을 사용하는 것이 중요합니다. console.log 외에도 console.info, console.warn, console.debug 등과 같은 다른 로그 수준이 있습니다. 이러한 각 로그에는 특정 목적이 있으며 필요한 정보 수준을 보다 세부적으로 제어할 수 있습니다. console.info를 사용하여 예상 패턴에 따라 일련의 이벤트가 발생했는지 확인할 수 있습니다. 예기치 않은 인스턴스가 발생하면 console.warn이 사용됩니다. 예를 들어 완전히 잘못된 것은 아니지만 의심스러워 보이는 서버 응답이 있습니다. consoe.debug는 문제 해결을 위해 임시 로그가 필요할 때 사용됩니다.

로깅 라이브러리의 중요성

클라이언트의 요구 사항에 따라 다양한 수준에 따라 로그를 저장하므로 로그를 작성하는 동안 로깅 라이브러리를 사용하는 것이 좋습니다. 로그는 암호화된 파일 형식으로 저장되며 개발자 참조를 위해 로그 메시지가 전송되거나 표시됩니다. 이러한 즉시 사용 가능한 로거는 개발자의 시간과 노력을 절약해 줍니다.

프로덕션 환경에 적절한 로그 파일이 없으면 문제를 디버깅하기가 어려워집니다. 이는 로그 파일이 예기치 않은 문제나 연결이 끊긴 오류를 디버깅하는 데 도움이 되는 유일한 정보 소스이기 때문입니다. 로깅 라이브러리를 사용하면 이 제한 사항을 해결할 수 있습니다.

기본 로깅 라이브러리 반응: 예제

반응 네이티브 파일 로거

React-native-file-logger는 반응 네이티브 환경을 위한 파일 로거이며 Logback(Android용) 및 CocoaLumberjack(iOS용)의 파일 로거를 사용하여 콘솔 호출의 메시지를 로그 파일에 추가할 수 있습니다. FileLogger.configure() 명령을 사용하여 구성합니다. 일단 구성되면 기존의 모든 console.log/debug/… 호출을 파일에 자동으로 기록합니다.

React-native-file-logger는 TypeScript로 작성되었으며 선택적 파일 롤링 정책을 제공합니다. 파일은 필요한 크기와 시간에 따라 롤링됩니다. 롤링 정책은 고도로 사용자 정의할 수 있습니다. 파일 출력에 대한 로그 수준과 로그 파일이 저장되는 경로인 로그 디렉터리를 사용자 지정할 수 있습니다. 또한 파일 로깅에 콘솔 호출을 사용하지 않으려면 로거 API를 사용하여 로그 파일에 직접 메시지를 쓸 수 있는 옵션이 있습니다.

이 로거는 다른 라이브러리에 의존하지 않고도 개발자에게 파일 로그를 이메일로 보낼 수 있습니다. 로거는 React Native의 문서화되지 않은 global._inspectorLog를 사용합니다. React-native-file-logger를 사용하여 콘솔 호출을 가로채고 형식화된 로그 메시지를 검색할 수 있습니다.

반응 네이티브 로그

이 React Native 로거는 파일 쓰기, 컬러 콘솔 등과 같은 사용자 지정 "로그 수준" 및 "전송"과 함께 제공됩니다. 각 로그 수준의 심각도가 표시됩니다. 로그 수준은 중요도에 따라 오름차순으로 정렬됩니다. 그 후 "transport"가 로그를 관리합니다. "전송"은 로그 메시지를 저장, 표시 및 전송하는 기능입니다.

설치하려면 다음 두 명령 중 하나를 실행하십시오.

npm install – 반응 네이티브 로그 저장

또는

실 추가 반응 네이티브 로그

이제 볼 롤링을 설정하십시오! react-native-logs로 이동하고 거기에서

{ 로거 } 가져오기.

그런 다음 var log = logger.createLogger 명령을 실행합니다.

"createLogger" 메서드를 사용하면 경고, 디버그 및 오류 수준을 제공하는 간단한 로거를 만들 수 있습니다. 이 로거를 사용자 지정하려면 "createLogger" 메서드에 구성 개체를 전달해야 합니다.

"전송"에 대해 개발자는 로그를 클라우드 서비스로 전송하기 위한 고유한 "전송" 사양을 작성할 수 있습니다. 또한 hideDate, hideLevel, loggerName, dateFormat 등과 같은 몇 가지 기본 "전송" 옵션 중에서 선택할 수 있습니다. 매개변수를 설정한 경우 – transportOptions. 여기에서 전송에 전달되는 새 옵션을 추가하고 미리 설정된 전송 옵션을 덮어쓸 수도 있습니다.

로그의 심각도 수준을 설정할 수 있습니다. 이를 위해 가장 중요하지 않은 레벨의 이름(문자열)을 전달해야 합니다. 여기에서 로거가 생성될 때 설정된 config.severity 옵션을 덮어쓸 수 있습니다.

로그에 표시되는 다양한 유형의 오류를 처리하는 방법

개발 빌드의 모든 경고 및 오류는 앱에 있는 LogBox 안에 나타납니다. 이 LogBox는 프로덕션 빌드 릴리스 중에 자동으로 비활성화됩니다. 로그를 무시하는 것은 좋은 방법이 아니며 최후의 수단이어야 합니다. 그리고 불가피한 이유로 로그를 무시해야 하는 경우 나중에 해당 로그를 수정하는 작업을 만드십시오.

콘솔 오류

노란색 또는 빨간색 배지가 있는 화면 알림의 형태로 콘솔 오류 및 경고를 볼 수 있습니다. 경고 및 오류 수도 표시됩니다. 콘솔 경고 및 오류를 읽으려면 알림을 클릭해야 합니다. 그런 다음 로그에 대한 전체 화면 정보가 표시되고 콘솔 내부에 있는 모든 로그를 통해 페이지를 매길 수 있습니다.

LogBox.ignoreAllLogs() 명령을 사용하여 앞서 언급한 알림을 숨길 수 있습니다. 이 접근 방식은 제품 데모를 제공하는 동안 유용합니다. "로그별" 접근 방식에 따라 알림을 숨길 수도 있습니다. 여기에 LogBox.ignoreLogs() 명령을 입력해야 합니다. 이 접근 방식은 수정할 수 없는 시끄러운 경고를 처리하는 데 사용할 수 있습니다. 예를 들어 타사 종속성에 있는 항목입니다.

구문 오류

구문 오류가 있을 때마다 전체 화면 LogBox 오류가 나타납니다. LogBox는 스택 추적과 구문 오류의 위치를 ​​보여줍니다. 이러한 오류는 앱 개발 프로세스를 계속하기 전에 반드시 해결해야 하는 잘못된 JS 실행을 나타내므로 무시할 수 없습니다. 이것이 구문 오류를 해제하기 위해 수행해야 하는 방법입니다. 오류를 수정하십시오. 그런 다음 빠른 새로 고침을 활성화하고 "자동 해제"로 저장하거나 빠른 새로 고침을 비활성화하고 cmd+r 명령을 사용하여 다시 로드하는 두 가지 방법 중 하나를 사용할 수 있습니다.

처리되지 않은 JS 오류

이전에 처리되지 않은 JavaScript 오류는 오류 소스를 보여주는 전체 화면 LogBox를 자동으로 표시합니다. 이러한 오류가 발생하면 해당 오류를 무시하거나 최소화하여 응용 프로그램의 상태를 볼 수 있습니다. 그러나 이러한 오류를 해결하는 것이 좋습니다.

결론

React Native 로그인에 대한 다양한 접근 방식에 대한 실행 가능한 통찰력을 수집하셨기를 바랍니다. 최고 수준의 React Native 앱을 만들려면 개발팀이 예기치 않은 이벤트 및 오류를 처리할 수 있는 장비를 갖추어야 합니다. 또한 로깅을 통해 오류의 근본 원인을 찾고 개발자가 문제를 쉽게 해결할 수 있습니다. 그러나 UX에 영향을 주지 않고 이점을 얻으려면 로깅 프로세스를 적절하게 수행해야 합니다. 따라서 소프트웨어 개발 프로젝트를 실행할 숙련된 React Native 앱 개발 회사를 선택하는 것이 중요합니다.