상상을 현실로 상상을 현실로

1. 리액트에서 라이프 사이클 이란? 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리 언어이다. 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 생명주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링 되기 전 준비 과정에서 시작해서 페이지에서 사라질 때 끝이 난다. 2. 라이프 사이클의 유형 라이플 사이클은 크게 3가지 유형으로 나눌 수 있는데 생성이 될 때, 업데이트할 때, 제거할 때이다. 리액트에서는 이러한 작업을 Mount, Update, Unmount라고 한다. Mount는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻한다. Unmount는 DOM에서 제거되는 것을 뜻한다. Update는 다음과 같은 4가지 상황에서 발생한다. Props가 바뀔 때 State가 바뀔 때..

1. 리액트 네이브 란? (React Native) 리액트 네이티브는 'iOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크' 입니다. 페이스북의 자바스크립트 라이브러리인 리액트에 기반을 두고 있으며, 모바일 플랫폼이 타깃입니다. 즉, 웹 개발자가 익숙한 자바스크립트를 활용하여 네이티브 모바일 앱을 만들 수 있습니다. 게다가 작성한 코드 대부분을 플랫폼 간에 공유할 수 있어서 리액트 네이티브를 이용하면 iOS와 Aanroid 앱을 동시에 개발할 수 있습니다. 2. 크로스 플랫폼 앱 개발 프레임워크 비교 Flutter : Flutter는 간단하면서도 지속적인 크로스 플랫폼 앱 개발을 가능하게 하며 최근 급상하고 있다. 주로 배우기 쉬운 반응형 객체 지향 언어인 Dart를 기반..

React에서 컴포넌트를 작성하는 방법은 클래스형(Class Component)과 함수형(Function Component) 두 가지 방법이 있다. 현재는 함수형 방식으로 구현을 많이한다. 하지만 클래스형 방식으로 구현이 된 프로젝트가 많기 때문에 클래스형 방식도 배워야 한다. 1. 선언 - 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const name = 'react native'; return {name} } } export default App; class 키워드 사용 Component 상속 render() 메서드가 반드시 있어야 함 - 함수형 컴포넌트 import React fr..

옵셔널이란? - 값이 있을 수도, 없을 수도 있는 변수 let num: Int = 0 // Non-optional Type let optionalNum: Int? = 0 // Optional Type 타입 이름 뒤에 " ? "를 붙여서 사용하게 되면 Optional Type이 된다. let num: Int // ERROR let num: Int = nil // ERROR let optionalNum: Int? = nil // nil let optionalNum: Int? // nil Non-Optional Type은 초기화를 하지 않거나 nil 값이 들어왔을 때 Error가 발생한다. 왜냐하면 Non-Optional Type은 선언한 타입 외의 값이 들어올 수가 없기 때문이다. Opional Type은 ..

오토 레이아웃(Auto Layout) 이란? 오토 레이아웃(Auto Layout)은 제약조건(Constraints)을 이용해서 뷰의 위치를 지정하는 것. 다시 말하면, 두 뷰 사이의 관계를 제약 조건이라는 것을 이용해서 뷰의 크기와 위치를 지정하는 것. - 오토 레이아웃은 여러 해상도를 지원하기 위해 개발됨 - iPhone의 크기가 다양해지면서 해상도가 달라지게 되었고, 서로 다른 크기에서도 같은 화면을 보여주기 위함 - 세로 보기 화면 뿐만 아니라 가로 보기 화면까지도 지원 됨 - 만약 오토 레이아웃을 사용하지 않는다면, iPhone 기종만다 스토리보드를 만들어야 하고 그로 인해 다수의 스토리보드 파일이 생성을 해야 됨으로 효율성이 없음 - 오토 레이아웃을 이용해서 하나의 스토리보드에서 모두 대응 가능..

기본 UI 개념 정리 - UIView : 뷰 계층 구조에서 부모의 사각형 영역 내에서 그리기 하위 뷰 레이아웃 및 이벤트 처리를 위한 구조를 제공하는 오브젝트 - UILabel : 하나 이상의 여러 라인을 표시할 수 있는 오브젝트 설정한 경계 사각형의 크기와 속성에 따라 텍스트를 축소, 줄 바꿈 또는 자를 수 있음. 텍스트의 글꼴, 텍스트 색상, 정렬, 강조 표시 및 음영을 제어 가능 - UIButton: 유저의 인터렉션을 통해 커스텀 코드를 실행할 수 있는 제어 오브젝트 버튼의 제목, 이미지 및 기타 모양 속성을 설정가능 각 버튼 상태에 대해 다른 모양을 지정 가능 - UIScrollView : 애플레케이션 창의 크기보다 큰 콘텍츠를 표시하는 메커니즘 제공 스와이프 등을 활용해서 스크롤 할 수 있는 오..