Lukémento

react hooks 복습하기

nuKeguyS — Sun, 28 Jul 2019 20:12:33 +0900

Frontend를 시작한지 얼마 되지 않았지만 그 짧은 사이에도 크고 작은 것들이 많이 변화했다. 정말 빠르구나 싶기도 하고 그런게 나름 또 이 세계의 재미가 아닌가 싶기도 하다.

React도 16.8이 릴리즈 되면서 hooks라는 api가 새롭게 등장했다. 익숙해 지려고 할 때 쯤 새로운 놈이 등장해서 다시 또 적응을 해야했고 지금은 나름 열심히 사용하고 있긴하지만 이쯤에서 자주 쓰는 hooks에 대해 정리를 한 번 해볼까한다. (물론 틀린 내용이 있을 수 있고, 주관적인 생각이 포함되어 있을 수 있다.)

우선 각 hook에 대해 정리하기 전에 hooks라는 이름에 대해 생각해 볼 필요가 있지 싶다. react 문서에서는 hook을 아래처럼 설명하고 있다.

Hooks are functions that let you “hook into” React state and lifecycle features from function components. (Hooks at a Glance – React)

state와 lifecycle을 hook into한다라는게 바로 와닿지는 않는다. 번역하면 연동한다/끌어드린다/밀어넣는다 정도로 될 듯하다.
hook이라는 단어는 web-hook이나 hooking처럼 흔하게 사용되는 말로 중간에 동작을 가로챈다는 의미로 보는게 이해가 빠를 것 같다. 따라서 react의 hook도 lifecycle 과정에서 state와 관련된 동작을 수행 할 수 있도록 해준다는 의미로 이해하면 될 것 같다.

useState

class형 컴포넌트에서 this.state와 setState의 역할을 하는 hook이다.

const [state, setState] = useState(initialState);

공식문서에 나와있는 이전방식과 hook의 코드도 비교해보자.(Using the State Hook – React)

하나의 객체가 아니라 필요한 state를 개별로 접근하고 변경할 수 있다는 점에서 관리와 사용이 훨씬 깔끔해진 느낌이다. useState를 사용할 때 주의해야 할 부분도 있다. 우선 class형 컴포넌트 안에서는 사용할 수 없고, setState와 다르게 merge가 아닌 replace된다는 점이다. 두 번째는 setter의 인자로 값이 아닌 함수를 전달할 수 도 있다는 점이다. count를 증가시키는 코드를 예로 보면 일반적으로 아래처럼 할 수 있다.

const increaseCount = () => {
  setCount(count + 1);
};

하지만 setCount를 비동기 callback에서 호출하는 경우에 원하는 대로 count가 증가하지 않는 경우를 경험할 수 있다. 이유는 callback 등록 시점에 함수가 생성되면서 count 값이 고정되어 버리기 때문이다. 처음에 같은 문제를 겪고 한참을 헤맸던 기억이 있다. 이런 경우에는 아래처럼 setCount에 함수(이전 state값을 받아서 새로운 state를 반환하는)를 전달하면 해결 할 수 있다.

const increaseCount = () => {
  setCount(prevCount => prevCount + 1);
};

물론 위의 경우처럼 단순하게 처리가 불가능한 경우가 있을 수도 있다. 또 state 뿐 아니라 props에 대해서도 동일한 문제가 발생할 수 있다. 그런 경우에는 state를 객체로 변경해서 사용하거나, useRef를 사용해 state 또는 props를 별도의 변수로 저장해서 접근해야 한다.

추가로 useSate의 초기값으로도 함수를 전달할 수 있다. 이는 초기값 계산의 cost가 높은 경우에 초기화를 지연시키는 역할을 한다.

useRef

위에서 언급한 useRef도 간단히 정리해본다.

const refContainer = useRef(initialValue);

이름에서 유추 가능한 것 처럼, 원하는 값을 객체로 warraping해서 current라는 속성으로 접근할 수 있게 해준다. 보통 DOM의 reference를 담아두는데 사용하지만 class의 멤버 변수처럼 사용하는 것이 가능하다.

어렵지 않지만 실제로 구현된 아래 코드를 보면 더 쉽게 이해가 된다. (ReactFiberHooks.js · GitHub)

function mountRef<T>(initialValue: T): { current: T } {
  const hook = mountWorkInProgressHook();
  const ref = { current: initialValue };
  if (__DEV__) {
    Object.seal(ref);
  }
  hook.memoizedState = ref;
  return ref;
}

function updateRef<T>(initialValue: T): { current: T } {
  const hook = updateWorkInProgressHook();
  return hook.memoizedState;
}

최초에는 ref라는 객체를 만들어 current 속성에 초기값을 설정해서 반환하고, 이후부터는 해당 객체를 반환한다.

참고로 react의 hooks는 mountXXX와 updateXXX라는 이름으로 최초 실행과 이후 업데이트에서 사용하는 함수가 각각 분리되어 구현 되어 있다.

useImperativeHandle & forwardRef

useImperativeHandle(ref, createHandle, [deps]);

useImperativeHandle은 부모에게 원하는 interface를 통해 ref를 사용할 수 있게 해준다. 즉, 부모가 자식의 ref를 직접 받아서 접근할 수도 있지만, 제한하거나 커스터마이징해서 제공을 하고 싶을 때 사용하면 된다. useImperativeHandle은 forwardRef와 함께 사용해야 하는데 간단한 사용법은 아래와 같다.

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

useEffect

useState와 더불어 가장 자주 사용하고 중요한 hook중의 하나이다.

useEffect(didUpdate);

공식문서의 정의는 아래처럼 되어있다.

The Effect Hook lets you perform side effects in function components.

함수형 컴포넌트에서 side effects를 수행할 수 있게 해준다라는 의미가 바로 와닿지는 않는다. 그래서 문서를 조금 더 살펴보면 이런 내용도 있다.

Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. Whether or not you’re used to calling these operations “side effects” (or just “effects”), you’ve likely performed them in your components before.

즉, 컴포넌트 내부에서 수행하던 data fetching, subscription(이벤트 등록/해제 같은), manaual한 DOM변경 등과 같은 state를 직접 처리하는 이외의 동작이나 기능들을 side effect 또는 effect로 부르고 있다.

useEffect가 중요한 이유 중의 하나는 react의 lifecycle과 밀접하게 관련이 있기 때문이다.
기본적으로 렌더링이 완료된 이후에 실행 되는데 두번째 인자인 deps를 통해 실행 여부를 결정할 수 있기 때문에 class 컴포넌트에 있던 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 lifecycle과 비슷한 역할을 할 수 있다.

기존 방식과의 차이점은 문서를 확인하면 명확하게 알 수 있다.(Using the Effect Hook – React)

useEffect에서 함수를 리턴할 수 있는데 이 함수는 다음 effect발생하기 전에 호출이 되기 때문에 메모리 정리나 구독해제 같은 기능을 처리할 수 있다. (componentDidMount에서 등록하고 componentWillUnmount에서 해제하는 것과 유사한 동작)

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
});

그런데 위의 코드를 수행하면 매 렌더링시마다 구독/해제가 일어나기 때문에 비효율적이다. 이런 문제를 해결하기 위해서 위에서 언급한 대로 두번째 인자로 deps(dependencies)를 전달할 수 있다. deps는 배열 형식으로 전달하고, 배열의 각 아이템을 shallow하게 비교해서 변경이 발생한 경우에만 effect가 실행된다. 위 코드처럼 전달하지 않으면 매번 실행이 되고, 빈배열([ ])을 전달하면 mount/unmount시에만 호출이 된다. 위 코드에서는 props의 source에 접근하고 있기 때문에 그 값이 변할 경우에만 구독/해제를 할 필요가 있다. 따라서 아래처럼 해주면 원하는 효과를 볼 수 있다.

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, [props.source]);

여기서 주의할 점은, 컴포넌트 범위에서 변경될 수 있는 값(state나 props같은)을 누락하게 되면 원하는 동작을 하지 않을 수 있다는 점이다. 예로 위의 코드에서 deps에 []를 넣게 되면, props의 source가 변경되어도 구독은 계속 이전 source에 된 상태로 남아있게 된다.

useEffect에서 직접적인 접근이 없지만 호출하는 함수에서 변경되는 값이 존재하는 경우에도 마찬가지로 추가를 해줘야 하지만 쉽게 인지하기 어려울 수도 있기 때문에 react에서는 eslint-plugin-react-hooks의 exhaustive-deps lint rule을 사용하는 것을 권장하고 있다.

useCallback

callback의 memoization을 만들어주는 hook이다. 즉, 매번 동일한 함수를 생성하는 것이 아니라 변경될 필요가 없는 경우 이전에 생성된 함수를 반환해주는 기능을 한다.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

useCallback이 유용성은 react의 특성을 이해하면 알기 쉽다. 자식에게 callback을 전달하는 경우에 부모가 렌더링 되면서 매번 새로 생성된다면 자식입장에서는 props가 변경되기 때문에 함께 렌더링이 발생하게 되는 것이다. 이런 경우 사용하면 memoization된 callback을 전달함으로써 불필요한 렌더링을 방지할 수 있게 되는 것이다. 자식에서 shouldComponentUpdate를 통해 변경여부를 직접 비교해서 렌더링을 결정하는 효과를 간단히 볼 수 있게 된다. 마찬가지로 callback은 deps에 따라 변경여부를 결정하기 때문에 주의해서 사용할 필요가 있다.

useMemo

useCallback이 memoization된 함수를 반환해 주었다면 useMemo는 memoization된 값을 반환해 준다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

deps가 변경된 경우에만 전달된 함수를 호출하여 결과를 반환하기 때문에 cost가 많은 처리를 필요할 때만 수행하도록 할 수 있다. 주의할 점은 useMemo는 렌더링 중에 실행되기 때문에 계산이 아닌 sideEffect(위에서 언급한)를 수행하면 안된다는 것이다. 또한 이후 버전에서는 매번 재계산하는 방식을 택할 수도 있기 때문에 useMemo는 성능 최적화의 목적으로만 사용해야 한다.

그 외에 useContext, useReducer, useLayoutEffect 등이 있지만 어렵지 않고 사용빈도도 많지 않기 때문에 생략한다. (공식문서를 보면 쉽게 이해할 수 있다.)

추가로 customHook을 만들어 사용할 수도 있는데, 공식문서(Building Your Own Hooks – React)를 보면 간단하게 방법을 알 수 있다. 유용한 custom hook은 useHooks - Easy to understand React Hook recipes를 참고하면 작성과 사용법을 아는데 도움이 된다.

간단하게 hook의 내용과 사용법들을 정리해 봤다. 사실 각각 hook을 사용하면서 고민하거나 헤맸던 부분들에 대해서 정리를 하는게 목적이었으나 그 전에 간단히 기본적인 내용들을 먼저 정리해봤다. 이후에 시간이 되면 useEffect와 useCallback의 deps를 사용하면서 들었던 고민들이나 퍼포먼스를 올리기 위해 하고 있는 삽질들을 다시 한 번 정리해볼 예정이다.

JavaScript 기본 정리

nuKeguyS — Sat, 29 Sep 2018 18:26:35 +0900

"모던 웹을 위한 JavaScript jQuery 입문" 책 훑으면서 메모

타입

primitive type : string, number, boolean(true - 1, false - 0)

reference type : function, object

etc : undefined

형변환

문자열과 숫자 연산에서 더하기 연산자를 제외한 사칙 연산자는 숫자가 우선

'52' + 273 = '52273'

'52' * 273 = 14196

선언적 함수와 익명 함수

선언적 함수가 먼저 해석된다.(= 호이스팅, 참고 : 함수선언과 함수표현)

클로저

지역 변수를 남겨두는 현상, 함수로 생성된 공간, 리턴된 함수, 살아남은 지역변수 등등 정의는 다양

self. "함수 내부의 지역 변수를 리턴된 내부 함수를 통해 접근하는 것"

타이머 함수

타이머 함수나 웹 요청등은 웹 브라우저가 처리하고 완료를 자바스크립트로 알려주는 방식으로, 현재 단위가 끝나기 전에 실행되지 않는다.

즉, 0초 타이머를 실행하더라도 이후의 실행이 모두 완료되고 난 후에 타이머가 실행된다.

아래는 항상 A > C > B의 순서로 실행된다.

alert('A');

setTimeout(function () {

alert('B');

}, 0};

alert('C')

Infinity, NaN

Infinity와 -Infinity가 있다. > isFinite()사용

NaN은 스스로를 비교할 수 없다. > isNaN() 사용

Number() vs parseXXX()

Number()는 숫자로 바꿀 수 없으면 NaN

parseInt(), parseFloat()은 변환할 수 있는 부분 까지만 숫자로 변환

With

with 키워드 사용시 속성과 외부 변수이름이 같으면 충돌, 속성이 우선.

Prototype

생성자 함수로 생성된 객체가 공통으로 가지는 공간

front-end 공부 계획

nuKeguyS — Thu, 23 Aug 2018 17:14:36 +0900

입사 전, front-end 공부 계획 세우기

목표

프론트엔드 개발자로 전향하기 위한 준비로 생활코딩으로 공부 하기

범위

WEBn - CSS, JavaScript

클라이언트 - HTML, CSS, JavaScript

언어 - JavaScript

개발도구 - VS Code

참고

카카오페이지 웹 React 포팅 후기

계획

	Date	Content	Etc
1	2018/08/24	WEBn - CSS	https://caniuse.com : 브라우저별 지원하는 feature 확인
2	2018/08/25	WEBn - JavaScript
3	2018/08/26	WEBn - JavaScript	getElementById()와 querySelector()
4	2018/08/27	WEBn - JavaScript
5	2018/08/28	언어 - JavaSCript
6	2018/08/29	언어 - JavaSCript
7	2018/09/03	언어 - JavaSCript	prototype
8	2018/09/04	언어 - JavaSCript	JavaScript 재입문하기 JavaScript기초 !function(){}()
9	2018/09/05	클라이언트 - HTML
10	2018/09/06	클라이언트 - CSS	css selector 연습 font 순위 Flexbox playground
11	2018/09/10	클라이언트 - CSS	codepen filter transform thenounproject : vector icon link vs import : link를 쓰자 library : fontello, buttons, semantic-ui
12	2018/09/13	클라이언트 - JavaScript
13	2018/09/14	클라이언트 - JavaScript	https://api.jquery.com/
14	2018/09/19	클라이언트 - JavaScript
15	2018/09/20	클라이언트 - JavaScript
16	2018/09/21	클라이언트 - JavaScript

블록체인 관련 글 모음

nuKeguyS — Mon, 20 Aug 2018 23:37:12 +0900

블록체인에 대해 이해를 하기 위해 찾아보고, 참고할 만한 링크 정리

사토시 나카모토의 비트코인 논문(번역) : bitcoin_kor.pdf

블록체인/암호화폐의 사회적, 역사적 의미 : 블록체인 기술 등장에 대해 사회적/역사적인 의미를 부여해서 설명한다. 한 번 읽어보면 좋을 듯.

블록체인에 대한 쉬운 이해 : 블록체인보다는 비트코인에 대한 설명이지만 이해하기 쉽게 되어 있음

homoefficio 블로그(https://www.slideshare.net/hanmomhanda/ss-82430766) : 기술적으로 설명되어 있어 이해가 가장 쉬웠음

- 블록체인 기초개념

- 블록체인 한 번에 이해하기

뱅크샐러드의 블록체인 매거진 : 내용이 단순하게 정리되어 있으나, 구체적이지 않아 ???가 나오는 경우가 있음

the loop의 블록체인 관련 글 연재 : 어느정도 개념을 가지고 읽어보면 도움이 될 듯. 아무것도 모르고 읽으면 어려운 부분 존재

자바스크립트로 블록체인 : 대략적이지만 javascript로 구현을 흉내내서 설명

기술면접 질문들

nuKeguyS — Sat, 18 Aug 2018 17:14:25 +0900

기술면접 질문들

기술면접에서 받았던 질문들 정리

1. 웹브라우저에 주소를 입력하면 어떠한 일이 일어나는지를 설명

2. HTTPS에 대해 설명

3. JOIN에 대해서 설명

4. ArrayList와 LinkedList에 대해 설명

5. Stack Overflow가 무엇인지 설명하고, 발생시키는 코드 작성

6. Call by value, Call by reference 차이

7. Hash table에 대해 설명

8. 출근 후 서버가 죽었다. 어떻게 할 것인가?

9. 특정 기능에 대해 DB를 설계하라.

10. 최근 개발한 아키텍쳐에 대해 설명

11. 프로시저 사용의 장/단점

면접관 및 면접자에 대해 읽어볼 만한 글 목록

nuKeguyS — Sat, 18 Aug 2018 12:40:20 +0900

면접관 및 면접자에 대해 읽어볼 만한 글 목록

[면접팁] 면접관과 채용 담당자를 위한 비밀들

[면접팁] 좋은 면접자/지원자가 되는 방법

robertwalters.co.kr : 커리어 조언, 채용 조언 관련 글들

rand5(), rand7() 만들기

nuKeguyS — Tue, 14 Aug 2018 18:28:25 +0900

rand5(), rand7() 만들기

interview에서 나온 문제. 어떤 곳은 가면 편하고 생각이 잘 나는 반면에 어떤 곳은 머리가 하얘지는 곳이 있다. 아무래도 조금 더 부담이 되는 곳에서 그러는 것 같은데. 혼자 풀거나 사전에 시간이 있으면 충분히 할 수 있는 문제들을 보는 앞에서 바로 하려면 아무런 생각이 나지 않는다.

오늘도 망한 interview에서 나왔던 문제를 기록해 본다. 잊지 않기 위해.

문제는,

1부터 5까지 동일한 확률로 발생하는 rand5()와 1부터 7까지 동일한 확률로 발생하는 rand7()이 있을 때, 서로를 이용해 구현을 한다.

즉, rand7()을 이용해 rand5()를 구현하고, rand5()를 이용해 rand7()을 구현한다.

1. rand7()로 rand5() 만들기

연습문제,,, 였으나 긴장해서 뭐지? 했다. 쉽게 생각하라는 얘기해 풀긴 했으나 확률 맞나? 하는 의구심이 계속 들었다.

풀이는, rand7()을 호출에 나온 결과가 5이하 일 때까지 계속 반복 호출하는 것이다.

function rand5()

while(True)

n = rand7()

if n <= 5:

return n

2. rand5()로 rand7() 만들기

1번 문제를 응용하면 되나 머릿속에 아무런 생각이 나지 않았다. 결국 힌트를 받고 풀긴했으나, 한참동안 버벅이다 풀었다. 망할

방법은 rand5()로 7이상의 범위의 수를 생성하고, 7이하의 값이 나올 때까지 반복하면 된다.

즉 rand5()를 두 번 호출하면 경우의 수는 25가지가 나오고 이 중 7보다 큰 경우 반복해서 생성한다. moduler를 사용하면 21까지 moduler로 거르고 나머지만 재생성해 주면 되나 난 moduler를 사용하지 말라는 의미로 알아듣고 7까지만 사용했다. 끝나고 비효율적이라는 말을 생각하다 찾아보니 moduler를 사용하더라는...

function rand7()

while(True)

n = rand5()*(5-1) + rand()

if n <= 21:

return n%7

답답하고 아쉬운 interview였다. 난 뭘해야 하나...

HTTPS와 SSL 그리고 인증서

nuKeguyS — Mon, 13 Aug 2018 23:06:39 +0900

HTTPS와 SSL 그리고 인증서

생활코딩 : HTTPS와 SSL 인증서

KLDP Wiki : SSL 인증서 HOWTO(크게보기 : https://wiki.kldp.org/HOWTO/html/SSL-Certificates-HOWTO/index.html)

간단요약

HTTPS란?

HTTP는 암화화를 지원하지 않기 때문에 SSL(TLS)를 통해 암호화한다. 좀 더 자세히 얘기하면 HTTP 프로토콜 메시지를 한 단계 더 거쳐 SSL을 통해 암호화하고 TCP를 통해 전달한다. 받는 쪽은 마찬가지로 TCP로 수신한 메시지를 복호화하고 HTTP메시지로 변환하여 처리한다.

암호화?

HTTPS에서 사용하는 암호화 방식은 공개키 방식과 대칭 키 방식 두 가지다.

대칭키 방식 - 암호화와 복호화시 동일한 키를 사용한다.

공개키 방식 - 키가 2개가 존재하며, 공개되어 있는 public key를 통해 암호화해서 전송하면 private key를 통해 복호화 해서 확인한다. 반대로 사용도 가능하나 크게 의미는 없다. (아래 인증서 부분에서 사용)

대칭키 방식이 성능상 이점이 있으나 키를 전달하는게 메시지 전달과 마찬가지로 보안상의 문제가 있기 때문에, 공개키 방식을 사용해 대칭키를 전달하고 전달된 공개키를 사용해 메시지를 암호화하는데 사용한다. 대칭키는 매번 새로 생성되기 때문에 노출이 되어도 다음엔 의미가 없게 된다.

과정을 정리하면 다음과 같다.

HandShake

1. Client가 HTTPS(SSL)로 Server에 페이지를 요청 - "Client Hello", 랜덤 데이터 및 암호화 방식

2. Server는 Public Key가 포함된 인증서를 Client로 전달 - "Server Hello", 랜덤 데이터 및 암호화 방식

3. Client는 인증서를 통해 Server의 Public Key를 검증 - CA를 통해. 위의 랜덤 데이터를 통해 "pre master secret" 키 생성

4. Client는 Public Key를 통해 data와 Random Symmetric Key("pre master secret")를 암호화해서 Server로 전달 - "pre master secret을 master secret으로 변경 후 master scret으로 sesson key 생성 => Symmetric Key

Session

5. Server는 Private Key로 복호화한 후 Symmetric Key로 response를 암호화해서 Client로 응답

6. Client는 Symmetric Key로 복호화해서 렌더링 후 화면에 표시

인증서?

Client는 자신히 접속한 Server로 부터 Public Key를 전달 받아야 한다. 여기에 인증서를 사용한다.

인증서의 서명을 신뢰 할 수 있다면 인증서 자체를 신뢰할 수 있고 여기에 포함된 data(관련 정보+Public Key)도 신뢰하고 사용할 수 있다고 본다.

인증서의 서명은 CA(Certificate Authrity)를 통해 이루어지는데 CA는 사전에 지정된 신뢰할 수 있는 기관을 의미하고, 최상위 CA들의 인증서는 신뢰성을 위해 브라우저 자체에 포함되어 있다.

서명?

메시지의 작성을 인증하는 역할로 해시를 사용한다. 과정은 다음과 같다.

1. 데이터의 해시 생성

2. Private Key로 해시를 암호화

3. 암호화된 해시와 인증서를 메시지에 추가

4. 수신자는 데이터의 해시 생성

5. 메시지에 포함된 해시를 Public Key를 통해 복호화

6. 자신이 생성한 해시(4)와 메시지에 포함된 해시(5)를 비교

즉, Server의 Public Key를 통해 Symmetric Key를 암호화해서 전달하기 때문에 Public Key의 검증이 필요하다. 사실 Public Key 자체는 공개 되는 것이라 Server자체의 검증(내가 접속한 Server가 맞는지)이라고 보는 것이 맞을 수 있다. 누군가 자신의 Private Key를 통해 암호화해서 Client로 인증서를 전달하고 Client가 이 Public Key를 사용해 Symmetric Key를 전달하면 문제가 될 수 있다. 인증서는 위에서 처럼 CA가 자신의 Private Key를 통해 암호화하기 때문에, 해당 CA의 Public Key를 사용해서 복호화가 가능하다면 인증서는 해당 CA에 의해 서명된 것으로 판단하고 인증서(Server)를 신뢰할 수 있게 되는 것이다. 이 때 CA의 Public Key는 브라우저 자체에 미리 내장되어 있기 때문에 신뢰가 가능한 것으로 본다. 따라서 인증서가 검증되었고, 인증서의 Public Key를 사용할 수 있게 되는 것이다.

Between Two Sets

nuKeguyS — Mon, 13 Aug 2018 13:03:27 +0900

Between Two Sets - easy

https://www.hackerrank.com/challenges/between-two-sets/problem

문제요약

정수 배열 A, B가 주어지면 다음 조건을 만족하는 정수의 갯수를 출력한다.

1. 해당 정수는 A의 모든 요소를 약수로 가진다

2. 해당 종수는 B의 모든 요소의 약수이다.

(1 <= n, m <= 10, 1 <= A[i], B[i] <= 100)

Sample Input

2 3
2 4
16 32 96

Sample Output

풀이

문제의 첫 번째 조건은 A의 공배수를, 두 번째는 B의 공약수를 의미한다. 즉 A의 모든 요소의 공배수이면서 B의 모든 요소의 공약수 정수의 갯수를 구한다.

처음엔 단순 계산으로 A의 큰 수부터 B의 작은 수까지 증가하면서 A의 모든 수로 나누고, B의 모든 수에서 나눠서 모두 나눠지는 수의 갯수를 구했다. 하지만 이러면 시간상 효율적이지 못하다.

빠르게 하려면 A의 최소 공배수를 구하고 B의 최대 공약수를 구해서 최대 공약수에서 최소 공배수의 배수들을 나누면서 나누어 떨어지는 수를 구하면 된다.

최대 공약수는 유클리드 호제법을 사용하고, 최소 공배수는 비슷하게 a*b/gcd를 해주면 구할 수 있다. python에서는 함수 중에 gcd를 지원하고, 이를 사용해서 lcm도 구하면 된다. gcd의 time complexity는 O(Log(n))이 된다고 한다. (n = a+b)

참고 : https://codility.com/media/train/10-Gcd.pdf

windows subsystem for linux 설치

nuKeguyS — Tue, 7 Aug 2018 21:15:52 +0900

Windows에서 linux 사용하기 - windows subsystem for linux

linux를 사용할 일이 생겨, 설치를 알아보던 중 전에 잠깐 설치해봤던 wsl이 생각나서 찾아봤다.

초기에는 불편해서 안썼었는데, 지금은 beta를 벗어나 괜찮아진 듯해 설치해봤다. (virtual box 설치도 귀찮은 감도 있고해서...)

1. Microsoft Store에서 Unbuntu 설치

Microsoft Store에서 Unbuntu를 검색해서 설치한다. (Ubuntu 18.04를 설치했다)

2. 설치 후 실행하면 바로 실행이 되지 않는다. Windows Subsystem for linux optional component를 활성화를 시켜줘야 한다.

power shell을 관리자 모드로 실행한 뒤 아래 명령어를 통해 활성화하고 재부팅한다. power shell 관리자 모드 실행은 (windows + x, a)로 가능하다.

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

재부팅 후 ubuntu를 검색해서 실행하면 몇 분간 설치가 실행되고 초기 유저네임과 비밀번호를 설정하게 되고, 이후 사용하면 된다.

3. Project 폴더 마운트

linux를 사용하려는 목적이 linux상에서 개발이 필요했기 때문이라 windows의 projects폴더를 wsl상에 마운트 시킬 필요가 있다.

/mnt/c/... 를 통해서 가능하나 접근이 힘들어, home 디렉토리 아래에 심볼릭 링크를 하나 생성했다.

ln -s "/mnt/c/Users/nukeguys/Projects" /home/nukeguys/Projects

4. 테마 변경

unbuntu 비슷하게 콘솔을 사용하려고 색상을 변경했다.

참고 : http://webdir.tistory.com/546?category=754606