Redux - React 생태계에서 가장 사용률이 높은 상태관리 라이브러리(다른 상태관리 Redux, MobX) - React만 사용해도 애플리케이션을 개발할 수 있지만 규모가 커지고 구조가 조금이라도 복잡해지면 컴포넌트의 props나 State를 관리하는게 어려움 -> 그래서 상태 관리 라이브러리 redux를 사용하여 상태를 단순하게 처리함 - Store안에 State가 저장함, store에는 reducer가 반드시 있어야 함 - Reducer(Handle Action, change state = 변화를 일으키는 함수 ) 는 state와 action을 받아 적절한 로직을 처리하여 새로운 state를 반환하고 그 값을 반영하여 새롭게 render를 그리도록함 Redux Data Flow - 엄격한 uni..
React 시작 하기 - 다음과 같이 명령어를 쓰면 webpack & babel을 한꺼번에 쓸 수 있음 - 마지막의 "." 의미? 현재 폴더 안에 react를 시작하겠다~ npx create-react-app . React 기본 구조 - return함수에 jsx문법(HTML처럼 생긴 ) 를 그대도 넣어주면 됨 - 태그에 class를 주고 싶을때는 App.js import React from 'react'; import './App.css'; function App() { let name = "React App" return ( {name} ); } export default App; (1) 만약에 css파일을 적용하고 싶다? ClassName 지정 App.css (className="App" in App..
webpack이란? - 쪼개진 javascript 파일을 html이 실행할 수 있는 javascript로 합쳐준다 참고) npx create-react-app . 명령어 후 webpack이 실행될 수 있는 건 src 안에서만 실행 - public 폴더안에서는 실행되지 않는다. npx create-react-app . webpack를 쓰는 이유? - javascript를 실제로 쓸 수 있는데 실제로 component로 하나로 하는 경우가 없음 - 댓글 component, ... component마다 script를 하나씩 만든다고 하면 엄청 많음, 페이스북 component개수? 2만개 - component가 많기 때문에 유지보수가 안됨 - webpack을 하려면 node를 알아야함 - node는? java..
구구단 Component 만들기 참고) 겉보기에는 멀쩡한데 실행이 안됨 ㅠ_ㅠ 왜안될까? {} -> {}안에 javascript를 쓸 수 있음 this는 class의 this를 가리킨다. 나눠서 보기 cosntructor(props){ super(props); this.state = { first : Math.ceil(Math.random() * 9), second : Math.ceil(Math.random() * 9), value : '', result : '', }; } this.state = {}; : 변할 것 같은것을 state로 만든다 this.onSubmit - 직접 만들어준 함수들은 무조건 ()=> 화살표 함수를 써야 함 - 이때 function을 쓰면 안됨 ex) function (e) 이..
React - 페이스북에서 만든 2013년에 릴리즈된 프레임워크 혹은 라이브러리 (강좌마다 부르는 이름이 다름... ) - 페이스북이 단일 웹 사이트중에서 규모가 제일 크다 - 데이터와 화면이 synchronization 하는것이 중요한데 React가 효과적이다. - React는 기본적으로 javascript , js 파일 - React에서는 es6 문법을 지원 , 실험적인 문법을 지원하기 위해더 바벨 내에서 작성하게 됨 React를 사용한 코드 react -> react가 동작하는 핵심적인 코드 react-dom -> react 코드를 웹에다가 붙여주는 역할을 함 react시작하자마자 설치해야하는것 react와 react-dom을 설치해줘야 함 실제 배포할 때는 react.development -> r..
1. Android Jetpack 란 ? - 멋진 Android 앱을 만들기 위한 컴포넌트, 도구 및 지침 세트 - 기존의 지원 라이브러리와 아키텍처 컴포넌트를 하나로 모아서, 다음과 같은 네 가지 범주로 배열 - 기본 Android 플랫폼에 속하지 않는 "별도의" 라이브러리로서 제공 - Android Jetpack 프로젝트의 Section 중 하나인 Android Architecture Component -> AAC - 참고) 현재 구글에서 권장하는 pattern? MVVM 패턴 -> 참고 링크 -> 간단 설명? - MVVM 패턴이란? View - ViewModel - Model을 사용하여 각각의 역할을 분리하여 가독성과 재 사용성을 높인다. - MVVM의 장점? (1) View가 데이터를 실시간으로 ..
레이아웃 구조 최적화 목차 1. 레이아웃 계층 구조 최적화 2. 레이아웃 재사용 3.중첩 layout Performance 1. 레이아웃 계층 구조 최적화 중첩된 LinearLayout을 사용하게 되면 View 계층 구조가 굉장히 깊어지게 됨 그렇기 때문에 레이아웃을 조사하고 최적화 하는 방법이 필요함 (1) Layout Inspector(Hierachy View Android 3.1 미만만 가능) (2) 린트 Layout Inspector 1) App 실행 2) Layout Inspector 사용 -> 앱 레이아웃을 디자인 모형과 비교하고 앱의 확대 뷰 또는 3D 뷰를 표시하며 런타임에 앱 레이아웃의 세부정보를 검토 가능 Live Layout Inspector - UI에 관한 포괄적이고 유용한 정보를 ..
안드로이드 구성요소(4대 컴포넌트 - Activity, Service, 콘텐스 제공자, 방송 수신자) 가 실행되고 Application에 실행중인 다른 구성요소가 없으면 Android System은 실행스레드로 애플리케이션의 Linux 프로세스를 시작함 기본적으로 Application의 구성 요소는 같은 프로세스와 같은 스레드에서 실행됨. 일반적인 코딩 프로그램에는 Application와프로세스가 긴밀히 연결되어 있지만 Android의 경우 어플리케이션과 프로세스가 분리되어 있음. Context - Android 시스템에 의해 제공되는 추상클래스 --> Application, Service, Activity는 모두 Context를 상속받음 - Context를 잘못 사용하면 메모리 누수로 이어짐 - App..