Category: K-MOOC

bookmark_border모두를 위한 수학

Posted on

2024-5-100

위대한 수업3(GREAT MINDS) : 모두를 위한 수학 – 테렌스 타오

1강. 직관적으로 문제 이해하기

  • 수학을 이해할 능력
    • 기호와 용어 : 어려움
    • 숫자와 도형 : 쉽게 이해
  • 1단계 : 규칙 이전 단계
    • 쉽게 이해, 가장 큰 수는 없다.
  • 2단계 : 규칙 단계
    • 학교, 덧셈, 뺄셈, 공식, 정확한 답
    • 직관이 허용되지 않음, 기계적 계산
  • 3단계 : 규칙 이후의 단계
    • 석.박사, 정식교육과 직관이 이어짐
    • 직관과 계산이 맞는지 검증
    • 옳은 직관만 남음. 가장 큰 수 검증.
  • 신호처리기술
    • 벡터의 긴 수열로 처리
    • 이미지를 메가픽셀 (100만x3(RGB)=300만)로 표현
    • 평면 두 숫자, 공간속 위치는 세 숫자의 벡터
  • 300만 차원의 한점인가?
    • 방법1 수학 이론 이용하기
    • 방법2 직관 이용하기
    • 유클리드 첫번째 공준 : 공간 사이에 두 점을 찍음. 이 공준은 300만 차원에서도 사실
    • => 이를 이용 : 모핑, 단절없이 얼굴을 다른 얼굴로 바꾸는 기술

수학 교육은 악보 보는 법과 음계 연습만 가르치는 음악 교육과 같다.

– 폴 록하드(1961~)

2강. 어려운 문제를 푸는 법

여러분야는 성공만 해야 한다. 실패의 댓가가 크다.
그러나, 수학은 다르다. 수 많은 시행착오를 할 수 있다.

전문가란 세부 전문 분야에서 일어날 수 있는 모든 실수를 다 해 본 사람이다.

– 닐스 보어 (1885~1962) 덴마크 물리학자
  • 케플러
    • 코페르니쿠스 지동설 : 완벽한 원형.
    • 궤도를 계속 바꿔봤지만 일치하지 않음.
    • 그렇다면 공전궤도가 원형이 아니다.
    • -> 삼각 측량법 (항해기술, 고정된 2개의 지표로 배의 위치 확인) 사용
    • 2개 지표 필요 : 태양, 화성(고정되어 있다고 가정)
    • 화성은 687일마다 제자리로 온다 (코페르니쿠스)
    • -> 687일마다 관측, 시계열에 맞춰 관측하면(687일, 1374일, ..) 태양도, 화성도 고정된 상태 => 지구의 위치 확인, 화성의 위치 확인
    • 케플러의 행성 운동 법칙

3강. 그룹 테스트: 매독 환자 골라내기

  • 그룹테스팅
    • 2차세계대전 매독검사 : 검사비용
    • 혈액을 섞어서 검사
    • 10명 > 5명 > 2명
    • 동전무게재기 : 가짜 동전 가려내기
    • MRI 압축센싱 : 필요한 영역만 고품질로

4강. 최고의 검색 엔진 만들기

  • 초기 검색엔진
    • 무작위
    • 효용성이 고려되지 않음
  • 수작업 쉬위표 : 한계
  • 자동 순위표 필요
  • 그래프 라는 추상적 이미지로
  • 링크로 중요한 페이지
    • 단계1. 그래프 만들기
    • 단계2. 순위 매기기
      • 많은 링크가 걸린 곳
    • 문제는 링크마다 중요도가 다름

수학적 실패는 부분적 성공이다.

  • 중요도 값을 계속해서 변경
  • 계속해서 반영
  • 갱신의 반복은 행렬의 곱셈
  • 계속 반복하면 중요한 웹페이지의 순위가 정해짐
  • 수십억의 사이트에서는 쉽지 않음.
    • 인터넷 전체를 계산 불가능
  • 스파이더 프로그램 : 링크를 타고 웹 페이지를 하나씩 돌아다니면 정보를 수집한 후 가중치를 하나씩 갱신
  • 세르게이 브린과 래리 페이지 -> 알고리즘 특허 : ‘페이지랭크‘ => 구글
  • 그래프 이론과 행렬 곱셈으로 웹 페이지에 순위를 매김

5강. 스마트폰이 내 얼굴을 알아보는 법

알파고

  • 어린이 수학퀴즈
    6, 14, 36, 98
    수열끝에 가장 어울리는 수는?
  • 회귀 Regression
    변수간의 관계를 분석하는 통계학적 방법
  • 좌표평면의 점과 같다
    일단 학습용 데이터를 ‘산점도’라는 그래프로 정리
  • 선형회귀
  • 다차원 데이터도 회귀 분석이 가능
  • 초기 회귀분석은 2~4개의 변수, 즉 2~4의 자유도만 다루었다.
  • 자유도 : 표본 자료 중 모집단에 대한 정보를 주는 독립적인 자료의 수
  • 사실 기계학습은 그 하나만으로도 학문
  • 지도학습: 일단 입력값과 출력값을 짝지어 학습시키는 방법
  • 비지도 학습 : 출력값을 주지 않고 미가공 데이터만 넣고 기계가 답을 추측, 이미지와 패턴만 주고 규칙을 알아서 배우게 하는 방법
  • 강화학습 : 기계가 답을 맞히면 상을 주고 틀리면 벌을 주는 방법, 기계가 점진적으로 전략을 바꿈

bookmark_border과학의 풍경

Posted on

위대한 수업3(GREAT MINDS) : 과학의 풍경 – 프랭크 윌첵

프랭크 윌첵 : 애니온, 시간결정

1강. 흄의 단두대를 피하는 방법

“과학에는 아무런 목적성이 없다.” – 데이비드 흄

사실(과학)과 가치(비과학)사이에는 피할 수 없는 간격이 존재하며 이를 서로 엮으려 하면 죽는다. – 흄의 단두대

흄의 단두대를 피하는 방법

사실(What is)을 알아내고 그 속에서 가능성(What could be)을 찾아내어 궁극적으로 당위(What should be)를 선택해 가는 것이다.

기나긴 인류 역사 중 19세기를 통틀어 가장 중요한 사건은 누가 뭐래도 맥스웰이 전자기학 법칙을 발견한 것이다.
– 리처드 P. 파인만

물리학 대부분과 화학 전체를 수학적으로 다루는데 필요한 기본 법칙은 이미 밝혀졌다.
단지 그 법칙들을 적용해 복잡한 방정식을 푸는게 어려울뿐이다.
– 폴 디렉

코어이론 – 세상의 작동 원리

과학은 우리에게 가능성을 알려주고 그것으로 우리는 무엇을 해야하는지 예리하게 논할 수 있다.
어떤 미래가 가능한지 잘 살펴보고 우리가 바라는 바를 정하는 것이다.
그리고 다시 과학을 통해 해야 하는것을 과학으로 만드는 것이다. 즉, 과학을 통해 목표를 정할 수 있다.

2강. 양자역학에 만든 세계

원자 시계, 시뮬레이션, 컴퓨터 등에 활용

‘기본법칙은 이미 밝혀졌지만 방적식을 푸는게 어려울 뿐이다’는 폴 디렉의 말은 현존하는 세계를 잘 설명하고 있다.

컴퓨터를 활용하여 항공역학 풍동실험을 대체

양자 컴퓨터, MRI, 질산 공동센터 다이아몬드.

결론은 먼 미래에는 에너지가 아주 풍족해질것이다.

다이슨스피어, 궤도 엘리베이터, 초소형 의사

“세상은 양자역학에 기반한다.”
자연은 고전역학을 따르지 않는다.
자연을 모사하려면 양자역학을 취해야 한다.
문제는 그게 결코 쉽지 않다는 것이다.
– 리처드 P. 파인만

3강. 아름다움이란 무엇인가?

자신에게 준 영감

‘당위성 (Should be)’을 찾아야 무엇이 사실인지를 똑바로 볼 수 있다.

아름다움은 진실을 이끈다.

프렝크 윌첵
  • 아름답다?
    • 간결해야 한다.
      • 사실을 분명하고 짧게 설명할 수 있어야 한다.
    • 조화로워야 한다.
      • 잘 어울려서 만족스러운 상태이어야 한다.
    • 대칭
    • 놀이

간결함

  • 프롤레마이오스 (AC. 150) : 천구의 움직임 설명
    • 간결하지 않고 호성의 이상한 움직임
  • 코페르니쿠스
  • 아이작 뉴튼 (1642 ~ 1727)
    • 더 정확하고 일반적인 체계로 행성의 운항을 설명
    • 만유인력의 법칙

자연은 낭비가 없고
필요 이상으로 많은 원인은 낭비이다.
자연은 단순해서
불필요한 원인이라는 낭비를 피한다.

아이작 뉴튼 (1642~1727)

“그래야만 하는것(Should be)”에 더 잘 맞았다.
헬리혜성 예

조화

제임스 맥스웰 (1831~1879)
– 전자기장 법칙을 정리하려 노력
– 전기장. 자기장이 어울리도록 더 아름답게 유도

– 전기장이 변하면 자기장도 변화. 그렇다면 자기장이 변하면 전기장도 변해야. 더 조화롭게. 전하량 보존에도 적합

맥스웰 방정식

빛은 전기장의 요동으로 이해하게 되었고, 새로운 빛도 만들어 낼 수 있게 되었다.

원자핵에 대한 이해

강입자에 대한 이해

데이터가 아니라 ‘추측’이 우리를 진실로 이끌었다.

더 간결하고 조화롭게 균형잡힌 설명을 찾으려고 노력하였다.
– 대칭으로 찾음.
– ‘양자색역학’ QCD : 맥스웰의 방정식에 색을 입힘.
– 쿼크나 글루온은 절대로 독립적으로 관측되지 않기 때문에 실험으로 밝힐 수 없었다.
– 과감한 ‘상상력’이 필요했다.
– 균형있고, 조화롭고, 간결한 진실이 있다고 생각하려 노력하였다.
==> 노벨상

4강. 물리 법칙의 이상형, 대칭

대칭 (Symmetry)

인간은 ‘대칭’을 좋아합니다.
– 대칭적인 건물, 장식, 성당
– 프랙탈
– 균형과 매력을 느낌

진화는 ‘대칭’을 좋아합니다.
– 캡시드, 바이러스의 대칭적 구조
– 나무의 프랙탈 구조
– 브로콜리, 콜리플라워

왜 대칭적일까?

단순한 성장 법칙이기 때문이다. 즉, 자연의 기본 작동 방식에 대칭의 원리가 있다.
– 결정체를 수학적으로 연구해보면 알 수 있다.

양자역학과 대칭

‘대칭’ 이란 ?
– 대칭이란 ‘변화 없는 변화‘ 이다.
– 사각형, 삼격형을 돌리면 다시 제자리로 간다. 대칭성이 있다.
– ‘변화 없는 변화’는 물체가 도형뿐만 아니라 개념이나 법칙, 방정식에도 적용되는 개념이다.
– 맥스웰의 방정식
– 양자 색역학, 글루온
– 상상으로 대칭성을 알아냄.

맥스웰의 방정식
양자 색역학
글루온

5강. 이 세계는 아름다운가 ?

‘시간 역전’
– 시간이 거꿀로 흐른다고 가정해도 같은 법칙에서 나온다는 것
– 거꾸로 움직이는 영화를 똑같은 법칙으로 설명할 수 있다.
– 거시세계에서는 이상하게 보이지만, 지극히 작은 세상에서는 시간이 어느쪽으로 흐르든 법칙이 똑같다.

질문1. 그런데 왜 현실은 다르게 보이는걸까?
– 열역학 제2법칙, 엔트로피의 증가
– 빅뱅 이후 비대칭으로

질문2. 그런데 왜 물리학 법칙은 대칭적일까?
– K 중간자 연구, 시간 역전, 엑시온
– 법칙을 더 아름답게 만들려고 입자를 추가, 결과는 훌륭, 엑시온 생성
– 이 엑시온을 암흑물질로 볼 수 있다. 엑시온이 암흑물질인지는 연구중.

놀이

나는 그저 ‘방정식을 갖고 놀며 결과를 관찰할 뿐’이다. – 폴 디랙 (1902~1984)

나도 그랬고 나의 놀이 같은 상상이 실제 물질로 나타났다. – 프랭크 윌첵

세상이 날 어떻게 보든
난 내가 지식의 광활한 바닷가를 거니는
아이라고 생각한다.
난 드넓은 미지의 바다 앞에서
간혹 반짝이는 조약돌을 찾고
즐거워 할 뿐이다.

아이작 뉴튼

bookmark_border다중지능이론

Posted on

위대한 수업3(GREAT MINDS) : 다중지능이론

하워드 가드너 교수

1장. 다중지능이란 무엇인가?

다중지능이론(Theory of Multiple Intelligence)
: 지적 능력을 측정할때 IQ처럼 한대의 컴퓨터가 아닌 여러대의 컴퓨터(개별지능)가 관여한다는 이론

  1. 언어지능
    • 시인
  2. 논리수학지능
    • 프로그래머
    • 언어지능과 논리수학 지능 측정이 IQ 테스트 : 둘 다 뛰어나면 법대 교수
  3. 음악지능
    • 작곡가
  4. 공간지능
    • 비행기 조종사
  5. 신체운동지능
    • 운동선수, 외과의사
  6. 인간친화지능
    • 다른 사람에 대한 이해 능력
    • 게임, 경쟁 잘하는 사업가, 교육자, 상담사
    • 사회지능, 정서지능 이라고도 함
  7. 자기성찰지능
    • 자기 자신을 잘 이해하는 능력
    • 측정이 어려움
    • 당신이 당신 자신을 잘 이해하는 사람인지는 당신의 상담사만 알 수 있습니다.
    • 점점 더 중요해짐. 서양에선 자기성찰이 오랫동안 중시된 반면 아시아는 ‘인간친화’에 더 초점을 맞춰 온 듯
    • 일반적으로는 이 7개 지능을 사용.
  8. 자연관찰지능
    • 식물.동물 구분 능력, 구름.나무.암석 구분 능력
  9. 실존지능
    • 큰 질문을 숙고하는 능력
    • 삶이란 무엇인가? 사랑은 무엇인가? 왜 누군가를 싫어하는가?
  10. 교육적 지능
    • 인간친화지능에 포함될 수도 있음.
    • 좋은 측정방법은 대상에 따라 가르치는 방법을 바꿀 수 있는지를 확인하는 것 (ex:나이가 많은 어른과 적은 어린아이)
    • 이런 사람에게는 이정도로 가르쳐야 한다는 것을 아는 능력
    • 비계설정(scaffolding)

2장. 아이는 어떻게 배우는가?

  • 지능 프로파일
    • 개별 학습자가 가진 다중지능의 강점과 약점
    • 수학을 잘하는 학생이 운동까지 잘할 수 없음
    • 따라서 각 지능은 비교적 독립적임
  • 다중지능이론을 교육에 적용
    아이들이 어떠한 특화된 지능을 가졌고, 특화된 지능을 개발하기 위한 방법
개별화 교육다원화 교육
– 아이에 대해 최대한 많은 걸 알아내야 함
– 각 아이에게 맞는 학습 기회를 제공
– 현대사회는 스마트기기로 개별화 교육이 훨씬 수월
– 선생, 부모, 개인교사만 개별화를 고민하는 게 아니라 아이 스스로도 자신에게 맞는 방법이 무엇인지 제시할 수 있음		– 믿음을 바탕으로 함
– 한가지 방법이 아닌 다양한 방법으로 접근
– 중요한 과목이나 주제라고 해도 한 가지 방법으로만 가르쳐서는 안됨
– 다원화에 접근하는 다양한 ​시작점이 존재 (시작점에 따라 서로 다른 지능이 더 많이 혹은 적게 반영)

인간은 어떻게 배우는가?

  • 세가지 사례로 연구
    • 과학 : 다윈
    • 예술 : 피카소
    • 현대역사 : 홀로코스트
  • 시작점 1 : 서로 다른 지능의 시작점(entry point)
  • 시작점 2 : 숫자
  • 시작점 3 : 논리
  • 시작점 4 : 실존
    • 인류의 기원은? 아름다움의 의미는? 인간이 행할 수 있는 끔찍한 일은?
  • 시작점 5 : 예술
    • 다윈은 수많은 동물 그림을 그림

가르칠 가치가 있다면 시간을 들여야 합니다. 학습자도 교사도 주제를 더 잘 이해할 수 있습니다. 아이들은 늘 교사의 의도대로 받아들여지지 않습니다.

하워드 가드너

3장. 지능이 높으면 창의성도 높을까?

  • 지능과 창의성 사이에는 어떤 관계가 있는가?
  • 창의성은?
    • 훈련이나 연습으로 만들어질까?
    • 아무도 안한것을 찾아내는건가?
    • 그런 방법은 안통하고 장애물을 만들어야 합니다.
  • 무엇이 창의적인 것인가?
    • 창의성이 무엇인지 묻지 말고 어디에 있는지를 찾아보는 방법으로 연구
    • 창의성은 사람의 내면에 있는것이 아니라,
      지식과 능력을 통한 사람 사이의 상호작용
      활동분야 즉 ‘영역’에서 나타난다
    • 개인의 영역이 아닌 시를 쓰든지, 물리학, 정치, 조직에서 나타난다.
  • 창의성이 높은 사람들에 대한 연구(ex. 피카소, 아인슈타인, 노벨상 받은 사람 등)
    • 다들 둘 이상의 지능을 갖췄으나 모든 지능이 높은것은 아니었다.
    • 여러 지능을 함께 활용해 특출난 사람이 됐다고 볼 수 있음.
    • ’10년 법칙’ : 재능을 개발하는데 10년 이상 걸렸다
    • 다들 벼랑끝에 있었고, 괜찮다. 곧 너를 이해하게 될거야 반복
    • 10년마다 성과. 안주하지 않음.
    • 도시가 아닌 시골에서 살았음.
    • 10년을 채울 때쯤 도시로 이주. 자신과 비슷한 사람을 찾아 친구로 삼고 능력을 공유
    • 뛰어날수록, 일반인의 궤도를 벗어나는 수준의 창의성이 발휘 될수록, 이들은 고립됨.
    • 창의적인 사람들은 고립되었을 때 극복할 기회를 잡는게 매우 중요함.
  • 창의성의 4가지 단계
    • 큰 창의성 : 매우 드믐
    • 중간 창의성 : 흔한 창의성(ex. 베스트 셀러 작가, 문학상 등). 그러나 100년 뒤엔 잊혀짐.
    • 작은 창의성 : 중간 창의성을 가진 자들보다 많음. 대부분이 꿈꿀 수 있을 정도. (ex. 근사한 휴가 계획, 이직 계획 등)
    • 미세 창의성 : 컴퓨터와 SNS 시대. (ex. 트위터, 틱톡, 페이스북 등). 오래가지 못하고, 타인의 생각을 바꾸지도 못함. SNS에 10년을 쏟아부을 바엔 다른 걸 하는게 나음. 이것으론 큰 창의성은 커녕 중간 창의성에 도달하기 힘듦.
  • 창의적인 사람이 되고자 한다면 모험이 필요합니다.
    • 시도하고 실패하고, 다시 시도하고 다시 실패하고. 낙담하지 말고 주변에 도움을 구하기.
    • 비웃음 당하고 쓰러져도 다시 일어날 수 있을까?
    • 대부분은 그러지 못함.
    • 동양보다는 서양에서 극복가능성이 더 크다고 생각함(유교사회)
    • 창의성을 발휘하려 최선을 다해 어떤 수단도 익혔고, 판단이 이루어지는 방법도 이해했고, 실패하더라도 다시 시도할 각오. 자신의 창의성을 깨닫지 못하고 죽을 수도 있음. 그렇기에 창의성이 없다고 단정할 수 없음. 지금은 몰라도 나중에 인정받을 수 있으니까.

4장. 지도자는 어떤 지능을 가졌는가?

  • 지도자가 되다는건 어떤 의미인가?
  • 지도자는 어떤 지능을 가졌는가?
  • 지도자는 ‘이야기 하는 사람’입니다.
    • 추종자를 만들고, 추종자의 마음을 바꿀 수 있다.
    • 말만 하는게 아니라 구현
    • 다른이의 마음을 바꿀 수 있는 사람
  • 사례연구 : 링컨, 간디, 마가렛 대처
    • 이들은 모두 이야기로 다른 사람들에게 영향을 미쳤습니다.
  • 지도자는 창의적인 사람처럼 위험에 정면으로 맞섭니다.
    • 기회를 잡거나 실패하는 걸 두려워 하지 않습니다.
    • 남을 짓밟지 않으면서 정면으로 맞서는 능력 (마셜장군)
    • 미디어를 잘 활용 : 노변정담
    • 언어지능, 인간친화지능

5장 유능한 직업인이 되는 방법

  • 사람들은 지능을 어떻게 활용하는가?
  • ‘굿워크’는 무엇인가?
    • 그저 능숙하게 해내는게 아니라 목적이 선하고 긍정적이어야 합니다.
    • ‘굿워크’는 ‘삼중나선’이라 부르는 세계의 ‘E’로 구성
    • Excellent : 좋은 실력
    • Engaging : 사람들이 일하고 싶어짐
    • Ethical : 늘 윤리적일 수는 없지만, 옳은 일을 하기 어려울 때조차 그렇게 행동하려는 사람이야말로 윤리성이 뛰어난 사람
    • ‘굿워크’는 기술적으로 훌륭하고 사람들은 끌어들이고 긍정적이고 친사회적 방식으로 일어나는 일입니다.
이웃의 도덕역할 윤리
인류가 수천 년 실천해 온 것
네 부모를 공경해라, 살인하지 마라, 거짓말하지 마라 등
‘황금률’ (자신이 대접받고 싶은 대로 남들을 대접하는 것)		전문직(의사, 법조인, 과학자 등)
무엇이 옳은 일인지 명확하지 않을 때가 있음. 황금률만 따른다고 충분한 게 아니며 쉬운 답이 없는 상황이 있음
역할 윤리는 주어진 상황에서 최선을 찾아야 함.
상황을 반추하고 남들과 얘기하고 책을 읽거나 규범도 찾아보고 최선의 결정
  • 좋은 시민
    • 법과 규칙을 아는 사람
    • 선거도 하고, 항의도 하고, 사회에 참여.
    • 나에게 좋은 일보다 사회, 이웃, 시민에게 무엇이 좋은지 고민
  • 딜레마를 해결하는 D. 5단계
    • Define(정의)
    • Discuss(상의)
    • Debate(토론)
    • Decide(결정)
    • Debrief(점검)

인류세가 끝나가는 이 무렵, 인공지능이 인간을 대체하는 상황이 많지만, 인간이 존재하는 한, 옳고 그름을 결정하는 걸 컴퓨터에 맡기지 말아야 합니다.

윤리적 딜레마에 해당하는 일은 인간이 직접 결정을 내려야 하고 모든 정보를 종합해 최선의 결정을 해야 합니다.

늘 고민해야 합니다.

무엇이 인간을 인간답게 만드나?
우리는 어떻게 인간다워졌나?
어떻게 해야 더 인간다워질까?

하워드 가드너

bookmark_border쉽게 듣는 실용음악 – 어서와 실용음악은 처음이지?

Posted on

정수욱 – 호원대학교

1. 실용음악이란

대중음악의 의미

  • 실용음악 (Applied Music)
    • 실용음악, 대중음악, 팝음악
    • 대중음악
      • 실용음악은 대중음악 보다 넓은 의미
      • 벨소리, 가전제품 소리 등 포함
    • 실용음악은 대중음악보다는 현대음악
    • contemporary music
  • 서양 대중음악 : 클래식, 블루스, 재즈
  • 예술성과 상업성
  • 엔디 워홀 : 팝 아트 : popular
  • 이전 시대에 없었던 예술의 형태
  • 실용음악 안에서 음악이 갖고 있는 본질적인 부분들에 대한 고민
  • 스타일과 장르의 구분 없이 여러가지 음악을 활용하는 부분에 대한 논의
  • 그것들이 존재하는 이유와 그것들이 존재하는 방법

대중음악과 문화

  • 음악성 (Musicality)
    • 진정성 : 진솔함, 전통성
    • 창의성 : 상상력, 재창조
      • 유능한 예술가는 모방하고, 위대한 예술가는 훔친다.
    • 개성 : 다양성과 취향의 존중
      • 음악적 스타일
      • 장르와 스타일
      • 장르 : 많은 사람들이 공유, 보통은 장르 안에 스타일
      • 장르가 또다른 스타일이 되는 음악 형태 존재
  • 보편적 특징

실용음악의 음악성

  • Pop music
    • 팝음악
  • World music
    • 한글로 불려진 노래, 국악 퓨전 등
  • 서양 대중음악
    • 블루스와 재즈로부터 출발한 서양 팝
    • 블루스와 재즈의 차이
      • 블루스 : 보컬에 가장 큰 영향을 준 스타일
      • 재즈 : 인스트루멘탈 부분에 가장 영향을 많이 준 장르
    • 블루스와 재즈는 중요한 대중음악의 기반
    • 재즈
      • 마일즈 데이비스 : Kind of Blue – Miles Davis
    • 싱글과 앨범
      • 재즈가 앨범을 잘 활용
  • 비틀즈
    • 초창기 : 사랑이야기에 관한 음악
    • 중반기 : 자기 성찰적 음악, Yesterday
    • 후반기 : 표현의 솔직함과 음악 자체에 대한 인정 및 존중
  • 음악성을 보여줄 수 있는 음악이 오래 남을 수 있는 음악
    • You’ve Got A Friend – Carole King
      • 포크 음악 : 사회적 이슈, 퍼스널한 가사, 민속음악
      • 밥 딜런, 캐롤 킹등에 의해 포크 장르로 발전
      • 가사가 주는 음악적 진정성, 멜로디, 악기 구성
    • Dancing Queen – ABBA
      • 디스코 > 테크로 > 힙합
      • 댄스음악
    • 70년대 말 : 서양 대중음악의 정점

2. 실용음악의 구조

스케일: 멜로디와 하모니의 재료

  • 서양음악의 구조
    • 수학적, 논리적
    • 총 음의 개수 : 12개
    • 피타고라스의 순정률
      • 12음의 간격과 동일한 평균율 음의 배열
  • 소리
    • 주파수
    • Sound > Pitch > Note > Melody
    • 크로매틱 스케일
      • 반음계
      • 옥타브(완전 8도) 이내의 모든 반음을 높은 순으로 늘어 놓은 스케일(음계)
      • 12음으로 구성
    • 옥타브(Octave)
      • 음의 거리
      • 2배 간격에 있는 음.
      • 같은 음이지만, 다른 높이
      • 평균율 : 12음으로 나눈 시스템
      • 스케일 : 크로매틱 12음을 가진 배열
      • 크로매틱 스케일 : 12음이 동일한 간격, 어떤 음에서 출발해도 같은 간격
    • 장음계
      • 도레미파솔라시도
      • 장조
      • Major Scale
    • 음(정) 간격
      • 반음(최소단위) : 단2도 Half Step
      • 온음 : 반음 x 2 Whole Step
  • 음악의 3 요소 : Melody, Harmony, Rhythm
    • Melody : 한번에 한음
    • Code : 2개 이상의 음이 동시에 날때
  • Note
    • 440Hz = A(가)
      • Hz : 진동수, 회전한 회수
      • 인이 들을 수 있는 20Hz ~ 20,000Hz
    • Note A
    • Note 간격 = 음정 간격
    • 음 = Note
    • 음정 : 음과 음사이의 거리
    • A와 B는 온음 간격
  • 장조
    • 메이저 스케일
    • 중요한 기준점

리듬1 : 리듬의 3요소와 템포

  • 리듬
    • 부정맥 (Arrhythmia) : 심장박동이 일정치 않은 것
    • 규칙적인
    • 리듬의 시작 : Pulse
    • 리듬의 음악적 구조
      • Tempo : speed
      • Meter (박자)
      • Groove (Rhythmic feel)

bookmark_borderCordova Todo List

Posted on

Cordova Todo List 프로젝트

mytodolist 프로젝트 생성 및 시험

D:\cordova>
> cordova create mytodolist com.example.mytodolist MyTodoList
> cd mytodolist
> cordova platform add android
> cordova run android

NodeJS 서버

index.js

var todos = [];

클라이언트

mytodolist.js

var todos = [];

$.ajax("http://localhost:3000/todos").done(function(result) {
    console.log(result);

    todos = result;
    for (const todo of todos) {
        $(".contents ul").append(liTemplate(todo.text, todo.checked));
    }
});

$("#addButton").click(function() {
    var text = $("#inputBox").val();
    todos.push({ text: text, checked: false });
    $("#inputBox").val("");
    console.log(todos);

    $(".contents ul").append(liTemplate(text, false));
    saveTodos();
});

function liTemplate(text, checked) {    
    var li = $('<li></li>');

    alert(text);
    li.attr('value', text);
    li.append(inputTemplate(text, checked));
    li.append(text);
    li.append(buttonTemplate());

    li.click(function(event) {
        var el = $(event.target);
        var index = el.index("li");
        console.log(index);
    
        if (el.is("button")) {
            todos.splice(index, 1);
            $("li")[index].remove();
        }
        else if (el.is("input[type='checkbox']")) {
            var isChecked = el.is(":checked");
            if (isChecked) {
                $($("li")[index]).addClass("checked");
                todos[index].checked = true;
            } else {
                $($("li")[index]).removeClass("checked");
                todos[index].checked = false;
            }
        }

        saveTodos();
    });    

    return li;
}

function inputTemplate(text, checked) {
    var inputTag = $('<input type="checkbox" id="checkBox">');
    inputTag.attr('checked', checked);
    return inputTag;
}

function buttonTemplate(text) {
    var buttonTag = $('<button id="delButton">X</button>');
    return buttonTag;
}

빌드 및 시험

> npm run start

npm ERR! Missing script: "start"
==>
package.json
"scripts": {
    "start": "node index.js"
  },

Error: Cannot find module 'express'
==>
> npm install -save express

> cordova run android

플러그인 설치

날짜선택 플러그인

알림 플러그인

function onSuccess(date) {
    var text = $("#inputBox").val();
    todos.push({ text: text, checked: false, date: date });
    $("#inputBox").val("");
    console.log(todos);

    $(".contents ul").append(liTemplate(text, false, date));
    saveTodos();
}

$("#addButton").click(function() {
    datePicker.show(options, onSuccess, onError);
});

bookmark_borderCordova

Posted on

Cordova

  • 오픈소스 하이브리드 앱 개발 도구
  • 웹 기술을 이용해 개발
  • 윈도우, OS X, 리눅스에서 사용 가능
  • 안드로이드, iOS, Mac OS X, 윈도우 등 멀티 플랫폼 지원
  • 플러그인을 통한 확장
  • Cordova 의 한계
    • 네이티브 앱에 비해 성능이 떨어짐
    • 플러그인 개발의 어려움

Cordova의 작동원리

Cordova 개발환경

  • NodeJS / Cordova
  • 플랫폼 별 요구사항
    • 안드로이드: JDK, 안드로이드 SDK
  • JDK 다운로드 및 설치
  • 안드로이드 스튜디오 설치
  • Cordova 설치
    • > npm install –g cordova
    • > cordova –version
  • 새 Cordova 프로젝트 생성
    • > cordova create hello com.example.hello HelloWord
    • > cd hello
  • 안드로이드 에뮬레이터 생성
    • > More Actions > Virtual Device Manager > Create virtual device > Pixcel2 > download >
    • > cordova platform add android@8.0.0
    • > cordova run android
      • Android SDK의 경로를 찾지 못하는 문제
        • ANDROID_SDK_ROOT=undefined (recommended setting)
        • > More Actions > SDK Manager > Android SDK Location 확인
        • set ANDROID_SDK_ROOT=C:\Users\user\AppData\Local\Android\Sdk
      • Gradle 을 찾지 못하는 문제
      • javac 를 찾지 못하는 문제
        • Failed to run “javac -version”, make sure that you have a JDK version 8 installed.
        • set PATH=%PATH%;C:\SDK\jdk1.8.0_321\bin;
    • Android Emulator가 띄워져 있는 상태에서 실행
    • 영구적 PATH 등록 : 설정 > 정보 > 고급 시스템 설정 > 환경 변수 > 시스템 변수 > path 에 추가
      • C:\SDK\gradle-7.2\bin
      • C:\SDK\jdk1.8.0_321\bin

코도바 플러그인 설치 및 사용

Cordova 플러그인 설치

Cordova 플러그인

  • NodeJS 의 NPM 과 같이 Cordova 의 기능을 확장
  • 웹 앱에서 OS 기능을 사용하려면 플러그인이 필요
  • OS 종속 코드와 자바스크립트 인터페이스로 이루어짐

Cordova 플러그인 설치 및 삭제

Cordova 배터리 상태 플러그인

  • 디바이스의 배터리 잔량 확인
    • batterystatus 이벤트 -> status.level
  • 디바이스의 충전상태 확인
    • batterystatus 이벤트 -> status.isPlugged
  • 디바이스의 배터리 경고 확인
    • batterylow 이벤트
    • batterycritical 이벤트
  • 플러그인 설치
    > cordova plugin add –save cordova-plugin-battery-status

index.html

    <body>
        <div>
            <span id="battery">100</span>%
        </div>
        <script src="cordova.js"></script>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/index.js"></script>
    </body>

deviceready 이벤트

  • Cordova 플러그인이 모두 로드 된 후 발생
  • window.addEventListener 함수를 통해 등록
  • 플러그인은 deviceready 이벤트 발생 이후 사용하여야 함

index.js

var battery = $("#battery");

window.addEventListener('deviceready', function() {
    window.addEventListener('batterystatus', function(status) {
        battery.text(status.level);
    }, true);
}, true);
  • Virtual Device Manager > AVD 실행
  • > cordova run android

Cordova 카메라 플러그인

  • 디바이스의 카메라로 사진을 찍어 불러오기
  • 디바이스의 이미지 라이브러리에서 사진 불러오기
    • getPicture 함수
      camera.getPicture(success, error, options)
      • success : 사진을 불러오는데 성공했을 때 실행되는 콜백함수
      • error : 사진 불러오기에 실패했을 때 실행되는 콜백함수
      • options : 사진을 가져오기 위한 option 객체
쿤의 패러다임 푸코의 에피스테메

과학(물리학)에 적용

 과학, 철학, 문화 등 모든분야에 적용되는 인식 체계
의식적 작용 무의식 속에서 작동 (알아채지 못함)
나름 합리적 기준으로 선택 합리적 기준 없음

  • 카메라 플러그인 설치
    > cordova plugin add –save cordova-plugin-camera
  • 설치 플러그인 확인
    > cordova plugin list
        <button id="btnTakePic">사진 찍기</button>
        <button id="btnLoadPic">사진 불러오기</button>
        <div>
            <img id="image"/>
        </div>

index.js

var battery = $("#battery");
var image = $("#image");

options = {
    quality: 80,
    correctOrientation: true
}

window.addEventListener('deviceready', function() {
    window.addEventListener('batterystatus', function(status) {
        battery.text(status.level);
    }, true);

    $("#btnTakePic").click(load(1));
    $("#btnLoadPic").click(load(2));
}, true);

function load(sourceNum) {
    return function() {
        navigator.camera.getPicture(
            function(imageUri) {
                image.attr('src', imageUri);
            },
            function(error) {
                alert('에러발생!');
            },
            {
                sourceType: sourceNum,
                ...options,
            }
        );
    }
}

펼침연산자

            {
                sourceType: sourceNum,
                ...options,
            }
아래와 동일
            {
                sourceType: sourceNum,
                quality: 80,
                correctOrientation: true
            }
  • 배열이나 객체를 피연산자로 받음
  • 피연산자로 전달된 배열이나 객체를 펼침
  • 다른 배열이나 객체에 값을 복사해 추가할 경우 사용
var arr = [1, 2, 3];
console.log([...arr, 4, 5]);

var obj = { a:0, b:2 }
console.log({...obj, c:5});

bookmark_border동시통역 채팅 프로그램 만들기

Posted on

네이버 파파고 번역 API

Papago NMT API

네이버 API 이용신청

Request 모듈

  • NodeJS 앱에서 HTTP 요청 기능
    • Jquery 의 .ajax 함수와 비슷
  • my_littlechat> npm install –save request
# request 사용법

var request = require("request");

request.get('/books', function(error, response, body) {
    
});

request.post('/books', { body: { key: value } }, function(error, response, body) {
    
});

request.put('/books', { body: { key: value } }, function(error, response, body) {
    
});

request.delete('/books', function(error, response, body) {
    
});

app.post('/send', function(req, res) {
    var message = {
        sender: req.body.sender,
        ko: req.body.ko,
        en: req.body.en
    };
    console.log(message);

    messages.push(message);
    res.status(200).send({ message: "Success" });
});

서버 구현

app.post('/send', function(req, res) {
    var message = {
        sender: req.body.sender,
        ko: req.body.ko,
        en: req.body.en
    };
    console.log(message);

    var options = {
        url: "https://openapi.naver.com/v1/papago/n2mt",
        form: {
            source: message.ko.length == 0 ? "en" : "ko",
            target: message.ko.length == 0 ? "ko" : "en",
            text: message.ko.length == 0 ? message.en : message.ko
        },
        headers: {
            "X-Naver-Client-Id": "ID",
            "X-Naver-Client-Secret": "KEY",
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
        }
    };

    request.post(options, function(error, response) {
        var result = JSON.parse(response.body).message.result;
        message.ko = message.ko.length == 0 ? result.translatedText : message.ko;
        message.en = message.en.length == 0 ? result.translatedText : message.en;

        console.log(message);
        messages.push(message);
        res.status(200).send({ message: "Success" });
    });    
});

app.get("/receive", function(req, res) {
    var result = { total: messages.length, messages: [] };

    if (messages.length > req.query.from) {
        result.messages = messages.slice(req.query.from);
    }

    res.status(200).send(result);
});

클라이언트 구현

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>my little chat</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
      .messages {
        width: 500px;
        height: 500px;
        overflow: scroll;
        background: #eeeeee;
      }
    </style>
  </head>
  <body>
    <div class="messages" id="messages"></div>
    <div>
      <select id="selectBox">
        <option value="ko">한국어</option>
        <option value="en">영어</option>
      </select>
      아이디: <input type="text" id="senderId" />
      내용: <input type="text" id="chatInput" />
      <button id="sendButton">전송</button>
    </div>
    <script src="./chat.js"></script>
  </body>
</html>

var curIndex = 0;
var language = "ko";
var messages = [];

setInterval(function() {
    $.ajax(`http://localhost:3000/receive?from=${curIndex}`).done(function(data) {
        for (const message of data.messages) {
            console.log(message);

            $("#messages").append(
                message.sender + " : " + (language == "ko" ? message.ko : message.en)
            );
            $("#messages").append("<br/>")
        }

        curIndex = data.total;
    });
}, 1000);

$("#sendButton").click(function() {
    var message = {
        ko: "",
        en: "",
        sender: $("#senderId").val()
    }

    if (language == "ko") message.ko = $("#chatInput").val();
    else message.en = $("#chatInput").val();

    console.log(message);

    $.ajax({
        url: "http://localhost:3000/send",
        method: "POST",
        data: JSON.stringify(message),
        dataType: "json",
        contentType: "application/json"
    }).done(function() {
        console.log("POST done");
        $("#chatInput").val("");
    });
});

$("#selectBox").change(function() {
    language = $("#selectBox").val();
    console.log(language);
    $("messages").html("");
    curIndex = 0;
});
my_littlechat다운로드

bookmark_bordernodeJS Todo list 프로그램

Posted on

NodeJS Todo list

  • todo list 웹 페이지를 NodeJS 서버를 통해 호스팅
  • todo list 저장 및 불러오기 API 구현

Todo list API

# index.js

var express = require('express');
var app = express();

//var todos = {};
var todos = { "자바스크립트 공부하기": true };

app.use(express.json());
app.use(express.static("public"));

app.post("/todos", function(req, res) {
    todos = req.body.todos;
    console.log(req.body);
    res.status(200).send({ message: "success" });
});

app.get("/todos", function(req, res) {
    res.status(200).send(todos);
})

app.listen(3000, function() {
    console.log("3000 포트로 웹서버 실행!");
});
  • http://localhost:3000/todos
    • 응답 : { “자바스크립트 공부하기”: true }
  • app.use(express.static(“public”));
    • 웹 시작 디렉토리 : D:\…\my_todolist\public
    • 여기에 클라이언트 html, css, js 파일 위치
  • 메서도 체인(Method Chaining)
    • res.status(200).send({ message: “success” });
    • 함수를 연속해서 호출
    • 각 함수들이 자신을 리턴해서 가능 ( return this; )

Todo 클라이언트

  • 저장함수
function saveTodos() {
    $.ajax({
        url: "http://localhost:3000/todos",
        method: "POST",
        data: JSON.stringify({ todos: todos }),
        dataType: "json",
        contentType: "application/json"
    }).done(function() {
        console.log("POST done");
    })
}
  • 체크박스 정보 추가
function inputTemplate(text, checked) {
    var inputTag = $('<input type="checkbox" id="checkBox">');
    inputTag.data('value', text);
    inputTag.attr('checked', checked);
    return inputTag;
}
  • 추가버튼, 체크박스, 삭제버튼 클릭시 저장함수 saveTodos(); 호출
  • 시작시 서버에 저장된 메모정보 로드
$.ajax("http://localhost:3000/todos").done(function(result) {
    console.log(result);

    todos = result;
    for (const todo of Object.keys(todos)) {
        $(".contents ul").append(liTemplate(todo, todos[todo]));
    }
});
my_todolist다운로드

bookmark_borderRESTful API

Posted on

RESTful API

  • REST 란?
  • Representational State Transfer 의 약자
  • api 에 대한 상세 스펙을 보지 않아도 HTTP요청의 여러 정보를 통해 API가 하는 일을 알 수 있도록 설계된 api
  • REST API가 표현하는 것
    • 자원과 자원에 대한 행위
    • 자원 : 서버에 저장되어 있는 데이터들
      • 쇼핑몰 서비스에서의 자원 : 상품 목록,주문 목록,회원 목록 등
      • 도서관리 서비스에서의 자원 : 도서 자체
  • REST API를 통해 사용하려는 자원을 HTTP uri 로 명시
  • HTTP메서드로 자원에 대한 행위를 명시

CRUD

  • Create : 생성(POST)
  • Read : 조회(GET)
  • Update : 수정(PUT)
  • Delete : 삭제(DELETE)

REST API 작성 규칙

  • 자원은 URI에 영문 소문자, 명사 복수형으로 표현
  • 파일 확장자는 URI에 포함하지 않음
  • 자원의 계층구조는 /(슬래쉬)로 표현

RESTAPI 예시

CRUD HTTP 메서드 URI
책들의 목록을 표시 GET /books
책 한권의 정보를 표시 GET /books/{id}
새 책을 생성 POST /books
책을 수정 PUT /books/{id}
책을 삭제 DELETE /books/{id}

RESTful API를 사용하는 이유

  • HTTP프로토콜 상에서 동작
  • 특정 언어나 플랫폼에 종속되지 않음
  • API 의 의도를 API사용자가 쉽게 파악할 수 있음

Express.js로 RESTful API 만들기

  • Express로 HTTP 메서드 처리
  • Express로 URI 처리
  • Express로 HTTP 바디 처리

Express Router

  • 미들웨어의 한 종류
  • HTTP 메서드, uri 에 따라 미들웨어 실행 여부 결정
  • Router 생성
    • express.Router()로 Express Router 생성
  • 생성한 라우터는 다른 미들웨어와 마찬가지로 app.use 를 통해 등록할 수 있음
  • Express Router를 사용하면 Express앱의 모듈화가 가능
# router.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
    res.send('GET /');
});

router.post('/', function(req, res, next) {
    res.send('POST /');
});

router.put('/', function(req, res, next) {
    res.send('PUT /');
});

router.delete('/', function(req, res, next) {
    res.send('DELETE /');
});

module.exports = router;

# index.js

var express = require('express');
var app = express();
var router = require('./router.js')

app.use(router);

app.listen(3000, function() {
    console.log("3000 포트로 웹서버 실행!");
});
  • Insomnia 설치
    • 서버에 GET, POST, PUT, DELETE 등을 전달할 수 있는 유틸리티

Express Route Parameter

  • RESTApi 에서 자원의 아이디를 uri 를 통해 전달
  • 아이디와 같이 Uri의 변하는 요소를 Route prameter 라고 함
  • Express Router 에서는 :(콜론)과 파라미터 이름으로 Route parameter를 설정
  • Request 객체의 params 프로퍼티로 Route parameter에 접근
router.get('/:id', function(req, res, next) {
    res.send('전달받은 파라미터 : ' + req.params.id);
});
  • GET localhost:3000 -> 응답 : Cannot GET/
  • GET localhost:3000/13244 -> 응답 : 전달받은 파라미터 : 13244

Query String

  • URI 를 통해 값을 전달하는 또 하나의 방법
  • RESTAPI 에서는 주로 자원을 검색, 필터링 할 때 사용
  • ex) /books?author=김군오&language=kr

Express에서 Query String 사용

  • Request 객체의 query 프로퍼티로 접근
  • Route parameter 와 다르게 어떤 query string을 받을지 미리 설정하지 않음
  • 라우트에 영향을 주지 않음
  • 쿼리스트링의 유무와 관계없이 http 메서드와 uri 를 통해서만 라우트가 결정
  • 전달하지 않은 query string에 접근하면 값이 설정되어 있지 않음
    • undefined 변수로 취급
router.delete('/', function(req, res, next) {
    res.send('Year : ' + req.query.year);
});
  • DELETE localhost:3000 -> 응답 : Year : undefined
  • DELETE localhost:3000/?year=2021 -> 응답 : Year : 2021

HTTP Body

• POST, PUT 메서드는 HTTP 요청에 Body 전달 가능
• Body에는 text, json, xml, html, 파일 등 어느 것이라도 전송될 수 있음
• Body는 Content-type 헤더에 따라 적절히 해석되어야 함

# index.js
app.use(express.json());

# router.js
router.post('/', function(req, res, next) {
    res.send('제목 : ' + req.body.title);
});

# insomnia test json
{
	"title" : "도서의 제목입니다."
}
  • POST localhost:3000 -> 응답 : 도서의 제목입니다.

bookmark_bordernpm과 express 모듈

Posted on

NPM으로 모듈 설치

NPM

  • NodeJS 모듈을 공유하고 다운받는 저장소
  • CLI (명령줄 인터페이스)로 간편하게 모듈 관리
  • 의존성 관리
    • A 모듈이 B 모듈을 사용할 때 A모듈은 B모듈에 의존성이 있다고 말함
    • package.json 파일로 프로젝트 의존성 관리

npm init 명령어

  • NodeJS 프로젝트를 시작하기 위한 명령어
  • package.json 파일을 생성
  • 프로젝트의 이름, 버전, 개발자 정보 등의 메타데이터
  • NPM모듈의 의존성 정보 등을 담고 있음
  • 새로운 폴더 생성 및 실행
    • my_module_test>npm init
  • package.json
{
  "name": "my_module_test",
  "version": "1.0.0",
  "description": "나의 모듈 시험",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC"
}
  • 엔트리 포인트 : “main”: “index.js”,
  • “scripts”: {
    “start”: “node index.js”
    },
    => npm run start 명령으로 실행

Express.js 모듈 사용

NPM 패키지 검색

  • https://www.npmjs.com/
  • express
  • > npm install –save express
    • package.json 에 의존성 정보를 저장하려면 –save 옵션과 함께 실행
    • express에 의존성 있는 모든 모듈 설치됨

Express

  • 고성능 웹 프레임워크
  • 프로그래머가 작성한 함수를 실행해 HTTP요청에 대한 HTTP응답을 프로그래머가 원하는 대로 만들어 HTTP클라이언트에게 응답할 수 있음
  • 요청한 URL이나 HTTP메서드에 따라 원하는 함수를 실행시켜 주는 라우팅 기능
  • HTML의 내용 일부분을 변수에 저장된 값으로 치환해 동적인 HTML을 만들어 응답하는 뷰 템플릿 엔진도 가지고 있다
  • 미들웨어로 기능 확장

require 함수로 외부 모듈 이용하기

  • require 함수 모듈명을 인자로 실행
  • 파일명을 전달할 때와 마찬가지로 해당 모듈을 반환
var express = require('express');
var app = express();

app.listen(3000, function() {
    console.log("3000 포트로 웹서버 실행!");
});
  • my_module_test> npm run start
  • ctrl + C 키로 종료

미들웨어 콜백함수의 인수

  • HTTP 요청 -> 미들웨어1 -> 미들웨어2 -> 미들웨어… -> HTTP 응답
  • Request 객체
    • HTTP요청에 대한 정보가 담겨 있음
  • Response 객체
    • 브라우저에 전송할 HTTP응답을 어떻게 만들지에 대한 정보를 설정
  • next 함수
    • 이전 미들웨어에서 다음 미들웨어도 실행해야 한다고 알려주는 함수
app.use(function(req, res, next) {
    res.send('OK');
})
  • 디버깅
    • JavaScript Debug Terminal 로 실행
    • 디버그 터미널에서 my_module_test> npm run start 수행
    • break point