Tech Log

scrollView 와 FlatList 모두 화면에 많은 양의 데이터를 나타내고자 할 때 사용되는 컴포넌트이다. 공통점 데이터가 많아 화면을 넘어가려할 때 화면에 스크롤을 만들어준다. 차이점 ScrollView 처리해야 할 데이터의 양이 적은 경우에만 사용 ScrollView의 경우 ScrollView에 속한 자식 컴포넌트들을 한 번에 렌더링한다. 따라서, ScrollView를 이용하여 많은 양의 데이터를 나타내려고 하면 속도와 성능이 저하된다. 한 번에 많은 데이터를 처리하려 하고 상당한 메모리를 잡아먹기 때문이다. FlatList 데이터의 길이가 유동적일 때/알 수 없을 때 사용 FlatList의 경우 ScrollView와 다르게 렌더링이 느리게 된다. 또한, 화면 밖에 있어 나오지 않는 항목들은 삭..

개요 : 안드로이드 스튜디오에서 mySQL의 데이터를 받아올 때 Retrofit2 라이브러리를 사용하게 되었다. retrofit2에 대해서 복습해볼겸 포스팅을 작성해보았다. 외부 DB인 mySQL의 데이터를 가져오기 위해서 node.js를 사용해서 서버를 구축하고, 그 서버를 Retrofit 2로 안드로이드 스튜디오와 통신해주었다. Retrofit2이란? 네트워크로부터 전달된 데이터를 프로그램에서 필요한 형태의 객체로 받을 수 있게 하는 HttpClient 라이브러리이다. 이때 네트워크로부터 전달된 데이터를 프로그램에서 필요한 형태의 객체로 받을 수 있다는 말을 TypeSafe하다고 표현할 수 있다. Retrofit2를 쓰는 이유? Retrofit2는 Http 통신을 쉽게 하고 속도가 빠르다 또한 코드의..

desktop unable to merge unrelated histories in this repository Git bash로 push 시키고 push된 것을 Github desktop에서도 반영시키려고 default branch에서 pull하려는데 이러한 문제가 발생했다. default branch에 있는 파일과 전혀 관련없는 파일들(다른 branch에 있는)을 강제로 push시키고 desktop에서 pull하면 이런 결과가 나올 수 있다. Git에서는 서로 관련 히스토리가 없는 프로젝트를 병합하는 것을 기본적으로는 허용하지 않는다. 따라서 이와 같은 문제가 발생한 것이다. 문제의 전말은, 안드로이드 스튜디오에서 master branch가 만들어져있었고 원격 저장소에는 master branch가 없..

App.js에 코드를 작성하면 실제 디바이스 화면을 나타낼 수 있다. App.js는 크게 import문, body문, body문을 꾸미는 styles로 구성된다. 리액트 네이티브에서는 웹에서 많이 사용하는 HTML 태그 대신에 리액트 네이티브에서 정한 태그(컴포넌트)만 사용할 수 있다. 이러한 리액트 네이티브의 컴포넌트는 App.js의 body문에 작성한다. 또한, 컴포넌트는 import문에서 가져온다음 사용되기도 한다. View 리액트 네이티브의 컴포넌트 중에서 가장 근본이 되는 것은 View 이다. View는 전체적인 레이아웃을 잡아주는 역할을 한다. 웹에서는 div와 가장 유사하게 사용된다. 중첩이 가능하다. 아래와 같이 사용한다. View는 다른 컴포넌트들을 감싸준다. import React fr..

정의 사용자가 웹 브라우저에서 DOM 요소들과 상호작용 하는 것을 말한다. 예) 마우스 커서를 올렸을 때 onmouseover 이벤트를 실행한다. 사용 시 주의사항 1. 이벤트 이름은 카멜 표기법(camelCase)으로 작성한다. ex)HTML의 onclick 은 onClick으로 작성 2.이벤트에 실행할 문자열을 전달하는 것이 아니라 함수로 전달한다. ex)onClick = "함수 이름()" 이 아니라 onClick = {함수이름}으로 작성 HTML에서 이벤트를 설정할 때는 큰 따옴표 안에 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다. 3. DOM 요소에만 이벤트를 설정할 수 있다. ex) 이 아니라 ... 와 같은 형태로 작성해야 한다. 컴포넌트에 자체적으로 이벤트를 설정하는 것이 아니..

마운팅 과정은 이전에 작성한 포스트 내용을 참고하면 아래와 같다. constructor compnentWillMount 가 아니고 이 메서드가 deprecated된 것이라 getDerivedStateFromProps() 사용 render componentDidMount 해당 코드는 설정한 나이에 3초가 지나면 나이가 추가되는 코드다. 현재는 나이를 30살로 설정해놓았다. 콘솔창을 보면 코드가 실행된 순서를 알 수 있다. constructor()가 먼저 실행되고 그 다음에 getDerivedStateFromProps()가 실행되었다. render()하기 전, getDerivedStateFromProps()에서 설정한 나이에 10을 추가했기 때문에 3초가 지나기 전에도 나이에 10이 추가돼서 나온 것이다. ..

컴포넌트 라이프 사이클 모든 리액트 컴포넌트는 라이프 사이클(수명 주기)가 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전, 준비 과정에서 시작해서 페이지에서 사라질 때 끝난다. 리액트를 사용할 때 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 해야 하거나 컴포넌트를 업데이트 하기 전후로 어떤 작업을 해야할 수도 있다. 또한 불필요한 업데이트를 방지해야 할 때도 있을 수 있다. 이와 같은 상황을 위해 컴포넌트의 라이프 사이클 메서드를 사용한다. 이러한 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용가능하다. (함수형 컴포넌트에서는 사용할 수 없다는 의미) 대신 함수형 컴포넌트에서는 Hooks를 이용해서 비슷하게 라이프 사이클 메서드를 사용할 수 있다. 라이프 사이클 메서드 종류 라이프 사이클 메서드..

async / await 사용 목적 비동기 처리를 위해 사용한다. 비동기 처리 문법에는 콜백(callback), 프로미스(Promise)가 있지만 이들의 단점을 보완하기 위해서 사용된다. async / await의 사용으로 코드가 가독성 좋아지고 작성하기 쉬워진다. (참고 : 동기 처리와 비동기 처리) 비동기 처리는 서버에 데이터요청을 했을때, 언제 완료될지도 모르고 기다릴 수 없기 때문에 나머지 코드를 먼저 실행하는 것이다. 동기(Synchronous)의 경우, 위 사진과 같이 작업이 여러 개 있다고 가정하자. 한 작업 실행 후에 해당 작업이 완료되어야 다음 작업을 진행할 수 있다. 그래서 우리가 데이터를 받아올 때 기다려야 한다. (이때 로딩 화면만 계속 보고 있을 수 있다) 비동기(asynchron..