FE Development17 Class 인스턴스 메소드의 this와 Arrow Function에 대하여 이 글은 리액트의 Function Component에서 클래스의 인스턴스 메소드를 사용했을 때, 메소드 내부의 this가 undefined가 나왔던 이유에 대해 알아번 내용이다. 우선 문제가 되었던 코드 예시는 아래와 같다. export class SomeClass { private user: User; constructor(user: User) { console.log("initializing!"); this.user = user; } someFuncWithUser() { //...무엇인가 일을 한다. console.log(this.user); } } export default function useSomeClass() { const { user } = useAuthContext(); const { s.. 2023. 1. 18. React 밑바닥(webpack & babel) 부터 세팅하기 웹팩이란 ? 자바스크립트 어플리케이션을 위한 정적 모듈 번들러 의존성이 있는 모듈들을 하나의 파일로 통합시켜준다. 한 웹페이지에서 사용하는 여러개의 자바스크립트를 동시에 가져와서 생기는 네트워크 병목현상 방지한다. 모듈 단위로 개발할 수 있어 유지보수성을 높일 수 있다. 바벨이란 ? 최신 자바스크립트를 사용할 수 있게 하는 트랜스파일러 바벨은 히브리어로 '혼돈'이란 뜻이라고 성경에 나타나 있다. 자바스크립트의 문법은 빠르게 진화하고 있지만 정작 자바스크립트 코드를 실행해주는 환경은 이를 지원해주지 못하는 경우가 많다. 구약성경에서 바벨탑 건설 중 언어가 뒤섞여 혼돈 속에 바벨 탑 건설을 그만두었던 일화처럼 다양한 웹 브라우저, node.js 등 각기 다른 환경에서 혼돈에 빠지지 않고 자바스크립트 코드가 .. 2022. 8. 29. HTTP/1.1 vs HTTP/2.0 HTTP/1.1 Connection Connection 일반 헤더는 현재의 전송이 완료된 후 네트워크 접속을 유지할지 말지를 제어한다.. 만약 전송된 값이 keep-alive면, 연결은 지속되고 끊기지 않으며, 동일한 서버에 대한 후속 요청을 수행할 수 있습니다. http/1.1의 경우 일반적으로 하나의 connection에 하나의 요청을 처리 한다. 그러므로 요청마다 connection을 만들게 되고 TCP 특성상 매 연결마다 3 Way Handshake 가 반복적으로 일어나 불필요한 RTT증가와 네트워크 지연을 초래하여 성능을 저하 시키게 된다. http/1.0 에서는 요청 헤더에 Connection: Keep-Alive를 추가하면 이용할 수 있다. http/1.1 에서는 기본으로 동작한다. 3 Wa.. 2022. 3. 2. 리플로우와 리페인트 - 브라우저의 렌더링 과정 렌더링 과정 (Critical Rendering Path) DOM 트리 생성 마크업 언어로 만들어진 문자열을 메모리에서 다루기 위해 HTML 태그를 파싱해 DOM 트리를 구성한다. DOM은 데이터의 표현식으로 모든 HTML 태그는 태그 테이터의 표현식인 DOM 요소로 1:1로 대응해 표현된다. 메모리에 만들어진 객체를 document라고 하고 구조를 DOM이라고 한다. 이 구조는 트리형태로 구성되며 이를 DOM트리 라고 한다. CSSOM 트리 생성 StyleSheet을 파싱하여 CSSOM (스타일 구조체)를 생성한다. 스타일 정보는 단계적으로 처리되며 가장 마지막 단계의 스타일 정보가 이전 스타일보다 우선적으로 적용된다. 스타일 정보의 처리 단계 브라우저 자체에 포함된 기본 스타일 정보 (User Age.. 2022. 2. 20. 에러노트 - can't perform a react state update on an unmounted component 문제가 되었던 사항 can't perform a react state update on an unmounted component 라는 warning 발생 해결과정 이슈 서칭 많은 초보 리액트 개발자들이 실수하고 있는 부분이어서 쉽게 원인을 찾아낼 수 있었다. 말 그대로 unmount된 컴포넌트의 상태를 업데이트 할 수 없고 이는 수행되지 않지만 메모리 누수를 일으킬 수 있다는 내용의 warning이었다. Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and as.. 2022. 2. 9. CodePush 적용 적용 과정 AppCenter 설정 npm install -g appcenter npm install appcenter appcenter-analytics appcenter-crashes npm install react-native-code-push AppCenter 앱 생성 Appcenter 페이지에서 생성 또는 cli 활용 Appcenter 페이지 Release Type = Production Platform = React Native cli appcenter apps create -d appName-aos -o android -p react-native appcenter apps create -d appName-ios -o ios -p react-native AppCenter 로그인 appcenter.. 2022. 1. 17. 트러블 슈팅 - FlatList 최적화 문제가 되었던 사항 Flatlist로 페이지네이션한 리스트의 항목이 70개 이상이 되는 경우 눈에 띄게 버벅이는 현상 ListHeaderComponent에 넘긴 TextInput에서 한글자 입력할때마다 키보드 창이 dismiss되는 현상 해결과정 Flatlist 최적화 방법에 대하여 찾아보며 문제를 해결하였다. 1번 문제의 경우 유니크한 key값을 지정하지 않아 발생한 이슈였으며 2번 문제의 경우 인라인 함수 작성으로 인해 한글자 입력시마다 (setState 호출시마다) 상태 변화로 인해 ListHeaderComponent로 넘긴 함수가 재호출 되어 발생한 이슈였다. 기존 코드 예시 // render header const renderHeaderView = () => ( ); ... name} conte.. 2022. 1. 13. react-native-webview을 통해 띄운 웹과 앱간의 인터랙션 진행중인 프로젝트에서 신규 개발을 진행하던 중 웹뷰로 띄워지는 화면에서 특정 버튼 클릭시 앱 내에서 필요한 화면으로 이동해야 하는 기능을 구현하게 되었다. 이전에 지도를 webview로 띄웠던 경우에는 지도 웹 또한 직접 구현하였기 때문에 JavaScript의 postMessage를 활용한 경험이 있었지만 이번에는 해당 웹을 수정하기는 어려운 상황이었고 react-native-webview에서 제공되는 injectedJavaScript를 이용해 구현하기로 하였다. WebView 컴포넌트 예시코드 injectedJavaScript 예시코드 웹뷰가 로드될때 특정 javascript 코드를 심어줄 수 있다. 아래의 예시는 클릭한 버튼의 value 속성값을 받아 해당하는 상세 정보를 보여주는 페이지로 이동하는 .. 2022. 1. 10. 트러블 슈팅 - 키보드가 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. 이전 1 2 다음
