J's Study Log

[C++ STL 정리하기] Standard Template Library

프로성장러 — Sat, 17 Sep 2022 18:14:25 +0900

STL : Standard Template Library

여러가지 자료구조와 알고리즘 등을 데이터타입에 의존하지 않게 미리 만들어놓은 라이브러리.

1. container

동일한 type 의 원소들을 저장하는 객체 ( 자료구조 )

Sequence

array : 정적 배열
vector : 동적 배열
deque : 동적 배열
foward_list : singly linked list
list: doubly linked list

Adaptors

stack : 스택 자료구조 , last in first out
queue : 큐 자료구조 , first in first out
priority_ queue : 우선순위 큐

Associative

set : (key) 중복 X
map : (key,value) 중복 x
multiset : (key) 중복 O
map : (key,value) 중복 O

Unordered associative(Hash)

unordered_set: (key) 중복 x
unordered_map :(key,value) 중복 x
unordered_multiset: (key) 중복 O
unordered_multimap :(key,value) 중복 O

2. algorithm

data를 다룰 때 유용하게 쓸 수 있는 함수들 ( 알고리즘 )

sort, partial_sort, nth_element, find
max,min, swap

3. iterator

컨테이너에 저장된 원소들을 접근하고 순회하는 객체

4. function object

operator() 연산자를 오버로딩한 클래스의 객체

[코딩테스트 고득점 KIT] 이분탐색 - 징검다리

프로성장러 — Fri, 27 May 2022 00:04:45 +0900

1. 문제
https://programmers.co.kr/learn/courses/30/lessons/43236

코딩테스트 연습 - 징검다리

출발지점부터 distance만큼 떨어진 곳에 도착지점이 있습니다. 그리고 그사이에는 바위들이 놓여있습니다. 바위 중 몇 개를 제거하려고 합니다. 예를 들어, 도착지점이 25만큼 떨어져 있고, 바위가

programmers.co.kr

[level 4]

2. 풀이

def solution(distance, rocks, n):
    rocks.sort()
    
    start = 1
    end = distance
    answer = distance
    while start <= end :
        mid = (start+end)//2
        sp = 0 # 치우지않은 돌의 좌표
        minlen = distance #현재까지 거리의 최소값
        ncount = 0 #치운 돌의수
        for i in rocks:
            # 거리의 최솟값이 mid이려면 mid 미만일때는 돌을 계속 치운다
            if i-sp <mid:
                ncount +=1
                continue
            # mid 이상일때는 돌을 치우지 않습니다.
            else:
                # 지금까지의 최소값을 기록
                minlen = min(minlen, i-sp)
                sp = i
        minlen= min(distance-sp,minlen)
        # 돌을 더 많이 치워야 했다면 최솟값은 더 작아야합니다.
        if ncount >n:
            end =mid -1
            continue
        #돌을 적게 치운경우.. 확인을 해봐야합니다.
        #일단 정답으로 두고 위쪽 범위에서 가능한지 확인해본다.
        if ncount <n:
            answer = mid
            start =mid +1
            continue
        else:
            if minlen < mid:
                end = mid-1
            elif minlen > mid:
                start = mid +1
            else :
                answer =mid
                break
                
    return answer

이분탐색 문제임을 알고 있었음에도 접근하기 까다로웠다.

처음 문제를 봤을 때는 바위 간의 거리를 정리해서 최소값을 구해야 된다고 생각했는데, 정해진 바위의 개수를 빼는 경우의 수가 너무 많고 복잡할 것 같았다.
이분 탐색문제라는 레이블이 없었다면 풀기 어려웠을 것 같다.

구하려는 "각 지점사이의 거리의 최솟값" 을 먼저 예측하고 이에 맞춰서 돌을 치우는 방식이다.
거리의 최소값을 알고있다면, 최소값보다 작은 거리를 만들게 되는 돌들을 치워준다.
만약 실제로 치워야하는 돌보다 많이 치웠다면 , 타깃으로 한 거리가 너무 길었다는 뜻이기 때문에 왼쪽을 추가로 탐색한다. 돌을 예상 보다 적게 치운 경우, 남은 돌에서 더 치울경우 최솟값이 더 커질 수 도 있기 때문에 정답이 될수도 있지만 그보다 큰 값이 정답일 수도 있다. 그래서 정답으로 두고 오른쪽을 추가로 탐색한다. (이때의 값을 정답으로 저장하는 로직을 여기에 넣지 않았을 때는 9개 테스트케이스중 3개 오답이 발생했었는데 추가하고서 통과했다)

그리고 마지막은 일반적인 이분탐색의 방법대로 최소값이 타깃보다 작을경우 왼쪽, 클경우 오른쪽을 추가로 탐색한다.

[코딩테스트 고득점 KIT] 이분탐색 -입국심사

프로성장러 — Thu, 26 May 2022 22:03:12 +0900

1. 문제

https://programmers.co.kr/learn/courses/30/lessons/43238

코딩테스트 연습 - 입국심사

n명이 입국심사를 위해 줄을 서서 기다리고 있습니다. 각 입국심사대에 있는 심사관마다 심사하는데 걸리는 시간은 다릅니다. 처음에 모든 심사대는 비어있습니다. 한 심사대에서는 동시에 한

programmers.co.kr

2. 코드 제출

def solution(n, times):
    start = min(times)
    end = max(times) * n
    answer = 0
    while start <= end:
        mid = (start+end) // 2
        pcount = 0
        for i in times:
            pcount += mid//i
        if pcount < n:
            start = mid +1
        else:
            answer = mid
            end = mid -1
    return answer

3. 풀이
전형적인 이진탐색 풀이 방법으로 풀 수 있는 문제였다.

우아한 Tech 테코톡 리뷰

프로성장러 — Tue, 12 Apr 2022 17:43:49 +0900

우아한 형제들 기술 유튜브(?) 우아한 Tech 에는 기술 관련된 세미나나 짧은 영상들이 많이 올라온다.

그중에서도 자주 보이는건 10분 테코톡이다.

우아한 테크코스에 참여하는 교육생들이 하나씩 주제를 맡아서 돌아가면서 세미나를 하는 형태인데,

확실히 직접 공부해서 다른 교육생들에게 설명하는 영상이다보니 설명이 쉽고 이해가 편한 것 같다.

자료구조, Web protocol, 네트워크, 프레임워크 등 다양한 분야를 망라하는데, 확실히 모두 웹 개발자들에게 필요한 내용들이다. 그리고 기수가 거듭되다보니 같은 주제로 다른기수에서 설명한 영상도 있어서 같이 보기에도 좋았다.

IT 분야가 워낙 방대하다보니 어디부터 공부할 지 모르겠고 시간도 없을 때는, 하루에 하나씩 테코톡을 보면 도움이 될 것 같다.

https://www.youtube.com/playlist?list=PLgXGHBqgT2TvpJ_p9L_yZKPifgdBOzdVH

#우아한테크코스 테코톡

www.youtube.com

[Vue] Vue 인스턴스 & 컴포넌트

프로성장러 — Fri, 18 Mar 2022 21:52:31 +0900

뷰 인스턴스

뷰로 화면을 개발하기 위해 생성해야 하는 기본 단위

<html>
	<body>
    	<div id="app">
        	{{ message }}
        </div>
        <script>
        	new Vue({
            	el:'#app',
                data : {
                	message : 'Hello Vue.js!'
                }
            });
        </script>
    </body>
</html>

속성을 통해 인스턴스가 그려질 지점, 데이터, 함수, 메서드 등 화면과 관계된 요소들을 정의함

뷰 인스턴스 속성

el	화면이 그려질 돔 요소를 지정 html element 혹은 css selector
data	화면을 그리는데 사용하는 data를 반환하는 함수 혹은 data객체
template	화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성
methods	화면 로직 제어와 관련된 메서드를 정의하는 속성
created	뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성

인스턴스가 화면에 적용되는 과정

1. 뷰 라이브러리 파일 로딩

2. 뷰 컴포넌트 등록

3. 인스턴스 객체 생성

4. 특정 화면요소에 인스턴스를 붙임

5. 인스턴스 내용이 화면 요소로 변환되어 값이 치환됨. ( 등록된 컴포넌트 내용도 변환)

6. 변환된 화면요소를 사용자가 확인

뷰 인스턴스의 유효범위

- 지정한 유효범위 를 벗어나면 반영되지 않는다.

<!-- el : '#app' 이므로 div 내부가 유효범위-->
<div id = "app">
   {{message}} 
</div>
   {{message}}   <!-- 바뀌지 않고 그대로 출력 -->

뷰 인스턴스 라이프사이클

라이프 사이클 속성 : 인스턴스의 상태에 따라 호출 할 수 있는 속성

beforeCreate : 인스턴스 생성후 처음 실행/ data, method 속성이 인스턴스에 정의되기전
created : data,method 정의되어 접근 가능, 인스턴스가 아직 화면에 부착되지 않음 ( 돔 요소 접근 불가)
서버에 데이터 요청하여 받아오는 로직 실행
beforeMount : render ( 자바스크립트로 화면의 돔을 그리는 함수) 가 호출되기 직전의 로직
mounted : el 속성에 지정한 화면요소에 인스턴스 부착후 실행
돔에 접근 가능
beforeUpdate : 데이터 변경시 가상돔으로 화면 다시 그리기 전 수행
updated : 데이터 변경되고 가상돔으로 화면 다시 그린후 실행
beforeDestroy : 뷰 인스턴스가 파괴되기전, 뷰 인스턴스의 데이터를 삭제
destroyed : 뷰 인스턴스에 정의한 모든 속성 제거. 하위 인스턴스 파괴 후

뷰 컴포넌트

화면을 구성 할 수 있는 블록 (화면의 특정 영역)

<div id="app">
	<!-- 컴포넌트 표시 -->
    <my-component></my-component>
    <my-local-component></my-local-component>
</div>

<script>
	//전역 컴포넌트 등록
	Vue.component('my-component', {
   		template : '<div>전역 컴포넌트</div>'	
	});	
	//지역 컴포넌트 등록
	var cmp = {
    	template : '<div>지역 컴포넌트</div>'
	}
	new Vue({
    	el : '#app',
   		components:{
        	'my-local-component' : cmp
        }
	});
</script>

전역 컴포넌트 : 여러 인스턴스에서 공통으로 사용될 수 있다

지역 컴포넌트 : 특정 인스턴스에서만 유효한 범위를 갖는다.

reference

- Do it! Vus.js 입문

- Vue.js 공식 가이드 https://kr.vuejs.org/

[algorithm] 2018 Kakao Blind Recruitment 3차 - n진수 게임.

프로성장러 — Thu, 10 Mar 2022 06:41:30 +0900

1. 문제

https://programmers.co.kr/learn/courses/30/lessons/17687

코딩테스트 연습 - [3차] n진수 게임

N진수 게임 튜브가 활동하는 코딩 동아리에서는 전통적으로 해오는 게임이 있다. 이 게임은 여러 사람이 둥글게 앉아서 숫자를 하나씩 차례대로 말하는 게임인데, 규칙은 다음과 같다. 숫자를 0

programmers.co.kr

2. 풀이

def change(n, num ):
    if num==0:
        return [0]
    li=[]
    while num:
        li.append(num%n)
        num=num//n
    return li[::-1] 
def solution(n, t, m, p):
    # N
    # a * (n**a-n**(a-1))
    T ="0123456789ABCDEF"
    a= 1
    b=0
    low =0
    size =n
    high = n
    points=[ p + x*m -1 for x in range(t)]
    answer = ''
    for point in points:
        while point >= high:
            b+=size//a
            low+=size
            a+=1
            size=a* (n**a-n**(a-1))
            high+=size
        answer+=T[change(n,b+(point-low)//a)[(point-low)%a]]
    return answer

게임참가인원, 튜브의 순서, 미리 구할 숫자 개수에 맞추어 튜브에게 몇번째 숫자들이 필요한지를 미리 확인한다.

T는 최대 16진법을 커버할 수 있는 0~F 까지의 character를 모아놓은 스트링이다.

순서 인덱스는 0 부터고 만약 16 진법이라고 할때, 16 번째 이전까지의 포인트는 0~F 까지 하나의 숫자를 그대로 출력하주면 된다. point 3 에서 T[3] =3 이고 point 10 에서 T[10]=A 이다

진법을 넘어가면서부터는 문제가 발생한다. 하나의 숫자가 두자리수 이상이 되기 때문이다.

2진법을 예로 들어서 생각해보면

한자리수 숫자 : 0 1 -> < 2**1 = 2 보다 작은 숫자

2자리수 숫자 : 10 11 -> < 2**2 =4 보다 작은 숫자

3자리수 숫자 : 100 101 110 111 -> < 2**3 = 8 보다 작은 숫자

그래서 a 자리수의 숫자들이 만들게되는 기호의 총 개수는 a * (n**a - n**(a-1)) 이 된다.

그렇게 point가 몇자리수의 숫자인지 확인하고나면

change(n,b+(point-low)//a ) 를 통해 해당되는 숫자의 모든 자리수를 가져오고

(point-low)%a 로 그중에 몇번째 숫자인지 확인해서 가져온다.

4. 후기

그림을 그려가면서 풀어서 잘 풀수 있었다.

그런데 코드의 가독성이 떨어져서 다시 읽을때 어려웠다.

[algorithm] 2018 Kakao Blind Recruitment 1차 - 셔틀버스

프로성장러 — Wed, 9 Mar 2022 15:09:24 +0900

1. 문제

https://programmers.co.kr/learn/courses/30/lessons/17678#

코딩테스트 연습 - [1차] 셔틀버스

10 60 45 ["23:59","23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59", "23:59"] "18:00"

programmers.co.kr

2. 풀이

def timer(timestr):
    timearr=timestr.split(":")
    return int(timearr[0])*60+int(timearr[1])
def strtimer(timeint):
    li  =[str(timeint//60).rjust(2,"0"),str(timeint%60).rjust(2,"0")]
    return ":".join(li)

def solution(n, t, m, timetable):
    #마지막 버스는 몇시인가
    lastbus  = 9*60+(n-1)*t
    # 버스를 모두 저장하자
    bustime = [9*60+i*t for i in range(n)]
    #한 버스에 탈 수 있는 사람은 m 명이다.
    #사람들이 어떤 시간 구간에 왔는지를 확인하자
    group =[ [] for i in range(n)]
    idx =0
    timetable_sorted=sorted(timetable)
    for i in range(len(timetable_sorted)):
        x=timer(timetable_sorted[i])
        while True:
            if idx>=n : break
            
            if x>bustime[idx]  :
                idx+=1
            else: break
            
        if idx>=n:
            break
        group[idx].append(x)
    cur=0
    queue=[]
    for x,y in zip(bustime,group):
        # queue 는 이전시간대에 와서 못탄사람 + 이번 시간대에 온사람
        queue.extend(y)
        ## 기존에 온사람을 다 채워도 남는다면, 버스 출발시간 맞춰서 타면 됨
        if len(queue)<m:
            cur=x
            queue =[] # 다 찼으니 큐는 비운다.
        # 기존에 온사람들로 다 차버린다면
        else:
            #제일 뒤에 탑승 성공한 사람보다 1초 빨리 탈 수 있어야함.
            cur=queue[m-1]-1
            queue =queue[m:]

    return strtimer(cur)

3. lessons

로직을 꼼꼼하게 체크해야 풀 수 있는문제였다.

나는 시간대별로 도착한 사람을 나눠서 큐에 추가해줬는데 그냥 한줄로 쭉 처리했으면 더 간단했을 것 같다.

최종 정답출력시 strtimer 라는 함수를 따로 만들어서 수행했는데 zfill을 사용했으면 더 쉽게 구현할 수 있었다.

str(temp//60).zfill(2) + ":" + str(temp%60).zfill(2)

4. 후기

상당히 고생했던 문제다. 로직이 맞다고 생각했는데도 70퍼센트대 정답률이 나와서 많이 해멨다.

작년에 풀다가 포기했었는데, 결국 하나하나 주석 달면서 로직을 확인해보기로했다

결과적으로 인덱스를 꼼꼼하게 체크하지 못해서 실수를 했던거였다.

queue를 처리하고서 다음 루프로 넘어갈 때 queue =queue[m:] 로 해야되는 queue[m=1] 로 쓰기도 했고..

제일 뒤에 탑승한사람에서 -1 을 해야되는데 제일 앞에 탑승한 사람에서 -1을하고..

결과적으로 문제를 정확히 이해하지 못했던 셈이다.

앞으로 더 문제 풀때 집중해야겠다.

=> 카카오 2018 1차 문제 풀이 완료

https://tech.kakao.com/2017/09/27/kakao-blind-recruitment-round-1/

Netlify 로 static project 배포

프로성장러 — Sun, 6 Mar 2022 21:48:51 +0900

무료로 정적 웹서비스를 배포하는 가장 대표적인 방법인 Netlify를 사용해 보았습니다.

이전에 정적 웹 서비스를 만들어 보았을 때는 github pages를 사용했었습니다.

netlify 로 배포하는 과정이 생각보다 너무 쉽고 간단해서 놀랐습니다.

Netlify는 무료 회원도 배포할 수 있는 웹 페이지 개수가 제한이 없는등 개인이 활용하기에 무리가 없을 것 같습니다.

가입 절차는 어떤 방법을 쓰느냐에 따라 다르겠지만 저는 email을 사용했습니다.

email을 입력하면 verify 메일이 오고 이를 클릭하면 바로 사용할 수 있습니다.

가입을 완료하면 아래와 같은 메인 페이지가 나타납니다.

계정 overview page

저는 이미 하나의 프로젝트를 만들어서 사이트가 떠 있는것을 볼 수 있습니다.

사이트를 올리는 방법은 세가지로 , git 에서 기존 프로젝트를 가져오는방법, template를 통해 netlify에서 프로젝트를 시작하는 방법, 직접 올리는 방법이 있습니다.

저는 로컬에서 Vue.js를 학습하던 페이지를 한번 올려보기로 했습니다.

npm run build

명령어를 사용하면 dist 라는 빌드 폴더가 생성됩니다.

이를 zip 파일로 압축하고 drag & drop을 하면 끝! 입니다.

몇초만에 static 사이트가 생성되었다. 

로컬에서 개발하던 그대로 배포된 것을 확인할 수 있습니다.

netlify의 또다른 장점은 custom 도메인을 사용하지 않고도 domain을 자유롭게( 다른사람과 겹치지 않는다면) 사용할 수 있다는 점일 것 같습니다. github pages는 디폴트 주소가 깃헙 아이디와 연계 되어서 살짝 불편할 수 있지만 netlify는 프로젝트별로 다른 도메인 이름을 활용할 수 있을 듯합니다.

[Vue] Vue.js 의 특징

프로성장러 — Mon, 21 Feb 2022 15:49:05 +0900

MVVM 패턴 ( Model -View - ViewModel)

이미지 출처 : Do it! Vus.js 입문

→ 화면동작 로직과 데이터 처리 로직을 분리

뷰 : 사용자에게 보이는 화면
돔 : HTML 문서에 들어가는 요소의 정보를 담고있는 데이터트리
돔 리스너 : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직 수행 ( 클릭 감지 → 로직)
모델 : 데이터, 서버에서 가져온 데이터를 js 객체 형태로 저장
데이터 바인딩 : 뷰에 표시되는 내용과 모델의 데이터를 동기화
뷰 모델 : 뷰와 모델의 중간영역 , 돔 리스너와 데이터바인딩 제공

컴포넌트 기반 프레임워크

이미지 출처 : Vue.js 공식 가이드 :https://kr.vuejs.org/

로고, 버튼, 모달 등 다양한 ui 요소들을 component 로 정의함
component 들을 조합하여 화면 구성
코드를 재사용하기 쉽고 화면 구조를 직관적으로 파악가능
Component 는 전역 / 지역으로 선언 할 수 있고 컴포넌트의 유효범위가 독립적이기 대문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다.

리액트와 앵귤러의 장점결합

앵귤러의 양방향 데이터 바인딩 ( Two -way Data binding) , 리엑트의 단방향 데이터흐름 ( One-way Data flow ) 장점을 결합
화면에 표시되는 값과 모델 데이터값이 동기화되어 한쪽이 변경되면 다른쪽도 변경
컴포넌트간 데이터 전달시 상위 컴포넌트에서 하위 컴포넌트 방향으로만 전달되게 구조화
빠른 화면 랜더링을 위해 리액트의 가상 돔(Virtual DOM) 랜더링 방식 적용

reference

- Do it! Vus.js 입문

- Vue.js 공식 가이드 https://kr.vuejs.org/

[Vue] vue cli 로 프로젝트 시작하기

프로성장러 — Thu, 17 Feb 2022 13:49:45 +0900

Static으로 만들어보고싶은 아이디어가 생각났는데

React를 한지 좀 시간이 지나서 이 기회에 vue를 배워서 사용해보려고한다.

Vue가 쉽고 가볍고 생산성이 높다고 하는데 react와 비교해보면서 알아볼 수 있을 것 같다.

IDE는 기존에 사용하던 vscode를 사용하기로 했다.

설치

vscode에서 terminal을 열고 node 와 npm이 깔려있는지 확인한다.

둘다 깔려있다면 npm install -g @vue/cli 로 vue cli를 설치한다.

설치 이후 확인을 해보는데 아래와같은 에러가 발생했다.

보안오류라고 해서 powershell 대신 bash shell을 사용해서 설치후 실행해보았더니 정상 동작하였다.

* 나중에 찾아본 결과 powershell에서는 vue 대신 vue.cmd 명령어를 사용하면 정상 수행된다고 한다.

vue create [project]

명령어를 사용하면 vue2 vue3 중에서 선택지가 나오고 설치가 진행된다

설치완료~

폴더 구조는 이렇게 되어있다.

$npm run serve 실행하면

아래와 같이 기본 페이지를 띄워 볼 수 있다. ( development build)

주소 : localhost:8080

이제 여기서 vue 프로젝트 개발을 시작하면 된다.

실제 production build 를 만들기 위해서는 npm run build 를 수행해야한다.

Vetur

Vetur extension을 설치하면 Syntax highlight, Formatting, Auto complete 등 기능을 사용할 수 있다.

< 만 쳐도 기본 format을 만들 수 있다.

<vue> 를 치면 아래와 같은 기본 vue template format을 만들 수 있다.

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>