Wandering for programming

내가 읽었던, 읽고 싶은 개발 서적

2021-07-18T12:26:28+00:00

내가 읽은 책

✔ Clean Code: A Handbook of Agile Software Craftsmanship (Robert C. Martin) : 한글판으로 javascript로 적용된거 읽음.
✔ Do it! 리액트 프로그래밍 정석 (박호준 저)
✔ 딥 러닝을 이용한 자연어 처리 입문 (유원준, 안상준)

내가 읽을 책

🎨 함수형 자바스크립트 프로그래밍 (유인동)
🎨 기초부터 실무 응용까지 자바 마스터북 (정인식 )
🎨 이펙티브 자바 (조슈아 블로크 저)
🎨 실용주의 프로그래머 (앤드류 헌트, 데이비드 토머스)
🎨 이펙티브 씨쁠쁠 (스콧 마이어스)
🎨 객체 지향의 사실과 오해 (조영호)
🎨 프로그래머로 사는 법 (샘 라이트스톤)
🎨 토비의 스프링 (이일민)
🎨 생활코딩! Node.js 프로그래밍 (이고잉)
🎨 예제로 배우는 Vue.js (원철연)

참고> https://www.mindmeister.com/ko/529620367/_?fullscreen=1
https://docs.google.com/spreadsheets/d/1sQQmSalRUcPXFz8uJodAcxrad_19oHAlvCSj35VVX3c/edit#gid=0

[딥러닝을 이용한 자연어 처리 입문] 요약정리

2021-07-16T12:26:28+00:00

시작에 앞서

이 책은 전통적인 자연어 처리방법과 인공 신경망에 대해서 다룬다. 또한 텐서플로우의 케라스 API를 주로 사용한다. 1챕터부터 13챕터를 기본과정으로 하고 14챕터부터 19챕터를 심화과정으로 본다.

참고하여 볼것

동일 저자가 만든 PyTorch 학습 자료 : https://wikidocs.net/book/2788
이 책을 위해 제작한 이미지 자료 공유 (영리적 목적 제외 자유롭게 사용) : https://www.slideshare.net/wonjoonyoo/ss-188835227
딥 러닝 추천 자료 : https://www.d2l.ai/index.html
NLP 참고 자료 : http://www.phontron.com/class/nn4nlp2019/schedule.html, https://github.com/makcedward/nlp
한국어 NLP 논문 모음 : https://github.com/papower1/Awesome-Korean-NLP-Papers

목차

자연어 처리(natural language processing)란?

텍스트 전처리(Text preprocessing)

언어 모델(Language Model)

카운트 기반의 단어 표현(Count based word Representation)

벡터의 유사도(Vector Similarity)

토픽 모델링(Topic Modeling)

머신 러닝(Machine Learning) 개요

딥 러닝(Deep Learning) 개요

순환 신경망(Recurrent Neural Network)

워드 임베딩(Word Embedding)

RNN을 이용한 텍스트 분류(Text Classification)

NLP를 위한 합성곱 신경망(Convolution Neural Network)

태깅 작업(Tagging Task)

서브워드 토크나이저(Subword Tokenizer)

RNN을 이용한 인코더-디코더

어텐션 메커니즘 (Attention Mechanism)

트랜스포머(Transformer)

BERT(Bidirectional Encoder Representations from Transformers)

텍스트 요약(Text Summarization)

01. 자연어 처리(natural language processing)란?

자연어(natural language)란 우리가 일상 생활에서 사용하는 언어를 말한다. 자연어 처리(natural language processing)란 이러한 자연어의 의미를 분석하여 컴퓨터가 처리할 수 있도록 하는 일을 말한다. 자연어 처리는 음성 인식, 내용 요약, 번역, 사용자의 감성 분석, 텍스트 분류 작업(스팸 메일 분류, 뉴스 기사 카테고리 분류), 질의 응답 시스템, 챗봇과 같은 곳에서 사용되는 분야이다. 컴퓨터와 인간 언어 사이의 상호작용하는 기술로 인공지능의 핵심 기능중 하나다.

1) 필요 프레임워크와 라이브러리

윈도우 환경을 기준으로 두고 아나콘다(Anaconda)를 설치하는 방법과 인터넷을 통해 간편히 사용할 수 있는 실습환경인 구글의 코랩(Colab)이 소개되었다. (~~나는 이미 아나콘다가 설치되어있으므로 굳이 새로운 걸 깔지않고 그대로 진행한다.~~) 아나콘다를 설치했다면 기본적으로 Numpy, Pandas, Jupyter notebook, scikit-learn, matplotlib, seaborn, nltk 등이 이미 설치되어져 있다. 그래서 아나콘다에 포함되어있지 않은 tensorflow, keras, gensim 이 세 가지만 별도로 pip를 통해 설치하면 된다.

✅ 텐서플로우(Tensorflow)
텐서플로우는 구글이 2015년에 공개한 머신 러닝 오픈소스 라이브러다. 머신 러닝과 딥 러닝을 직관적이고 손쉽게 할 수 있도록 설계되었다. 뒤의 딥 러닝을 실습을 위해서 텐서플로우를 설치해야 한다. 아나콘다 프롬프트(Anaconda Prompt) 또는 명령 프롬프트를 통해서 설치할 수 있다. 아나콘다 프롬프트를 열었다면 아나콘다 프롬프트에 아래의 커맨드를 입력하여 텐서플로우를 설치한다.

> pip install tensorflow

✅ 케라스(Keras)
케라스(Keras)는 딥 러닝 프레임워크인 텐서플로우에 대한 추상화 된 API를 제공한다. 케라스는 백엔드로 텐서플로우를 사용하며, 좀 더 쉽게 딥 러닝을 사용할 수 있게 해준다. 쉽게 말해, 텐서플로우 코드를 훨씬 간단하게 작성할 수 있다. 사실 설치한 케라스를 사용할 수도 있지만, 텐서플로우에서 케라스를 사용할 수도 있다. 영어 커뮤니티에서는 순수 케라스를 keras라고 표기한다면, 텐서플로우에서 케라스 API를 사용하는 경우는 tf.keras라고 표기한다. 이 두 가지는 실제로 문법도 많은 면에서 같아서 keras 코드를 tf.keras로 변경하는 건 아주 쉽고, keras를 학습하였다면 tf.keras도 금방 익숙하게 사용할 수 있다. 케라스 개발자인 프랑소와 숄레(François Chollet)는 앞으로는 keras보다는 tf.keras를 사용할 것을 권장한다. 이 책은 keras와 tf.keras 두 가지 모두를 사용한다.
(케라스설치할때는 텐서플로우 설치할때랑 다르게 계속해서 오류가 뜨고 설치에 실패했었다.ㅠ그 원인을 알아보니 결국 케라스가 텐서플로우에 기반하기때문에 반드시 둘이 호환가능한 파일로 구성되어야 한다. 그래서 uninstall했다가 여러시도를 거듭한 결과, 설치성공했다!😁)

> pip install keras

✅ 젠심(Gensim)
젠심(Gensim)은 머신 러닝을 사용하여 토픽 모델링과 자연어 처리 등을 수행할 수 있게 해주는 오픈 소스 라이브러리다. 이 책에서도 젠심을 사용하여 토픽 모델링과 Word2Vec 등을 학습해본다.

> pip install gensim

2) 자연어 처리를 위한 NLTK와 KoNLPy 설치하기

다음 챕터인 텍스트 전처리(Text preprocessing) 챕터에서는 전처리를 위한 이론에 대해서 학습하고, 그 이론을 바탕으로 실습을 진행하게 된다. 이번 챕터에서는 실습에 필요한 기본적인 자연어 패키지가 소개된다.
-NLTK는 자연어 처리를 위한 파이썬 패키지로 아나콘다가 설치되었다면 기본적으로 설치되어있다. 이때 NLTK의 기능을 제대로 사용하기 위해 NLTK Data라는 여러 데이터를 추가적으로 설치해야 한다. 이를 위해서는 파이썬 코드 내에서 import nltk 이후에 nltk.download()라는 코드를 수행하여 설치한다.

코엔엘파이(KoNLPy)는 한국어 자연어 처리를 위한 형태소 분석기 패키지다.

💡 Pandas, Numpy and Matplotlib 실습 =>
https://github.com/heeyeonkoo99/Deep-learning_study/blob/master/%EC%8B%A4%EC%8A%B5/Pandas%20and%20Numpy%20and%20Matplotlib.ipynb

02. 텍스트 전처리(Text preprocessing)

자연어 처리에 있어서 텍스트 전처리는 매우 중요한 작업이다. 텍스트 전처리는 용도에 맞게 텍스트를 사전에 처리하는 작업이다. 요리에 있어서 재료를 제대로 손질하지 않으면, 요리가 제대로 되지 않는 것과 같다. 텍스트에 대해서 제대로 된 전처리를 하지 않으면 뒤에서 배울 자연어 처리 기법들이 제대로 동작하지 않다. 이 챕터에서는 텍스트를 전처리하기 위한 각종 기법에 대해서 배운다.

💡 Text preprocessing 실습 =>
https://github.com/heeyeonkoo99/Deep-learning_study/blob/master/%EC%8B%A4%EC%8A%B5/2_Text%20preprocessing.ipynb

03. 언어 모델(Language Model)

언어 모델(Languagel Model)이란 단어 시퀀스(문장)에 확률을 할당하는 모델을 말한다. 어떤 문장들이 있을 때, 기계가 이 문장은 적절해! 이 문장은 말이 안 돼! 라고 사람처럼 판단할 수 있다면, 기계가 자연어 처리를 정말 잘 한다고 볼 수 있다. 이게 바로 언어 모델이 하는 일이다.
이번 챕터에서는 통계에 기반한 전통적인 언어 모델(Statistical Languagel Model, SLM)에 대해서 배운다. 통계에 기반한 언어 모델은 우리가 실제 사용하는 자연어를 근사하기에는 많은 한계가 있었고, 요즘 들어 인공 신경망이 그러한 한계를 많이 해결해주면서 통계 기반 언어 모델은 많이 사용 용도가 줄었다. 하지만 그럼에도 여전히 통계 기반 언어 모델에서 배우게 될 n-gram은 자연어 처리 분야에서 활발하게 활용되고 있으며, 통계 기반 방법론에 대한 이해는 언어 모델에 대한 전체적인 시야를 갖는 일에 도움이 된다.

1) 언어 모델(Language Model)이란?

언어 모델(Language Model, LM)은 언어라는 현상을 모델링하고자 단어 시퀀스(또는 문장)에 확률을 할당(assign)하는 모델이다. 언어 모델을 만드는 방법은 크게 통계를 이용한 방법 과 인공 신경망을 이용한 방법 으로 구분할수 있다. 최근에는 인공신경망을 이용한 방법(ex. GPT, BERT)이 더 좋은 성능을 보여주고 있다. 이번 챕터에서는 전통적인 통계적 언어 모델에 대해서 배운다.

=> 언어 모델: 단어 시퀀스에 확률을 할당(assign)하는 일을 하는 모델이다. 즉 언어 모델은 가장 자연스러운 단어 시퀀스를 찾아내는 모델이다. 단어 시퀀스에 확률을 할당하게 하기 위해서 가장 보편적으로 사용되는 방법은 언어 모델이 이전 단어들이 주어졌을때 다음 단어를 예측하도록 하는것이다.
=> 언어 모델링: 주어진 단어들로부터 아직 모르는 단어를 예측하는 작업을 말한다.
스태폰드대학에서는 언어 모델을 문법이라고 비유하기도 한다.
=> 검색 엔진에서의 언어 모델의 예를 생각해볼수 있다.

2) 통계적 언어 모델(Statistical Language Model, SLM)

=> 조건부 확률:
=> 문장에 대한 확률:
=> 카운트 기반의 접근:
=> 카운트 기반접근의 한계- 희소 문제: 충분한 데이터를 관측하지 못하여 언어를 정확히 모델링하지 못하는 문제를 말한다. 코퍼스에 단어 시퀀스가 없다면 그 확률이 0 또는 정의되지 않는 확률이 되어버린다.

3) N-gram 언어 모델(N-gram Language Model)

n-gram 언어 모델은 여전히 카운트에 기반한 통계적 접근을 사용하고 있으므로 SLM의 일종이다. 다만, 앞서 배운 언어 모델과는 달리 이전에 등장한 모든 단어를 고려하는 것이 아니라 일부 단어만 고려하는 접근 방법을 사용한다. 이때 일부 단어를 몇개 보느냐를 결정하는데 이것이 n-gram에서의 n이 가지는 의미다.
=> SLM의 한계는 훈련 코퍼스에 확률을 계산하고 싶은 문장이나 단어가 없을수 있다는 점이다. 그리고 확률을 계산하고 싶은 문장이 길어질수록 갖고있는 코퍼스에서 그 문장이 존재하지 않을 가능성이 높다. 다시말하면 카운트 할수 없는 가능성이 높다. 그러나 참고하는 단어들을 줄이면 카운트를 할수 있는 가능성을 높일수 있다.
예를 들어, An adorable little boy에서 is가 나올 확률보다 boy에서 is가 나올 확률이 더 높을것이다.
=> n-gram은 n개의 연속적인 단어 나열을 의미한다. 이때 갖고 있는 코퍼스에서 n개의 단어 뭉치 단위로 끊어서 이를 하나의 토큰으로 간주한다.

=> n-gram language nodel의 한계로는 희소 문제/ n을 선택하는 것은 trade-off문제 등이 있다. => 이 모델의 한계를 극복하기 위해 인공 신경망을 이용한 언어 모델이 많이 사용되고 있다.

04. 카운트 기반의 단어 표현(Count based word Representation)

자연어 처리에서 텍스트를 표현하는 방법으로는 여러가지 방법이 있다. 우리가 앞서 배운 n-gram 또한 텍스트를 표현하는 방법 중 하나이다. 하지만 머신 러닝 등의 알고리즘이 적용된 본격적인 자연어 처리를 위해서는 문자를 숫자로 수치화할 필요가 있다. 그런 측면에서 앞으로 4챕터, 6챕터, 10챕터에서는 문자를 숫자로 수치화하는 방법에 대해서 배우게 된다.

1) 다양한 단어의 표현 방법

우리는 카운트 기반의 단어 표현 방법을 다음 챕터인 Bag of Words챕터에서부터 배운다.
=> 단어의 표현 방법으론 크게 국소 표현(Local Representation/ Discrete Representation)방법 과 분산 표현(Distributed Representation/ Continuous Representation)방법 으로 나뉜다. 국소 표현 방법은 해당 단어 그 자체만 보고, 특정값을 맵핑하여 단어를 표현하는 방법이며, 분산 표현 방법은 그 단어를 표현하고자 주변을 참고하여 단어를 표현하는 방법이다. 예를 들어 puppy(강아지), cute(귀여운), lovely(사랑스러운)라는 단어가 있을 때 각 단어에 1번, 2번, 3번 등과 같은 숫자를 맵핑(mapping)하여 부여한다면 이는 국소 표현 방법에 해당된다. 반면, 분산 표현 방법의 예를 하나 들어보면 해당 단어를 표현하기 위해 주변 단어를 참고한다. puppy(강아지)라는 단어 근처에는 주로 cute(귀여운), lovely(사랑스러운)이라는 단어가 자주 등장하므로, puppy라는 단어는 cute, lovely한 느낌이다로 단어를 정의한다. 이렇게 되면 이 두 방법의 차이는 국소 표현 방법은 단어의 의미, 뉘앙스를 표현할 수 없지만, 분산 표현 방법은 단어의 뉘앙스를 표현할 수 있게 된다.

이번 4챕터의 Bag of Words는 국소 표현에 속하며, 단어의 빈도수를 카운트(Count)하여 단어를 수치화하는 단어 표현 방법이다. 이 챕터에서는 BoW와 그의 확장인 DTM(=TDM)에 대해 학습하고, 이러한 빈도수 기반 단어 표현에 단어의 중요도에 따른 가중치를 줄수 있는 TF-IDF에 대해 학습한다.

💡 Count based words 실습 =>
https://github.com/heeyeonkoo99/Deep-learning_study/blob/master/%EC%8B%A4%EC%8A%B5/4_Count%20based%20words.ipynb

05. 벡터의 유사도(Vector Similarity)

문서의 유사도를 구하는 일은 자연어 처리의 주요 주제 중 하나다. 기계가 계산하는 문서의 유사도의 성능은 어떤 방법으로 수치화하여 표현했는지(DTM, Word2Vec), 문서 간의 단어들의 차이를 어떤 방법(유클리드의 거리, 코사인 유사도 등)으로 계산했는지에 달렸다.

06. 토픽 모델링(Topic Modeling)

토픽 모델링이란 기계 학습 및 자연어 처리 분야에서 토픽이라는 문서 집합의 추상적인 주제를 발견하기 위한 통계적 모델 중 하나로, 텍스트 본문의 숨겨진 의미구조를 발견하기 위해 사용되는 텍스트 마이닝 기법이다.

1) 잠재 의미 분석(Latent Semantic Analysis, LSA)

LSA는 정확히는 토픽 모델링을 위해 최적화 된 알고리즘은 아니지만, 토픽 모델링이라는 분야에 아이디어를 제공한 알고리즘이라고 볼 수 있다. 이에 토픽 모델링 알고리즘인 LDA에 앞서 배워보도록 하겠다. 뒤에서 배우게 되는 LDA는 LSA의 단점을 개선하여 탄생한 알고리즘으로 토픽 모델링에 보다 적합한 알고리즘이다.
BoW에 기반한 DTM이나 TF-IDF는 기본적으로 단어의 빈도 수를 이용한 수치화 방법이기 때문에 단어의 의미를 고려하지 못한다는 단점이 있었다. (이를 토픽 모델링 관점에서는 단어의 토픽을 고려하지 못한다고도 한다.) 이를 위한 대안으로 DTM의 잠재된(Latent) 의미를 이끌어내는 방법으로 잠재 의미 분석(Latent Semantic Analysis, LSA)이라는 방법이 있다. 잠재 의미 분석(Latent Semantic Indexing, LSI)이라고 부르기도 한다.
=> 특이값 분해(Singular Value Decomposition, SVD) : A가 m x n 행렬일때, 3개의 행렬의 곱으로 분해(decomposition)하는 것을 말한다.
=> LSA의 경우 풀 SVD에서 나온 3개의 행렬에서 일부 벡터들을 삭제시킨 절단된 SVD(truncated SVD)를 사용한다. full SVD를 사용하는게 아님!
=> 절단된 SVD는 대각 행렬의 대각 원소의 값중에서 상위값 t개만 남게 된다. 여기서 t를 선택하는 것은 쉽지 않은 일이다. t를 크게 잡으면 기존의 행렬 A로부터 다양한 의미를 가져갈 수 있지만, t를 작게 잡아야만 노이즈를 제거할 수 있기 때문이다. 이렇게 일부 벡터들을 삭제하는 것을 데이터의 차원을 줄인다고도 말하는데, 데이터의 차원을 줄이게되면 당연히 풀 SVD를 했을때보다 직관적으로 계산비용이 낮아지는 효과를 얻을 수 있다. 여기서 계산비용이 낮아지는 것 외에도 상대적으로 중요하지 않은 정보를 삭제하는 효과를 가지고 있는데 이는 설명력이 높은 정보를 남긴다는 의미를 가지고 있다. 즉, 기존 행렬에서는 드러나지 않았던 심층적인 의미를 확인할수 있게 해준다.

2) 잠재 디리클레 할당(Latent Dirichlet Allocation, LDA)

LDA는 문서의 집합으로부터 어떤 토픽이 존재하는지를 알아내기 위한 알고리즘이다. LDA는 앞서 배운 빈도수 기반의 표현 방법인 BoW의 행렬 DTM 또는 TF-IDF 행렬을 입력으로 하는데, 이로부터 알 수 있는 사실은 LDA는 단어의 순서는 신경쓰지 않겠다는 것이다.
=> LSA : DTM을 차원 축소 하여 축소 차원에서 근접 단어들을 토픽으로 묶는다.
=> LDA : 단어가 특정 토픽에 존재할 확률과 문서에 특정 토픽이 존재할 확률을 결합확률로 추정하여 토픽을 추출한다.

💡 Topic Modeling 실습 =>
https://github.com/heeyeonkoo99/Deep-learning_study/blob/master/%EC%8B%A4%EC%8A%B5/6_Topic%20Modeling.ipynb

07. 머신 러닝(Machine Learning)개요

하이퍼파라미터(초매개변수)는 모델의 성능에 영향을 주는 매개변수들을 말하고 보통 사용자가 직접 정해줄수 있는 변수를 말한다. 예를 들어 경사하강법에서 학습률(learning rate)이나 딥러닝에서 은닉층의 수, 뉴런의 수등을 말한다. 반면에 매개변수는 가중치와 편향과 같은 학습을 통해 바뀌어져가는 변수를 말하며 사용자가 결정해주는 값이 아니라 모델이 학습하는 과정에서 얻어지는 값을 말한다.

1) 개념 설명

=> 지도 학습: 레이블(Label)이라는 정답과 함께 학습하는 것을 말한다. => 비지도 학습: 레이블이 없이 학습하는 것을 말한다. 토픽 모델링의 LDA가 이에 속한다. => 머신 러닝에서는 맞춘 문제수를 전체 문제수로 나눈 값을 정확도(Accuracy)라고 한다. 하지만 정확도는 맞춘 결과와 틀린 결과에 대해 세부적인 내용을 알려주지 않는다. 예를 들어

일때

이렇게 표현할수 있다.
=> 머신러닝에서 과적합(Overfitting)이나 과소적합(Underfitting)이되지 않고 적합(fitting)이 되도록 해야 한다.

2) 선형 회귀(Linear Regression)

변수 x의 값은 독립적으로 변할 수 있는 것에 반해, y값은 계속해서 x의 값에 의해서, 종속적으로 결정되므로 x를 독립 변수, y를 종속 변수라고도 한다. 선형 회귀는 한 개 이상의 독립 변수 x와 y의 선형 관계를 모델링한다. 만약, 독립 변수 가 1개라면 단순 선형 회귀라고 한다. 그게 아니라면 다중 선형 회귀라고 한다.
=> 비용함수(Cost function): 평균 제곱 오차(MSE)
=> 옵티마이저(Optimizer): 경사하강법(Gradient Descent)

3) 로지스틱 회귀(Logistic Regression)

=> 비용함수: 크로스 엔트로피 함수

4) 소프트맥스 회귀(Softmax Regression)

앞서 로지스틱 회귀를 통해 2개의 선택지 중에서 1개를 고르는 이진 분류(Binary Classification)를 풀었다. 이번엔 3개 이상의 선택지중에서 1개를 고르는 다중 클래스 분류 문제를 위한 소프트맥스 회귀를 알아본다.
=> 비용함수: 크로스 엔트로피 함수
=> 오차 계산방법에 대해 소프트맥스 회귀에서는 실제값을 원-핫 벡터로 표현한다.

💡 Machine Learning 실습 =>
https://github.com/heeyeonkoo99/Deep-learning_study/blob/master/%EC%8B%A4%EC%8A%B5/7_Machine%20Learning.ipynb

08. 딥 러닝(Deep Learning)개요

딥 러닝의 기본 구조인 인공 신경망(Artificial Neural Network)의 역사는 생각보다 오래되었다. 딥 러닝을 보다 손쉽게 이해하기 위해서 1957년에 등장한 초기 인공 신경망부터 학습해보겠다. 이 챕터에서는 초기 신경망인 퍼셉트론(Perceptron)부터 피드 포워드 신경망 언어 모델의 정의, 그리고 기본적인 케라스의 사용법에 대해서 배워본다.

1) 퍼셉트론(Perceptron)

퍼셉트론(Perceptron)은 프랑크 로젠블라트(Frank Rosenblatt)가 1957년에 제안한 초기 형태의 인공 신경망으로 다수의 입력으로부터 하나의 결과를 내보내는 알고리즘이다. 퍼셉트론은 실제 뇌를 구성하는 신경 세포 뉴런의 동작과 유사한데, 신경 세포 뉴런의 그림을 먼저 보도록 하겠다. 뉴런은 가지돌기에서 신호를 받아들이고, 이 신호가 일정치 이상의 크기를 가지면 축삭돌기를 통해서 신호를 전달한다.

신경 세포 뉴런의 입력 신호와 출력 신호가 퍼셉트론에서 각각 입력값과 출력값에 해당된다. x는 입력값을 의미하며 W는 가중치(Weight), y는 출력값이다.
=> 단층 퍼셉트론(Single-Layer Perceptron) : 입력층(input layer)과 출력층(output layer)로 되어있다. 단층 퍼셉트론을 이용하면 AND,NAND, OR 게이트를 쉽게 구현할수 있다. 그러나 XOR 게이트는 구현이 불가능하다. 그 이유는 단층 퍼셉트론은 직선 하나로 두 영역을 나눌수 있는 문제에 대해서만 구현가능하기 때문이다. 이를 위해선 다층 퍼셉트론이 필요하다.

=> 다층 퍼셉트론(MultiLayer Perceptron, MLP) : 입력층과 출력층 사이에 존재하는 층인 은닉층(hidden layer)이 있다. 다층 퍼셉트론은 본래 은닉층이 1개이상인 퍼셉트론을 말한다. 은닉층이 2개 이상인 신경망을 심층 신경망(Deep Neural Network, DNN)이라고 한다.

2) 인공 신경망(Artificial Neural Network) 훑어보기

=> 피드 포워드 신경망(Feed-Forward Neural Network, FFNN)

RNN은 FFNN과 달리 은닉층의 출력값을 출력층으로도 값을 보내지만 동시에 은닉층의 입력으로 사용된다.
=> 전결합층(Fully-connected layer, FC, Dense layer) : 어떤 층의 모든 뉴런이 이전 층의 모든 뉴런과 연결돼 있는 층을 말한다.
=> 활성화 함수(Activation Function) : 비선형 함수(직선 1개로는 그릴수 없는 함수)여야 한다. 앞서 생각했던 계단함수도 마찬가지로 비선형 함수이며 활성화 함수다. 인공신경망의 능력을 높이기 위해선 은닉층을 계속해서 추가해줘야 하는데 만약 선형함수로 사용하면 y(x)=kx와 같이 표현이 결국 되므로 은닉층을 여러번 추가해도 1번 추가한것과 차이를 줄수 없다.
=> 행렬의 곱셈을 이용한 순전파(Forward Propagation)

3) 딥러닝의 학습 방법

=> 순전파
=> 손실 함수 : MSE, Cross-Entroy등과 같은 함수가 있다.
=> 옵티마이저 : 여기서 배치란 가중치 등의 매개 변수의 값을 조정하기 위해 사용하는 데이터의 양을 말한다. 옵티마이저로는 배치 경사 하강법/ 확률적 경사 하강법/ 미니 배치 경사 하강법/ 모멘텀/ 아다그라드 /알엠에스프롭 /아담 등이 있다. => 역전파 : 인공신경망의 학습은 오차를 최소화하는 가중치를 찾는 목적으로 순전파와 역전파를 반복하는 것을 말한다.
=> 에포크 : 인공 신경망에서 전체 데이터에 대해 순전파와 역전파가 끝난 상태를 말한다.
=> 배치 크기 : 몇 개의 데이터 단위로 매개변수를 업데이트 하는지를 말한다. 기계 입장에서는 실제값과 예측값으로부터 오차를 계산하고 옵티마이저가 매개변수를 업데이트한다. 이때 주의할점이 있다. 예를 들어 전체 데이터가 2000일때 배치 크기를 200으로 준다면 배치의 수(이터레이션)는 10이다.
=> 이터레이션 : 한번의 에포크를 끝내기 위해서 필요한 배치의 수를 말한다.

8) 케라스 서브클래싱 API

케라스의 구현 방식에는 Sequential API, Functional API 외에도 Subclassing API라는 구현방식이 존재한다.
=> Sequential API : 단순하게 층을 쌓는방식으로 쉽지만 다수의 입출력에는 어렵다.
=> Functional API : Sequential API로는 구현하기 어려운 복잡한 모델들을 구현할수 있지만 입력의 크기를 명시한 입력층을 모델의 앞단에 정의해야 한다.
=> Subclassing API : Functional API로도 구현할수 없는 모델들조차 구현가능하지만 코드사용이 가장 까다롭다. 객체지향프로그래밍에 익숙해야한다.

💡 Deep Learning 실습 =>
https://github.com/heeyeonkoo99/Deep-learning_study/blob/master/%EC%8B%A4%EC%8A%B5/8_Deep%20Learning.ipynb

09. 순환 신경망(Recurrent Neural Network)

앞서 배운 피드 포워드 신경망은 입력의 길이가 고정되어 있어 자연어 처리를 위한 신경망으로는 한계가 있었다. 결국 다양한 길이의 입력 시퀀스를 처리할수 있는 인공신경망이 필요하게 되었고 그래서 RNN, LSTM에 대해 알아본다.

1) 순환 신경망(RNN)

RNN은 입/출력을 시퀀스 단위로 처리하는 시퀀스(Sequence) 모델이다. 참고로 재귀 신경망(Recursive Neural Network)와는 전혀 다르다. 곧이어 배울 LSTM,GRU 또한 근본적으로 RNN에 속한다.
=> 피드 포워드 신경망에서는 뉴런이라는 단위를 사용했지만 RNN에서는 뉴런이라는 단위보단 입력층과 출력층에서는 각각 입력 벡터와 출력 벡터, 은닉층에서는 은닉 상태라는 표현을 주로 사용한다.
=> RNN에서는 ‘일대다’(이미지 캡셔닝),’다대일’(스팸 메일 분류),’다대다’(번역기)와 같은 다양한 용도로 사용할수 있다.
=> 케라스, 파이썬 등으로 구현할수 있다.
=> 깊은 순환신경망(은닉층을 더 추가함으로써), 양방향 순환 신경망등이 있다.

2) 장단기 메모리(Long Short-Term Memory, LSTM)

바닐라 RNN에는 출력 결과가 이전의 계산 결과에 의존하지만 비교적 짧은 시퀀스에 대해서만 효과를 보인다. 즉 어쩌면 가장 중요한 정보가 시점의 앞 쪽에 위치할수 있는데 뒤로 갈수록 손실된다는 것이다. LSTM은 은닉츠의 메모리 셀에 입력 게이트, 망각 게이트, 출력 게이트를 추가하여 불필요한 기억을 지우고 기억해야할것들을 정한다. 즉 LSTM은 은닉상태를 계산하는 식이 전통적인 RNN보다는 조금 더 복잡해졌으며 셀상태라는 값을 추가한것이다.

3) 게이트 순환 유닛(Gated Recurrent Unit, GRU)

GRU는 LSTM의 장기 의존성 문제에 대한 해결책을 유지하면서 은닉상태를 업데이트하는 계산을 줄였다.
=> LSTM에서는 출력/입력/삭제 게이트라는 3개의 게이트가 존재했는데 GRU는 업데이트/리셋 게이트 두가지 게이트가 존재한다.
=> 둘중 어느것이 성능면에서 더 낫다라고 단정지어 말할순 없다.

5) RNN 언어 모델(Recurrent Neural Network Language Model, RNNLM)

=> RNN 훈련 기법: 교사 강요(teacher forcing)- 테스트 과정에서 t시점의 출력이 t+1 시점의 입력으로 사용되는 RNN모델을 훈련시킬때 사용하는 훈련 기법이다. 훈련할때 교사강요를 사용할 경우, 모델이 t시점에서 예측한 값을 t+1시점에 입력으로 사용하지 않고, t시점의 레이블. 즉 실제 알고있는 정답을 t+1시점의 입력으로 사용한다.
=> 훈련 과정동안 출력층에서 사용하는 활성화 함수는 소프트맥스 함수다. 손실함수로는 크로스 엔트로피 함수를 사용한다.

💡 RNN 실습 =>
https://github.com/heeyeonkoo99/Deep-learning_study/blob/master/%EC%8B%A4%EC%8A%B5/9_Recurrent%20Neural%20Network.ipynb

10. 워드 임베딩(Word Embedding)

단어를 표현하는 방법에 따라 자연어 처리의 성능이 크게 달라지기에 이에 대한 연구가 많이 있고 여러 방법들이 알려져 있다. 최근에는 단어의 의미를 벡터화시킬수 있는 워드투벡터(Word2Vec)와 글로브(Glove)가 많이 사용되고 있다. 이번 챕터에서는 전통적 방법의 한계를 개선시킨 워드 임베딩방법론에 대해 배워본다.

1) 워드임베딩

=> 희소 표현 : 앞서 원-핫 인코딩을 통해서 나온 원-핫 벡터들은 표현하고자 하는 단어의 인덱스의 값만 1이고, 나머지 인덱스에서는 전부 0으로 표현되는 벡터 표현 방법이었다. 이렇게 벡터 또는 행렬(matrix)의 값이 대부분이 0으로 표현되는 방법을 희소표현이라하고 즉 원-핫 벡터는 희소벡터이다. 이 표현은 단어의 개수가 늘어나면 벡터의 차원이 한없이 커져 공간적 낭비를 일으킨다.
=> 밀집 표현 : 희소 표현과는 반대되며, 벡터의 차원을 단어 집합의 크기로 상정하지 않고 사용자가 설정한 값으로 모든 단어의 벡터 표현의 차원을 맞춘다. 이 과정에서 더이상 0과 1만 가진 값이 아니라 실수값을 가지게 된다.
=> 여기서 단어를 밀집 벡터의 형태로 표현하는 방법을 워드 임베딩이라고 한다.

	원-핫 벡터	임베딩 벡터
차원	고차원(단어 집합의 크기)	저차원
다른 표현	희소 벡터의 일종	밀집 벡터의 일종
표현 방법	수동	훈련 데이터로부터 학습함
값의 타입	1과 0	실수

2) 워드투벡터

원-핫 벡터는 단어 간 유사도를 계산할 수 없다는 단점이 있어서 단어간 유사도를 반영할수 있도록 단어의 의미를 벡터화 할수 있는 방법이 필요하다. 그 대표적인 방법이 워드투벡터다.
=> 희소표현이 고차원에 각 차원이 분리된 표현 방법이었다면, 분산 표현은 저차원에 단어의 의미를 여러 차원에다가 분산하여 표현한다. => 워드투벡터는 CROW와 Skip-Gram 두가지 방식이 있다.
=> 참고로 워드투벡터는 딥러닝모델이 아니다. 보통 딥러닝이라 하면 입력층과 출력층 사이의 은닉층 개수가 충분히 쌓인 신경망을 학습할때를 말하는데 워드투벡터는 입력층과 출력층 사이에 하나의 은닉층만이 존재하며 활성화 함수가 없다.-얕은 신경망(Shallow Neural Network)
=> CROW: 주변에 있는 단어들을 가지고 중간에 있는 단어들을 예측하는 방법이다. ‘슬라이딩 윈도우’를 통해 데이터셋을 만든다.
=> Skip-Gram: 중간에 있는 단어로 주변 단어들을 예측하는 방법이다.
=> NNLM은 단어간 유사도를 구할수 있또록 워드 임베딩의 개념을 도입했고, NNLM의 느린 학습 속도와 정확도를 개선하여 탄생한것이 워드투벡터다. NNLM은 언어모델이므로 단음 단어를 예측하지만 워드투벡터는 워드 임베딩 자체가 목적이므로 다음 단어가 아닌 중심 단어를 예측하여 학습한다. NNLM보다 학습 속도가 빠르다.

4) 네거티브 샘플링을 이용한 Word2Vec 구현

네거티브 샘플링은 Word2Vec이 학습 과정에서 전체 단어 집합이 아니라 일부 단어 집합에만 집중할수 있도록 하는 방법이다. (~~“고양이/귀여운/돈까스”의 예시를 생각해보자!~~) 하나의 중심단어에 대해서 전체 단어 집합보다 훨씬 작은 단어 집합을 만들어놓고 마지막 단계를 이진 분류문제로 변환한다. 주변 단어들을 긍정(positive), 랜덤으로 샘플링 된 단어들을 부정(negative)으로 레이블링한다면 이진 분류문제를 위한 데이터셋이된다.

5) 글로브(GloVe)

글로브는 카운트 기반과 예측기반을 모두 사용하는 방법론이다. 기존 카운트 기반의 LSA와 예측 기반의 Word2Vec의 단점을 지적하며 이를 보완키위한 목적으로 나왔다.
=> 윈도우 기반 동시 등장 행렬 : 단어의 동시 등장 행렬은 행과 열을 전체 단어 집합의 단어들로 구성하고, i 단어의 윈도우 크기(Window Size) 내에서 k 단어가 등장한 횟수를 i행 k열에 기재한 행렬을 말한다.
=> 동시 등장 확률 : 동시 등장 확률 는 동시 등장 행렬로부터 특정 단어 i의 전체 등장 횟수를 카운트하고, 특정 단어 i가 등장했을 때 어떤 단어 k가 등장한 횟수를 카운트하여 계산한 조건부 확률이다.

9) 엘모(Embeddings from Language Model, ELMo)

ELMo(Embeddings from Language Model)는 2018년에 제안된 새로운 워드 임베딩 방법론이다. (~~비교적 최근이네~~) ELMo라는 이름은 세서미 스트리트라는 미국 인형극의 케릭터 이름이기도 한데, 뒤에서 배우게 되는 BERT나 최근 마이크로소프트가 사용한 Big Bird라는 NLP 모델 또한 ELMo에 이어 세서미 스트리트의 케릭터의 이름을 사용했다. ELMo는 Embeddings from Language Model의 약자다. 해석하면 ‘언어 모델로 하는 임베딩’이다. ELMo의 가장 큰 특징은 사전 훈련된 언어 모델(Pre-trained language model)을 사용한다는 점이다. 이는 ELMo의 이름에 LM이 들어간 이유다.

Bank라는 단어를 생각해봅시다. Bank Account(은행 계좌)와 River Bank(강둑)에서의 Bank는 전혀 다른 의미를 가지는데, Word2Vec이나 GloVe 등으로 표현된 임베딩 벡터들은 이를 제대로 반영하지 못한다는 단점이 있습니다. 예를 들어서 Word2Vec이나 GloVe 등의 임베딩 방법론으로 Bank란 단어를 [0.2 0.8 -1.2]라는 임베딩 벡터로 임베딩하였다고 하면, 이 단어는 Bank Account(은행 계좌)와 River Bank(강둑)에서의 Bank는 전혀 다른 의미임에도 불구하고 두 가지 상황 모두에서 [0.2 0.8 -1.2]의 벡터가 사용됩니다. 그렇다면 같은 표기의 단어라도 문맥에 따라서 다르게 워드 임베딩을 할 수 있으면 자연어 처리의 성능이 더 올라가지 않을까요? 단어를 임베딩하기 전에 전체 문장을 고려해서 임베딩을 하겠다는 것이죠. 그래서 탄생한 것이 문맥을 반영한 워드 임베딩(Contextualized Word Embedding)입니다.

=> RNN 언어 모델은 문장으부터 단어 단위로 입력을 받는데, RNN 내부의 은닉 상태는 시점(time-step)이 지날수록 점점 업데이트된다. 이것은 RNN의 기본개념이다. 그런데 ELMo는 순방향 RNN뿐만 아니라 반대방향으로 문장을 스캔하는 RNN 또한 활용한다. 이를 biLM(Bidirectional Language Model)이라고 한다. ELMo에서 말하는 biLM은 기본적으로 다층 구조(Multi-layer)를 전제로 한다. 은닉층이 최소 2개 이상이라는 의미다. 아래의 그림은 은닉층이 2개인 순방향 언어 모델과 역방향 언어 모델의 모습을 보여준다.

11. RNN을 이용한 텍스트 분류(Text Classification)

텍스트 분류(Text Classification)은 텍스트를 입력으로 받아, 텍스트가 어떤 종류의 범주(Class)에 속하는지를 구분하는 작업을 구한다. 텍스트 분류에서 분류해야할 범주가 두 가지라면 이진 분류(Binary Classification)라고 하며, 세 가지 이상이라면 다중 클래스 분류(Multi-Class Classification)라고 한다. 일반 메일과 스팸 메일 두 개의 범주를 가진 스팸 메일 분류는 이진 분류에 해당된다. 이 챕터에서는 머신 러닝 방법인 나이브 베이즈 분류와 인공 신경망 방법인 바닐라 RNN과 LSTM을 이용해서 텍스트 분류를 진행해보도록 하겠다.

=> 텍스트 분류는 RNN의 다-대-일(Many-to-One) 문제에 속한다. 즉, 텍스트 분류는 모든 시점(time step)에 대해서 입력을 받지만 최종 시점의 RNN 셀만이 은닉 상태를 출력하고, 이것이 출력층으로 가서 활성화 함수를 통해 정답을 고르는 문제가 된다.

이 때 두 개의 선택지 중에서 정답를 고르는 이진 분류(Binary Classification) 문제라고 하며, 세 개 이상의 선택지 중에서 정답을 고르는 다중 클래스 분류(Multi-Class Classification) 문제라고 한다. 이 두 문제에서는 각각 문제에 맞는 다른 활성화 함수와 손실 함수를 사용할 것이다.

이진 분류의 문제의 경우 출력층의 활성화 함수로 시그모이드 함수를, 손실 함수로 binary_crossentropy를 사용한다. 반면, 다중 클래스 문제라면 출력층의 활성화 함수로 소프트맥스 함수를, 손실 함수로 categorical_crossentropy를 사용한다. 또한, 다중 클래스 분류 문제의 경우에는 클래스가 N개라면 출력층에 해당되는 밀집층(dense layer)의 크기는 N으로 한다. 즉, 출력층의 뉴런의 수는 N개다.

=> 스팸 메일 분류하기(이진 분류문제)/ 로이터 뉴스 분리하기(다중 클래스 문제)
=> 나이브 베이즈 분류기: 텍스트 분류를 위해 전통적으로 사용되는 분류기이며 인공 신경망 알고리즘에는 속하지 않는다. 나이브 베이즈 분류기를 이해하기 위해서는 우선 베이즈의 정리(Bayes’ theorem)를 이해할 필요가 있다. 베이즈 정리는 조건부 확률을 계산하는 방법 중 하나다.
=> P(A)가 A가 일어날 확률, P(B)가 B가 일어날 확률, P(B|A)가 A가 일어나고나서 B가 일어날 확률, P(A|B)가 B가 일어나고나서 A가 일어날 확률이라고 해본다. 이때 P(B|A)를 쉽게 구할 수 있는 상황이라면, 아래와 같은 식을 통해 를 구할 수 있다.

12. NLP를 위한 합성곱 신경망(Convolution Neural Network)

합성곱 신경망은 주로 이미지, 비전 분야에서 사용되는 알고리즘이지만, 이를 응용해서 자연어 처리에 사용하기 위한 시도들이 있었다. 이번 챕터에서는 합성곱 신경망을 이해하고, 합성곱 신경망을 이용한 자연어 처리에 대해서 학습한다.

📌 참고로 앞선 챕터에서는 파이썬으로 실습한 github 주소를 같이 올리기도 했으나, 개념을 이해하는 것보다 코드를 올리는 것에 신경쓰다 보니 주객이 전도된것 같아 개념을 제대로 이해하지 못하고 넘어가는 느낌이 들었다. 따라서 앞으로는 개념내용만을 상세히 적도록 하겠다. 코드짜는 것은 그 이후에 해도 충분할것 같다.

1) 합성곱 신경망(Convolution Neural Network)

합성곱 신경망은 이미지 처리에 탁월한 성능을 보이는 신경망이며 자연어 처리에서도 사용된다. 크게 합성곱측(Convolution layer)과 풀링층(Pooling layer)로 구성된다.

위의 그림에서 CONV는 합성곱 연상르 의미하고, 합성곱 연산의 결과가 활성화 함수 ReLU를 지난다. 이 두 과정을 합성곱층이라고 한다. 그후에 POOL이라는 구간을 지나는데 이는 풀링 연산을 의미하며 풀링층이라고 한다.
=> 채널(Channel) : 기계는 글자나 이미지보다 숫자. 다시 말해, 텐서를 더 잘 처리할수 있다. 이미지는 (높이, 너비, 채널)이라는 3차원 텐서다. 여기서 높이는 이미지의 세로 방향 픽셀 수, 너비는 이미지의 가로 방향 픽셀 수, 채널은 색 성분을 의미한다. 흑백 이미지는 채널 수가 1이며, 각 픽셀은 0부터 255 사이의 값을 가진다. 예를 들어 28 x 28픽셀의 흑백 손글씨 데이터가 있다면 (28 x 28 x 1)의 크기를 가지는 3차원 텐서라고 볼수 있다.
=> 합성곱 연산: 합성곱은 영어로 컨볼루션이라고도 불리는데, 커널(kernel) 또는 필터(filter)라는 n x m 크기의 행렬로 높이(height)x너비(width)크기의 이미지를 처음부터 끝까지 겹치며 훑으면서 n x m 크기의 겹쳐지는 부분의 각 이미지와 커널의 원소의 값을 곱해서 모두 더한 값을 출력으로 하는 것을 말한다. 이때 이미지의 가장 왼쪽 위부터 가장 오른쪽까지 순차적으로 훑는다. 일반적으로 커널은 3 x 3 또는 5 x 5를 사용한다. 입력으로부터 커널을 사용하여 합성곱 연산을 통해 나온 결과를 특성 맵(feature map)이라고 한다. 커널의 이동범위를 스트라이드(stride)라고 한다.
=> 패딩(padding) : 만약, 합성곱 층을 여러개 쌓았다면 최종적으로 얻은 특성 맵은 초기 입력보다 매우 작아진 상태가 되버린다. 합성곱 연산 이후에도 특성 맵의 크기가 입력의 크기와 동일하게 유지되도록 하고 싶다면 패딩(padding)을 사용하면 된다. 주로 값을 0으로 채우는 제로 패딩을 사용한다.
=> 다수의 채널을 가질 경우의 합성곱 연산(3차원 텐서의 합성곱 연산) : 다수의 채널을 가진 입력 데이터를 가지고 합성곱 연산을 한다고 하면 커널의 채널 수도 입력의 채널 수만큼 존재해야 한다. 즉 입력 데이터의 채널 수와 커널의 채널수는 같아야 한다. 아래 그림처럼 각 채널 간 합성곱 연산을 마치고, 그 결과를 모두 더해서 하나의 채널을 가지는 특성 맵을 만든다. 이때 사용되는 커널은 3개의 커널이 아니라 3개의 채널을 가진 1개의 커널이라는 점이다.

=> 풀링(Pooling) : 일반적으로 합성곱 층(합성곱 연산 + 활성화 함수) 다음에는 풀링 층을 추가하는 것이 일반적이다. 풀링 층에서는 특성 맵을 다운샘플링하여 특성 맵의 크기를 줄이는 풀링 연산이 이루어진다. 풀링 연산에는 일반적으로 최대 풀링(max pooling)과 평균 풀링(average pooling)이 사용된다. 풀링 연산에서도 합성곱 연산과 마찬가지로 커널과 스트라이드의 개념을 가진다. 위의 그림은 스트라이드가 2일 때, 2 × 2 크기 커널로 맥스 풀링 연산을 했을 때 특성맵이 절반의 크기로 다운샘플링되는 것을 보여준다. 맥스 풀링은 커널과 겹치는 영역 안에서 최대값을 추출하는 방식으로 다운샘플링한다.

다른 풀링 기법인 평균 풀링은 최대값을 추출하는 것이 아니라 평균값을 추출하는 연산이 된다. 풀링 연산은 커널과 스트라이드 개념이 존재한다는 점에서 합성곱 연산과 유사하지만, 합성곱 연산과의 차이점은 학습해야 할 가중치가 없으며 연산 후에 채널 수가 변하지 않는다는 점이다. 풀링을 사용하면, 특성 맵의 크기가 줄어드므로 특성 맵의 가중치의 개수를 줄여준다.

2) 자연어 처리를 위한 1D CNN(1D Convolution Neural Network)

=> 2D 합성곱 : 합성곱 연산을 통해서 이미지의 특징을 추출하는 역할을 한다.
=> 1D 합성곱 : 자연어 처리에 사용되는 경우가 많은듯 싶다. 1D CNN도 입력이 되는 것이 각 단어가 벡터로 변환된 문장 행렬로 LSTM과 입력을 받는 형태는 동일하다. CNN에서의 커널은 신경망 관점에서는 가중치 행렬이므로 커널의 사이즈에 따라 학습하게 되는 파라미터의 수는 달라잔다. 1D CNN과 자연어 처리 관점에서는 커널의 사이즈에 따라서 참고하는 단어의 묶음의 크기가 달라진다. 이는 참고하는 n-gram이 달라진다고 볼 수 있다. 가령, 커널의 사이즈가 2라면 각 연산의 스텝에서 참고하는 것은 bigram이다. 커널의 사이즈가 3이라면 각 연산의 스텝에서 참고하는 것은 trigram이다.

7) 글자 임베딩(Character Embedding)

이번 챕터에서는 워드 임베딩과는 다른 방법으로 단어의 벡터 표현 방법을 얻으므로서 OOV 문제를 해결하는 글자 임베딩(Character Embedding)의 방법에 대해서 알아보겠다. 글 글자 임베딩은 사람의 이해능력을 흉내내는 알고리즘으로 각각 CNN과 RNN을 이용해 구현할수 있다.

13. 태깅 작업(Tagging Task)

단어 태깅 작업은 대표적으로 크게 두 가지가 있는데 각 단어의 유형이 사람, 장소, 단체 등 어떤 유형인지를 알아내는 개체명 인식(Named Entity Recognition)과 각 단어의 품사가 명사, 동사, 형용사 인지를 알아내는 품사 태깅(Part-of-Speech Tagging)이 있다. 이러한 작업은 챗봇, 기계 번역 등과 같은 자연어 처리 분야에서 메인 작업에 앞서 전처리 작업으로서 필요한 경우가 많지만, 전처리 작업이라고 쉬운 작업이 아니라 그 자체로도 까다로운 작업이 되어 많은 시간을 필요로 하는 작업이 되기도 한다.
=> 입력 시퀀스 X = [x1,x2,x3…,xn]에 대하여 레이블 시퀀스 y = [y1,y2,y3…,yn]를 각각 부여하는 작업을 시퀀스 레이블링 작업(Sequence Labeling Task)이라고 합니다. 태깅 작업은 대표적인 시퀀스 레이블링 작업이다.
=> CRF(Conditional Random Field) : CRF는 Conditional Random Field의 약자로 양방향 LSTM을 위해 탄생한 모델이 아니라 이전에 독자적으로 존재해왔던 모델이다. 이를 양방향 LSTM 모델 위에 하나의 층으로 추가하여, 양방향 LSTM + CRF 모델이 탄생했다.

14. 서브워드 토크나이저(Subword Tokenizer)

이번 챕터에서는 단어 토큰화에서 더 나아가 단어를 서브워드 단위까지 나누는 서브워드 토큰화에 대해 알아본다.

1) 바이트 페어 인코딩(Byte Pair Encoding, BPE)

기계에게 아무리 많은 단어를 학습시켜도, 세상의 모든 단어를 알려줄 수는 없는 노릇이다. 만약, 기계가 모르는 단어가 등장하면 그 단어를 단어 집합에 없는 단어란 의미에서 OOV(Out-Of-Vocabulary) 또는 UNK(Unknown Token)라고 표현한다. 기계가 문제를 풀 때, 모르는 단어가 등장하면 (사람도 마찬가지지만) 주어진 문제를 푸는 것이 까다로워 진다. 이와 같이 모르는 단어로 인해 문제를 푸는 것이 까다로워지는 상황을 OOV 문제라고 한다. 서브워드 분리(Subword segmenation) 작업은 하나의 단어는 더 작은 단위의 의미있는 여러 서브워드들(Ex) birthplace = birth + place)의 조합으로 구성된 경우가 많기 때문에, 하나의 단어를 여러 서브워드로 분리해서 단어를 인코딩 및 임베딩하겠다는 의도를 가진 전처리 작업이다. 이를 통해 OOV나 희귀 단어, 신조어와 같은 문제를 완화시킬 수 있다.
=> BPE 알고리즘 : 기본적으로 연속적으로 가장 많이 등장한 글자의 쌍을 찾아서 하나의 글자로 병합하는 방식을 수행한다.

aaabdaaabac

ZabdZabac
Z=aa

ZYdZYac
Y=ab
Z=aa

XdXac
X=ZY
Y=ab
Z=aa

=> 예를 들어, 테스트 과정에서 ‘lowest’란 단어가 등장한다면 기계는 이 단어를 학습한 적이 없으므로 해당 단어에 대해서 제대로 대응하지 못하는 OOV 문제가 발생한다. 그렇다면 BPE를 적용한다면 어떨까?

2) 센텐스피스(SentencePiece)

앞서 서브워드 토큰화를 위한 BPE(Byte Pair Encoding) 알고리즘과 그 외 BPE의 변형 알고리즘에 대해서 간단히 언급했다. 물론, 알고리즘을 아는 것도 중요하지만 어쩌면 그보다 더 중요한 것은 실무에서 바로 적용 가능하느냐의 문제일 수 있다. 이 경우 BPE를 포함하여 기타 서브워드 토크나이징 알고리즘들을 내장한 센텐스피스(SentencePiece)가 일반적으로 최선의 선택일 수 있다.
=> 센텐스피스: 내부 단어 분리를 위한 유용한 패키지로 구글의 센텐스피스(Sentencepiece)가 있다. 구글은 BPE 알고리즘과 Unigram Language Model Tokenizer를 구현한 센텐스피스를 깃허브에 공개했다. 내부 단어 분리 알고리즘을 사용하기 위해서, 데이터에 단어 토큰화를 먼저 진행한 상태여야 한다면 이 단어 분리 알고리즘을 모든 언어에 사용하는 것은 쉽지 않다. 영어와 달리 한국어와 같은 언어는 단어 토큰화부터가 쉽지 않기 때문이다. 그런데, 이런 사전 토큰화 작업(pretokenization)없이 전처리를 하지 않은 데이터(raw data)에 바로 단어 분리 토크나이저를 사용할 수 있다면, 이 토크나이저는 그 어떤 언어에도 적용할 수 있는 토크나이저가 될 것이다. 센텐스피스는 이 이점을 살려서 구현되었다. 센텐스피스는 사전 토큰화 작업없이 단어 분리 토큰화를 수행하므로 언어에 종속되지 않는다.

2) 서브워드텍스트인코더(SubwordTextEncoder)

SubwordTextEncoder는 텐서플로우를 통해 사용할 수 있는 서브워드 토크나이저아다. BPE와 유사한 알고리즘인 Wordpiece Model을 채택하였으며, 패키지를 통해 쉽게 단어들을 서브워드들로 분리할 수 있다.

2018 삼성 SCPC 1차 문제풀이

2021-07-15T12:26:28+00:00

2018 SCPC

총 5문제고 예선문제라서 그리 어렵지는 않도록 했나보다. 나는 나동빈님의 유투브 강의를 보면서 진행했는데 기존에 쓰던 python언어를 쓸수없고 c++을 써야되어서 조금 부담이 되긴했다. 그치만 도전하는건 멈추고 싶지않아서 어찌됐건 보려고 한다. 갈리면서 성장한다고 믿기에! 내일 2021 SCPC가 있기에 그것을 대비하고자 준비를 하는것이다. 이제 문제풀이를 본격 해보겠다.

문제 1.버스 타기(greedy)

#include<iostream>
#include<algorithm>
#include<vector>
using namespace std;

int main() {
	int T, testCase;
	cin >> T;

	for (testCase = 1; testCase <= T; testCase++) {
		int n, k;
		cin >> n >> k;
		vector<int>a;
		for (int i = 0; i < n; i++) {
			int x;
			cin >> x;
			a.push_back(x);
		}
		sort(a.begin(), a.end());
		int result = 1;
		for (int i = 1; i < n; i++) {
			if (a[i] - a[i - result] <= k)result++;
		}
		cout << "CASE #" << testCase << "\n";
		cout << result << "\n";

	}
	return 0;
}

문제 2.회문인 수의 합(brute force)

#include<iostream>
#include<sstream>
using namespace std;

int circular[10001];
int cnt;

bool isPalindrome(int x) {
	stringstream ss;
	ss << x;
	string str = ss.str();
	int len = str.length();
	for (int i = 0; i < len; i++) {
		if (str[i] != str[len - 1 - i])
			return false;
		return true;
	}
}

bool one(int x) {
	for (int i = 0; i < cnt; i++) {
		if (circular[i] == x) {
			cout << 1 << " " << circular[i] << "\n";
			return true;
		}
	}
	return false;
}

bool two(int x) {
	for (int i = 0; i < cnt; i++) {
		for (int j = 0; j < cnt; j++) {
			if (circular[i] + circular[j] == x) {
				cout << 2 << " " << circular[j] <<" "<< circular[i] << "\n";
				return true;
			}
		}
	}
	return false;
}

bool three(int x) {
	for (int i = 0; i < cnt; i++) {
		for (int j = 0; j < cnt; j++) {
			for (int k = 0; k < cnt; k++) {
				if (circular[i] + circular[j]+circular[k] == x) {
					cout << 2 << " " <<circular[k]<<" "<< circular[j] << " " << circular[i] << "\n";
					return true;
				}
			}
		}
	}
	return false;
}

int main(void) {
	int T, testCase;
	for (int i = 0; i <= 10000; i++) {
		if (isPalindrome(i)) {
			circular[cnt] = i;
			cnt++;
		}
	}
	cin >> T;
	for (testCase = 1; testCase <= T; testCase++) {
		int n;
		cin >> n;
		cout << "Case #" << testCase << "\n";
		if (!one(n) && !two(n) && !three(n)) {
			cout << "0" << "\n";
		}
	}
}

문제 3.우주정거장(dfs)

#include<iostream>
#include<vector>
#include<queue>
#define MAX 200001
using namespace std;

vector<int> a[MAX];
queue<int> q;
int result;

//idea=>연결된 간선이 2개인 모든 노드 중에서 삼각형 사이클을 형성하는 노드를 큐에 담아서 계속해서 지워나가면 해결 가능!
//결국 cycle찾는 과정이 vectorDrop,process,find에 나와있는 것이다.

//벡터에서 특정한 원소를 찾아 제거한다.
void vectorDrop(int now, int target) {
	for (int i = 0; i < a[now].size(); i++) {
		if (a[now][i] == target) {
			a[now].erase(a[now].begin() + i);
		}
	}
}

//삼각형 사이클을 발견했을때 처리하는 함수다.
void process(int target) {
	vectorDrop(a[target][0], target);
	vectorDrop(a[target][1], target);
	if (a[a[target][0]].size() == 2) {
		q.push(a[target][0]);
	}
	if (a[a[target][1]].size() == 2) {
		q.push(a[target][1]);
	}
}

//dfs를 이용해 삼각형 사이클을 찾는다.
void find(int target, int now, int cnt) {
	if (cnt == 3) {
		for (int i = 0; i < a[now].size(); i++) {
			//삼각형 사이클이 형성되는 경우
			if (a[now][i] == target) {
				result++;
				process(target);
				return;
			}
		}
		return;
	}
	//연결된 노드를 dfs 탐색한다.
	for (int i = 0; i < a[now].size(); i++) {
		find(target, a[now][i], cnt + 1);
	}
}

int main(void) {
	int T;
	cin >> T;
	for (int testCase = 1; testCase <= T; testCase++) {
		for (int i = 0; i < MAX; i++) {
			a[i].clear();
		}
		result = 0;
		queue<int>empty;
		swap(q, empty);
		int n, m;
		cin >> n >> m;
		for (int i = 0; i < m; i++) {
			int x, y;
			cin >> x >> y;
			a[x].push_back(y);
			a[y].push_back(x);
		}

		//연결된 간선이 2개인 노드를 큐에 삽입한다.
		for (int i = 1; i <= n; i++) {
			if (a[i].size() == 2) {
				q.push(i);
			}
		}

		//큐가 비워질 때까지 사이클을 찾아 처리한다.
		while (!q.empty()) {
			int x = q.front();
			q.pop();
			find(x, x, 1);
		}
		cout << "Case #" << testCase << "\n";
		cout << n - result << "\n";

	}
	return 0;
}

+) 4번같은 경우는 만점자가 거의 드물었고 5번은 이해를 못했다.🤣 이해하고나서 추가해보도록 하자.

참고한 사이트> https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=ndb796&logNo=221305544177

2021 네이버 부스트캠프 지원후기

2021-07-05T12:26:28+00:00

부스트캠프 지원하게된 이유..

사실 원래대로라면 나는 4학년 1학기를 다닌후 막학기만 남겨둔 상태에서 여름방학을 보냈을것이다. 그렇지만 나는 이번 4-1를 다니는 대신 휴학을 선택했고, 휴학중 내가 해보고 싶은것 (알바, 운동, 개인공부)을 해보고 싶어서 이런선택을 하게 되었다. (코로나땜에 비대면으로 듣는 학교수업이 나한테 잘맞지 않은 것같았고, 아직 전공공부에 대한 이해가 부족하다 싶어서 혼자서 고군분투하며 배워가보고 싶었기 떄문도 크다) 그렇게 시간이 어느덧 6월이 되면서 네이버 부스트캠프 지원공고가 떴다.

이걸보면서 내가 이 프로그램에 참여하게 된다면 얼마나 좋을지 싶었다. 단순히 개인공부가 아니라 나와 같은 진로를 생각하는 사람들과 함께 ‘피어세션’이라는 시간을 통해 코드리뷰를 할수 있다는게 큰 매력으로 다가왔었고 어떻게든 도전은 해보고 싶었다. 그래서 부랴부랴 자소서를 쓰고 1차코딩테스트를 준비했다.

부스트캠프 지원과정

코딩테스트 준비를 프로그래머스 level2문제를 통해 준비했던것 같다. 이전 기수들의 문제후기를 보면 다 구현문제라고 했다. 어떤 알고리즘을 쓰기보다는 기본적으로 얘가 프로그래밍에 얼마나 이해도가 있느냐를 파악하는 듯 싶었다. 1차 코딩테스트를 보니까 정말 실감났다. 아 완전히 구현이구나..그리고 예상치 못했는데 알고리즘 2문제 이외에도 CS문제 10문제정도 있었다. 네이버를 가려면 기본기가 탄탄히 있는것이 필수라고 느꼈다. 6월 24일에 1차 코딩테스트를 봤었는데 CS문제는 좀 헷갈리던게 많았었고, 알고리즘 문제는 2문제중 1솔을 했었다. (7시에 1차 시험 시작이었는데 그전에 너무 피곤해서 낮잠자다가 눈뜨니까 7시였다..! 그래서 정신없게 시험을 봤던것같다..ㅋㅋㅋㅋㅋ담부턴 이러지 말자) 그래서 좀 불안했는데 이번에 1차를 한 5배수정도 뽑은듯해서 나도 운좋게 1차를 통과하게 되었다. 다행히 응시료 1만원의 뽕을(?) 조금이나마 뽑을순 있을것같았다.

그래도 1차를 통과하니까 기분은 좀 좋았다ㅎㅎ 그리고나서 나는 계절학기 2과목 수업을 듣느라 2차준비를 제대로 못한 상태로 7월 3일 오후 2시에 시험을 치게 되었다. 이번에는 160분 안에 3문제를 푸는 것이었다. 1번 문제를 보고 살짝 안좋은 예감을 느꼈다. 1번 문제는 6x6 표에서 params에서 입력받은 만큼 채운다음에 한 열의 합이 10이 되면 그 열은 비워주고 이런 문제였었다. 그림과 문제설명이 방대하게 나오니까 지레 겁을 먹었던것같다. 우선 2,3은 1번문제이후에 풀기로 했다. 왜냐하면 2,3번에서도 1번같이 문제설명이 길면 그대로 2차시험에서 멘붕이 올것 같았기 때문이다. 그렇지만 나는 1번문제에서 시간을 엄청 잡아먹었다. 그리고 2번은 아예 문제를 제대로 보지도 못하고ㅠㅠ(~~코드 작성칸에 아예 빈칸으로 제출했다..~~) 3번은 stack을 리스트로 이용하는 거라서 쉽게 풀었었다.. 그런데 1번도 마지막 5분전에 내가 놓친부분을 발견해서 아마 정확히는 3문제중 1.5솔 한것같다. 그런데 또 test case가 그리 많지는 않아서 hidden case에서 더 나갔을수도 있다. 그렇지만 내가 이번이 첫 기업 코딩테스트니까 너무 부담을 갖지는 말자고 생각했다. 어차피 나는 코딩테스트라는 것을 경험 하는것 그자체가 목적이었고, 앞으로 어떻게 할지에 대한 방향을 잡고 싶었기 때문이다. 그런의미에서 뜻 깊은 경험이라고 느낀다. 적어도 네이버가 어떤식으로 코딩테스트를 보는지, 앞으로 내가 어떻게 코딩테스트를 준비해야될지 +1 만큼 알았기 때문이다.

현재..

그렇지만 아쉬움을 감출순 없는것같다. 코딩테스트가 끝난지 2일이 지난 지금 7월 5일에도 계속 네이버 부스트캠프 코딩테스트 후기를 찾아보고 있으니까 말이다..🤣 대부분의 사람들은 이번 난이도를 쉽게 생각했고 거의 90프로가 3솔을 했다고 한다. 기죽지말자, 난 아직 첫 코테였고 앞으로 더 잘할 기회가 무수히 많다. 가장 중요한 것은 자신감을 잃지 않는 것이라고 생각한다. 3솔을 한 사람들도 처음에는 잘못했던 경험이 분명 있기에 그 경험들을 통해서 성장하고 고수가 된 것일것이다. 진짜 정말 운이 좋아서 2차가 된다면 너무 행복하겠지만 그럴 가능성은 현저히 낮기때문에 앞으로의 계획을 또 짜도록 하자! OPIC 시험을 보려고 하는데 부스트캠프를 하지 못하게 된 대신 코딩공부를 하면서 OPIC-AL을 노리면서 공부해보자!

++) 역시나다! 오픈채팅방을 보니까 2차 코테에서 3솔합도 떨어지는 사람이 좀 있었나보다. 보니까 2솔합은 아예 없었던것같았다.와 진짜 빡세구나. 그렇지 네이버에서 아무나 붙여주진 않을게 당연하다. 이로써 내 역량을 한번 체크해봤고 더 분발할수 있는 증폭기를 얻게 되었다. 더더 분발하고 노력하자 내자신!

[리액트 프로그래밍 정석] 에어비앤비 개발 방식으로 비동기 제어하기

2021-06-07T12:26:28+00:00

redux-pack이란?

redux-pack은 에어비앤비에서 공개한 비동기 제어를 위한 미들웨어다. redux-pack을 도입하면 비동기 제어에 포함된 복잡한 작업들을 하나의 액션으로 처리할수 있다. (~~redux-thunk미들웨어보다 더 간단히 비동기 제어 가능!~~) Promise 클래스의 비동기 처리 과정을 활용하여 구현되어 있다. redux-pack의 구성을 이해하기 위해 Promise 클래스의 대략적인 구조를 살펴보자면 아래와 같다.

class Promise{
  constructor(){
  //1. start
  }
   then(...){
  //2. success
  }
   catch(...){
  //3. failure
  }
   finally(...){
  //4. finish
  }
}

redux-thunk와 redux-pack의 리듀서 구조 비교하기

redux-thunk의 리듀서는 액션에 대응하는 switch문을 사용해 액션에 맞는 작업을 추가했다. 총 4가지 상황(또는 액션)에 대비하여 코드를 작성해야 한다.

export function thunkReducer(state,action){
  const {type,payload}=action;
  switch(type){
    case 'START':{
      return {...state,loading:true};
    }
    case 'SUCCESS':{
      return {...state, payload};
    }
    case 'FAILURE':{
      return {...state,error:true};
    }
    case 'FINISH':{
      return {...state,loading:false};
    }
    default:
      state;
  }
}

redux-pack에도 4가지 상황에 대응하는 코드를 작성한다. handle() 함수의 세 번째 인자로 넘어간 객체를 주목하자! start,success,failur,finish의 키값이 리듀서 코드다. handle()함수는 이전 스토어 상태(prevState) 을 이용하여 스토어 데이터에 반영할 객체를 반환한다.

import {handle} from 'redux-pack';

export function packReducer(state,action){
    const {type,payload}=action;
    if (action==='REDUX_PACK'){
        return handle(state,action,{
            start:prevState=>({
                ...prevState,loading:true,
            }),
            success:prevState=>({...state, payload}),
            failure:prevState=>({
                ...state, error:true,
            }),
            finish:prevState=>({
                ...state,
                loading:false,
            }),
        });
    }
    return state;
}

대용량 데이터 효율적으로 처리하기=> 페이지 개념 도입!

페이지는 전체 데이터를 일정 크기로 쪼갠것을 말한다. useState,useEffect와 자바스크립트 array메소드인 slice를 활용해서 간단히 구현할수 있다.
🐣 https://chanhuiseok.github.io/posts/react-12/ (~~이거 참고해서 페이지네이션 구현해봐도 괜찮아보임!~~)

셀렉터로 스토어 데이터 변환하기

지금까지 스토어 데이터를 컴포넌트에 전달하기 위해 mapStateToProps()함수와 데이터 컴포넌트를 조합했다. 그런데 이 방식은 스토어 데이터의 값을 변환하거나 추출하는 등의 작업이 필요해지면 mapStateToProps()함수에 작성한 작업 코드를 전체적으로 수정해야한다는 단점이 있다. 셀렉터는 변경된 스토어 데이터를 화면에 필요한 형태로 변환 및 추출하는 함수를 말한다. 셀렉터를 도입하면 mapStateToProps()함수의 스토어 데이터 변환및 추출 작업을 간단히 대체할수 있다.

스토어와 컴포넌트 사이에 셀렉터가 위치하며, 셀렉터는 스토어 데이터의 값을 받아 변환,추출 등의 작업을 한 다음 반환한 값을 컴포넌트로 넘겨준다. 이전에는 데이터 컴포넌트의 mapStateToProps()함수에서 이 작업들을 모두 담당했지만 이제는 셀렉터가 대신하게 된다.

참고하여 알아둘것!

참고한 사이트: https://react.vlpt.us/redux-middleware/
https://codechaser.tistory.com/78
참고한 블로그: https://velog.io/@mokyoungg/Redux-Redux-thunk

My Goals of 2021

2021-06-07T12:26:28+00:00

복학하기전까지의 방향

🏃‍♀️ 꾸준한 운동을 통해 체지방 감소& 근육 늘리기(~~11자 복근..ㅠ~~)
💻 삼성 sds 알고리즘 특강
📑 계절학기 2과목(글쓰기, 배분이수)
🛠 학부연구생 컨택
📕 한달에 최소 책 2권은 읽기
✔ PS 하루 1 commit해서 github 잔디 매일심기
🙋‍♀️ 틈날때마다 토이 프로젝트 도전하기
✍ OPIC 자격증 따기

복학한 후에 방향

⚙ 학부연구생
💡 4-1 학점 최대한 잘받도록 노력하기
📌 대외활동 계속 지원하기
🚗 운전 능숙하게 하기(~~말로만 하지말고 진짜 제대로!! 운전잘하는 사람 멋있어..~~)

[리액트 프로그래밍 정석] 리덕스 고급 기능 활용하기

2021-06-03T12:26:28+00:00

미들웨어란?

리덕스의 단방향 데이터 흐름 속에서 액션을 검사하는 검문소 역할을 한다. 미들웨어는 리덕스에서 특정 액션에 연쇄로 일어나는 액션을 추가하거나 액션을 함수형으로 취급하여 추가 작업을 할수 있게 해준다.

리덕스에서 데이터는 단방향으로 흐르는데 만약 데이터를 검사하고 싶다면 액션과 스토어 사이의 길목을 관찰하면 된다. 여기서 미들웨어는 리듀서 전후에 위치한다. (~~사실 리덕스 크롬 확장도구가 미들웨어의 감시 기능을 응용하여 개발된 도구라고 한다.~~)

미들웨어 코드

const middleware= store=>nextRunner=>action=>nextRunner(action);
//혹은
function middleware(store){
  return function(nextRunner){
    return function(action){
      //리듀서 실행 이전
      const result=nextRunner(action);
      //리듀서 실행 이후
      return result;
      }
   }
}

다시말해, 리덕스 미들웨어를 사용하면 액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아와서 업데이트하기 저에 추가적인 작업을 할수 있다.

특정 조건에 따라 액션이 무시되게 만들수 있다.
액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할수 있다.
액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있다.
특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있다.
특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있다.

보통 리덕스에서 미들웨어를 사용하는 주된 사용 용도는 비동기 작업을 처리 할 때다. 예를 들어 리액트 앱에서 우리가 만약 백엔드 API 를 연동해야 된다면, 리덕스 미들웨어를 사용하여 처리하곤 한다. 리덕스 미들웨어는 누구든지 만들어서 사용 할 수 있지만, 일반적으로는 리덕스 미들에웨어 라이브러리를 설치하여 사용한다. 비동기 작업에 관련된 미들웨어 라이브러리는 redux-thunk, redux-saga, redux-observable, redux-promise-middleware 등이 있다. 비동기작업을 처리하는 redux-thunk와 redux-saga라는 라이브러리를 가장 많이 사용하는듯하다.

미들웨어로 알림 메시지 띄우기

알림 액션과 리듀서 분리하기

[src/08/actions/notificationActions.js]

export const SHOW_NOTIFICATION = 'notification/SHOW_NOTIFICATION';
export const HIDE_NOTIFICATION = 'notification/HIDE_NOTIFICATION';

export function showMessage(message, warning = false) {
  return {
    type: SHOW_NOTIFICATION,
    payload: { message, warning },
  }
}

export function hideMessage() {
  return {
    type: HIDE_NOTIFICATION,
  }
}

[src/08/reducers/notificationReducer.js]

import {
  SHOW_NOTIFICATION,
  HIDE_NOTIFICATION,
} from '../actions/notificationActions';

const initState = {
  message: '',
  warning: false,
  showMessage: false,
};

export default (state = initState, action) => {
  const { type, payload } = action;

  switch (type) {
    case SHOW_NOTIFICATION: {
      const { message, warning } = payload;
      return {
        ...state,
        showMessage: true,
        message,
        warning,
      };
    }
    case HIDE_NOTIFICATION: {
      return {
        ...state,
        message: '',
        showMessage: false,
      };
    }
    default:
      return state;
  }
};

[src/08/reducers/index.js]

// import transactions from './transactionsReducer';
import notification from './notificationReducer';
import createReducers from '../../11/api-redux-pack/createReducers';
import searchFilter from './searchFilterReducer';
import router from './routerReducer';

const apiReducers = createReducers('transactions', 'users');

export default {
  ...apiReducers,
  notification,
  searchFilter,
  router,
  // transactions,
};

[src/08/containers/NotificationContainer.js]

//Notification 컴포넌트와 리듀서를 연결하여 데이터 컴포넌트 만들기  
import { connect } from 'react-redux';
import Notification from '../components/Notification';

const mapStateToProps = state => {
  const { showMessage, message, warning } = state.notification;

  return { showMessage, message, warning };
};

export default connect(mapStateToProps)(Notification);

[src/08/components/Notification.jsx]

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Toast from '../../doit-ui/Toast';

class Notification extends PureComponent {
  render() {
    const { showMessage, message, warning } = this.props;
    return showMessage && (
      <Toast message={message} warning={warning} />
    );
  }
}

Notification.propTypes = {
  showMessage: PropTypes.bool,
  warning: PropTypes.bool,
  message: PropTypes.string,
};

export default Notification;

[src/08/actions/transactionActions.js]

import Api from '../Api';
import { showMessage } from './notificationActions';

export const LOADING_TRANSACTION_LIST = 'transaction/LOADING_TRANSACTION_LIST';
export const SET_TRANSACTION_LIST = 'transaction/SET_TRANSACTION_LIST';
export const SET_ERROR = 'transaction/SET_ERROR';
export const TRADE_COMPLETE = 'transaction/TRADE_COMPLETE';

export function loading() {
  return {
    type: LOADING_TRANSACTION_LIST,
  };
}

export function setError(errorMessage) {
  return {
    type: SET_ERROR,
    payload: { errorMessage },
  };
}

export function setTransactionList(transactions) {
  return {
    type: SET_TRANSACTION_LIST,
    payload: transactions,
  };
}

export function requestTransactionList(params) {
  return dispatch => {
    dispatch(loading());
    Api.get('/transactions', { params }).then(
      ({ data }) => dispatch(setTransactionList(data)),
      error => {
        dispatch(setError(error.response.data.errorMessage));
        // 어차피 미들웨어를 통해 해결할것이기에 아래함수는 필요없다.
        // dispatch(showMessage(error.response.data.errorMessage, true));
      },
    );
  };
}

export function tradeComplete() {
  return { type: TRADE_COMPLETE };
}

export function createTransaction(data, onComplete) {
  return dispatch =>
    Api.post('/transactions', data).then(
      ({ data }) => {
        dispatch(tradeComplete());
        onComplete();
      },
      error => dispatch(setError(error.response.data.errorMessage)),
    );
}

미들웨어로 알림 자동으로 표시하기

미들웨어의 감시 기능(어떤 type의 액션이 왔는지 감시)을 활용하면 액션에 액션을 추가할수 있다. 예를 들어 SET_ERROR액션이 실행된 이후 SET_ERROR액션이 맞다면 알림 액션 함수(SHOWmESSAGE)를 실행하도록 할수 있다. 여기서 특정상황에서 추가 액션을 호출하는 미들웨어를 ‘효과(effect) 미들웨어’라고 한다. 이제 SET_ERROR에 대한 액션을 분리하여 알림을 호출하는 효과 미들웨어를 구성해볼것이다. [src/08/middlewares/notificationEffects.js]

// import { SET_ERROR } from '../actions/transactionActions';
import { KEY, LIFECYCLE } from 'redux-pack';
// import { FETCH_TRANSACTION_LIST } from '../actions/transactionPackActions';
import { SHOW_NOTIFICATION, showMessage, hideMessage } from '../actions/notificationActions';
import { debounce } from '../../02/debounce';

const debounceRunner = debounce(action => action(), 4000);

// let prevHideCaller;
export default store => nextRunner => action => {
  const { type, payload, meta } = action;
  const result = nextRunner(action);
  if (meta && meta.notification) {
    const { success, error } = meta.notification;
    if (success && meta[KEY.LIFECYCLE] === LIFECYCLE.SUCCESS) {
      store.dispatch(showMessage(success));
    } else if (error && meta[KEY.LIFECYCLE] === LIFECYCLE.FAILURE) {
      const { errorMessage } = payload.response ? payload.response.data : {};
      store.dispatch(showMessage(errorMessage || error, true));
    }
    // } else if (type === SET_ERROR) {
    //   const { errorMessage } = payload;
    //   store.dispatch(showMessage(errorMessage, true));
    // } else if (type === FETCH_TRANSACTION_LIST && meta[KEY.LIFECYCLE] === LIFECYCLE.FAILURE) {
    //   const { errorMessage } = payload.response.data;
    //   store.dispatch(showMessage(errorMessage, true));
    // } else if (type === FETCH_TRANSACTION_LIST && meta[KEY.LIFECYCLE] === LIFECYCLE.SUCCESS) {
    //   const message = '거래 목록을 최신 정보로 업데이트하였습니다.';
    //   store.dispatch(showMessage(message));
  } else if (type === SHOW_NOTIFICATION) {
    const hide = () => store.dispatch(hideMessage());
    // setTimeout(hide, 4000);
    debounceRunner(hide);
  }
  return result;
};

[src/08/store/configureStore.js]

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducers from '../reducers';
import { SET_TRANSACTION_LIST } from '../actions/transactionActions';
import thunk from 'redux-thunk';
import { middleware as reduxPackMiddleware } from 'redux-pack';
import searchFilterEffects from '../middlewares/searchFilterEffects';
import routerEffects from '../middlewares/routerEffects';
import notificationEffects from '../middlewares/notificationEffects';
const customMiddleware = store => nextRunner => action => {
  console.log('미들웨어에 전달된 액션 객체', action);
  console.log('리듀서 실행이전', store.getState());
  const result = nextRunner(action);
  console.log('리듀서 실행이후', store.getState());
  return result;
};

const customMiddleware2 = store => nextRunner => action => {
  console.log('미들웨어2 전달된 액션 객체', action);
  console.log('미들웨어2 실행이전', store.getState());
  const result = nextRunner(action);
  console.log('미들웨어2 실행이후', store.getState());
  return result;
};
const customMiddleware3 = store => nextRunner => action => {
  console.log('미들웨어3 전달된 액션 객체', action);
  console.log('미들웨어3 실행이전', store.getState());
  const result = nextRunner(action);
  console.log('미들웨어3 실행이후', store.getState());
  return result;
};

const customMiddleware1 = () => nextRunner => action => {
  if (action.type === SET_TRANSACTION_LIST) {
    return nextRunner({
      ...action,
      payload: [
        {
          id: 0,
          code: 'DOIT',
          name: '두잇코인(DOIT)',
          totalPrice: 1000000000,
          currentPrice: 25000,
          datetime: '현재시간',
        },
      ],
    });
  }
  return nextRunner(action);
};

// export default initStates => createStore(
//   combineReducers(reducers),
//   initStates,
//   applyMiddleware(customMiddleware1),
// );

export default initStates =>
  createStore(
    combineReducers(reducers),
    initStates,
    composeWithDevTools(
      // applyMiddleware(searchFilterEffects),
      applyMiddleware(
        thunk,
        reduxPackMiddleware,
        searchFilterEffects,
        notificationEffects,
        routerEffects,
      ),
      // applyMiddleware(notificationEffects),
      // applyMiddleware(customMiddleware, customMiddleware2),
      // applyMiddleware(customMiddleware3),
    ),
  );

참고하여 알아둘것!

참고한 사이트: https://react.vlpt.us/redux-middleware/

[리액트 프로그래밍 정석] 리덕스로 데이터 관리하기_2

2021-06-02T12:26:28+00:00

화면 컴포넌트와 데이터 컴포넌트 구분하기

화면 컴포넌트

컴포넌트를 화면에 출력하는데 집중한다.

리덕스와 상관없이 프로퍼티를 통해 데이터를 전달받기만 한다.

데이터의 변경은 프로퍼티로 전달받은 콜백 함수를 호출하거나 state를 사용한다.

데이터 컴포넌트

스토어의 데이터를 컴포넌트에 전달하거나 변경하는데 집중한다.

리덕스와 깊은 연관이 있고 react-redux 공급자의 스토어를 연결하여 데이터를 관리한다.

스토어의 리듀서와 dispatch()함수를 화면 컴포넌트에 프로퍼티로 전달한다.

데이터 컴포넌트와 화면 컴포넌트 출력해 보기

connect()함수로 데이터 컴포넌트 생성하기

connect()함수의 첫번째 인자로는 mapStateToProps()함수, 두번째 인자로는 mapDispatchToProps()함수를 전달해야 한다. mapStateToProps()함수는 데이터 컴포넌트에서 필요한 데이터를 스토어에서 추출하여 객체를 반환하는 역할을 한다. connect()함수는 이 객체를 이용하여 이후 재사용되는 컴포넌트(PresentationComponent)의 프로퍼티에 전달해준다.

[07/PresentationComponent.jsx]

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

class PresentationComponent extends PureComponent {
  render() {
    const { userName, entity } = this.props;
    return (
      <div>
        이름: {userName}
        선택된 항목: {entity && `name: ${entity.name}, age: ${entity.age}`}
      </div>
    );
  }
}

PresentationComponent.propTypes = {
  userName: PropTypes.string,
  entity: PropTypes.shape({
    id: PropTypes.number,
    name: PropTypes.string,
    age: PropTypes.number,
  })
};

export default PresentationComponent;

[07/containers/ContainerComponent.jsx]

import { connect } from 'react-redux';
import PresentationComponent from '../PresentationComponent';

const mapStateToProps = (state, props) => {
  return {
    userName: state.user.name,
    entity: state.collection.entities[props.id],
  };
};

export default connect(mapStateToProps)(PresentationComponent);

[07/ActionComponent01.jsx]

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Button from '../04/Button';

class ActionComponent extends PureComponent {
  render() {
    const { setAge } = this.props;

    return (
      <React.Fragment>
        <Button onPress={() => setAge(2, 19)}>고유번호 2번 나이 19세로 변경</Button>
      </React.Fragment>
    );
  }
}

ActionComponent.propTypes = {
  setAge: PropTypes.func,
};

export default ActionComponent;

[07/containers/DispatchContainer01.jsx]

import { connect } from 'react-redux';
import ActionComponent from '../ActionComponent01';

import { setAge } from '../actions/collectionActions';

const mapDispatchToProps = dispatch => {
  return {
    setAge: (id, age) => dispatch(setAge(id, age)),
  };
};

export default connect(null, mapDispatchToProps)(ActionComponent);

[07/AdvReduxApp07.jsx]

import React, { PureComponent } from 'react';
import { Provider } from 'react-redux';
import configureStore from './configureStore';
import { setCollection } from './actions/collectionActions01';
import { setAge } from './actions/collectionActions02';

import ContainerComponent from './containers/ContainerComponent';
import PresentationComponent from './PresentationComponent';
import DispatchContainer01 from './containers/DispatchContainer01';

class AdvReduxApp extends PureComponent {
  store = configureStore({ loading: false });

  componentDidMount() {
    this.store.dispatch(
      setCollection([
        { id: 1, name: 'John', age: 20 },
        { id: 2, name: 'Park', age: 35 },
      ]),
    );
    this.store.dispatch(setAge(2, 55));
    const { collection } = this.store.getState();
    const { ids, entities } = collection;
    const originalPayload = ids.map(id => entities[id]);
    console.log(originalPayload);
  }

  render() {
    return (
      <Provider store={this.store}>
        화면 컴포넌트: <PresentationComponent userName="화면 컴포넌트" />
        <br />
        데이터 컴포넌트: <ContainerComponent id={2} />
        <br />
        액션 데이터 컴포넌트: <DispatchContainer01 />
      </Provider>
    );
  }
}
export default AdvReduxApp;

Connect함수에 대해 자세히 알아보자면…

connect함수는 컨테이너 컴포넌트르 만드는 또다른 방법이지만 사실 사용할 일이 별로 없다. useSelector,useDispatch가 편하기 때문이다. 우리가 리액트 컴포넌트를 만들 때에는 함수형 컴포넌트로 만드는 것을 우선시해야하고, 꼭 필요할 때에만 클래스형 컴포넌트로 작성을 해야만한다.(~~2019년 이전에 작성된 리덕스와 연동된 컴포넌트들은 connect 함수로 작성되었을 것ㅠ~~)

만약 클래스형 컴포넌트로 작성을 하게 되는 경우에는 Hooks 를 사용하지 못하기 때문에 connect 함수를 사용해야 함. (~~즉 앞으로 hooks 사용법에 익숙해져야한다.~~)

참고하여 알아둘것!

참고한 블로그: https://velog.io/@velopert/Redux-1-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%EA%B0%9C%EB%85%90%EC%A0%95%EB%A6%AC-zxjlta8ywt
참고한 사이트: https://react.vlpt.us/redux/09-connect.html

[이것이 안드로이드다 with 코틀린] 안드로이드와 코틀린

2021-06-02T12:26:28+00:00

안드로이드 아키텍처

빌드란?

소스 코드를 변환해서 안드로이드에서의 실행 파일인 APK 파일로 만드는 것을 빌드(Build)라고 한다. 빌드는 소스 코드를 기게어로 변환한 후 라이브러리와 연결해서 실제 실행 파일로 만드는 과정을 일컫는 용어다. 안드로이드는 리눅스 커널 기반이므로 리눅스 시스템에서의 빌드를 이해하는것이 도움이 된다.

리눅스에서의 빌드

리눅스에서의 빌드란 소스 코드를 컴퓨터가 읽을 수 있는 기계어로 번역(컴파일)하고, 내가 만든 소스 코드에서 사용하는 라이브러리와 연결(Link)해서 최종 실행 파일 형태로 만드는 것이다.

안드로이드에서의 빌드

안드로이드에서의 빌드를 이해하기 위해서는 먼저 컴파일 과정부터 다시 살피는 것이 좋다. 리눅스 컴파일과의 차이점은 안드로이드에는 리소스(Resource)라는 개념이 있다는 것이다. 안드로이드는 2단계 컴파일을 나눌수 있다. 먼저 1단계는 바이트코드 단계이다. 여기서 소스코드와 리소스(이미지 파일,음악 파일등), 라이브러리까지 한번에 컴파일 해준다. 이때 생성된 파일은 안드로이드 플랫폼에서 인식할 수 있는 바이트코드로 컴파일된다. 이 파일은 스마트폰에서 바로 실행할수 없다. 2단계는 APK 파일 생성 단계다. 안드로이드의 빌드는 1단계에서 생성된 파일을 APK 매니저라는 도구로 개발자가 설정한 패스워드와 조합해서 설치 파일인 APK 파일로 만들어준다.

컴파일이란?

Compile이란 사람이 읽을 수 있는 형태의 소스 코드를 컴퓨터가 읽을 수 있는 형태의 기계어로 변환해주는 과정이다. 컴퓨터는 기계어만 이해하고 동작하는데, 이 기계어의 구조를 사람이 이해하기 어려워 C,JAVA,KOTLIN과 같은 컴퓨터 언어가 생겨난 것이다.

참고하여 알아둘것!

참고한 블로그: https://dunkey2615.tistory.com/201
https://hongci.tistory.com/5
참고한 사이트: https://developer.android.com/studio/build?hl=ko

[리액트 프로그래밍 정석] 컨텍스트로 데이터 관리하기

2021-05-31T12:26:28+00:00

3장에서 배운 property와 state는 부모와 자식컴포넌트가 연결된 상태에서 공유하는 데이터였다. 반면 컨텍스트는 부모와 자식 컴포넌트가 연결되어 있지 않아도 데이터를 공유할수 있게 해준다. 그렇기에 현재 로그인한 유저,테마, 선호하는 언어등의 데이터를 사용하는데에 쓰인다.

컨텍스트 API란?

‘공급자와 소비자를 컴포넌트로 구현하여 컨텍스트를 구성하는 과정’은 리액트 16.3버전의 컨텍스트 API에 편입되었다. 즉 컨텍스트 API를 사용하면 일일이 공급자와 소비자를 구현하지 않아도 된다.

1. createContext()함수로 공급자와 소비자 만들기

createContext()는 리액트 최상위 함수이므로 React.createContext()와 같이 사용한다. 공급자는 Provider, 소비자는 Consumer로 정의되었다.

const MyContext=React.createContext(defaultValue);
// MyContext.Provider, MyContext.Consumer으로 접근하여 사용
// 또는 const {Provider, Consumer}=React.createContext(defaultValue);와 같이 분할 할당하여 사용

2. 컨텍스트 API로 공급자와 소비자 만들기

컨텍스트 API를 이용하여 로딩 상태를 표시하는 공급자 컴포넌트르 작성해보겠다. 컨텍스트 API를 통해 생성된 공급자와 소비자는 각각 독립된 저장 공간을 가지면서 짝을 이뤄 데이터를 공유한다.

1. createContext()함수로 공급자 만들기
여기서 setLoading()함수는 key,value,를 인자로 받아 key에 해당하는 state값을 저장한다. 예를 들어 setLoading(“loading1”,true)을 호출하면 state는 {loading1:true}가 되는것이다. 이후 render()함수가 호출되면서 컨텍스트 데이터는 {loading1:true,setLoading:this.setLoading}이 될것이다.

  
import React from 'react';

const { Provider, Consumer } = React.createContext({});

export { Consumer };

export default class LoadingProvider extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
    this.setLoading = this.setLoading.bind(this);
  }

  setLoading(key, value) {
    const newState = { [key]: value };
    this.setState(newState);
  }

  render() {
    const context = {
      ...this.state,
      setLoading: this.setLoading,
    };

    return <Provider value={context}>{this.props.children}</Provider>;
  }
}

2. 한개의 공급자를 구독하는 세개의 소비자 만들기
익스포트한 Consumer를 받아 세 개의 소비자를 만든것이다.

import React from 'react';
import PropTypes from 'prop-types';
import Button from '../04/Button';
import { Consumer } from './LoadingProviderWithNewContext';

function ButtonWithNewConsumer({ label }) {
  return (
    <React.Fragment>
      <Consumer>
        {value => (
          <Button onPress={() => value.setLoading('loading', !value.loading)}>
            {value.loading ? '로딩중' : label}
          </Button>
        )}
      </Consumer>
      <Consumer>
        {({ loading2, setLoading }) => (
          <Button onPress={() => setLoading('loading2', !loading2)}>
            {loading2 ? '로딩중' : label}
          </Button>
        )}
      </Consumer>
      <Consumer>
        {({ loading, loading2 }) => <Button>{loading && loading2 ? '로딩중' : label}</Button>}
      </Consumer>
    </React.Fragment>
  );
}

ButtonWithNewConsumer.propTypes = {
  label: PropTypes.string,
};

export default ButtonWithNewConsumer;

컨텍스트로 모달 만들기

[createModalProvider.jsx]

  
import React, { PureComponent } from 'react';
import Modal from './Modal';
import { Provider } from './ModalContext';

export default function createModalProvider(ContentMap = {}) {
  return class ModalProvider extends PureComponent {
    constructor(props) {
      super(props);
  
      this.state = { showModal: false };
      this.handleClose = this.handleClose.bind(this);
      this.handleOpen = this.handleOpen.bind(this);
    }

    handleOpen(contentId, modalProps) {
      this.contentId = contentId;
      this.modalProps = modalProps;
      this.setState({ showModal: true });
    }

    handleClose() {
      this.setState({ showModal: false });
    }

    render() {
      const { children } = this.props;
      const { showModal } = this.state;
      const ModalContent = ContentMap[this.contentId];
  
      return (
        <Provider
          value=
        >
          {children}
          {showModal && ModalContent && (
            <Modal>
              <ModalContent {...this.modalProps} />
            </Modal>
          )}
        </Provider>
      );
    }
  };  
}

[DeleteModalContent.jsx]

import React from 'react';
import { Consumer } from './ModalContext';
import Button from '../04/Button';
import Text from '../04/Text';

export default function DeleteModalContent({ id, name }) {
  return (
    <Consumer>
      {({ closeModal }) => (
        <div>
          <div>
            <Text>
              {name}을 정말로 삭제 하시겠습니까?
            </Text>
          </div>
          <Button primary>예</Button>
          <Button onPress={closeModal}>닫기</Button>
        </div>
      )}
    </Consumer>
  );
}

[CreateMemberModalContent.jsx]

import React, { PureComponent } from 'react';
import { Consumer } from './ModalContext';
import Button from '../04/Button';
import Text from '../04/Text';
import Input from '../03/Input';

class CreateMemberModalContent extends PureComponent {
  render() {
    return (
      <Consumer>
        {({ closeModal }) => (
          <div>
            <div>
              <Text>회원가입</Text>
              <div>
                <Input label="이메일" name="email" />
              </div>
              <div>
                <Input label="이름" name="name" />
              </div>
              <div>
                <Input label="비밀번호" name="password" />
              </div>
            </div>
            <Button primary>가입하기</Button>
            <Button onPress={closeModal}>닫기</Button>
          </div>
        )}
      </Consumer>
    );
  }
}

export default CreateMemberModalContent;

[ModalProviderWithKey.jsx]

  
import createModalProvider from './createModalProvider';
import DeleteModalContent from './DeleteModalContent';
import CreateMemberModalContent from './CreateMemberModalContent';

export const CONFIRM_DELETE_MODAL = 'confirm_delete_modal';
export const CREATE_MEMBER_MODAL = 'create_member_modal';

const CONTENT_MAP = {
  [CONFIRM_DELETE_MODAL]: DeleteModalContent,
  [CREATE_MEMBER_MODAL]: CreateMemberModalContent,
};

export default createModalProvider(CONTENT_MAP);

[ModalStory.jsx]

  
import React from 'react';
import { storiesOf } from '@storybook/react';

import Modal from '../06/Modal';
import ModalProvider, { Consumer } from '../06/ModalProvider';
import ModalProviderWithKey, {
  CONFIRM_DELETE_MODAL,
  CREATE_MEMBER_MODAL,
} from '../06/ModalProviderWithKey';
// import { Consumer as ModalConsumer } from '../06/createModalProvider';
import { Consumer as ModalConsumer } from '../06/ModalContext';
import Button from '../04/Button';
import Text from '../04/Text';
import ButtonWithModal from '../06/ButtonWithModal';

storiesOf('Modal', module)
  .addWithJSX('기본 설정', () => (
    <Modal>
      <div>
        <Text>정말로 삭제 하시겠습니까?</Text>
      </div>
      <Button primary>예</Button>
      <Button>닫기</Button>
    </Modal>
  ))
  .addWithJSX('ButtonWithModal', () => <ButtonWithModal />)
  .addWithJSX('ModalProvider', () => (
    <ModalProvider>
      <div>
        <Text>다음 버튼 눌러 모달을 실행합니다.</Text>
        <Consumer>{({ openModal }) => <Button onPress={() => openModal()}>삭제</Button>}</Consumer>
      </div>
    </ModalProvider>
  ))
  .addWithJSX('ModalProviderWithKey', () => (
    <ModalProviderWithKey>
      <div>
        <Text>다음 버튼 눌러 모달을 실행합니다.</Text>
        <ModalConsumer>
          {({ openModal }) => (
            <Button onPress={() => openModal(CONFIRM_DELETE_MODAL, { id: 1, name: '상품1' })}>
              모달 열기
            </Button>
          )}
        </ModalConsumer>
        <ModalConsumer>
          {({ openModal }) => (
            <Button onPress={() => openModal(CREATE_MEMBER_MODAL)}>회원 가입</Button>
          )}
        </ModalConsumer>
      </div>
    </ModalProviderWithKey>
  ));

참고하여 알아둘것!

참고한 사이트: https://ko.reactjs.org/docs/context.html
참고한 블로그: https://velopert.com/3606
~~갓 벨로퍼트…~~