Tory

No title

Jump into Redux

Redux는 글로벌 상태 관리 도구다. 기존 useState 통해 지역으로 상태를 관리하면 props drilling에 빠질 수 있어 상태 관리가 힘들어진다.

이에 대응할 수 있는 방법은 아래와 같다.

createContext를 사용하여 Provider를 통해 최상위 컴포넌트에서 전역으로 상태를 관리할 수 있다. Consumer 혹은 useState를 사용하면 context가 관리하고 있는 상태를 어디서든 접근할 수 있다.

const testContext = createContext();

module

Mon, 13 Sep 2021 02:09:42 GMT

module

Javascript에 모듈 시스템은 참 다양하다. node.js 환경에서 사용가능한 모듈 시트템과 브라우저에서 사용가능한 모듈시스템이 구분되며, 이에 따라 헷갈리기 쉬운 모듈 개념을 정리하는 시간을 가져보려고 한다.

1. node 환경의 모듈 시스템

1.1. commonJS

ecmascrip의 표준 모듈은 아니지만 node.js 환경에서 채택한 기본 모듈 시스템이다.

module.exports

function add(a, b) {
  return a + b;
}

module.exports = add;

모듈을 외부에서 사용하려면 “module” 전역 네임스페이스의 exports 프로퍼티에 함수를 할당한다.

require

const add = require('./add');
console.log(add(1, 2));

require 함수와 인수로 경로를 입력하면 모듈을 불러올 수 있다.(확장자 생략 가능)

1.2. ESM

ES6(ECMA2015+) 부터 지원하는 표준 모듈 시스템이다. node 환경에서는 package.json 파일에서 type: "module" 프로퍼티를 설정하면 그 때 부터는 모듈 시스템이 import export로 변경된다. 이때 commonJS 방식은 사용할 수 없다.

export

export function add(a, b) {
  return a + b;
}

ESM은 모듈을 외부에서 사용하기 위해 export 키워드를 사용한다.

default export 파일 내에 단 하나의 함수만 기본 모듈로 제공하고 싶은 경우 default 키워드를 사용할 수 있다.

export function plus(a, b) {
  return a + b;
}

export function minus(a, b) {
  return a - b;
}

export default function add(a, b) {
  return a + b;
}

import

import add, { plus, minus } from './add.js';
...

import 키워드로 모듈을 불러올 수 있다. 단 from 뒤의 모듈 경로는 반드시 파일의 확장자 단위까지 포함한 완전한 형태로 입력해야 한다. 생략이 불가능하다.

2. 브라우저 환경의 모듈 시스템

브라우저 환경에서는 ESM 방식만을 지원한다. 하지만 현대에는 React와 같은 프레임워크와 더불어 test 환경을 node.js 에서 구동시키는데, 이 같은 경우 브라우저와 node.js 환경에서 지원하는 모듈 시스템이 다르기 때문에 문제가 발생할 수 있다.

이 때는 package.json 에서 type: module 프로퍼티를 설정해주면 문제가 해결되지만, ESM은 모든 모듈에 경로를 확장자까지 포함하여 기입해야함으로 불편한 점이 많다.

편의성을 위해 webpack은 다음과 같은 문법을 ESM 방식으로 변환한다.

import add from './add'; // import add from './add.js'
import add from './directory/'; // import add from './directory/index.js'

3. 응용

3.1. webpack 설정

ESM 방식(비권장)

webpack.config.js 파일을 root 경로에 만들어주고 다음과 같이 입력한다.

import path from 'path';
const __dirname = path.resolve(); // ESM 방식은 __dirname이 없다.

export default {
  // module.exports
  entry: ['./test.js'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

주의할 점

package.json의 모듈 타입 설정에 따라 webpack 설정도 export 혹은 module.exports 문법을 따라야한다.
commonJS 문법의 경우 __dirname을 기본적으로 제공하지만, ESM 방식은 지원하지 않기 때문에 따로 설정해 주어야 한다.
ESM 문법으로 설정할 경우, 무조건 ESM 문법만을 따라야 하기 때문에 모듈문법을 유연하게 사용할 수 있는 webpack의 장점을 살릴 수 없다.

권장 설정

node.js 의 기본 모듈 설정인 commonJS를 따른다.
import export 문법을 사용하여 모듈을 유연하게 로드한다.
webpack은 js를 번들할 때, 내부적으로 브라우저가 사용가능한 모듈 문법으로 변환해준다.
babel을 사용하여 크로스 브라우징을 한다.

3.2. jest 설정

위와같이 webpack 모듈 방식을 사용할 경우, require문을 사용하지 않으면 jest 실행시 SyntaxError가 발생한다. jest가 node 환경에서 실행되니 당영한 결과다.

이럴 경우에는, 루트경로에 .babelrc 파일을 따로 만들어서 node.js 환경에서 실행될 때는 별도의 모듈 시스템이 적용되도록 분리할 수 있다.

{
  "presets": [
    ["@babel/preset-env", {
      "loose": true,
      "modules": "commonjs", // <= 이부분이 중요하다. auto 혹은 commonjs로 설정
      "targets": [
        "defaults",
        "> 1% in KR",
        "not dead", // 1년이상 브라우저 관리가 되지 않은 것 dead라고 판단.
        "ie 10"
      ]
    }]
  ]
}

width(web api)

Mon, 13 Sep 2021 00:09:10 GMT

web API가 제공하는 여러가지 width 값에 대해서

이번에 반응형으로 slick(carousel)을 구현하며 겪은 문제가 있다. 브라우저의 크기가 변경되면 slick이 한 화면에 보여주는 슬라이드의 수가 유동적으로 변하게 되는데, slick은 마지막 페이지에 도달하면 다음 페이지로 이동하지 못하게 막아야하므로 다음 처럼 총 6개의 슬라이드가 있다고 가정한다면 2개의 슬라이드씩 넘어갈 때는 3번을 넘길 수 있지만, 3개의 슬라이드가 넘어갈 때는 2번만 넘어가도록 만들어야 했다.

예시

2 slides on one page
3 slides on one page

문제점

본인은 screen.window.availWidth를 사용해 구현했고 availWidth를 사용했을 때 아래와 같이 문제가 있었다.

브라우저(윈도우)의 크기에 따라서 slick의 전체 page 수가 변동되어야 하는데, 변하지 않았다. 슬라이드의 개수가 3개일 때 1/2로 표기되는 것은 옳지만, 슬라이드의 개수가 2개일 떄는 1/3으로 표기되어야 정상이다. 하지만 아래 처럼 1/2로 고정되어있음을 알 수 있다.

devTools에서 해상도를 변경할때는 정상적으로 page 수가 변동된다.

왜 이 같은 문제가 발생하는지 찾아보았고 그 해답은 web api의 특성에 있었다.

web APIS

window.screen.width

window.screen.width는 모니터의 해상도이다. 따라서 노트북, 모바일 등 해상도가 다른 디바이스마다 값이 다르다.

하지만 같은 디바이스에서는 죽었다 깨어나도 값이 바뀔일이 없다.

window.screen.availWidth

본인이 햇갈렸던 api다. api 이름으로만 보면 브라우저의 크기에 따라 그 값이 변동되는 것처럼 느껴지지만 실상은 그렇지 않다.

window.screen.width와 성질은 같다. 역시나 모니터 해상도에 따라 값이 정해지며, 다만 상단의 툴바와 같은 영역을 제외하고 screen size가 결정된다. 주의할 점은 브라우저의 크기를 줄여도 무조건 모니터의 해상도가 기준이 되어 툴바 영역을 배제한다는 점이다.

툴바를 제외하는 window.screen.availHeight와 window.screen.height의 예시

console.log(
  'availHeight: ',
  window.screen.availHeight,
  'height: ',
  window.screen.height
); // availHeight: 1050 height: 1080

window.innerWidth

innerWidth는 브라우저 윈도우 창틀(외부 영역)을 제외한 크기를 표시한다. 반대로 window.outerWidth는 창틀까지 포함한 영역을 크기다.

slick에 적용할 web API는?

디바이스의 크기가 아니라 브라우저의 크기에 따라 slide의 개수가 정해지기 때문에, window.innerWidth를 사용해야 한다.

구현

React에서 커스텀 훅에 window.innerWidth를 사용해 봤다. resize 이벤트는 window의 크기가 변할 때 트리거 된다. resize 이벤트와 window.innerWidth를 함께 사용하면 문제를 해결할 수 있다.

import { useEffect, useState } from 'react';

export default function useWindowWidth() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    window.addEventListener('resize', () => {
      setWindowWidth(window.innerWidth);
    });
  }, [windowWidth]);

  return windowWidth;
}

vertical-align

Fri, 03 Sep 2021 20:00:02 GMT

vertical-align

오늘을 css prop 중 vertical-align에 대해 심플하게 알아보자.

vertical-aline은 mdn에서 display가 inline, inline-block, table-cell인 경우에 세로 방향의 line 정렬을 위해 사용할 수 있다고 소개한다. (즉, block level elements는 사용할 수 없음!)

그리고 정렬되는 기준이 조금 까다로운데 크게는 아래처럼 두 가지 경우로 정렬 기준을 나눌 수 있다.

1. inline(inline, inline-block) elements: 해당 elements를 포함하는 line box가 기준이 된다.
1. table cell: 해당 cell이 기준이 된다.

이 중에 오늘은 inline elements에 대해서 알아볼 것이다.

vertical align의 Values

vertical align에는 다양한 value를 지정할 수 있는데, value에 따라서 부모 요소에 영향을 받는 것과, line box에 영향을 받는 value로 분류된다.

Values for inline elements

Parent-relative values

아래의 값들은 정렬시 부모 요소에 영향을 받는다.

baseline(기준선): 해당 요소의 기준선을 부모 요소의 baseline으로 정렬한다. 단, textarea같은 몇몇의 replaced elements는 browser에 따라 baseline의 위치가 HTML 표준에 명세되어 있지 않기 때문에 주의해야 한다.
sub: 해당 요소의 기준선을 부모 요소의 subscript-baseline(baseline보다 약간 아래)을 기준으로 정렬한다.
super: 해당 요소의 baseline을 부모 요소의 superscript-baseline(baseline보다 약간 위)을 기준으로 정렬한다.
text-top: 해당 요소의 top을 부모 요소 font의 top으로 정렬한다.(글꼴 중 가장 큰 철자 맨 위에 맞추어 정렬.)
text-bottom: 해당 요소 & 부모 요소 font의 bottom을 기준으로 정렬한다.
middle: 부모 요소의 baseline을 기준으로 x-height(소문자 x의 height)의 1/2이 기준이 된다.
length: 부모 요소의 기준선에서 length 길이 만큼 위쪽으로 떨어진 위치가 해당 요소의 기준선이 된다. 따라서 0 이하의 값도 입력 가능.

Line-relative values

아래의 값들은 Line에 영향을 받는다.

top: 요소와 자식요소를 포함하여 전체 라인의 가장 위 라인이 기준이 된다.(line box의 최상단)
bottom: 요소와 자식요소를 포함하여 전체 라인의 가장 위 라인이 기준이 된다.(line box의 최하단)

baseline이 없는 경우 bottom margin이 baseline이 된다.

test

<p
  style="
    background: bisque;
"
>
  <span>baseline</span>
  <span style="vertical-align: top">top</span>
  <span style="vertical-align: middle">middle</span>
  <span style="vertical-align: bottom">bottom</span>
  <span style="vertical-align: super">super</span>
  <span style="vertical-align: sub">sub</span>
  <span
    style="
    display: inline-block;
    height: 100px;
    width: 100px;
    background: azure;
"
    >test inline element</span
  >
</p>

부모의 라인은 parent와 baseline이 있으며 가장 아래쪽에 위치한 baseline이 부모의 baseline이 된다.
자식의 baseline은 부모의 baseline을 따르기 때문에 두 baseline이 일치한다.
top의 경우 line을 기준으로 가장 위쪽의 line인 parent가 기준선이 된다.
bottom의 경우 line box의 최하단이 기준이 되었음을 알 수 있다.(line box가 계산되는 기준은 여라가지가 있지만 그 중에 inline-level 요소들의 높이를 계산하여 가장 큰 값을 가져오게 된다.)

reference

vertical-align: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

router

Thu, 02 Sep 2021 11:08:33 GMT

1. Before Jumpo into React Router

ROUTER에 대해 학습하기 전 SSR과 CSR에 대해 간략하게 알고 넘어가자! SSR과 CSR은 페이지와 관련이 깊다. 페이지의 구조를 담당하는 HTML 파일을 어느 위치에서 생성할 것인지에 따라 SSR과 CSR로 나뉘게 된다.

1.1 SSR

SSR은 사용자가 서버에게 페이지 리소스를 요청하면, 서버는 요청에 해당하는 HTML 파일을 생성하여 전송한다.

장점

HTML 코드를 완성해서 보내기 때문에, 검색 엔진 최적화가 가능함.
첫 페이지 렌더링은 일반적으로 CSR보다 빠르다.
- CSR은 HTML을 생성하는 번들러를 받아온 후 HTML을 생성하는 과정이 필요하기 때문

단점

페이지마다 html 파일을 요청하기 때문에 요청 횟수가 증가한다.
따라서 첫 페이지 렌러딩 외에는 일반적으로 CSR보다 렌더링 속도가 느리다.

1.2. CSR

CSR은 초기에 최소한의 코드를 포함한 HTML을 전송 받은 후, JS 파일을 통해 HTML의 메인 코드들을 동적으로 생성합니다.

장점

서버에 요청 수가 줄어듦에 따라 서버의 부담을 덜어 낼 수 있다.
두번째 렌더링 부터는 HTML요청 없이 JS를 통해 렌더링하기 때문에 SSR 보다 빠르다.

단점

최소한의 코드를 포함한 HTML은 검색 엔진에 전달할 정보가 부족하므로 포털에 SEO 점수가 낮게 평가됩니다.
번들된 JS 파일의 크기가 커질 경우 초기 렌더링이 느려지기 때문에 최적화가 필요합니다.

2. React Router

클라이언트 사이드에서 라우팅하기 위한 라이브러리로 react-router-dom을 사용할 수 있다.

Router: Route(경로)들을 관리한다.
Route: 특정 경로(path)가 입력되면 component를 렌더링 한다.
Switch: 첫번째로 매칭되는 Route만 렌더링 되도록 하는 도구

(switch가 없다면 루트 경로로 이동하고자 하는 경우 ”/“를 포함한 Route가 모두 렌더링 되는 문제가 발생한다. 아래 예시의 exact를 기입했음에도 dashboard, products, landing이 모두 렌더링 됨.)
Redirect

import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from 'react-router-dom';
import { Landing, Products, Dashboard } from 'pages';
import { Header, Footer } from 'containers';

export default function WireframeApp() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Landing} />
        <Route path="/dashboard" component={Dashboard} />
        <Route path="/products" component={Products} />
        <Redirect to="/landing" />
      </Switch>
    </Router>
  );
}

3. storybook with router

리엑트의 경우 Link 컴포넌트를 통해 경로를 이동시킬 수 있다.

이 때, Link는 Router 컴포넌트 내에서만 사용할 수 있기 때문에, Link 컴포넌트를 테스트하고 싶은 경우, decorator를 사용하여 Router를 감싸 줄 수 있다.

export default {
  title: 'Components/Nav',
  component: Nav,
  decorators: [
    Story => (
      <Router>
        <Story />
      </Router>
    ),
  ],
} as ComponentMeta<typeof Nav>;

const Template: ComponentStory<typeof Nav> = args => <Nav {...args} />;

export const Basic = Template.bind({});

typescript-redux

Sun, 29 Aug 2021 20:08:13 GMT

Jump into Redux with typescript

리덕스를 typescript로 작성해보자! 모든 내용은 redux 홈페이지를 참고했다. 매우 친절하게 설명되어 있으니 읽어보는 것을 왕왕 추천함!

📒 What we’ll learn?

typescript로 Redux를 작성하는 표준 패턴!
Redux 로직에서 올바르게 타입을 지정하는 방법

🧠 PREREQUISITES

당연하지만 이 챕터를 학습하기 위해서는 ts 문법과 용어를 알고 있어야 한다.
특히 ts의 generic과 utility type에 대해 알고 있어야 한다.
리액트 훅은 필수!

Overview

리덕스를 타입스크립트와 함께 사용했을 때 얻을 수 있는 장점을 아래와 같다.

reducer, state, action creator, UI 컴포넌트 까지 전반적으로 타입오류에 대한 걱정을 줄일 수 있다.
리펙토링이 쉬워진다.
A superior developer experience in a team environment (무슨 의미일지 실제로 팀에 소속되어 프로젝트 경험을 해봐야 알 것 같다.)

그러나… 언제나 트레이드 오프는 있는법! 타입에 대한 고민, 코드량 증가, 타입 로직에 의한 코드 복잡도 증가 등 typescript를 적용하는 것은 생각보다 많은 비용이 소모된다. 따라서 프로젝트의 성격에 맞추어 ts를 적용할지 고민할 필요는 있다.

그럼에도 불구하고, Redux에서는 typescript를 절적하게 사용하면 분명히 큰 이점이 있다며 권장하고 있기에 이제 본격적으로 Redux 공식홈페이지에서 제공하는 typescript 표준 패턴에 대해 알아보자!

Standard Redux Toolkit Project Setup with TypeScript

Redux Toolkit(이하 RTK)은 기존 reducer, actionType, actionCreator 등등을 반드시 작성해야 했던 Redux의 복잡한 로직을 간편하게 만들어주며 이는 Redux 로직의 표준으로 자리잡았다.

Redux Toolkit은 이미 TypeScript로 작성되어있다. 따라서 단순하게 라이브러리를 가져다 사용하는 것을 넘어 타입에 대한 hint를 제공하고 있기 때문에 이를 참조하여 작성해 보자. 보다 쉬운 개발 경험을 제공할 것이니…!

react-redux 또한 @types/react-redux라는 별도의 라이브러리로 타입에 대한 정의를 제공하고 있다. react-redux 7.2.3 버전부터 dependency로 함께 설치된다고 하니 그 이하 버전을 사용할 경우에는 수동으로 설치할 필요가 있다.

Define Root State and Dispatch Types

useSelector를 사용하면서 오류가 발생했다.

const number = useSelector(state => state.counter);

Property ‘counter’가 type DefaultRootState에 존재하지 않는다고 한다.

이때 useSelector의 hint를 확인해 보자.

첫번째 매개변수로 입력되는 selector의 경우 state라는 매개변수를 콜백함수를 입력해야 하는데, 이때 state의 type이 DefaultRootState라고 되어있다. 이는 제네릭 문법으로, 위 이미지의 `useSelector`부분을 참고하면 useSelector의 제네릭으로 DefaultRootState를 지정하였으며, 함수 내부에서 state가 그 타입을 받고 있음을 확인할 수 있다.

참고: generic이란? 타입이 string, number처럼 고정된 타입이 아니라 호출이 될 때 경우에 따라 타입이 바뀌어야 하면 위와 같이 제네릭을 문법을 사용하여 호출시에 type을 설정한다. (예제로 queue같은 경우 string Queue, number Queue 다양하게 사용될 수 있으며 제네릭을 사용하면 코드량을 줄일 수 있다.)

심지어 hint를 조금 내려보면 어떻게 사용해야하는지도 알려준다.

공식문서에도 자세하게 나와있으니 참고하길 바라며 아래와 같이 타입을 지정하여 문제를 해결하였다.

// index.tsx
const store = configureStore({
  reducer: rootReducer,
});

export type RootState = ReturnType<typeof store.getState>;

// CounterContainer.tsx
const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

function CounterContainer() {
  // const number = useSelector<RootState>(state => state.counter);
  const number = useAppSelector(state => state.counter);

typescript-react

Tue, 24 Aug 2021 20:08:13 GMT

TypeScript

TypeScript에 대해 알아보자!

TypeScript는 공식 페이지에서 javascript의 superset이라고 소개한다. 공식문서에 따르면 TypeScript 2.1 부터 —target ESNext를 지원하니, 웬만한 js 문법은 전부 사용할 수 있고 컴파일을 통해 타입체크도 할 수 있으니 superset이라고 부를 수 있겠다.

React와 함께 사용하기

1. 함수 컴포넌트 prop 타입 지정하기

컴포넌트의 prop 타입을 지정하는 방법은 크게 2가지가 있다.

1.1. React.FC 와 제네릭

import React from 'react';

interface GreetingProps {
  name: string;
  mark: string;
}

const Greeting: React.FC<GreetingProps> = ({ name, mark, optional }) => {
  return (
    <div>
      Hello {name} {mark}
    </div>
  );
};

Greeting.defaultProps = {
  mark: '!',
};

const App = () => {
  return (
    <Greeting name="YeongJong" /> // Property 'mark' is missing in type
  );
};

const로 선언한 함수에서 React.FC<GreetingProps> 와 같이 제네릭 방식으로 타입을 설정할 수 있다.

특징

children의 propType이 React.ReactNode 기본 설정되어 있기 때문에 children의 propType 설정이 필요하지 않다.
defaultProp이 제대로 적용되지 않는다. (위 예시의 경우 mark는 ’!’로 기본 설정되었지만, Greeting을 호출할 때 mark prop을 넘겨주지 않으면 에러 발생)

2번 참고자료: https://github.com/typescript-cheatsheets/react/issues/87

1.2 function 키워드로 선언한 함수의 type으로 적용

import React from 'react';

interface GreetingProps {
  name: string;
  mark: string;
}

function Greeting({ name, mark, optional }:GreetingProps) => {
  return (
    <div>
      Hello {name} {mark}
    </div>
  );
};

Greeting.defaultProps = {
  mark: '!',
};

특징:

children의 propType이 기본 설정되어 있지 않다. 따라서 children을 삽입할 경우에 propType 설정이 필요하다.
defaultProps가 제대로 적용된다.

1.3 소결론

React.FC는 defaultProps가 적용되지 않는 문제점 그리고, children이 기본 적용되어 있기 때문에 children이 삽입되지 않는 경우에 문제가 발생할 수 있다. 따라서 function 키워드를 통한 type 설정을 권장한다.

reference

React + TypeScript CheatSheets

basic

Mon, 23 Aug 2021 00:09:07 GMT

Before Jump in to GraphQL!!

rest를 잘 사용하다가 왜 GraphQL 이라는 새로운 방식의 데이터 요청 방법이 개발되었을까?

rest는 endpoint를 데이터의 자원의 주소와 맵핑하는 매우 간편한 방식을 사용한다.

하지만 endpoint를 통해 요받은 데이터는 항상 고정된 리소스 형태를 응답받기 때문에 때로는 불필요한 리소스도 포함된다.

예를들어 아래와 같이 get http://localhost:3000/people/judy 이 주소를 통해 데이터를 요청하면 id, name, bestFriend, age를 모두 응받받게 된다. 하지만 때로는 age가 필요없는 경우도 있는데, 이렇게 필요한 데이터보다 더 많은 데이터를 응답받는 현상을 Over-Fetching 이라고 한다. 반대로 필요한 데이터보다 적게 응답받아, 여러번 요청해야 하는 경우는 Under-Fetching이라고 하며, 이런한 현상이 네트워크 자원을 낭비하는 일이기 때문에, graphQL은 대표적으로 이 두 가지 문제점을 해결하고자 세상에 등장한 것이다!!

// get http://localhost:3000/people/judy
{
  "id": 1,
  "name": "Judy",
  "bestFriend": "YeongJong",
  "age": "30"
}

Chapter 1. query

graphQL에서 query는 rest의 get과 같은 역할을 한다.

friends에서 id, name, bestFriend만 받아오고 싶을 때 아래와 같이 필요한 field명을 기입하여 선택적으로 정보를 취득할 수 있다.

1.1. 필요한 정보만 선택적으로 받아오기

요청 쿼리

query {
  people {
    id
    name
    bestFriend
  }
}

결과

{
  "data": {
    "people": [
      {
        "id": "1",
        "name": "Judy",
        "bestFriend": ["YeongJong"]
      },
      {
        "id": "2",
        "name": "HyeonJung",
        "bestFriend": ["Da Eun", "Yurim"]
      }
    ]
  }
}

이점

Over-Fetching 문제를 해결하여 데이터 전송량 최적화

1.2. 여러 계층의 정보를 한번에 받아오기

요청 쿼리

query {
  people {
    id
    name
    bestFriend
  }
  teams {
    id
    memeber
  }
}

결과

{
  "data": {
    "people": [
      ...
    ],
    "memeber": [
      ...
    ]
  }
}

이점

Under-Fetching 문제를 해결하며 요청 횟수 최적화

Chapter 2. mutation

mutation은 rest의 post와 같은 역할을 한다. 단, rest에서는 post, put, delete등의 역할이 쓰임에 따라 나뉘지만 graphQL에서는 apollo와 같은 graphQL 백엔드 서버에서 작성한 쿼리문을 mutation의 내부에서 사용하여 post, put, petch, delete 등의 기능을 수행할 수 있다.

2.1. 추가

요청 쿼리

mutation {
  people (input: {
    name: "DuYeong",
    bestFriend: ["JungWon"]
  },) {
    name
    bestFriend
  }
}

2.2 수정

mutation {
  editTeam(id: 2, input: {
    name: "HyeonJung",
    bestFriend: ["Da Eun"]
  }) {
    name,
    bestFriend,
  }
}

특징

하나의 url(endpoint)로 모든 요청을 처리할 수 있다. 단, 서비스에 따라 장점이 될 수도 단점이 될 수도 있기 때문에 서비스에 알맞은 방식을 채택하는 것이 중요하다.

학점구하기

Wed, 11 Aug 2021 11:09:20 GMT

문제

학생들이 각자의 과제에 대해 상호평가를 합니다. 각 학생이 자신을 포함하여 평가한 점수가 배열로 주어집니다. 이 때 각 학생이 받은 점수의 평균을 구해 학점을 반환하는 로직을 작성해야 합니다. 최종 반환하는 형식은 ‘FBC’ 와 같이 0번 학생부터 순서대로 학점을 구해 문자열로 반환합니다. 단, 학생이 자신을 평가한 점수가 유일한 최고점수 혹은 최저점수라면 평균을 구할 때 제외합니다.

평균	학점
90점 이상	A
80점 이상 90점 미만	B
70점 이상 80점 미만	C
50점 이상 70점 미만	D
50점 미만	F

입력예시

scores = [
  [10, 20, 30], // 0번 학생이 0번, 1번, 2번 학생을 평가한 점수
  [70, 80, 90],
  [100, 0, 10],
];

제한사항

나의 풀이

function solution(scores) {
  let answer = '';

  // 평균 => 학점 변환
  const getGrade = average => {
    switch (true) {
      case average >= 90:
        return 'A';
      case average >= 80:
        return 'B';
      case average >= 70:
        return 'C';
      case average >= 50:
        return 'D';
      default:
        return 'F';
    }
  };

  const studentLength = scores.length;
  const receivedScoresListByStudent = Array.from(
    { length: studentLength },
    () => []
  );

  // 각 학생이 받은 점수로 변환
  for (let i = 0; i < studentLength; i++) {
    for (let j = 0; j < studentLength; j++) {
      receivedScoresListByStudent[j].push([i, scores[i][j]]);
    }
  }

  receivedScoresListByStudent.forEach((scores, myNumber) => {
    scores.sort((a, b) => b[1] - a[1]);

    // 최저점수 혹은 최고점수 제외
    const filterdScores = scores
      .filter((_, index, thisArr) => {
        if (
          index === 0 &&
          thisArr[index][0] === myNumber &&
          thisArr[index][1] !== thisArr[index + 1][1]
        )
          return false;

        if (
          index === studentLength - 1 &&
          thisArr[studentLength - 1][0] === myNumber &&
          thisArr[studentLength - 1][1] !== thisArr[studentLength - 2][1]
        )
          return false;

        return true;
      })
      .map(([_, score]) => score);

    // 평균 계산
    const average = filterdScores.reduce((acc, cur, index) => {
      if (index === filterdScores.length - 1)
        return (acc + cur) / filterdScores.length;
      return acc + cur;
    }, 0);

    answer += getGrade(average);
  });

  return answer;
}

const scores = [
  [100, 90, 98, 88, 65],
  [50, 45, 99, 85, 77],
  [47, 88, 95, 80, 67],
  [61, 57, 100, 80, 65],
  [24, 90, 94, 75, 65],
];

console.log(solution(scores) === 'FBABD');

다른 사람 풀이

각 학생이 받은 점수로 변환 (열을 행으로 행을 열으로 바꾸는 방법)

const receivedScoresListByStudent = scores.map((_, i) => {
  // [scores[0][i], scores[1][i], scores[2][i]]를 반환하면 행과 열을 바꿀 수 있다.
  return scores.map(score => score[i]);
});

리펙토링

function solution(scores) {
  const getGrade = average => {
    switch (true) {
      case average >= 90:
        return 'A';
      case average >= 80:
        return 'B';
      case average >= 70:
        return 'C';
      case average >= 50:
        return 'D';
      default:
        return 'F';
    }
  };

  const receivedScoresListByStudent = scores.map((_, i) =>
    scores.map(score => score[i])
  );

  return receivedScoresListByStudent
    .map((scores, i) => {
      const myScore = scores.splice(i, 1)[0];

      if (myScore > Math.max(...scores) || myScore < Math.min(...scores))
        return scores;

      return [myScore, ...scores];
    })
    .map(scores =>
      getGrade(scores.reduce((acc, cur) => acc + cur, 0) / scores.length)
    )
    .join('');
}

출처:

프로그래머스 위클리 챌린지 2주차

집중력 향상

Sun, 09 May 2021 21:06:20 GMT

집중력 향상

주어진 일을 시간내에 해내야할 때 집중력이 필요한 경우가 있다. 기본적으로 사람의 성향을 바꾸는 것이 쉽지는 않기 때문에, 갑자기 집중을 잘하는 사람이 될 수는 없지만, 즉각적으로 집중력을 향상시킬 수 있는 몇 가지 방법 혹은 도구를 동원해서 한번 집중력을 끌어올려 보자.

뽀모도로 방식: 일정한 시간을 정하고 그 시간에는 반드시 그 일만하자. 그리고 휴식시간을 갖자.
분량을 정하기: 일정한 시간을 정할 수 없는 경우에는 분량을 정해두고 그 일을 끝마칠 때 까지 그 일을 한다.
쥐어 짜내기: 단순 무식하지만, 집중이 안될때는 쥐어 짜내서 끝까지 해보자.
수준에 맞게 하나의 큰 일을 작은 일로 나누어 해보자.
감정을 해소하고 일을 하자: 명상, 조깅 등.

planner

Sun, 09 May 2021 21:05:24 GMT

플래너 작성하기

시간관리를 더욱 철저하게하기 위해 플래너를 작성할 때 규칙들을 정해보자.

나와의 약속

자기전에 다음날 할 일을 생각해보고 최초 3개 최대 6개 + a 까지 작성해보기.(TO DO LIST)
TO DO LIST는 중요도 순으로 작성하고 항상 중요도 순으로 실천하기.(Ivy)
하루를 살며 한 시간 간격으로 내가 했던 일을 기록하기. 하루를 살며 내가 직전 한시간 동안 무엇을 했는가를 모니터링 하는 것이 정말 중요하다. 자율주행모드 영상 보기
하루를 마무리하고 피드백을 적어보기.
내가 한 일을 카테고리 별로 분류해서 형광팬으로 색칠하기. => 해야할 리스트 중 어떤 일은 충분히 실천했고, 어떤 일은 충분히 못헀다는 것을 직관적으로 알 수 있다. 다음 날은 이것을 바탕으로 시간 분배를 조절해 보자.
현실적으로 오늘 내가 설정한 목표를 얼마나 달성했는지 파악해서 내일의 목표를 수정하자.

위상정렬

Sun, 09 May 2021 15:06:21 GMT

위상 정렬

정렬이라고 해서 마치 리스트의 정렬 알고리즘 처럼 값의 크기에 따라 각 값들을 정렬하는 것으로 착각할 수 있다. 하지만 이 개념과 혼동하지 않고 완전히 다른 시각으로 바라보아야 한다. 위상 정렬이란 사이클이 없는 방향 그래프에서 모든 노드를 방향성에 거스르지 않고 순서대로 나열하는 방법이다. 즉 모든 노드를 순회하되 방향성에 맞게 순회하는 방법이라고 생각하면 된다. 그래프에서 이 방법이 왜 필요할까? 예를들어 적분을 학습하기 위해서는 미분을 선행으로 학습해야하고, 미분을 학습하기 위해서는 공통수학을 선행학습해야 한다. 결과적으로 그래프 내에서 특정 정점부터 적분까지 도달할 수 있는 경로는 여러 가지가 있을 것이다. 그 중에 루트(진입차수가 없는)노드를 기준으로 하나의 정점인 적분이 기준이 되었을 때, 어떤 노드로 부터 연결되었는지를 알아내는 방법이라고 볼 수 있다.

알고가야할 용어

진입차수(Indegree): 특정한 노드로 들어오는 간선의 개수
진출차수(Outdegree): 특정한 노드에서 나가는 간선의 개수

4월 회고

Sat, 01 May 2021 15:06:22 GMT

4월 회고

개요

패스트캠퍼스의 네카라쿠배 프로젝트를 시작한지 벌써 1달하고 보름이 지났다. 그 동안 나에게 있었던 변화를 관찰해보고 마음을 정리하고자 2021년 4월 회고를 작성해 본다.

패스트캠퍼스에서 있었던 일

자료구조와 알고리즘

패스트캠퍼스에 들어와서 처음으로 배운 수업은 자료구조와 알고리즘이다. 내게는 이해하기 힘든 과목이어서 하루하루 복습하고, 예습하고, 알고리즘을 어떻게든 소화해 내겠다는 다짐을 가지고 바쁘게 살았던 것 같다. 힘들었던 시간이었지만 자료구조를 학습한지 3주가 지난 지금도 개념은 확실히 숙지한 것 같아 뿌듯하다. But… 인간은 망각의 동물이라고 했던가… 방심은 금물이다. 배웠던 내용을 잊지않기 위해 개념을 주기적으로 복습하고, 알고리즘 문제도 꾸준히 풀자.

HTML과 CSS

두번 째 수업은 HTML과 CSS 였다. 자료구조와 알고리즘 수업에 비해 수업기간이 짧았던 터라 이 수업도 어제를 기준으로 끝이났다. 수업을 듣고 HTML CSS를 바라보는 시각이 정말 많이 바뀌었다. 이전에 내 모습과 비교해보기 위해 간단하게 수업을 듣기 전과 들은 후로 나누어 정리해 보았다.

Before

기획의도 및 요소의 의미를 파악하지 않고 div를 만능처럼 사용해왔다.
CSS 속성들이 어떤 기능을 하는지 알고있었지만 내부적으로 구현된 원리를 파악하지는 못했다. 예를들어 float된 요소를 벗어나기 위해 부모 요소에 overflow를 적용하는 원리를 파악하지 못해서 왜 이렇게 동작하는지 의문이 들 때가 있었다.

After

기획의도와 디자인, 접근성을 고려해서 HTML 마크업 구조를 짤 수있다.
CSS가 적용되는 원리가 무엇인지 알고 사용해야 한다. 예를들어 BFC와 IFC 개념을 알아야 하고, 각 속성이 가지는 특징을 파악하는 것이 중요하다.
PostCss, Sass, Webpack등이 필요한 이유를 알게되었다.

개선할 점

아침에 일어나 학원에 도착하면 오전 9시다. 보통 학원에 도착해서 그날 할 일을 짚어보고, 자기 전 내일 할일을 정리하는데, HTML 수업이 있던 주는 하루하루가 너무 정신없이 흘러가 일일 계획표를 작성하지 못했다. 그 날 해야 할 일을 정하지 않아서 일까? 목표가 흐려졌다. 그리고 순간순간 집중하지 못하는 일이 생기며 오늘 하루 최선을 다하지 못했다는 느낌을 받았다. 아무리 해야할 일이 많더라도 계획은 세우고 하루를 시작하자. 그리고 학습의 효율성을 최대한 끌어올리기 위해 나에게 맞는 공부 방법을 계속해서 생각해보자.

아쉬운 점

정신없이 해야할 일이 쌓이고, 휘몰아치는 하루하루 속에 마음의 안정이 필요할 때가 있다. 4월은 벚꽃이 핀다. 꽃을 보면 마음이 평화로져서 하루는 시간을 내고 보러가고 싶었는데 눈 깜짝할 사이에 초록 빛 잎이 자라나 있더라. 일년에 딱 한번 뿐인 기회를 놓친게 조금 아쉽지만, 꼭 취뽀해서 내년에는 동료들과 함께 벚꽃구경 가자.

scss

Sat, 01 May 2021 00:06:35 GMT

scss

scss는 sass의 3번 버전으로 css 전처리기입니다. css에 왜 전처리기가 필요할까요? css를 접해봤다면 반복되는 작업을 수행할 수 없기 때문에 코드의 길이가 상당히 길어지게 됩니다. 이렇게 긴 css 코드는 구조를 파악하기 힘들어지며 이 것은 생산성과도 직결됩니다. 그 외에도 여러가지 이유가 있지만 scss를 사용하면 선택자를 재사용할 수 있고 전체 구조를 파악하기도 훨씬 쉬워집니다.

sass 설치

- window 용 choco install sass

window의 cli installer인 choco를 사용해서 간단하게 설치할 수 있습니다.

—watch option

sass의 —watch option은 특정 파일 혹은 폴더를 실시간으로 추척해서 변화가 감지될 때마다, sass로 작성된 파일을 scss로 컴파일 합니다. sass -watch app/sass:public/stylesheets

media query

Tue, 27 Apr 2021 01:04:51 GMT

media-query

미디어 쿼리는 미디어 유형과, 미디어의 특성에 따라 스타일을 지정하고 싶을 때 사용한다.

1. 문법

@media 조건 {
    css 문법
}

참고1 조건에는 미디어의 유형 또는 특성을 입력한다.

참고2 조건을 충족하면 {} 내에 작성한 css 문법이 적용된다.

1.1 논리 연산자

not, and, or, only와 같은 논리 연산자를 사용해서 쿼리를 조합하면 복잡한 조건식을 만들 수 있다.

a and b:

and 연산자를 사용하면 조건 a와 b를 모두 충족해야 스타일이 적용된다.

a or b:

or을 사용하면 다수의 기능을 판별해서 하나라도 맞는 경우 스타일을 적용시킬 수 있습니다.

not a and b

not 연산자를 사용하면 이따라 작성된 전체 조건식의 의미를 반전시킨다. 즉 a 조건에만 적용되는 것이 아니고 a and b에 적용된다.

@media not all and (monochrome) {…} 위의 쿼리는 아래와 같이 평가된다. @media not(all and (monochrome)) {…} 아래와 같이 평가되는 것이 아니다. @media (not all) and (monochrome) {…}

only

only 연산자는 전체 쿼리가 일치할 경우에만 스타일이 적용된다.

screen and (max-width: 500px) 쿼리를 작성했을 때 구형 브라우저에서 max-width:500px 부분을 인식하지 못하기 대문에 screen 조건이 참이되면 스타일을 적용해 버린다. 이와 같은 오류를 방지하기 위해 only를 사용할 수 있다.

,(쉼표)

다수의 미디어 쿼리를 한줄에 작성하고 싶을 때 사용합니다.

3. 실습

4. 장점

5. 단점

6. 활용방안

max-width, min-width 특성을 조건문으로 설정하면 뷰포트의 너비에 따라 스타일을 다르게 적용하여 반응형 웹을 구현할 수 있습니다.

참고자료

https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

attr

Tue, 27 Apr 2021 00:05:22 GMT

attr

attr 함수는 입력받은 html 속성의 값을 반환한다.

실습

javascript vs css

장점

단점

활용방안

counter

Tue, 27 Apr 2021 00:04:24 GMT

counter

counter 함수를 활용하면 javascript를 사용하지 않고 선택된 요소가 몇 번째 요소인지 파악할 수 있다.

실습

javascript vs css

장점

단점

활용방안

noreferrer&noopener

Sat, 24 Apr 2021 15:04:54 GMT

content models

Sat, 24 Apr 2021 14:04:27 GMT

HTML5는 HTML 4.01과 XHTML 1.0 문법을 모두 반영합니다. 이와 더불어 기존에 없던 콘텐츠 모델이라는 개념이 도입되었는데, 오늘은 콘텐츠 모델에 대해서 알아보려고 합니다.

1. Content models

모든 요소는 콘텐츠 모델이라는 개념을 가지고 있습니다. 그렇다면 콘텐츠 모델이란 무엇일까요? 각 요소는 고유의 의미를 가지고 있습니다. 예를 들어 article은 독립적으로 존재할 수 있는 내용을 담고있죠. 그래서 이 요소의 내부에는 보통 내용의 주제를 의미하는 h 태그를 사용합니다. 이 처럼 각 요소는 모두 고유한 의미를 가지고 있기 때문에 포함할 수 있는 요소가 있을 것이고, 반대로 그렇지 못하는 요소도 존재하겠죠.

그런데 html에 정의된 모든 요소들 마다 어떤 요소를 사용할 수 있는지 하나하나 판단하는게 쉬울까요? 할 수는 있지만 꽤나 복잡한 일거리가 될 거에요. 그래서 HTML5에서는 비슷한 성격의 요소들을 묶어서 총 7개의 카테고리로 분류했어요. 이제 각 요소가 어떤 카테고리를 사용할 수 있는지만 알면 비교적 쉽게 사용가능한 요소를 파악할 수 있겠죠. 여기서 카테고리로 분류된 것들이 바로 콘텐츠 모델이라는 개념입니다.

a tag of article's content categories by MDN

7가지 콘텐츠 모델

1. Metadata content

2. Flow content

3. Sectioning content

4. Heading content

5. Phrasing content

6. Embedded content

7. Interactive content

참고문서

w3c-working-draft

로고와 h1

Tue, 20 Apr 2021 21:05:07 GMT

왜 h1 태그를 로고에 사용하는가?

페이지의 h1태그를 로고와 함께 사용하는 케이스를 자주 접할 수 있습니다. 그러다 문득 왜 h1 태그를 관례처럼 로고와 함께 사용하고 있는지 의문이 들었습니다. 그래서 오늘은 마크업 구조에서 왜 h1 태그를 로고와 함께 사용하고 있는지 알아보려고 합니다.

내 생각

h1 태그는 페이지를 대표하는 가장 큰 제목입니다. 기업을 대표하는 로고는 header 영역내에서 그 무엇보다 필수로 삽입되어야하는 요소로, 큰 제목이 될 수 있습니다.
접근성 측면에서 h1 태그를 홈 버튼으로 생각하는 사용자가 많습니다.
SEO 알고리즘이 중요하게 여기는 요소는 title 다음으로 h1 태그입니다. 이미 잘 알려진 기업의 경우 로고의 이름을 검색하는 경우가 대부분이기 때문에 h1 태그를 로고와 함께 배치하는 것이 유리합니다.

KWAG(Korea Web Accessbility Group)를 참고한 내용

주로 컨텐츠, SEO, 접근성 이 세가지 관점을 기준으로 어떤 관점을 더 높이 생각하는지에 따라 의견이 갈렸습니다.

컨텐츠

일반적으로 사용자의 입장에서 문서상의 로고를 주요한 컨텐츠로 생각하는 사람은 거의 없다. 단순한 이미지 정도로 생각하기 때문에 모든 페이지마다 로고를 h1과 함께 배치하는 것은 좋은 방법이 아니다. 따라서 페이지의 가장 중요한 컨텐츠의 제목을 h1으로 배치하는 것이 의미상으로 가장 적합하다.

SEO

검색 최적화 및 상단 노출을 위해 컨텐츠 영역의 제목을 h1태그와 함께 배치하는 것이 유리할 수 있다. 실제로 뉴욕 타임즈의 기사는 기사 제목을 h1으로 지정하고 있다.

article by NYT

접근성

로고를 h1으로 제작된 웹페이지들이 많다. 사용자는 h1을 이미 로고로서 인식하고 있는 경우가 있는데, 특히 스크린리더를 사용하는 경우 이러한 사용자 경험이 두드러진다.

참고자료:

로고와 h1

웹의 역사

Tue, 20 Apr 2021 00:05:38 GMT

HTML을 공부하다가 웹서버와 웹브라우저가 만들어진 배경이 궁금했다. 그래서 이번 포스트는 웹의 역사를 알아가는 시간이 되겠다.

인터넷의 기원

회선 교환으로 통신하는 두 기기는 데이터를 주고받기 위해서 회선을 독점해서 사용해야 했다. 이는 다수의 기기를 연결해서 여러 기기가 동시에 데이터를 주고 받을 경우 이미 독점된 상태의 회선들을 사용하지 못한다는 단점이 있었고, 이론적으로는 모든 컴퓨터를 1:1로 직접 연결해야 이 문제를 해결할 수 있었다. 그렇다면 인터넷은 모든 컴퓨터가 연결되어 있는가? 당연히 아니다. 현대 인터넷은 하나의 스위치 혹은 라우터를 기준으로 여러 대의 컴퓨터가 연결되어 소규모 네트워크를 이루고, 이런 네트워크들 끼리 연결된 구조이다. 모든 컴퓨터를 연결하지 않았는데 어떻게 실시간 데이터 송수신이 가능할까? 그것은 바로 패킷교환 방식의 발명 덕분이다.

1960년대부터 미국 국방부는 핵전쟁을 비롯한 중대한 전쟁이 발생할 경우를 대비하기 위해 통신망 가운데 일부가 파괴되더라도 전체 통신시스템에서 데이터를 전송할 수 있는 방법을 모색했다. 그 결과 1969년 UCLA-스탠퍼드-유타-UC 산타바바라 등 4개 대학을 잇는 아르파넷 프로젝트를 추진했고, 1969년 네트워크 사이에서 최초로 패킷 교환이 이뤄지게 된다. 패킷교환방식이 네트워크의 핵심이되는 이유는 자료를 작은 데이터 단위로 나누어 전송하게 되면 전체 데이터를 한번에 보내지 않기 때문에 데이터가 정송되는 동안 회선을 독점하지 않고서도 전체 데이터를 전송할 수 있기 때문이다.

그 후 아르파넷에 연결되는 컴퓨터가 늘어나며 프로토콜 관련 네트워크 소프트웨어와 전자우편 서비스 등이 다수 개발되었다.

월드와이드웹(WWW)

우리가 일반적으로 웹이라고 부르는 명칭은 바로 WWW를 칭하는 말이다. 월드와이드웹은 기존 단순히 인터넷으로 연결된 수 많은 컴퓨터 사이에서 각각 컴퓨터가 가지고 있는 데이터를 효율적으로 공유하기 위해 고안되었다.

20세기 말 인터넷에 연결된 컴퓨터가 많아지며 컴퓨터 내부의 자료를 관리하고 공유하는 것이 힘들어졌다. 유럽 스위스에 위치한 원자핵 공동연구소(CERN)에서도 그 문제가 매우 심각했는데, 관리해야할 자료가 많아지면서 직원들 간에 자료를 공유히기 힘들어졌고, 때로는 컴퓨터 내부에 저장된 자료들이 유실되었다. 당시 CERN의 직원이었던 팀 버너스리는 이 문제를 해결하기 위해 HTML을 만들어 문서들을 연결했다. 그리고 이런 연결된 문서들을 원격으로도 주고받기 위해 웹서버와 최초의 브라우저인 WWW를 창시했다.

DTD

Tue, 20 Apr 2021 00:05:06 GMT

wai-arai

Tue, 20 Apr 2021 00:04:07 GMT

트리의 지름

Thu, 15 Apr 2021 17:05:05 GMT

Diameter of Tree

문제

가중치를 가지는 트리에서 임의의 두 노드를 선택합니다. 이 때 두 노드를 연결하는 가중치들의 합이 최대가 되는 가중치를 반환하세요.(지름 반환 문제)

접근방법

임의의 두 리프 노드를 선택한 집합이 최장 가중치의 후보가 된다.
루트 노드에서 부터 1 depth씩 내려가며 가장 긴 간선을 택해 리프 노드를 찾아가는 Greedy한 방법은 오류가 있다. => 선택되지 않은 노드에서 아래로 연결된 간선이 높은 가중치를 가질 수 있기 때문에.
2번의 이유로 모든 노드를 확인해야 한다.
어느 노드에서라도 가중치들의 합이 최대가 되는 노드를 찾으면 그 노드는 지름이 되는 두 노드 중에 한 노드가 된다.
- 3번과 6번을 연결하는 가중치들의 합이 지름이라고 가정하자. 0,1,2 노드는 리프 노드가 아니기 때문에 후보 노드에서 제외한다.
- 그 외에는 4번과 6번을 연결한 경우를 예시로 3번과 6번보다 짧다는 것을 증명하려면, 공유되는 간선인 0번에서 6번까지를 제외한 0번과 3번을 연결한 간선과 0번과 4번을 있는 간선의 가중치를 비교하면 된다.
- 이때 0번에서 3번을 잇는 간선이 더 커야 3번에서 6번을 잇는 가중치의 합이 최대가 되기 때문에 4번과 6번을 잇는 가중치의 합은 무조건 작은 값이 된다. 나머지 리프노드를 선택해도 모두 같은 원리가 적용된다.

결론적으로, dfs로 모든 노드를 순회한다. 노드를 거쳐갈 때 마다 가중치를 기록해 최대값을 갱신하면 정답을 구할 수 있다.

burglary image by Programmers

코드

그래프를 구성하는 vertex를 class로 선언한다. adj_list는 vertex에 연결된 vertices들의 index와 weight를 저장한다.

class Vertex:
    def __init__(self, adj_vertex = None):
        if adj_vertex:
            self.adj_list = [adj_vertex] # [(index, weight)]
        else:
            self.adj_list = []

다음으로 vertex들을 관리할 그래프를 클래스를 선언하고, vertex들을 관리할 vertices를 선언한다.

class Graph:
    def __init__(self, n):
        # 인접행렬 보다 리스트가 유리(트리기 때문에)
        self.vertices = [0] * (n + 1)

주어진 정보(vertex )

def insert(self, v_index, adj_v_index, weight):
    if self.vertices[v_index] == 0:
        self.vertices[v_index] = Vertex((adj_v_index, weight))
    else:
        self.vertices[v_index].adj_list.append((adj_v_index, weight))

    if self.vertices[adj_v_index] == 0:
        self.vertices[adj_v_index] = Vertex((v_index, weight))
    else:
        self.vertices[adj_v_index].adj_list.append((v_index, weight))

Abstract Data Type

Mon, 12 Apr 2021 20:04:37 GMT

추상자료형이란?

값이나 연산의 집합으로 정의되는 자료형의 수학적 모델.

특징

ADT만 알고있다면 하나의 ADT로 부터 구현된 여러개의 자료구조들을 ADT에 정의된 방법으로 동일하게 사용할 수 있다. ex) ADT:List, DS: ArrayList, LinkedList)
또한 동일한 결과를 보여주는 두 자료구조라도 내부 구현방식은 다를 수 있기 때문에, 알고리즘상 유리한 자료구조를 상황에 맞게 선택할 수 있다.
DS 개발자 입장에서는 ADT를 참조해서 DS를 만들면 되기 때문에, 비교적 원활하게 원하는 기능을 구현할 수 있다.

자료구조와의 차이점

구현 여부
- 자료 구조는 실제로 구현되어, 사용할 수 있다. ex)Java의 추상 자료형 Interface는 아무런 구현이 되어있지 않다.

느리게 걷기 대회

Sat, 10 Apr 2021 19:04:48 GMT

세상을 바꾸는 시간, 15분 이명수 선생님의 강연을 듣고…

이 글은 건강한 마음으로 공부하기 위해 내 마음을 정리해보자 라는 목적을 가지고 작성했습니다.

패스트캠퍼스 네카라쿠배 프론트엔드 스쿨 1기 - 3주차

많이 어렵고 이해하기 힘들었던 자료구조&알고리즘 수업이 어제로 끝났다. 3주안에 이것들을 다?라고 생각할 정도로 정말 많은 양을 공부했다. 내가 이 수업을 놓치지 않고 따라갈수 있던 이유는 무엇보다 이해하지 못한 부분을 재차 질문해도 더 쉽게 설명해주시는 강사님과 동료분들이 있었기 때문이라고 생각한다. 정말 감사드리며, 나도 언젠가 이분들로 부터 받은 선한 영향력을 다시 돌려주겠다 라는 다짐을 했다.

이와 동시에 내가 지속적으로 느낀 감정이 있는데 같은 수업을 듣고있지만 남들과 비교해서 이해하지 못한 부분이 생기면 내가 정말 초라하고 많이 부족해 보였다. 그리고 그래 모든 사람들이 지금까지 쌓아온 역량이 있고, 어느 부분에서는 내가 남들보다 이해력이 떨어질 수 있지라고 생각해서 잠도 줄여가며 남들보다 1시간 일찍나왔고, 남들보다 2시간 더 늦게까지 공부했다.

마음속 혼란

그렇게 3주가 지나고 오늘 이력서를 쓰려고 하는데 어떤 내용을 작성해야할지 생각이 떠오르지 않았다. 내가 글을 잘 못써서 일까? 아니면 나는 이 기업이 원하는 인재처럼 살아오지 않아서일까? 열심히 살아왔지만 이력서에 한 줄 제대로 작성하지 못하는 모습을 보며 여러모로 마음이 혼잡해졌다.

내 마음속 지옥일때 저자의 강연을 듣고

왜 이렇게 혼란스러울까 고민하다 유*브에 올라온 한 영상을 보게되었다.

강연에서 이원규 작가님의 속도라는 시가 마음에 와 닿았다.

이원규 작가의 시 '속도' 중에서...

    비닐하우스 출신의 딸기를 먹으며
    생각한다. 왜 백 미터 늦게 달리기는 없을까?
    만약 느티나무가 출전한다면
    출발선에 슬슬 뿌리를 내리고 서 있다가
    한 오백년 뒤 자신의 푸른 그림자로
    아예 골인 지점을 지워버릴 것이다.

모든 사람들은 자신만의 속도가 있다. 여행사를 통해 주요 관광지만을 빠르게 둘러보는 것과 배낭을 짊어지고 모르는 길을 물어가며 천천히 그 지역을 알아가는 것은 전혀 다르다.

수업시간에 내가 남들보다 이해력이 부족했다고 느낀 이유도 느티나무의 뿌리처럼 수업 내용을 더 깊게 이해하고 싶었기 때문이 아닐까?

유튜브 링크

Sebasi #800 When I am in a worst mood | Lee Myung Soo

Dynamic Programming

Wed, 07 Apr 2021 13:04:37 GMT

동적계획법이란

두 가지 조건을 포함해서 복잡한 문제를 보다 단순한 부분 문제로 나누어 해결하는 방법입니다.

부분문제들의 최적해가 전체의 최적해를 이룹니다.
동일한 부분문제들이 여러번 발생합니다.
- 조건이 충족되지 않으면 분할&정복 문제라고 합니다.

동적계획법의 핵심

중복되는 연산을 미리 캐싱해 두고, 중복 연산이 발생할 때 마다 참조하여 연산을 줄입니다. 즉, 공간과 시간복잡도를 trade한 대표적인 방법이라고 볼 수 있습니다.

burglary

Wed, 07 Apr 2021 11:05:29 GMT

문제

도둑이 어느 마을을 털 계획을 하고 있습니다. 이 마을의 모든 집들은 아래 그림과 같이 동그랗게 배치되어 있습니다. 각 집들은 서로 인접한 집들과 방범장치가 연결되어 있기 때문에 인접한 두 집을 털면 경보가 울립니다.

burglary image by Programmers

각 집에 있는 돈이 담긴 배열 money가 주어질 때, 도둑이 훔칠 수 있는 돈의 최댓값을 return 하도록 solution 함수를 작성하세요.

제한사항

이 마을에 있는 집은 3개 이상 1,000,000개 이하입니다.
money 배열의 각 워소는 0 이상 1,000 이하인 정수입니다.

나의 풀이

def solution(money):
    # not_pick_last_case
    money_0 = money[:-1]
    dp = [0] * len(money_0)
    dp[0] = money_0[0]
    dp[1] = max(money_0[0],money_0[1])

    for i in range(2, len(money_0)):
        dp[i] = max(dp[i-2] + money_0[i], dp[i-1])

    first_max = dp[-1]
    # pick_last_house
    money_1 = money[1:]
    dp = [0] * len(money_1)
    dp[0] = money_1[0]
    dp[1] = max(money_1[0],money_1[1])
    for i in range(2, len(money_1)):
        dp[i] = max(dp[i-2] + money_1[i], dp[i-1])
    second_max = dp[-1]
    return max(first_max, second_max)

접근법

우선 문제를 보고 어떻게 인접하지 않은 집들을 털수 있을까 생각해 보았다. 집이 홀수일 때, 짝수일 때를 나누어 생각해보았고 어떤 규칙에 따라 집을 찾아가는 greedy 방식을 사용하면 최대 1,000,000개가 되는 집들 사이로 어떤 경우가 최대가 되는지를 파악해야 했다. 어쩌면 factorial 형태로 모든 경우의 수를 따져야 될 수 도 있고, 명확하게 어떤 순서로 집을 털어야 하는지 방법이 떠오르지 않았다. 그래서 이럴 때 최적해를 반환하는 f(n)이 f(n-a)와 어떤 관계가 있는지 파악할 수 있다면 해답을 찾을 수 있기 때문에 다음으로 떠올렸던 방법이 DP다.

f(n)을 1번부터 n번 집까지 물건을 훔치는 경우의 수 중에서 최대의 금액을 훔친 경우라고 가정했다. 여기서 꼭 짚고 넘어가야하는 것이 도둑은 인접한 집을 털수없다는 점이다. 이 개념을 연장하면 n번 집을 털었는지 아닌지를 기준으로 두 가지로 나눠서 생각해 볼수있다. n번 집을 털어서 최대 금액이 되었다면 n-1번 집을 털지 않았다는 뜻이 되고 이를 식으로 표현하면 f(n) = f(n-2) + money[n]이 된다. 반면 n번째 집을 털지 않았을 때라면 n-1번째 집을 털어서 최대로 훔칠수 있는 가능성이 생기고 이를 식으로 표현해보면 f(n) = f(n-1) 이된다. 즉 이 두 가지 중에 큰 값이 최대로 훔친 금액이 되는 것이다.

하지만 위의 방식으로 문제를 풀면 한가지 문제점이 있다. 만약 도둑이 n번째 집을 털고서 최대한 많은 금액을 훔쳤다면 이 때 1번째 집도 같이 털어서 최대가 되는 경우가 생길 수 있다는 점이다. n번째와 1번째는 인접한 곳이기 때문에 조건에 어긋난다. 그래서 n번째 집을 털어서 최대가 됐다는 가정에는 1번째 집을 아예 제외시켜야 한다. 그 코드가 바로 아래 코드가 된다.

money_1 = money[1:]
dp = [0] * len(money_1)
dp[0] = money_1[0]
dp[1] = max(money_1[0],money_1[1])
for i in range(2, len(money_1)):
    dp[i] = max(dp[i-2] + money_1[i], dp[i-1])
second_max = dp[-1]

그런데 여기서 한 가지 더 따져야 할 조건이 있다. 곰곰이 생각해보면 1번째 집을 제외하고, n번째 집을 털지 않았을 때 최대가 되는 경우가 발생하는데, 그렇다면 1번째 집을 포함해서 n번째 집을 털지 않았을 때가 최대가 되는 경우도 있지 않을까? 라는 생각에 탄생한 코드가 1번째 집을 포함하고 n번째 집을 제외한 경우의 수중 최대를 찾는 코드이다.

money_0 = money[:-1]
dp = [0] * len(money_0)
dp[0] = money_0[0]
dp[1] = max(money_0[0],money_0[1])

for i in range(2, len(money_0)):
    dp[i] = max(dp[i-2] + money_0[i], dp[i-1])

이 둘중 최대값을 찾고 반환하면 해답을 얻을 수 있다.

TIL210406

Tue, 06 Apr 2021 12:04:15 GMT

Today I learned

오늘은 max-width 속성에 대해 알아보았다. max-width 속성은 inline, block 요소와 무관하게 모든 요소에 대해서 width 값의 maximum을 설정한다.

inline요소와 block요소에 따른 차이점은 block 요소는 기본적으로 가로를 모두 채우고있기 때문에 width에 여백이 생긴 경우라면 남은 여백을 margin으로 채우는 특징이 있다.

Binary Search Tree

Mon, 05 Apr 2021 10:04:04 GMT

Jump into BST

이진트리 구조에 특수한 규칙을 적용한 트리입니다. 부모 노드를 기준으로 왼쪽 자식 노드에는 작은 값의 노드가 삽입되고, 오른쪽 자식 노드에는 큰 값이 삽입 됩니다.

Basic aspects of BST:

좌우의 균형이 맞으면, 탐색, 삽입, 제거의 시간복잡도가 log(n)으로 상당히 빠른 편에 속한다.
삽입되는 순서에 따라 트리가 달라진다.
한쪽으로 치우친 skewed Tree 형태가 되면, 탐색, 삽입, 제거의 시간복잡도가 o(n)이 된다.
숫자가 삽입된 노드를 기준으로 왼쪽 서브 트리에는 기준 값보다 모두 작은 값을 가진 노드가 있으며, 반대로 오른쪽에는 큰 값을 가진 노드만이 연결된다.
자료의 중복이 허용되지 않는다.

Method:

탐색: log(n)

루트 노드를 기준으로 찾고자하는 값과 대소 관계를 파악한다.(탐색 시작)
같은 값을 가진 노드가 발견되면, True 를 리턴한다.
찾고자 하는 값이 노드의 값보다 작으면 왼쪽 노드로 이동한다.
찾고자 하는 값이 노드의 값보다 크면 오른쪽 노드로 이동한다.
더 이상 내려 갈 수 없는 마지막 노드에 도달하면 False를 반환한다.

삽입: log(n)

탐색과 같이 루트 노드를 기준으로 값의 대소관계를 가려 더 이상 아래로 이동할 수 없는 노드까지 도달하면 그 자리에 삽입한다.(부모노드와, 부모노드에서 이동된 방향 필요) note: 단, 같은 값이 발견되면 즉시 False를 반환한다.

제거: log(n)

case 1. 제거하고자하는 노드가 자식 노드를 가지고 있지 않은 경우 => 부모 노드와의 연결을 끊는다.
case 2. 제거하고자하는 노드가 한 개의 자식 노드를 가지고 있는 경우 => 부모 노드와 자식노드의 자식노드를 연결한다.
- 부모노드에서 연결된 방향과 자식노드에서 연결된 자식노드의 방향을 고려해서 총 4가지의 경우가 생긴다.
case 3. 제거하고자하는 노드가 두 개의 자식 노드를 가지고 있는 경우 => 제거하려는 노드의 오른쪽 서브 트리에서 가장 작은 값을 가진 노드로 대체 or 제거하려는 노드의 왼쪽 서브 트리에서 가작 큰 값을 가진 노드로 대체한다.

Merge Sort

Mon, 05 Apr 2021 01:04:19 GMT

Jump to Merge Sort

About Merge Sort

정렬된 두 리스트의 왼쪽 인덱스부터 차례대로 대소관계를 비교합니다. 그리고 비교된 값 중 작은 값 부터 새로운 리스트에 채워나가면 O(n)의 시간복잡도로 두 리스트를 하나의 리스트에 정렬시킬 수 있습니다. 이 방법을 활용해서 정렬되지 않은 하나의 리스트를 길이가 2 혹은 1인 여러 개의 부분 리스트로 분할합니다. 나눠진 부분 리스트들 중에서 두 리스트씩 비교해 하나의 더 큰 정렬된 리스트를 만드는 과정을 반복하면 입력받은 리스트를 정렬할 수 있습니다.

Process of Merge Sort

리스트를 두 부분의 리스트로 더 이상 나눌 수 없을 때까지 작게 나눕니다.(분할)
길이가 1인 리스트(가장 작은 리스트)가 되면 두 개의 인접한 리스트를 선택해 대소 관계를 비교하고 하나의 정렬된 상태로 합병하여 임시 리스트에 저장합니다.(정복)
임시 리스트에 저장된 값들을 원래 리스트에 할당합니다.(합병)
가장 작은 리스트가 모두 합병되어 조금 더 커진 부분 리스트가 되면 다시 이 리스트들 끼리 1번 부터 3번까지 반복합니다.

Time Complexity

분할 과정: n-1 번 => O(n)
정복 과정: n * log(n) 번 => O(NlogN)
합병 과정: n-1 번 => O(n)

알고리즘의 시간복잡도를 측정할 때 정확하게 적용하지 않았기 때문에 시간 복잡도가 왜 O(NlonN)인지 헷갈렸다. 시간복잡도를 계산할 때는 알고리즘에서 가장 복잡한 시간을 정확하게 인지해야 한다.

즉 분할과정과 합병과정 정복과정은 모두 별개로 실행되기 때문에 O(n)번은 모두 무시하고, 정복 과정을 살펴보면 아래 그림과 같이 logN의 깊이 만큼 N번을 비교해야 하기 때문에 시간 복잡도는 O(logN)이 된다.

Merge Big-O Image by RiKang

Code

추후 작성 예정입니다.

Binary Search

Sun, 04 Apr 2021 21:05:13 GMT

Jump into Binary Search

정렬된 자료에서 탐색하는 알고리즘입니다. 나열된 자료들 중에서 중앙에 있는 값을 기준으로 찾고자 하는 값이 큰 경우 혹은 작은 경우에 따라 찾아야 하는 자료의 범위가 반씩 줄어들기 때문에 시간 복잡도는 O(logN)이 됩니다.

1. 구현

recursion

def binary_search(arr, v):
    def partition(left, right):
        if right < left:
            return
        nonlocal is_searched
        mid = (left + right) // 2
        if arr[mid] == v:
            is_searched = True
            return
        elif arr[mid] > v:
            partition(left, mid - 1)
        else:
            partition(mid + 1, right)

    is_searched = False
    partition(0, len(arr) - 1)

    return is_searched

iteration

import time
def binary_search(arr, v):
    left = 0
    right = len(arr) - 1
    while left <= right:
        mid = (left + right) // 2
        # 인덱스를 더해 반으로 나누면 홀수는 중앙, 짝수는 중앙의 왼쪽
        if arr[mid] == v:
            return True
        elif arr[mid] < v:
            left = mid + 1
        else:
            right = mid - 1
    return False

Time Complexity

Sun, 04 Apr 2021 17:05:18 GMT

Jump to Complexity

1. Algorithm

알고리즘이란 문제를 해결하기 위한 여러 동작들의 모임입니다. 서로 다른 두 개의 알고리즘이 같은 결과를 출력할지라도 소비되는 컴퓨터의 메모리와, 출력까지 소요되는 시간은 달라지게 됩니다. 즉, 메모리와 시간이 알고리즘을 측정할 수 있는 기준이 됩니다.

2. Complexity

알고리즘이 어떤 문제를 해결하는데 걸리는 시간을 시간 복잡도, 소비하는 메모리의 크기를 공간복잡도라고 부르고 있습니다.

2. Scape Complexity

공간 복잡도는 알고리즘이 동작하기 위해 필요한 공간의 크기 입니다. 대부분의 알고리즘이 중복되는 연산의 중간과정을 저장하고 재사용하기 위해 메모리를 소비합니다.

3. Time Complexity

알고리즘이 동작하는 데에 걸리는 시간 또는 연산의 횟수

3.1. 시간 복잡도의 계산 방법

반복문과 조건문을 고려해서 실행 횟수를 분석하는 방법이 있습니다.

위 코드는

n은 알고리즘이 처리해야할 자료의 크기
for 문의 i에 대입되는 연산 횟수 n번
sum 변수와 array[i]의 덧샘 연산 횟수 n번
덧샘 연산이 끝나고 sum 변수에 대입되는 연산 횟수 n번

으로 총 3n번의 시간복잡도를 가지게 됩니다.

NOTE: 조건문과 같이 경우에 따라 반복되는 횟수가 달라지는 경우가 있습니다. 따라서 최악의 경우, 최선의 경우, 평균적인 경우로 알고리즘의 복잡도를 정의할 수 있습니다. 그리고 일반적으로는 최악의 경우에 대해 알고리즘의 복잡도를 정의합니다.

4. Asymtotic Notation (점진적 표기법)

보통 n의 크기가 작을 때는 소요되는 시간이 매우 작습니다. 따라서 알고리즘에 입력되는 자료의 개수 n이 충분히 커졌을 때 알고리즘의 성능에 따라 사용자는 영향을 받게 됩니다.

이렇게 n이 충분이 크다고 가정한 상태에서 하드웨어 성능을 배제하고 알고리즘의 성능만을 공평하게 비교할 수있는 효율적인 표기 방법이 점진적 표기법 입니다.

복잡도 순위
O(1) < O(logn) < O(n) < O(nlogn) < O(n^2) < O(2^n) < O(n!)
- 상수, 로그, 선형, 선형로그, 다항식(제곱), 지수, 팩토리얼

4.1. Big-O Notation

Big-O는 시간의 상한을 나타냅니다. 시간의 상한이란 예를 들어 O(n^2)으로 표기된 Big-O 표기법은 O(1), O(n) 처럼 O(n^2)보다 높은 성능을 보여주는 시간 복잡도를 모두 포함한다는 의미입니다. 즉, 보통 최악의 경우를 많이 생각하기 때문에 최악의 Big-O 표기법은 해당 알고리즘이 최악의 경우에도 표기된 성능을 보장한다는 의미로 해석할 수 있습니다.

시간 복잡도 f(n) 의 Big-O Notaion(정의):
O(g(n)) = { f(n)|0 <= f(n) <= c*g(n) for all n >= n0 > 0}
예시

4.2. Big-Omega Notation

Big-Omega는 하한을 나타냅니다.

시간복잡도 f(n)의 Big-Omega Notation(정의):
Ω(g(n)) = { f(n)|0 <= c*g(n) <= f(n) for all n >= n0 > 0}
예시

4.3 Big-Theta Notation

Big-Theta는 상한과 하한의 교집합을 나타냅니다.

시간복잡도 f(n)의 Big-Theta Notation(정의):
의 Big-Theta Notation 정의:
- 0 }\space \space \text{for}\space \space \exists c_1 > 0,\space\exists c_2 > 0.">
예시

4.4 최악의 경우에 Big-O 표기법을 사용하는 이유

알고리즘은 최악, 평균, 최선의 경우로 나누어 분석할 수 있다. 그중에 일반적으로 최악의 경우를 Big-O 표기법으로 표기하는데 그 이유는 다음과 같습니다.

알고리즘이 최선의 상황으로 동작하는 경우는 매우 드뭅니다.
Big-Omega 표기법은 하한을 나타내기 때문에 표기된 시간 복잡도가 가장 빠른 것을 보장합니다.
최선의 경우를 Big-Omega로 표기하면 알고리즘이 최선의 경우 이보다 더 빠르게 동작할 수는 없다는 것을 보장합니다.
3번으로 해석된 결과를 의미있게 사용할 수 있는 곳이 별로 없습니다.
최선의 경우를 Big-O로 표기하면 알고리즘이 최선으로 동작하는 것 보다 더 빠르게 동작하는 경우가 표기법에 포함되므로 표기의 의미가 사라집니다.
평균의 경우는 가능한 모든 경우를 계산해야 합니다. 따라서 복잡도를 계산하기가 매우 까다롭습니다.
최악의 경우를 Big-O로 표기하면 Big-O가 상한을 나타내기 때문에 최악의 경우보다 더 최악인 경우는 없다는 의미가 됩니다.
7번의 의미를 해석해보면 최악의 경우에도 이 정도의 성능을 보장한다는 의미로 해석할 수 있습니다.

Insertion Sort

Sun, 04 Apr 2021 12:05:14 GMT

Jump to Insertion Sort

1. About Insertion Sort

삽입 정렬은 가장 기본적인 정렬 알고리즘 중에 하나입니다. 기본적으로 정렬되지 않은 부분과 정렬된 부분으로 나눌 수 있습니다. 우선 정렬되지 않는 부분을 순차적으로 순회합니다. 이 때 각 데이터가 정렬된 부분의 어느 위치에 삽입되어야 정렬 상태를 유지하는지 찾아내고 삽입합니다.

2. Time Complexity

시간 복잡도는 정렬할 부분을 순회하기 위한 O(n)과 삽입될 위치를 찾기 위한 O(n)이 곱해져 평균적으로 O(n^2)의 시간복잡도를 가지게 됩니다. 하지만 만약에 삽입될 위치를 찾는 과정에서 단 한번에 삽입될 위치를 찾게 되는 최선의 상황에는 O(n) 시간복잡도를 가지게 됩니다.

최악: O(n^2)
평균: O(n^2)
최선: O(n)

3. Code

처음 코드 작성

def insertion_sort(arr):
    for unsorted_idx in range(1, len(arr)):
        for sorted_idx in range(0, unsorted_idx):
            if arr[sorted_idx] > arr[unsorted_idx]:
                value = arr[unsorted_idx]
                del arr[unsorted_idx]
                arr.insert(sorted_idx, value)
                break

참고 후 코드 작성

def insertion_sort(arr):
    for unsorted_idx in range(1, len(arr)):
        j = unsorted_idx - 1 # 정렬된 부분의 가장 오른쪽 인덱스
        value_to_sort = arr[unsorted_idx]
        while j >= 0 and arr[j] > value_to_sort:
            arr[j + 1] = arr[j]
            j -= 1
        arr[j + 1] = value_to_sort

첫 코드에서 리스트의 중앙에 있는 요소를 삭제할 때 O(n)의 시간복잡도와 삽입될 위치를 찾아가는 과정 O(n)의 시간 복잡도, 마지막으로 삽입되는 순간 O(n)의 시간 복잡도가 소요된다. 참고 후 코드는 삽입할 위치를 찾아가는 과정에서 O(n)만의 시간 복잡도와 삽입할 때 O(1)이 소요되기 때문에 같은 O(n)의 시간 복잡도 일지라도 더 효율적인 알고리즘이다.

Quick Sort

Sat, 03 Apr 2021 20:05:16 GMT

Jump to Quick Sort 🚴

1. About Quick Sort

퀵 정렬은 분할[1]과 정복[2]을(Divide and conquer) 적극적으로 활용한 정렬 알고리즘이다.

퀵 정렬은 PIVOT이라는 기준값이 존재한다. 이 PIVOT을 기준으로 작은 값의 범위, 큰 값의 범위로 나누는 분할&정복 과정을 반복하는 알고리즘이다.

2. Code

case1:

리스트의 중앙을 pivot으로 선택.
왼쪽 끝에서 오른쪽으로 리스트를 조회하며 발견된 PIVOT 보다 큰 값과 오른쪽 끝에서 왼쪽으로 조회하며 발견된 PIVOT보다 작은 값을 SWAP.
두 지점이 교차할 때 까지 1번과 2번 과정을 반복.
교차 지점을 기준으로 왼쪽 리스트와 오른쪽 리스트에 대해 1번부터 3번까지 반복.

def quick_sort(arr):
    def sort(arr, left, right):
        if right <= left:
            return
        mid = partition(arr, left, right)
        sort(arr, left, mid - 1)
        sort(arr, mid, right)
    def partition(arr, left, right):
        print('begin',arr)
        pivot = (left + right) // 2
        while left <= right:
            while arr[left] < arr[pivot]:
                # pivot 보다 큰 값을 가진 인덱스를 찾는다.
                left += 1
            while arr[right] > arr[pivot]:
                # pivot 보다 작은 값을 가진 인덱스를 찾는다.
                right -= 1
            if left <= right:
                arr[right], arr[left] = arr[left], arr[right]
                right -= 1
                left += 1
            print('ing',arr, left, right)
        return left
    sort(arr, 0, len(arr) - 1)
x = [0,1]
quick_sort(x)
print(x)

2.1. 디테일 조건

퀵정렬 처럼 구현 과정에서 while로 반복문을 처리하는 경우와 재귀함수를 실행하는 경우 종료조건을 매우 엄밀하게 설정해 주어야 한다.

재귀함수의 종료조건: 처음 리스트가 분할되며 left와 right가 같아지는 순간이 더이상 분할될 수 없는 종료조건이라고 생각했다. 하지만 right가 left보다 작아지는 순간이 발생한다.

예시

'''in quick_sort function'''
mid = partition(arr, left, right) # left = 0, right = 1
sort(arr, left, mid - 1) # left = 1, mid = 0
sort(arr, mid, right)

'''in partition method'''
if left <= right:
    print(left,right)
    arr[right], arr[left] = arr[left], arr[right]
    right -= 1
    left += 1
return right # 0 => mid가 됨

left와 right가 같은 경우는 이미 return을 시키고 있기 때문에 제외한다.
left가 0이고 right 가 1인 경우를 살펴보자. 이부분에서 정렬이 되어있는 경우라면 right가 왼쪽으로 이동해서 0의 위치에 있게 된다. 그리고 left와 right가 같기 때문에 조건문에서 재자리 스왑이 일어나는 동시에 left는 1 right는 -1 이 된다. 따라서 mid는 기존 left의 -1 이 된 상태로 반환된다. 즉 left는 0 mid 는 -1이 되기 때문에 종료 조건문을 right <= left로 수정해 주어야 한다.
하지만 만약 return left를 해준다면, mid는 기존 left보다 1 커진 값을 반환한다. 따라서 mid가 1가 되고 다음 퀵정렬의 왼쪽 범위는 sort(arr, left, mid - 1)로 left(0), mid(1) - 1 이기 때문에 == 조건에서 탈출된다. 또한 다음 퀵정렬의 오른쪽 범위는 sort(arr, mid, right)로 mid(1) right(1)이기 때문에 == 조건에서 탈출하게 된다.

while left <= right:
    while arr[left] < arr[pivot]: # pivot 보다 큰 값을 가진 인덱스를 찾는다.
        left += 1
    while arr[right] > arr[pivot]: # pivot 보다 작은 값을 가진 인덱스를 찾는다.
        right -= 1

만약 if left <= right를 if left < right로 수정해주면 어떤 일이 발생할까? left와 right가 같아지는 순간 while 문을 벗어날 수 없게 된다. => left <= right 조건에서도 반복되기 때문에.
이 때 위의 조건을 탈출하기 위해 while left < right로 바꿔주면, left가 0 right가 1처럼 1 인덱스가 차이나고 정렬이 되어있는 경우라면, partition의 안쪽에서는 left와 right가 모두 0이 되는 상황이 발생한다. 이때 mid는 left와 같아은 값을 반환한다. 즉 sort(arr, mid, right)는 계속 0과 1을 입력하게 되어 재귀문을 빠져나갈 수 없게 된다. => `sort(arr, mid, right)는 mid가 left와 같아지는 상황이 발생하면 무조건 재귀에 빠지게 된다.

주석:

[1] 분할: 커다란 문제를 작은 문제로 나누어 해결하는 과정

[2] 정복: 분할된 부분을 특정 기준에 맞게 만들어 가는 과정

참조:

quicksort-wikipedia

Quick Start

Sun, 05 Jul 2020 17:21:13 GMT

Getting Started 😎

1. Create a Gatsby site.

# create a new Gatsby site using the blog starter
$ npx gatsby new my-blog-starter https://github.com/JaeYeopHan/gatsby-starter-bee

If you are not using npx, following Gatsby Getting Started

$ npm install -g gatsby-cli
$ gatsby new my-blog-starter https://github.com/JaeYeopHan/gatsby-starter-bee

2. Start developing.

$ cd my-blog-starter/
$ npm start
# open localhost:8000

3. Add your content

You can write…

contents to blog in content/blog directory.
resume content/__about directory.

With markdown syntax and some meta data

Support script for creating new post

$ npm run post

4. Fix meta data

You can fix meta data of blog in /gatsby-meta-config.js file.

5. Publish with netlify

💡 if you want to deploy github pages, add following script to package.json

"scripts": {
    "deploy": "gatsby build && gh-pages -d public -b master -r 'git@github.com:${your github id}/${github page name}.github.io.git'"
}

:memo: Write a post!

content
├── __about
└── blog

You can register your resume on the web. (in __about directory)
You can register your post. (in blog directory)

🧐 Customize!

Gatsby config

/root
├── gatsby-browser.js // font, polyfill, onClientRender ...
├── gatsby-config.js // Gatsby config
├── gatsby-meta-config.js // Template meta config
└── gatsby-node.js // Gatsby Node config

Structure

src
├── components // Just component with styling
├── layout // home, post layout
├── pages // routing except post: /(home), /about
├── styles
│   ├── code.scss
│   ├── dark-theme.scss
│   ├── light-theme.scss
│   └── variables.scss
└── templates
    ├── blog-post.js
    └── home.js

Style

You can customize color in src/styles directory.

src/styles
├── code.scss
├── dark-theme.scss
├── light-theme.scss
└── variables.scss

Welcome to gatsby-starter-bee! Happy blogging! 👻

about

Sun, 27 Jan 2019 16:21:13 GMT

Your name

Thank you for reading my resume. If you want to contact me, Please send me an email.

Draft

Thu, 03 Jan 2019 16:21:13 GMT

Draft Post