분류 전체보기43 ReactNode | ReactElement 에러 로그 TS2322: Type 'false | Element' is not assignable to type 'ReactElement'. Type 'boolean' is not assignable to type 'ReactElement'. 자바스크립트로 만들어진 프로젝트를 타입스크립트로 마이그레이션 하는 도중 위와 같은 에러를 만났다. 아래 예시 처럼 isSomthingTrue가 true인 경우에만 특정 엘리먼트를 반환하는 코드였는데 자바스크립트에서는 문제 없이 동작하였지만 타입 스크립트에서 ParentElement의 children props의 타입을 ReactElement | ReactElement[] 로 지정하자 위와 같은 에러가 발생했다. {...} {isSomethingTrue && ( So.. 2021. 12. 20. 운영체제 스케줄링의 종류 스케줄링 종류 배치 처리 시스템 프로그램을 순차적으로 실행될 수 있드록 하는 시스템 큐 구조와 비슷하다 문제점 특정 프로그램은 실행시간이 너무 오래 걸려서 다른 프로그램 실행을 위해 오랜 시간을 기다려야 할 수 있음 ex) 음악을 들으면서 문서 작성이 불가능하다 다양한 프로그램 동시 실행이 불가능하다 (동시성) 여러 사용자가 동시에 하나의 컴퓨터를 사용할 수 없다 (다중 사용자 지원) 시분할 시스템 다중 사용자 지원을 위해 응답 시간을 최소화 하는 시스템 멀티 태스킹 단일 CPU에서 여러 응용프로그램이 동시에 실행되는 것 처럼 보이도록 하는 시스템 실제 멀티 태스킹 (리눅스) 10~20ms 마다 실행 프로그램이 바뀌어 사용자에게는 동시에 실행되는 것처럼 보인다 특정 시점에 실행되고 있는 프로그램은 하나이.. 2021. 12. 20. 운영체제의 구조 운영체제란 (Operating System 또는 OS) 운영체제 역할 1. 시스템 자원 관리자 시스템 자원이란 ? CPU (중앙처리장치), Memory (RAM), I/O Devices (입출력장치), 저장매체 (SSD, HDD) 등 컴퓨터 하드웨어 컴퓨터 하드웨어는 스스로 할 수 있는 것이 없으며 운영체제가 관리한다. 2. 사용자와 컴퓨터간의 커뮤니케이션 지원 3. 응용 프로그램 제어 응용 프로그램이란? 응용 프로그램 (Application) = 소프트웨어 운영체제 또한 소프트웨어이다. 운영체제는 저장매체에 설치되며 컴퓨터를 켜면 운영체제는 Memory에 올라간다. 참고: https://namu.wiki/w/%ED%8F%B0%EB%85%B8%EC%9D%B4%EB%A7%8C%20%EA%B5%AC%EC%A.. 2021. 12. 19. 트러블 슈팅 - 키보드가 UI를 가리는 경우 (KeyboardAvoidingView) 문제가 되었던 사항 android의 경우 버튼을 하단에 위치시키면 키보드가 올라올때 자동으로 버튼이 키보드 위로 올라가게 된다. 그러나 ios의 경우 키보드가 올라와도 버튼이 제자리에 있어 키보드를 내린 후 버튼을 클릭해야 하는 불편함이 생기게 되었다. 해결방안 React Native에서 제공하는 KeyboardAvoidingView를 컴포넌트화하여 해당 문제가 발생하는 UI에 적용하였다. 키보드 높이를 구해 키보드만큼 버튼의 높이를 올리려고 하였으나 디바이스마다 키보드의 높이가 달라 몇가지 문제가 있었다. 1. keyboardVerticalOffset에 keyboardHeight을 그대로 전달하였으나 너무 높이 올라가 0.1씩 수정해가며 3.4라는 수치를 찾음 2. 3.4라는 수치는 찾았으나 keybo.. 2021. 11. 25. React Native 보안편 소스코드 난독화 - Android 적용 배경 업무 중 클라이언트 측 보안 정책에 위반되는 항목 중 소스코드 난독화가 되지 않은 점이 있어 난독화를 적용하게 되었다. 클라이언트 측에서는 안드로이드 앱에서의 난독화만 요청하였는데 일단 보안은 굉장히 중요한 부분이고 React Native로 개발을 하고 있기 때문에 조만간 IOS, JS 소스코드 난독화도 적용 후 기록할 예정이다. 적용 과정 Proguard 적용 알아보기 Proguard란 ? 소스코드를 난독화 및 최적화 해주는 무료 오픈소스 툴이다. Android grade plugin 3.4.0 이상 버전에서는 기본적으로 R8 컴파일러를 사용한다. R8은 프로젝트의 자바 바이트 코드를 Android 플랫폼에서 실행되는 DEX 형식으로 변환하는 기본 컴파일러입니다. R8 대신 proguard .. 2021. 11. 14. React Native Firebase-Crashlytics 적용 적용 배경 앱 상용 배포 후 구글 콘솔을 통해 몇몇 비정상 종료건이 발견되었으나 구글 콘솔의 로그만으로는 정확한 원인 파악이 어려워 에러 추적을 위해 Crashlystic을 적용하기로 하였다. 사용 라이브러리 @react-native-firebase/crashlytics 적용 과정 App Module Setting 필요 https://rnfirebase.io/ Firebase Crashlytic 세팅 전 앱 모듈 ( @react-native-firebase/app )이 먼저 세팅 되어 있어야 한다. React Native Firebase | React Native Firebase Welcome to React Native Firebase! To get started, you must first setup.. 2021. 11. 12. 트러블 슈팅 - ReactNative http request 중 백그라운드 전환시 Network Error 문제가 되었던 사항 특정 정보를 등록하는 api 요청시 응답시간이 최대 1분가량 걸리는 상황 안드로이드의 경우 문제가 없었지만 ios에서 문제가 발생했다. api 요청을 보낸 후 백그라운드 진입시 요청 cancel 되어 포그라운드 재진입시 네트워크 에러가 반환된다. 사용된 라이브러리 https://github.com/ivanzotov/react-native-begin-background-task 해결 과정 접근 방식 서버 개발자와 해당 이슈에 대해 소통한 결과 안드로이드의 경우 앱이 종료된 경우 cancel과 관련되어 보이는 요청을 보내는데 ios의 경우 백그라운드 진입 또는 앱이 종료된 경우 모두 해당 요청을 보내는 것을 확인하였다. 해당 요청을 보내 network error가 반환이 되어도 서버단에서.. 2021. 11. 11. 에러노트 - 웹뷰 Did not receive response to shouldStartLoad in time 워닝 문제가 되었던 사항 이벤트 페이지 이동 후 해당 이벤트 정보 api 호출 후 응답 데이터를 웹뷰로 띄워주는 스크린에서 진입시마다 Did not receive response to shouldStartLoad in time, defaulting to YES 워닝이 발생하며 진입 속도가 느려 버벅거림이 발생한다. 사용된 라이브러리 https://github.com/react-native-webview/react-native-webview GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView React Native Cross-Platform WebView. Contribute to react-native-w.. 2021. 11. 5. React Native 세션 타임아웃 (session timeout) 설정 앱 보안 진단 결과 취약점 중 세션 타임아웃 미설정이 있어 세션 타임아웃을 구현하였다. 취약점 일정시간이 지난 후 사이트에 재 접속 하였을 때 로그인 상태가 유지되거나 동일 세션 ID가 생성되는 경우 취약할 수 있다. 공격자가 다른 취약점을 통해 획득한 세션 ID를 브라우저에 적용하여 재 로그인 될 때를 기다리다가 해당 권한으로 접근이 될 수 있다. 또한 로그인 후 세션을 종료하지 않고 자리를 비우는 동안 악의적인 사용자가 접속된 터미널을 이용하여 불법적인 행위를 시도할 수 있다. 설정 방법 react-native의 AppState를 사용하여 구현 앱이 백그라운드로 전환된 후 30분 이상 경과 후 앱 복귀 시 로그아웃 처리 하였다. useEffect(() => { const handleAppStateCh.. 2021. 10. 7. Web Storage ( 브라우저 저장소 )와 쿠키 쿠키란? HTTP 쿠키 서버가 사용자의 웹 브라우저에 보내는 작은 데이터 조각이다. Stateless 한 HTTP 프로토콜의 상태 저장 정보를 기억하는데 사용된다. Stateless 란? 모든 HTTP Request는 완전히 독립되어 전후 요청에 영향을 받지 않는다. 즉, 이전 요청에 대한 데이터를 따로 저장하지 않으면 서버에서 매번 모든 데이터를 보내야 한다. 이를 극복하기 위해 쿠키 ( 외 다양한 Storage )를 사용한다. 쿠키 특징 HTTP 요청이 있을 때마다 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있다. HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약하다. 쿠키는 개수와 용량에 제한이 있으며 만료일자를 지정하게 되어 있다. 만료.. 2021. 10. 7. 이전 1 2 3 4 5 다음
