Life Cycle : 하나의 액티비티가 실행되고 종료되는 단계를 라이프 사이클이라고 한다

Activity란?

안드로이드 개발을 해봤다면 Activity는 무조건 사용하는 컴포넌트입니다.

Activity는 4대 컴포넌트 중 하나로 사용자와 상호작용을 하는 UI를 제공하는 역할을 합니다.

즉 안드로이드 폰에서 특정 애플리케이션을 실행하면 보여지는 화면이 대부분 Activity로 만들어졌다고 보면 됩니다.

화면 = Activity 

Activty Life Cylcle

6개의 콜백 ( onCreate, onStart, onResume, onPause, onStop, onDestory ) 어떤 상태일때 호출 되는지 알아보겠습니다.

• onCreate() : Activity가 실행되면서 최초 실행되는 메소드
• onStart() : Activity가 화면으로 보일 때(만들어질 때) 실행되는 메소드
• onResume() : Activity가 화면에 보이지 않을 때( ex. 홈키 누른 경우 ) 실행되는 메소드
• onPause() : 다른 Activity가 시작되거나, 현재 Activity가 백그라운드로 이동하기 전에 호출
• onStop() : Activity가 더 이상 사용자에게 보이지 않을 때 호출
• onDestroy() : Activity가 메모리에서 제거될 때( 종료 ) 실행되는 메소드

※  생명주기 메소드 호출 순서

생명주기 호출 순서입니다. 한 번씩 생각해보신 후에 확인하시길 바랍니다.

• 시작할때 : onCreate -> onStart -> onResume
• 화면 회전할 때 : onPause -> onStop -> onDestory -> onCreate -> onStart -> onResume
• 홈 버튼 클릭 시 : onPause -> onStop
• 홈 이동 후 다시 돌아올 때 : onRestart -> onStart -> onResume
• 백 버튼 클릭하여 종료 시 : onPause -> onStop -> onDestory

참고 

Page life Cycle( 생명 주기 ) 

Ionic 페이지 생명 주기 

ionic 페이지 생명 주기는 아래 순서대로 이벤트가 발생한다.  ionic에서 angular의 생명주기 이벤트도 수용하고

있기 때문에, angular 로 구현되어 있다면 angular의 lifecycle도 같이 고려해 봐야 한다.

1.ngOnInit

2.ionViewWillEnter

3.ionViewDidEnter

4.ionViewWillLeave

5.ionViewDidLeave

6.ngOnDestory

라이프 사이클 순서로, 1번과 6번을 제외하고 비슷한 단어라 유추하기 쉽다.

1번과 6번은 angular에서 제공하는 대표적인 생명 주기 이벤트  이고 나머지는 ionic에서 제공하기 때문에 ion이라는 키워드가 붙는다.

Angular 생명주기 이벤트

1. ngOnInit : 컴포넌트 초기화 중에 1번 실행된다. 로컬 멤버를 초기화하고 딱 한 번만 수행하면 되는 서비스를 호출할 때 사용한다.

6. ngOnDestroy : Angular 가 해당 뷰를 파괴하기 직전에 실행된다. 예를 Observable 구독 취소 같이 정리시에 유용하게 사용된다.

Ionic 생명주기 이벤트

Ionic 생명주기 간략 정리하면 처음 페이지 들어갈 경우 2, 3번이 호출되고 해당 페이지 나가면  4~5번이 호출된다.

2. ionViewWillEnter :

페이지가 로드되고, active 되기 전에 호출된다. 

event listener 등 뷰에 진입하는 초기에 해야 하는 작업들을 선언하기에 적합하다.

3.ionViewDidEnter :

페이지가 active 된 직후에 호출된다.

직전의 ionViewWillEnter와 비슷하게 사용한다.

(데이터 로드 시 ionViewWillEnter를 사용해 성능 문제가 발생하면 대신 ionViewDidEnter에서 데이터 호출을 수행할 수 있음)

4. ionViewWillLeave :

페이지에서 나가고, active 상태가 해제되기 직전에 호출된다.

event listener의 해제 등, 페이지를 나가는 시점에 해야 하는 작업들을 선언하기에 적합하다.

5. ionViewDidLeave :

페이지가 active 상태가 해제된 직후에 호출된다.

페이지에서 나갈때

ionicViewWillLeave -> ionViewDidLeave -> ngOnDestroy

With Angular Life Cycle

아이오닉 angular 구현되어 있다면, angular lifeCycle도 같이 고려해야 하는데

자주 사용 되는 angular lifeCycle을 정리해 보겠다.

ngOnInit(): void {
  console.log('ngOnInit');    
}

ngAfterViewInit(): void {
  console.log('ngAfterViewInit');    
}

ngAfterContentInit(): void {
  console.log('ngAfterContentInit');    
}

ngOnDestroy(): void {
  console.log('ngOnDestroy');    
}

페이지가 시작될 때, 아래와 같이 로그가 찍힌다.

• ngOnInit -> ngAfterContentInit -> ngAfterViewInit

페이지에서 나갈 때, 아래와 같이 로그가 추가된다.

• ngOnInit -> ngAfterContentInit -> ngAfterViewInit -> ngOnDestroy (추가) 

ionic + angular 

모든 life Cycle 을 합쳐서, 순서 파악

ngOnInit(): void {
  console.log('ngOnInit');    
}

ngAfterViewInit(): void {
  console.log('ngAfterViewInit');    
}

ngAfterContentInit(): void {
  console.log('ngAfterContentInit');    
}

ngOnDestroy(): void {
  console.log('ngOnDestroy');    
}

ionViewDidEnter(): void {
  console.log('ionViewDidEnter');    
}

ionViewWillEnter(): void {
  console.log('ionViewWillEnter');    
}

ionViewDidLeave(): void {
  console.log('ionViewDidLeave');    
}

ionViewWillLeave(): void {
  console.log('ionViewWillLeave');    
}

페이지 진입 시 ( 순서 ) 

ngOnInit => ngAfterContentInit -> ngAfterViewInit -> ionViewWillEnter -> ionViewDidEnter

페이지에서 나갈때 ( 순서 ) 

ionViewWillLeave -> ionViewDidLeave -> ngOnDestroy 순이다.

정리 

페이지 진입 시에는 angular가 먼저 시작된 후 ionic이 실행되며,

페이지를 나갈 때에는 ionic이 먼저 종료된 이후, angular가 종료된다.

npx 명령어로 리액트 프로젝트 + 타입스크립트 + 리덕스 개발환경 세팅

https://www.npmjs.com/package/cra-template-redux-typescript

$npx create-react-app travel-react-app --template redux-typescript

or

$yarn create react-app travel-react-app --template redux-typescript

기존 프로젝트인 경우 

npm i vuetify

main.js 에 추가해 준다

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
})

createApp(App).use(vuetify).mount('#app')

직각삼각형 출력하기

문제 설명

"*"의 높이와 너비를 1이라고 했을 때, "*"을 이용해 직각 이등변 삼각형을 그리려고합니다.
정수 n 이 주어지면 높이와 너비가 n인 직각 이등변 삼각형을 출력하도록 코드를 작성해보세요.

제한 사항

1 ≤ n ≤ 10

입출력 예

입력 ♯1

3
출력 ♯1

*
**
***

나의 풀이

const readline = require('readline');
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let input = [];

rl.on('line', function (line) {
    input = line.split(' ');
}).on('close', function () {
    for(let i = 1; i <= +input[0]; i += 1)
    console.log('*'.repeat(i));
});

'readline' 모듈을 사용하여 터미널에서 사용자 입력을 받는다.

'line' 이벤트가 발생할 때마다 입력값을 공백을 기준으로 나누어 'input' 배열에 저장한다.

'close' 이벤트가 발생하면, 입력 ㅂ다은 값으로 직각삼각형을 출력하는 로직이 실행된다

'input[0] 은 사용자로부터 입력받은 값 중 첫 번째 값으로 사용자가 몇 줄짜리 삼각형을 출력하고 싶은지를 나타낸다.

'*'.repeat(i)'는 문자열을 반복해 생성하는 메서드로, i번째 줄까지 문자를 반복하여 출력한다. 따라 사용자 입력 값에 따라 점점 늘어나는 직각삼각형이 출력된다.

스크립트 언어(Script Language) 

응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 가리킨다. 스크립트 프로그래밍 언어라고도 한다.

스크립트 언어는 응용 프로그램 독립해 사용되고 일반적으로 응용 프로그램의 언어와 다른 언어로 사용되어

최종사용자가 응용 프로그램의 동작을 사용자의 요구에 맞게 수행할 수 있도록 해준다.

스크립트(Script)는 연극 용어인 스크립트에서 유래되었으며 초창기 스크립트 언어는 Batch Languages(배치언어)

또는 작업 제어 언어(Job Control Language)라고도 불린다.

스크립트 언어는 다른 응용 프로그램에 삽입되어 동작하는 프로그래밍 언어이다. 스크립트 프로그래밍 언어 또는

간략히 스크립트라고도 한다. 비 스크립트 언어인 C, C++, Java 등은 컴파일(Compile) 된 후

독립적으로 작동하는 하나의 완전한 응용 프로그래밍 이지만,

자바스크립트,제이쿼리, JSP, PHP, ASP, 펄, 파이썬, 루비, 브이비스크립트 등의 스크립트 언어는 다른 응용 프로그램 안에 삽입되어 해석되는 방식으로 작동한다.

스크립트의 종류

JavaScript(자바스크립트)

자바스크립트는 미국 넷스케이프의 브랜드 아이크가 개발한 스크립트 프로그래밍 언어이다. 양칭 JS이며,

자바스크립트의 큰 특징이자 장점은 별도로 서버를 구성하지 않아도 웹 브라우저에서 바로 사용할 수 있다는 것이다.

자바스크립트는 HTML을 동적으로 표현하려고 만든 경량의 프로그래밍 언어이다. HTML, CSS 와 마찬가지로 표준을 관리하는 ECMA 인터내셔널이라는 표준화 기구가 있으며, 이 기구의 명칭을 따 ECMAScript라고 한다.

JQuery(제이쿼리)

HTML문서에 삽입하여 사용할 수 있는 자바스크립트 라이브러리를 말한다.

JSP(제이에스피)

'JSP'는 자바 서버 페이지(JavaServer Pages)의 약자로, HTML 페이지 안에 자바(Java) 코드를 직접 삽입하여 웹 서버에서 동적으로

웹 페이지를 생성해 웹브라우저가 표현할 수 있도록 전달해 주는 스크립트 프로그래밍 언어이다.

미국 썬 마이크로시스템즈가 시스템을 개발했고 2010년 오라클에 인수되었다. HTML문서 안에 <% %> 기호를 쓰고

그 안에 자바 코드를 삽입하는 방식으로 사용한다.

PHP(피에이치피)

'PHP'는 HTML 문서 안에 포함해 작동하는 서버 측 스크립트 프로그래밍 언어이다. 1994 라스무스 러도프가 개발했다. 원래 

Personal Home Page의 약자였으나 나중에 'PHP : Hypertext Preprocessor"의 약자라고 설명되었다.

리눅스 운영체제에 아파치 웹서버를 설치하고 MySQL DB환경에서 PHP 프로그래밍 언어가 주로 사용되기 때문에 LAMP라는 말이 생겼다.

Perl(펄)

Ppractical Extraction and Report Language의 약자로서, 유닉스 계열의 운영체제에서 사용하는 스크립트 프로그래밍 언어이다. 1987년 래리 월(Larry Wall)이 개발했다. 펄의 마스코트는 낙타이다.

Python(파이썬)

1990년 네덜란드 암스텔담의 귀도 반 로썸이 개발한 객체 지향 스크립트 프로그래밍 언어이다.

별도의 컴파일 과정이 필요 없어 개발기간이 단축되고, 리눅스나 윈도우 등 특정 플랫폼에 의존적이지 않고 독립적이다. 주로 장고(Django)

프레임워크 기반으로 개발한다.

Ruby(루비)

1995년 일본의 마츠모토 유키히로가 만든 객체 지향 스크립트 프로그래밍 언어이다. 루비는 보석 이름에서 따온 말이며

Python과 유사하다 GitHub 사이트는 Ruby언어를 사용하여 개발되었다.

VBScript(브이비스크립트)

Visual Basic Scripting Edition의 약자로서, 미국 마이크로소프트 Visual Basic(비주얼베이직) 기반의 스크립트 프로그래밍 언어이다

https://school.programmers.co.kr/learn/courses/30/lessons/120815

풀이 과정 

function solution(n) {
    for(let i = 1; i < 6 * n; i++) {
        if ((6 * i) % n === 0){
            return i
        }
    }
}

/*
i가 1부터 시작하여 6의 배수로 증가하는 반복문이 있습니다. (for(let i = 1; i < 6 * n; i++))

반복문 안에서는 (6 * i) % n이 0이 되는 첫 번째 i 값을 찾습니다.

찾았다면 그 값을 반환합니다. (return i)
*/

문제 설명
정수 n이 매개변수로 주어질 때, n 이하의 홀수가 오름차순으로 담긴 배열을 return하도록 solution 함수를 완성해주세요.

제한사항
1 ≤ n ≤ 100
입출력 예
n result
10 [1, 3, 5, 7, 9]
15 [1, 3, 5, 7, 9, 11, 13, 15]
입출력 예 설명
입출력 #1

10 이하의 홀수가 담긴 배열 [1, 3, 5, 7, 9]를 return합니다.
입출력 #1

15 이하의 홀수가 담긴 배열 [1, 3, 5, 7, 9, 11, 13, 15]를 return합니다.

풀이 

function solution(n) {
  // 빈 배열을 선언합니다.
  let answer = [];

  // 1부터 n까지 2씩 증가하면서 반복합니다.
  for (let i = 1; i <= n; i += 2) {
    // 현재 숫자 i가 홀수인 경우에만 배열에 추가합니다.
    if (i % 2 !== 0) answer.push(i);
  }

  // 최종적으로 홀수만 담긴 배열을 반환합니다.
  return answer;
}