📌 AVD Manager 오른쪽 상단에 AVD(Android Virtual Device) Manager를 누르고 Create device를 실행해준다. 화면의 크기를 1080x1920으로 설정해준다. 12.0 버전으로 선택해준다. Default 값으로 설정하고 다음으로 넘어가 준다. 유튜브와는 다르게 intel Haxm을 설치하라고 나왔다. 속도 향상을 위한 것인 것 같다. 가상머신을 설치하고 실행해보니 안드로이드 화면이 뜬다!!
🍞 Front-End
코틀린 3강으로 끝내기 마지막 강의인 심리테스트 앱 만들기이다. 처음으로 만드는 앱이라 어려울 수도 있을 것 같다고 생각했는데 실제로 만들어보니 흥미를 느끼고 있는 나를 발견했다! 안드로이드를 배우게 돼서 다행인 것 같다. 풀스택으로 공부하고 있었는데 프론트로 확정하게 되는 걸까...? 역시 코드 결과가 바로 시각화되는게 재밌다!! 📌 준비 과정 일단 첫번째로 Empty Activity으로 프로젝트 파일을 생성해준다. 배경화면을 지정하기 위해 사진을 drawable에 넣어준다. navigation 탐색 구성요소 시작하기 | Android 개발자 | Android Developers 탐색 구성요소 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 이 주제는 탐색 구성요..
📌 Lamda 람다식은 우리가 마치 value처럼 다룰 수 있는 익명 함수이다. 1. 메서드의 파라미터로 넘겨줄 수가 있다. fun maxBy(a :Int) 2. return 값으로 사용할 수 있다. 람다의 기본 정의 val lamdaName : Type = { argumentList -> codeBody } 확장 함수 📌 Lamda의 Return Input 부분: 여러 개 있을 수도 있으니 () 은 필수이다. Output 부분: 리턴 값은 타입이 하나이기 때문에 생략 가능하다. 📌 Lamda를 표현하는 여러 가지 방법 람다 사용 조건 1. Kotlin 인터페이스가 아닌 자바 인터페이스여야 한다. 2. 그 인터페이스는 딱 하나의 메서드만 가져야 한다. 📌 Data class pojo 클래스: 모델이 되는..
📌 함수 function의 축약어인 fun을 쓴다. return이 없을 때 void 같은 경우 : Unit 생략 가능 return이 있을 때 변수 이름 : 변수 타입(첫 글자 대문자) 📌 val vs var val (value) 변하지 않는 값 var (valuable) 변할 수 있는 값 자동 추론이 가능하기 때문에 변수 타입 생략 가능하다. 📌 String Template 띄어쓰기가 없거나 여러 개를 혼합해서 사용한다면 { } 사용한다. $ 문자를 쓰고 싶다면 앞에 \를 붙여준다. 📌 조건식 when은 switch와 비슷한 것이다. 📌 Expression vs Statement 값을 반환하면 Expression이고 명령하는 것은 Statement으로 분류한다. 코틀린의 모든 함수는 Expression이..
📌 Context context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로우며 비효율적일 수도 있다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있다. Context – React A JavaScript library for building user interfaces ko.reactjs.org ❓그래서 context는 언..
Basic Hooks function 컴포넌트 사용하는 이유 - class는 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다. - 복잡한 컴포넌트들은 이해하기 어렵다. - 사람과 기계를 혼동시킨다. - 컴파일 단계에서 코드를 최적화하기 어렵게 만든다. - this.state는 로직에서 레퍼런스를 공유하기 때문에 문제가 발생할 수 있다. 📌 useState 상태값을 관리해주는 훅으로 state를 대체할 수 있다. lazy initialize import React from "react"; export default function Example() { const [count, setCount] = React.useState(0); // 배열 return ( You Clicked {count} ti..
📌 Higher Order Component(HOC) 를 인자로 받아 를 리턴하는 함수 - 컴포넌트 안에 있는 로직을 다시 재활용할 수 있는 고급 기술이다. - React API의 한 파트가 아니다. - 리액트 컴포넌트를 상속받거나 재활용하는 방식이 아니라 조합 방식으로 하는 본성으로부터 야기된 패턴이다. HOC = function(컴포넌트) {return 새로운 컴포넌트;} withRouter() 보통 with가 붙은 함수가 HOC인 경우가 많다. 고차 컴포넌트 – React A JavaScript library for building user interfaces ko.reactjs.org withLoading.jsx import React, { useState, useEffect } from "rea..
📌 CSS in JS CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는 각자 별도의 파일에 두는 것이 best practice로 여겨졌다. 하지만 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기를 끌면서 웹개발의 패러다임이 바뀌고 있다. 최근에는 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이 주류가 되고 있다. 따라서, 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaS..
📌 라우팅 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다. 📌 SPA (Single Page Application) 서버로부터 각각의 페이지를 요청하는 것과 다르게 한 번에 덩어리를 받아오고 내부에서 url에 맞춰 보여줄 것만 보여주는 것이다. 즉, 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다. SPA 라우팅 과정 1. 브라우저에서 최초 ' / ' 경로로 요청을 하면 2. React Web App을 내려준다. 3. 내려받은 React App에서 ' / ' 경로에 맞는 컴포넌트를 보여준다. 4. React App에서 다른 페이지로 이동하는 동작을 수행하면 5. 새로운 경로에 맞는 컴포넌트를 보여준다. 📌 react-router-do..
리액트 컴포넌트는 탄생부터 죽음까지 여러 지점에서 개발자가 작업이 가능하도록 메서드를 오버 라이딩할 수 있게 해준다. constructor componentWillMount => getDerivedStateFromProps render (최초 랜더) componentDidMount class App extends React.Component { state = { age: 39, }; constructor(props) { super(props); console.log("constructor", props); } render() { console.log("render"); return ( Hello {this.props.name} - {this.state.age} ); } // class component의..
