Coding (164)

08
24

전 그래서 일단 주석 처리부터 해 보고 지웁니다. 물론, 풀 수 있다면 말이죠.

1. 문제의 발단.

 알고리즘 문제들은 매우 어렵다. 처음 문제를 접하고 풀리지 않는 문제를 볼 때는 무섭기까지 했다. 하지만 결국, 우리는 피해 갈 수 없다. 아무리 실무에서 안 쓴다더라, 누구는 안 하고도 코딩 잘하더라 하지만 어떻게 보면 가장 쉽게 코딩 실력을 키우고 좋은 곳에 취직을 할 수 있는 방법이 알고리즘을 잘 푸는 것이 아닐까? 그래서 오늘도 이렇게 삽질을 하고 있다.

2. 알고리즘?

  • 문제를 가장 효율적으로(최단 시간과 연산 과정에서의 반복을 최선으로 줄인) 해결하는 방법이다. 일명, 극한의 이득충
  • 분명, 모든 경우의 수를 다 확인한다면 반드시 답에 접근이 가능하다. 하지만 문제에서 아주 다양한 방법으로 제한사항을 두고 일상생활과 같은 곳에서 볼 수 있는 상황을 코드로 만들 수 있는가? 와 같은 다양한 상황에 마주치게 된다.

3. 어떻게 접근할 것인가?

  • 문제를 이해한다. '이해'한다. 사실은 이것이 50%이다. 대부분의 알고리즘 문제들은 문제를 읽는 것도 길고, 문제가 원하는 의도를 찾는 것도 쉽지 않다. 그러므로 일단 어떤 식으로 입출력 예시들이 작동하고 있는지를 이해하고 문제의 의도를 파악한다.
  • 수도 코드를 적는다. 난의도가 어려워질수록 더욱 필요하다. 코드 자체가 길어지기 때문에 내가 무엇 때문에 지금 이 코드 한 줄을 이용해 무엇에 접근하려고 하는지를 까먹게 된다. 필요하다면 그림을 그리거나, 이해한 것을 타인에게 설명해 보아도 좋을 것이다.

4. 시간복잡도 (Time Complexity)

  • 간단하게 말해서 이 알고리즘이 연산될 때마다, 얼마나 시간이 걸리는가? 를 묻는 것이다.
  • 이것을 줄이는 것이 우리가 생각하는 알고리즘 문제가 될 것이다.
  • 주로 우리는 Big-O (빅-오) 표기법으로 시간 복잡도를 표현한다.
  • 최고의 효율인 Big-Ω(오메가), 평균적 효율인 Big-θ(세타) 표기법도 있지만, 평가가 어려워서 잘 사용하지 않는다고 한다.

5. Big-O

Big-O 표기법의 복잡도를 나타낸다.

  • O(1) : 입력과 상관없이 바로 출력이 가능한 복잡도. index를 받아서 바로 출력하듯이, 얼마나 많은 입력이 있는 것은 상관없이 바로 해당 index에 접근해서 출력하게 된다.
    • function O1(arr, index) {
      	return arr[index];
      }
      
      let arr = [1, 2, 3];
      let index = 1;
      let result = O1(arr, index);
      console.log(result); // 2
  • O(n) : 입력과 함께 시간 복잡도가 똑같은 비율로 증가한다. 반복문을 사용해 모든 요소를 돌면서 데이터를 조작할 때처럼, 입력이 많아지면 돌아야 할 요소가 많아지는 것처럼 말이다.
    • function On(n) {
      	let arr = [];
      	for (let i = 0; i < n; i++) {
      		arr.push(i)
      	}
          return arr;
      }
      
      On(3) // [0, 1, 2]
      On(5) // [0, 1, 2, 3, 4]
  • O(log n) : 한번 연산이 될 때마다, 연산해야 할 요소들이 절반으로 줄어든다. BST가 O(log n)에 속한다.
    • // target의 index를 리턴한다. 없으면 -1을 리턴하자.
      
      const binarySearch = function (arr, target) {
        let start = 0;
        let end = arr.length - 1;
      
        while(start <= end) {
          let mid = Math.floor((start + end) / 2);
          if(arr[mid] > target) {
            end = mid - 1;
          } else if(arr[mid] < target) {
            start = mid + 1;
          } else {
            return mid;
          }
        }
        return -1;
      };
      
      let output = binarySearch([0, 1, 2, 3, 4, 5, 6], 2);
      console.log(output); // --> 2
      
      
      output = binarySearch([4, 5, 6, 9], 100);
      console.log(output); // --> -1
  • O(n^2) : 입력값이 증가하면 시간이 제곱으로 증가한다. 매우 비효율적이다. 우리가 자주 사용하는 이중 반복문이 여기에 해당한다.
    • function O22(n) {
          let arr = [];
      	for (let i = 0; i < n; i++) {
      		for (let j = 0; j < n; j++) {
      		    arr.push([j, i])
      		}
      	}
          return arr;
      }
      
      O22(2) // [[0, 0], [1, 0], [0, 1], [1, 1]]
  • O(2^n) : 입력값이 증가할 때마다 시간 복잡도가 제곱으로 증가한다. 최악의 효율을 가지고 있다. 재귀 함수를 이용한 피보나치수열을 만들 때 이러한 시간 복잡도가 된다.
    • function fibonacci(n) {
      	if (n <= 1) {
      		return 1;
      	}
      	return fibonacci(n - 1) + fibonacci(n - 2);
      }
      
      // 계속해서 그 이전 숫자들 까지 전부 다시 계산을 해 줘야 하므로 매우 비효율 적이다.

6. Greedy Algorithm

  • 말 그대로 욕망에 따라 움직이는 알고리즘을 말한다. (이 말 자체가 이상하게 보이긴 하다;;)
  • 지금 선택할 수 있는 가장 큰 경우의 선택을 고르고, 이후 점점 줄어들면서 결국 정답에 다다르기 때문에 이렇게 말한다.
  • 하지만 이러한 선택이 표면적으로는 빠르게 정답에 가까워 질지 몰라도 최고의 효율을 낸다고 볼 수는 없다.
  • 거스름돈을 거슬러 줄 때, 가장 큰 단위 (ex: 5460원을 거슬러 줄 때, 5천 원 지폐 하나, 100짜리 4개, 10원짜리 6개를 준비한다)부터 거슬러 주는 상황을 생각하면 된다.
COMMENT
 
08
23

처음 우분투를 사용할때 내 머리도 터지고 컴퓨터도 한번 터졌었습니다. 하루에 포멧을 수십번 했었죠.

1. 사용권한

  • 터미널에서 'ls -l'을 입력하면 각 파일들의 사용권한을 알 수 있다. 가장 앞에 적혀있는 drw 어쩌고... 이것이다.
  • 가장 첫 번째 'd'는 directory 즉, 폴더인지 아닌지를 나타낸다.
  • 나머지는 'rwx'가 3번 반복되는 형태로 나타난다.

2. rwx?

  • 먼저 rwx들은 3등분으로 나눌 수 있다.
  • 첫 번째 rwx는 '소유주' 이것을 소유한 본인이 직접 가지는 권한이고, 두 번째 rwx는 '소유 그룹' 마지막 rwx는 '타인'이 가지는 권한이다.
  • ls -l을 사용하면 가장 앞에 권한들이 적혀 있고, 숫자 권한 이후에 나오는 것이 '소유주', 그다음이 '소유 그룹'이다.
  • 권한이 없다면 '-'로 표현한다.

3. 권한을 바꿔보기

  • 명령어 'chmod'를 사용한다. 
  • 'chmod + '권한을 바꿔줄 u(user, 소유주) 혹은, g(group, 소유 그룹) 혹은, o(other, 타인) + 권한을 줄 때 '+' 혹은, 권한을 없앨 때 '-' + '줄 권한(r, w, x)'  ' 형식으로 입력한다.
    • ex) -rw-rw-r-- Hello.txt
    • chmod u-w Hello
    • -r--rw-r-- Hello.txt => 유저도 쓸 수 없는 txt 파일을 만들었다;;
  • whoami 는 지금 유저가 누구인지 알 수 있다.

4. 숫자로 보는 권한

  • 4 : read (2의 2승)
  • 2 : write(생성, 삭제, 수정)
  • 1 : execute
  • 그래서 u, g, o에 따라 3개씩 끊어서 읽는다.

 

COMMENT
 
08
13

따로 배울땐 몰랐어요...다 합쳐야 한다는 것

1. Redux?

  • React에서 state를 사용할 때 상위에 있는 부모에서 자식으로 점점 state를 props로 전달하게 된다. 이때, 만약 컴포넌트가 너무 많아서 한 10개쯤 거쳐서 전달해야 한다면? 너무 복잡해서 고통스러울 것이다. 유지보수도 마찬가지이다.
  • 이런 state를 어디서든 접근 가능한 하나의 저장소에 저장해서 어떤 컴포넌트에서든 접근할 수 있게 만든 것이다.
  • 그 저장소는 꼭 지정된 함수를 이용해 수정할 수 있게 하면 state가 실수로 수정되는 경우도 없을 것이다. 마치 setState 함수처럼 말이다.

2. 생긴 모양을 구분해서 동작원리를 살펴보자.

  • store : 우리가 만든 정보가 저장되는 공간.
    • state : 진짜 우리가 저장한 정보 (절때 직접 접근은 불가능)
    • reducer : state값을 바꿀 수 있는 함수.
    • dispatch : 2개의 값(지금 state와 action)을 reducer에 전달하고 subscribe를 호출해 준다.
      • action : UI에서 일어난 일들의 여러 가지 타입을 가진다. 이때 맞는 타입을 찾아 가공하고 가공한 데이터를 dispatch로 전달한다.
    • subscribe : reder함수를 '구독' 한다. state값이 바뀔 때마다, reder함수를 호출시켜준다. 
    • getState : render에서 UI정보를 받아서 state에 전달해 주며, 값이 다른 함수들에 의해 변경된 후에 다시 render로 바뀐 값들을 보내서 우리가 보는 화면을 만들어 준다. 즉, state에 접근할 수 있는 정상적인 방법이다.
  • render : UI를 만들어주는 그 렌더되어서 우리가 직접 보는 코드. 

출처: https://www.youtube.com/watch?v=F_NLNBOqZrQ&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=5 (생활코딩 Redux-2.3)

3. Redux로 시간여행을 하자!

  • Redux Devtools을 이용하면, 모든 state의 변경 상황을 다 알 수 있다. git 쓸 때처럼, 변화가 생긴 어떠한 상황으로도 돌아갈 수 있으며, 어떤 상황이 변경되었는지도 다 알 수 있기 때문에 매우 편리하다.

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en 

 

Redux DevTools

Redux DevTools for debugging application's state changes.

chrome.google.com

 

4. 각 Redux 함수의 생김새

  • Reducer, Action
function reducer(oldState, action) {
	if(action.type === 'create') {
    	// type의 종류는 다양하다. 여기에서는 뭔가 input내용을 추가한다 던지 하는 create
        // 무언가 조작 되겠지?
    } 
}

let store = Redux.createStore(reducer) 
// 위의 코드가 store를 만들고 reducer까지 함께 만들어 주는 코드이다.

 

  • Render, Subscribe
function render() {
	let state = store.getState(); 
    document.querySelector('#app').innnerHTML = "
    	<h1>Hello World!</h1>
    " } 
        
store.subscribe(render);

 

  • Dispatch
<form onsubmit= "
	store.dispatch({type: "create", payload:{title: title, desc: desc}}) 
" />

 

COMMENT
 
08
12

누르면 스토리북 홈페이지로 이동합니다.

1. Storybook?

  • 일명, 컴포넌트 탐색기
  • 모든 컴포넌트들을 각각 따로 한꺼번에 보면서 테스트해 보는 일을 할 수 있다. 진짜 우리 컴퓨터에 있는 '탐색기'를 생각하면 된다.

2. 굳이 왜 사용하죠?

  • 그렇다. 안 써도 된다. 하지만 쓰면 더 행복해진다.
  • 프로젝트를 완성시켜 놓고 컴포넌트에 어떤 부분을 수정하려고 하면 어디 있는지 찾는 일부터, 혹시나 있을 예상 하지 못한 결과를 프로젝트 안이 아닌 밖에서 미리 해 보고 적용할 수 있다.
  • 다른 개발자나 디자이너들과 협업을 할 때도 확실히 보여줄 수 있기 때문에 편리하다!

3. 기본 셋팅

  • npx degit chromaui/intro-storybook-react-template taskbox로 기본 프로젝트를 설치한다. 리액트로 돌아가기 때문에 리액트 앱을 하나 설치하는 샘이다.
  • cd taskbox로 들어가 실행한다.
  • npx -p @storybook/cli sb init으로 현재 만들고 있는 프로젝트에서도 설치가 가능하다.

4. 어떻게 사용할까?

  • Vs 코드로 실행시켜서 components폴더를 만든다.
  • 안에 각각의 원하는 컴포넌트의 폴더를 만들어 그 안에 js파일을 만든다.
  • 그리고 작업 후에 다시 스토리북 react파일을 npm run storybook로 실행시켜 보면, 만든 ui를 볼 수 있다.
  • Backpack UI에 다양한 대모가 있다. 참고하면 고수들의 작업물을 따라 만들 수 있을 것이다.

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/

 

React를 위한 Storybook 튜토리얼

Storybook을 개발 환경에 설치해봅시다

storybook.js.org

https://storybook.js.org/docs/react/get-started/examples

 

Example Storybooks

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular

storybook.js.org

  • 위의 두 가지 사이트를 잘 돌아본다면 더 편하게 사용할 수 있을 것이다.
COMMENT