반응형

소괄호만 사용되었다는 가정하에 가장 긴 완성된 괄호를 세는 문제 입니다.

 

먼저 스택을 사용하는 방법입니다.

스택에는 지금까지 읽은 열린 괄호의 위치를 저장하며, 추가로 이전까지 완성된 소괄호 정보도 필요합니다.

def longestValidParentheses(s):
    strLen = len(s)
    dp = [0] * (strLen + 1)
    stack = []
    ans = 0
    for i in range(strLen):
        c = s[i]
        if (c == '('):
            stack.append(i)
        else:
            if len(stack) > 0:
                pos = stack.pop()
                cnt = i - pos + 1
                if pos > 0:
                    cnt += dp[pos - 1]
                if (cnt > ans):
                    ans = cnt
                dp[i] = cnt
    return ans

이 방법은 루프를 한번 돌면서 처리가 된다는 장점이 있지만, 이전 값을 저장하는 dp와 괄호의 시작을 stack에 담아두어야 하기 때문에 메모리 공간을 많이 차지합니다.

 

이를 개선한 방법은 다음과 같습니다.

루프를 돌며, 열린 괄호와 닫힌 괄호의 수를 카운트 합니다. 

왼쪽에서 오른쪽으로 진행할 때는 닫힌 괄호의 수가 더 많으면 모든 괄호의 카운트를 0으로 두고 새로 카운트 합니다.

열린 괄호와 닫힌 괄호의 수가 같으면 완성된 괄호의 숫자가 나옵니다.

여기서 문제는 처음에 열린 괄호가 더 많이 나와서 닫힌 괄호 수와 일치 하지 않고 끝나면 완성된 괄호의 수가 0으로 됩니다.

따라서 문제를 해결하기 위해서 반대방향으로 한번 더 진행합니다.

이번에는 열린 괄호가 더 많으면 모든 괄호의 카운트를 0으로 두고 새로 카운트 합니다.

두 번째 루프에서는 처음에 닫힌 괄호가 더 많이 나오는 경우 카운트가 되지 않지만, 첫 번째 루프에서 이미 카운트가 되었기 때문에 두 번의 결과의 최대값을 선택하면 됩니다.

def longestValidParentheses(s):
    max = 0
    l, r = 0, 0
    for c in s:
        if c == '(':
            l += 1
        else:
            r += 1
        if (r > l):
            l, r = 0, 0
        elif (r == l and r > max):
            max = r
            
    for c in s[::-1]:
        if c == '(':
            l += 1
        else:
            r += 1
        if (r < l):
            l, r = 0, 0
        elif (r == l and l > max):
            max = l

    return max * 2

 

변수를 추가하면 루프 한번으로 처리도 가능합니다.

def longestValidParentheses(s):
    max = 0
    l1, r1, l2, r2 = 0, 0, 0, 0
    strLen = len(s)
    for i in range(strLen):
        if s[i] == '(':
            l1 += 1
        else:
            r1 += 1
        if (r1 > l1):
            l1, r1 = 0, 0
        elif (r1 == l1 and l1 > max):
            max = r1
        
        if s[strLen - 1 - i] == '(':
            l2 += 1
        else:
            r2 += 1
        if (r2 < l2):
            l2, r2 = 0, 0
        elif (r2 == l2 and l2 > max):
            max = l2
    return max * 2

 

반응형
반응형

배열 혹은 리스트 등에서 과반수가 넘는 원소를 찾는 알고리즘입니다.

 

 

가장 기본적인 접근법은 각 원소별로 리스트를 모두 체크해서 해당 원소가 나오는 숫자를 세고, 과반수가 넘는지 체크하는 방법이 있습니다.

def find(nums):
    minCnt = len(nums) // 2
    for num in nums:
        cnt = sum(1 for elem in nums if elem == num)
        if cnt > minCnt:
            return num

 

시간 복잡도는 O(n^2) 이며, 공간 복잡도는 O(1) 입니다.

 

 

수행시간을 줄이기 위해서는 Dictionary 를 사용하는 방법이 있습니다.

def find(nums):
    dict = collections.Counter(nums)
    return max(dict.keys(), key=dict.get)

시간 복잡도는 O(n) 이며, 공간 복잡도는 O(n) 입니다.

 

 

그리고 데이터를 정렬해서 가운데 있는 원소를 뽑아내는 방법도 있습니다.

과반수 이상 존재하는 원소는 정렬시 반드시 중간 인덱스에 존재하기 때문입니다.

def find(nums):
    nums.sort()
    return nums[len(nums)//2]

이 경우 시간 복잡도는 O(n log n) 이며, 공간 복잡도는 O(1) 입니다.

 

그 외에 분할정복 방법으로도 찾을 수가 있습니다.

분할정복은 분할을 통해서 선택된 양쪽의 값이 같은 경우 해당 값을 선택하고,

다를 경우 분할된 셋에 각각 선택된 값의 숫자를 카운트하여 많은 쪽을 택하면 됩니다.

이 경우 시간 복잡도는 O(n log n) 이며, 공간 복잡도는 O(log n) 입니다.

 

마지막으로 Boyer-Moore 과반수 투표 알고리즘을 소개합니다.

알고리즘은 다음과 같습니다.

가장 많이 나올 후보 원소를 선택하고,

원소들을 순회하며 후보와 같은 값일 경우 카운트를 올리고,

다른 값일 경우 카운트를 차감합니다. 

카운트가 0이 되면 새로 후보를 선택하고, 순회하며 카운트를 반복합니다.

과반수가 넘는 원소는 카운트가 0보다 크거나, 최종적으로 선택되게 됩니다.

def find(nums):
    cnt = 0
    candidate = None
    
    for num in nums:
        if cnt == 0:
            candidate = num
        cnt += (1 if num == candidate else -1)

    return candidate

시간 복잡도는 O(n) 이며, 공간 복잡도는 O(1) 입니다.

반응형
반응형

모듈로 연산에서 역수는 다음과 같습니다.

 

두 정수 a와 m 에 대해서, a의 m에 대한 모듈러 역수 x는 a에 x를 곱해서 m으로 나눈 나머지가 1이 되는 값을 찾으면 됩니다. 이 때 x는 m보다 작은 양의 정수 입니다.

 a * x ~= 1 (mod m)

x는 a와 m이 서로 소인 경우 반드시 존재합니다.

 

예를 들어, a = 3, m = 11 이라면, x는 4가 됩니다.

(3 * 4) % 11 = 1

 

위의 예제에서 x = 4라는 값을 찾기 위해서는 x 에 순차적으로 1부터 대입해 보면 구할 수 있지만, 시간이 많이 걸리기 때문에 다음의 방법으로 더 효율적으로 구할 수 있습니다. 

 

개선을 위해서 a와 m이 서로 소인 경우, 유클리드 호제법을 이용한 방법을 소개합니다.

 

정수 a와 b가 주어졌을 때, 각각 x, y를 곱해서 최대공약수와 x, y를 찾습니다.

a * x + b * y = gcd(a, b)

 

a의 m에 대한 모듈러 역수를 찾기 위해서, b를 m이라 놓고, a와 m은 서로 소이기 때문에 최대공약수를 1로 설정합니다.

a * x + m * y = 1

 

양변을 m으로 나눈 나머지를 취하면,

a * x + m * y ~= 1 (mod m)
a * x ~= 1 (mod m)

 

x는 a의 m에 대한 모듈러 역수가 됩니다.

 

유클리드 호제법을 이용하여 모듈러 역수를 구하는 것을 python으로 구현한 코드는 다음과 같습니다.

def modInverse(a, m):
    m0 = m
    y = 0
    x = 1
    
    if (m == 1):
        return 0
    
    while (a > 1):
        q = a // m
        
        t = m
        
        m = a % m
        a = t
        t = y
        
        y = x - q * y
        x = t
        
    if (x < 0):
        x = x + m0
    
    return x

 

만약 m이 소수라면, 페르마의 소정리를 이용할 수 도 있습니다.

a ^ (m-1) ~= 1 (mod m)
a ^ (-1) ~= a ^ (m-2) (mod m)

페르마의 소정리 양변에 a ^ (-1) 을 곱하고, 좌변과 우변을 바꾸면, 우리가 찾는 모듈러 역수는 a ^ (m-2) 를 m으로 나눈 나머지가 됩니다.

 

기존에 사용했던 gcd 코드를 재활용해서 구현한 python 코드 입니다.

def modInverse(a, m):
    g = gdc(a, m)
    if (g != 1):
        # Inverse doesn't exist
        return -1
    else:
        return pow(a, m - 2, m)

def gcd(x, y):   
    while(y): 
        x, y = y, x % y   
    return x

 

정리를 해보면, a와 m이 서로 소이고, m이 소수라면 페르마의 소정리를 이용해서, 아래식으로 구하는 것이 가장 효율적이고,

a ^ (m-2) % m

 

m이 소수는 아니지만, a와 m이 서로 소라면 유클리드 호제법을 이용

반응형
반응형

이번에는 React Component 와 속성에 대해서 알아보겠습니다.

 

컴포넌트는 UI를 독립적이고, 재사용이 가능한 조직으로 나눌수 있게 해줍니다. 각 컴포넌트는 격리되어 동작합니다. 

 

개념적으로, 컴포넌트는 JavaScript function 와 비슷합니다. 컴포넌트는 입력을 받을 수 있고 (속성), React element 를 반환해 줍니다.

 

 

컴포넌트를 정의하는 방법에는 Javascript function로 작성하거나 Class를 이용해서 작성할 수 있습니다. 클래스형의 경우 React.Component를 상속받아서 작성하며, render 메써드를 반드시 정의해 줘야 합니다.

 

아래는 화면에 Hello 메시지를 표시해주는 컴포넌트의 예시입니다.

 

함수형 예시

function Welcome(props) {
    return <h1> Hello, {props.name}</h1>;
}

 

클래스형 예시

class Welcome extends React.Component {
    render() {
        return <h1> Hello, {this.props.name}</h1>;
    }	
}

 

이전의 코드를 아래와 같이 변경하면 컴포넌트를 이용한 결과를 확인할 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Welcome(props) {
    return <h1> Hello, {props.name} </h1>;
}

const element = <Welcome name="Maria"/>;
ReactDOM.render(element, document.getElementById('root'));

 

 

코드에 대해서 약간의 부연 설명을 하면,

element 생성시,

이전에는 React.createElement 매써드를 사용했었는데, 컴포넌트를 사용할 때는 태그를 이용해서 생성을 하면 됩니다.

속성으로 지정된 name 은 Welcome 이 생성될 때, prop 값에 {name: "Maria"} 형태로 전달이 됩니다.

Welcome 컴포넌트는 받아온 속성을 이용해서 렌더링된 <h1> Hello, Maria </h1> 에 해당하는 엘리먼트를 리턴해 줍니다.

 

참고로 component 이름은 대문자로 시작하는 관습이 있습니다.  예를 들면 컴포넌트 이름을 welcome 으로 하지 말고 Welcome 으로 해야 한다는 것입니다.

 

 

반응형

'프로그래밍 > React' 카테고리의 다른 글

[React] 시작하기  (0) 2021.08.20
반응형

React는 UI 개발에 사용되는 Javascript Library 입니다. 

 

React – A JavaScript library for building user interfaces (reactjs.org)

 

React – A JavaScript library for building user interfaces

A JavaScript library for building user interfaces

reactjs.org

 

React의 특징으로는 선언형 스타일을 사용하며, Javascript를 이용한 컴포넌트 기반의 아키텍처를 사용합니다. 그리고 강력한 추상화 기능을 제공합니다.

 

Javascript Native 기능을 이용하는 문법을 사용하기 때문에, 다른 프레임워크에 비해서 빠르게 습득할 수 있으며, Virtual DOM 방식을 이용해서 UI 속도가 매우 빠릅니다.

 

 

현재 (2021.08.20) React는 17.0.2 버전이 출시되어 있으며, 버전 18이 준비 중 입니다.

 

React 프로젝트로 "원활히" 개발을 진행하기 위해서 먼저 node.js 를 설치합니다.

 

명령 프롬프트를 실행하여 프로젝트 폴더로 이동해서 아래 명령어를 입력합니다.

 

npx create-react-app my-app

 

my-app 이라는 폴더가 생성되고 기본 프로젝트 코드가 생성됩니다.

 

현재 설정된 패키지 버전은 다음과 같습니다.

 

 

yarn 혹은 npm 명령어를 이용해서 프로젝트를 실행합니다.

 

yarn start

 

혹은

 

npm start

 

처음 실행시에는 필요한 라이브러리를 다운로드 받기 때문에 시간이 조금 걸릴 수 있습니다.

 

웹브라우저에서 http://localhost:3000 를 입력하면, 생성된 프로젝트 결과물이 나옵니다. (설정에 따라 포트 번호는 달라질 수 있습니다.)

 

아래와 같은 화면이 나옵니다.

 

Hello World 를 출력해 보기 위해서, src 폴더에 있는 모든 파일들을 삭제하고,

 

index.css, index.js 파일만 새로 생성해 보았습니다.

 

 

아래 파일들 삭제

 

신규 파일 생성

 

index.js 파일을 열어서 아래와 같이 코드를 작성합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

var element = React.createElement('h1', null, "Hello World!")
ReactDOM.render(element, document.getElementById('root'))

 

저장 후 웹브라우저를 리프래시 하면 아래와 같이 나옵니다.

 

 

작성한 코드에 대해서 간단히 설명하자면,

React.createElement 매써드는 html 엘리먼트를 생성해서 돌려주기 때문에,

element 에는 <h1>Hello World!</h1> 에 해당하는 엘리먼트가 지정됩니다.

 

그리고, ReactDOM.render 매써드는 해당 엘리먼트를 렌더링해 줍니다.

코드는 element에 지정된 것을 root 라는 아이디를 가진 엘리먼트를 찾아서 렌더링 해주라는 의미이고,

public 폴더에 있는 index.html 파일을 열어보면, body 에 "root" 라는 아이디를 가진 div 엘리먼트가 있는 것을 확인할 수 있습니다. 

 

 

반응형

'프로그래밍 > React' 카테고리의 다른 글

[React] Component 와 속성  (0) 2021.09.11
반응형

Ionic 을 이용하면 Mobile 앱을 만들 수 있습니다.

 

이 포스트에서는 Android 앱을 생성하는 방법에 대해서 설명해 보겠습니다.

 

 

지난 포스트에서 생성한 myApp을 이용합니다. myApp이 없다면 아래 명령으로 생성합니다.

ionic start myApp sidemenu --type react

 

먼저 명령 프롬프트를 열고 myApp 폴더로 갑니다. 모바일 앱 프로젝트를 설정하기전에 빌드를 한번 합니다.

ionic build

빌드를 한번 해주는 이유는 capacitor에서 모바일 앱 프로젝트 추가시 build 폴더가 없으면, webDir이 www로 잡히기 때문입니다. 설정 파일에서 변경해 주면 되지만 편의를 위해서 build를 먼저 해 주었습니다.

 

그리고 모바일 앱 프로젝트를 시작합니다. 시작을 위해서는 npx 명령어를 사용합니다.

저는 npm을 주로 쓰기 때문에 npm으로 했지만 yarn도 지원합니다.

npx cap init --npm-client=npm

App name 에는 "My App"을 입력하고, App Package ID 에는 com.example.myapp 을 입력합니다.

 

해당 정보는 capacitor.config.json 에서 변경이 가능합니다.

 

이제 Android 플랫폼을 추가하기 위해서 아래 명령을 입력합니다.

npx cap add android

 

Android 빌드 하기전에 아래 명령어를 통해 리소스 및 변경된 플러그인을 싱크(업데이트) 합니다.

npx cap sync android

 

Android 빌드는 android 폴더에서 진행하는데, gradlew 명령어를 이용합니다. 원래 경로로 돌아오기 위해 마지막 cd .. 명령어도 추가하였습니다. gradle을 통해 Android 빌드하기 위해서는 환경변수에 ANDROID_SDK_ROOT 를 설정해야 합니다. Android Studio를 설치하고 SDK ROOT를 환경변수에 미리 추가해 둡니다.

cd android
gradlew assembleDebug
cd ..

 

생성된 Android 빌드는 프로젝트 경로 > android > app > build > outputs > apk > debug 에서 찾을 수 있습니다. (app-debug.apk)

 

 

코드 변경 후에 한번에 빌드를 하기 위해서는 아래와 같이 실행하면 됩니다.

ionic build && npx cap sync android && cd android && gradlew assembleDebug && cd ..

 

Production 빌드를 생성할 때는 다음과 같이 실행하며,

gradlew assemble

빌드는 프로젝트 경로 > android > app > build > outputs > apk > release 에 생성됩니다.

 

 

참고로 아래 명령을 사용하면 ionic build 와 npx cap sync android 실행 후 Android Studio 가 실행됩니다.

ionic capacitor build android

 

Android Studio 만 실행하고자 한다면, 아래 명령을 실행하면 됩니다.

ionic capacitor run android

 

Android Simulator 에 빌드를 배포할 때는, 아래 명령을 이용합니다.

ionic build && npx cap sync android && cd android && gradlew installDebug && cd ..

 

반응형

'프로그래밍 > Ionic' 카테고리의 다른 글

[Ionic] 설치 및 프로젝트 생성하기  (0) 2021.03.13
반응형

제곱 인수가 없는 정수는 1이 아닌 제곱수를 인수로 갖지 않는 (양의) 정수를 말합니다.

 

쉽게 말해서 소인수 분해를 했을 때, 같은 소수가 두 개 이상 나오지 않는 정수 입니다.

 

다음 숫자들이 Square-free integer 들 입니다.

 

1, 2, 3, 5, 6, 7, 10, 11, 13, 14, 15, 17, 19, 21, 22, 23, 26, 29, 30, 31, 33, 34, 35, 37, 38, 39, 41, 42, 43, 46, 47, 51, 53, 55, 57, 58, 59, 61, 62, 65, 66, 67, 69, 70, 71, 73, 74, 77, 78, 79, 82, 83, 85, 86, 87, 89, 91, 93, 94, 95, 97, 101, 102, 103, 105, 106, 107, 109, 110, 111, 113, ... (OEIS의 수열 A5117)

 

어떤 숫자가 Square-free number 인지 체크하는 코드 입니다.

def checkSquareFreeNumber(n):
    for i in range(2, round(n**0.5) + 1):
        if n % (i**2) == 0:
            return False
    return n

 

만약 특정 숫자까지 모든 값을 체크해야 한다면 아래와 같이 sieve 를 이용하는 것이 훨씬 효율적입니다.

def findSquareFreeNumbers(n):
    tArr = [True] * (n+1)
    tArr[0] = False
    tLimit = int(n**0.5) + 1
    for i in xrange(2, tLimit):
        ii = i**2
        for j in xrange(ii, n+1, ii):            
            tArr[j] = False
    tSFN = []
    for idx, value in enumerate(tArr):
        if (value):
            tSFN.append(idx)
    return tArr, tSFN

 

 

반응형
반응형

Ionic 프레임워크에 대해서 소개하는 글입니다.

 

 

Ionic 프레임워크는 웹 기술(html, css, javascript)을 이용해서 모바일 / 데스크탑 앱을 만들어 주는 오픈소스 UI 툴킷이라고 정의하고 있습니다. 현재 Angular, React, Vue 를 지원하고 있습니다. 부가적으로 Appflow 등을 이용하면 앱 빌드 및 배포도 편리하게 관리할 수 있습니다.

 

Ionic document 사이트

Ionic Framework - Ionic Documentation

 

 

Ionic 으로 앱을 개발하기 위해서는 Node & npm 만 설치되어 있으면 됩니다. 그 외에 개발시 사용할 editor로는 Visual Studio Code를 권장한다고 합니다. 

 

 

Ionic 설치는 터미널에서 진행합니다. Windows의 경우 Window 키를 누르고 cmd 라고 입력하면 명령 프롬프트가 검색되는데, 클릭 (혹은 enter를 입력) 해서 실행합니다. (혹은 Powershell에서 작업하셔도 됩니다.) 

 

 

명령 프롬프트에서 아래와 같이 입력하고 enter를 입력해서 ionic-cli 를 설치합니다. (install 대신 i 라고 입력해도 됩니다.)

> npm install -g @ionic/cli

 

 

Ionic 설치는 global로 진행되기 때문에 어느 경로에서 설치해도 상관 없지만, 프로젝트를 시작할 때는 시작할 경로에 가서 실행합니다.

 

아래 경로에서 프로젝트를 생성한다고 가정하고, 아래 명령어를 입력해서 ionic 프로젝트 폴더로 이동합니다. (입력 전에 탐색기를 이용해서 C:\Projects\ionic 폴더를 만들어 주세요.)

> cd C:\Projects\ionic

 

 

이제 아래 명령어로 ionic 앱을 생성합니다.

> ionic start myApp

 

실행을 하면, 프레임워크를 선택하라고 나옵니다. (Ionic 6.12.3 기준)

 

파란색 커서를 화살표 키로 위 아래로 움직여서 프레임워크를 선택할 수 있습니다. 원래 Angular가 기본이었는데, 요즘 핫한 React를 본격적으로 지원하는 것 같습니다. 본인이 익숙한 프레임워크를 선택하면 되는데, 저는 React를 선택해 보겠습니다.

 

프레임워크 선택 후에는 템플릿을 선택하라고 나옵니다.

 

역시 커서를 움직여서 선택해 주면 됩니다. 자유도가 높은 blank로 시작할 수도 있지만, 생성 후 간단한 화면을 보기 위해서 sidemenu 를 선택해 보겠습니다.

 

템플릿을 선택하고 나면, 프로젝트가 생성되고, 해당 프로젝트에 필요한 모듈들이 설치가 됩니다.

 

마지막에 Ionic 계정을 만들거냐고 물어보는데, 일단 N을 눌러 만들지 않고 넘어 갑니다. 

 

설치가 끝나고 나면, 다음에 해야할 액션들에 대해서 설명을 해줍니다.

cd 명령어로 생성된 프로젝트 폴더로 가서, ionic serve 명령으로 앱을 실행할 수 있다고 나와 있습니다.

 

> cd myApp
> ionic serve --no-open

--no-open 은 실행 후 브라우저가 자동으로 열리는 것을 막는 옵션입니다.

정상적으로 실행되었다면, Development server running 이라고 나오면서 접속 URL을 알려줍니다.

웹 브라우저를 열어서 주소를 입력해 봅니다. 보통 8100 포트가 사용되고 있지 않으면 8100으로 설정되지만, 사용중인 경우에는 다른 포트 번호로 세팅 됩니다.

http://localhost:8100

 

실행해 보면 다음과 비슷한 화면이 나옵니다. (화면크기에 따라서 보여지는 내용이 조금 다를 수 있습니다.)

왼쪽 메뉴들을 눌러보면 오른쪽에 각각에 연결된 페이지가 나타납니다.

 

Visual Studio Code를 이용해서 프로젝트 폴더아래 있는 src 경로의 소스를 편집해서 앱 개발을 할 수 있습니다.

 

다음 포스트에서는 android 앱을 빌드해 보겠습니다.

반응형

'프로그래밍 > Ionic' 카테고리의 다른 글

[Ionic] Android 앱 만들기  (0) 2021.03.19

+ Recent posts