Jekyll2020-01-02T07:57:37+00:00https://haesookim.github.io/TIL/feed.xmlToday I LearnedDaily recordings of what I have learned and achieved as an aspiring developer. Working towards Human-Computer Interaction, Front-end development, Information Visualization, and more.2020년 겨울2020-01-02T00:00:00+00:002020-01-02T00:00:00+00:00https://haesookim.github.io/TIL/personal/2020/01/02/wintervacation<p>이제는 조금 더 개발자가 될 때도 되었다..</p>
<p>연말에 앓아눕고서는 회복하자마자 출근을 했더니 머리가 아프다. 연구를 쉬엄쉬엄 하면서(?) 그 사이에 해 보고 싶었던 사이드 프로젝트 몇 개를 틈틈이 진행시켜볼 생각이다. 잊지 않고 하기를 바라는 마음으로 여기에 메모해둬야지…</p>
<ul>
<li>N6 식단 슬랙봇</li>
<li>깃헙 contributions 그래프 색을 바꿔주는 확장앱 (chromium 기반)</li>
</ul>
<p>말고도 소소한 목표들이 있겠지. 그렇지만 지금 가장 중요한 것은 아프지 않는 것일 듯하다.
블로그도 언젠간 리뉴얼해야 하는데! 지킬 다루는 법을 몰라서 지금은 그냥 기본 템플릿 쓰고 있지만 꼭 조만간 바꿀 거다.</p>이제는 조금 더 개발자가 될 때도 되었다..KIXLAB이란2019-07-29T00:00:00+00:002019-07-29T00:00:00+00:00https://haesookim.github.io/TIL/personal/2019/07/29/kixlab-midreport<h2 id="슬랙과-영어대화-유교적-나">슬랙과 영어대화, 유교적 나</h2>
<p>연구실에서 인턴을 하게 된 지 한 달이 지났고, ‘교수님’ 대신 ‘쥬호’ 라는 칭호가 입에 꽤나 붙었다. 호칭의 힘이란 참 신기하기는 한 것 같다. 미국적 사고방식을 (꽤 많이) 가지고 있는 것 같다는 말은 줄곧 들어 왔지만, 그래도 한국에서 나고 자란 나에게는 숨길 수 없는 것들이 몇 가지 있다. 예를 들면 내 안에 숨겨진 유교적 본능이라던가. (말하면서도 끔찍하다) (‘숨겨진’ 보다는 ‘내재된’이라고 하자)</p>
<p>어쩔 수 없는 것들이 있다. 예의를 지켜서 말하는 것이 ‘옳다’ 라고 언제나 들어왔던 나에게는, 그리고 꽤나 그런 소소한 ‘옳음’ 에 신경을 많이 썼던 나에게는 예의란 어쨌든 신경이 참 쓰이는 주제 중 하나다. 교수님들이 아무리 날 편하게 대해 주셔도, 몸이 안 좋으시니 쾌차하시라는 문자 한 통을 보내는 데마저 국어국문학과 친구의 검열과 확인을 거치는 나라서, 정말 어쩔 수가 없다.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>"이렇게 보내면 실례인가?"
</code></pre></div></div>
<p>영어로 말을 한다고 그게 바로 달라지지는 않는다. 처음에는 어쩔 줄 몰라서 줄곧 ‘프로페서’로 호칭했다. 메일을 보낼 때도, 어디서 말을 할 때도. 다른 사람의 이메일에 cc되었을 때, ‘Dear Juho’ 라고 칭하는 모습을 보면서, 솔직히 나의 유교적 본능은 움찔했다. 저렇게 말해도 괜찮나? 신경 안 쓰시나? 그런 것. 세상 의미없는 거라지만 어쩔 수가 없다. 여태껏 그게 너무너무 의미있다고 배워 왔는걸.</p>
<p>문화를 바꾸는 데에는 바뀐 문화를 직접 보여주는 게 제일 효과적이다. 랩 공식 언어인 영어의 영향과 교수님의 의지가 아마 섞여 있겠지? 처음에는 까마득해 보이는 석, 박사 분들의 이름을 부르는 게 무서워서 말을 잘 걸지도 않았다. (외향적인 사람이 아니라서 지금도 개인적으로는 말을 잘 걸지 않지만..) 그래도 사람들이 모두 교수님을 ‘쥬호’라고 부르니까 나도 덩달아 ‘쥬호’라고 불렀다. 인턴들이 편하게 사수분을 부르는 걸 보고 조금씩 편해졌다. 구글 드라이브에 코멘트 다는 것도, 발표 후에 피드백 하는 것도 전부, 아, 나처럼 아무것도 모르는 사람이 이렇게 말을 해도 되나… 라는 생각을 고쳐먹으려고 노력했다. 평소에는 예의를 지켜야 한다는 생각에 머리에 힘을 주고 있었더라고 생각하면, 힘이 빠져서 조금 더 편해졌을지도 모르겠다.</p>
<p>아무튼 재밌다. 즐겁다. 교수님이 보고 계시는 공유문서에서 교수님을 놀리는 장난을 칠 수도, 슬랙에서 교수님 얼굴로 이모티콘을 달 수도 있게 되었다. 이게 내 연구 성과에 어떤 영향을 끼치는지는 모르겠지만, 내 심리적 상태에는 확실히 좋은 영향을 끼친다. 재미있는 일들이 많고, 즐거워진다. 사람들을 (비록 모니터 너머 다같이 있을 때만이라지만)좀 더 편하게 대할 수 있는 것 같다. 언어 하나 바꾼다고 이렇게나 편해질 일인가? (언어 하나가 아니지만) 그간 라포를 쌓아왔다고 생각한 다른 교수님들과는 내 이너유교셀프 덕분에 더 못 다가갔는데. 조금 억울하기도 하다. 여기에 영향을 받지 않는 나였으면 좋겠는데.</p>
<h2 id="심리학-특수-용병-쓸모있는-나라니">심리학 특수 용병 (‘쓸모있는 나’라니?)</h2>
<p>여기에 오기 전에 심리학 전공을 뺄까 수도 없이 고민했었다. 전공 조합 자체는 걸어다니는 HCI인들, 컴퓨터 공부와 비교했을 때는 뭔가 쓸모가 덜해 보였다. 학교에서 배우는 내용들이 내 다른 전공들과 잘 맞아떨어지는지도 모르겠고, 심리학 과목들은 내가 생각했던 것과는 조금 다른 분위기로 흘러갔다. 생각보다 재미가 없었고, 어디다 쓸 지도 모르겠는 굉장히 불확실해 보이는…. 그런 것들만 배웠던 것 같다. 어릴 때부터 어쨌든 과학이 좋다고 했던 아이는 아마도 그런 불확실성이 싫었던 것 아닐까?</p>
<p>그런데 타이밍 좋게 랩에서 심리학 쪽과 관련 있는 프로젝트를 받아 왔다고 한다. ‘해수씨가 같이 하시면 딱일 것 같아요.’ 라는 말을 듣고, 교수님과 코워커님의 반짝반짝한 눈빛을 반신반의하면서 동의했다. 나는 학부생인데, 나는 아무것도 모르는데… 나한테 조언을 구하실 부분이 아닐 텐데….</p>
<p>내가 너무 자유전공학부적으로 살았던 걸지도 모르겠다. 세 학기 들어 온 심리 전공과목들은 생각보다 내게 잘 입력되어 있었고, 마침 이 프로젝트에서 응용하는 중요 심리학 개념은 내가 좋아했고, 중요하다고 생각해서 열과 성을 다해 들었던 부분이었다. 교수님이 조심스럽게 “이 개념 혹시 들어본 적 있나요?” 라고 물어보셨을 때 내 눈빛도 아마 반짝 빛났을 것이다. 정말 다행이라는 생각을 계속 하면서, 내가 아는 모든 지식을 총동원해보기 시작했다.</p>
<p>물론 내가 아는 지식은 굉장히 적었고, 지금 열심히 공부하고 있는 중임에도 꽤 적다. 그렇지만 나는 뭔가를 더 찾아낼 수 있는 기반과, 누군가 관련된 개념을 언급했을 때 납득하고 이해할 수 있는 연습이 되어 있었다. 생각보다 너무 귀중한 자원이었고, 심리학 전공을 하는 것이 어쩌다보니 하는 게 아닌, 정말 나에게 중요한 도움이 될 것 같아서, 내가 이걸 정말 쓰게 될 것 같아서 하는 거구나 라는 깨달음을 새로이 얻게 되었다. 학교에서 배우는 게 재미없어도, 내가 직접 주인의식을 가지고 그 지식을 활용한다는 것은 기분이 많이 다르다. 이 기회가 없었으면 어떻게 했을까 싶으면서도, 정말 다행이다.</p>
<p>(그 와중에 전산학부 랩에 와서 평생 읽은 전산 관련 논문보다 심리학 논문을 많이 읽게 되었다는 것은 참 웃긴 일이다)</p>
<h2 id="그-영어-잘하시는-분이요">그 영어 잘하시는 분이요</h2>
<p>자랑은 자랑이지…만. 나는 영어를 잘하는 편이다. 영어를 정말정말 잘하는 구 애인에게도 거의 완벽한 미국식 영어를 한다는 말을 들었던 것처럼. 내 입으로 말해도 되는 지 모르겠지만, 정말 잘 하는 것 같다. 적어도 한국어로 글 쓰는 것보다는 훨씬 더 편하다. 어린 시절 치기로 소설을 쓰겠다고 난리쳤을 때도 영어로만 써 댔을 판이니.. 확실한 것은, 나는 한국어 능력 백분위보다는 영어 능력 백분위가 더 높으리라는 것. <strike>그냥 한국어를 못 한다는 게 아니고?</strike></p>
<p>그럼에도, 킥스랩에 도착했을 때 나는 사람들이 영어를 너무 잘 해서 놀랐다. 사실 일상대화에서도 영어를 쓰는 것을 추천할 정도면 정말 당연히 영어에 익숙해지는 환경이겠지만, 주변 카이스트 지인들에게 영어에 대한 불평을 너무 많이 들어서 그랬는지, 많이 놀랐다. 고등학교 졸업한 후에 영어로 일상대화를 하는 집단에 들어 있었던 적도 없었고(지금 생각하면 고등학교 때가 더 신기했다). 그러다 보니, 내 얄팍한 정체성은 조금 흔들렸다.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>영어를 잘하는 게 아니면, 나의 차별점은 뭐지?
</code></pre></div></div>
<p>(연구를 하러 왔으면 차별점은 연구가 되어야지, 무슨 소리를 하는 거야)</p>
<p>말은 이렇게 해도, 사람 마음이라는 게 어쩔 수 없는가 보다. 솔직히 조금 철렁했던 것 같다. 약간의 위기감이랄까? 그래도 편하게 대화를 할 수 있으니, 잘 적응했다.</p>
<p>첫 주가 지나기 전에 “해수씨 어디서 살다 오셨어요?” 라는 말을 세 번 들었다. 아무 데도 살다 온 적 없다고 하면, 어김없이 “그럼 영어를 어떻게 그렇게 잘하세요?” 라는 답이 온다. 기분이 좋지 않았다고 하면 거짓말이고. 그렇다고는 해도, 이 말을 살면서 백 번도 더 들었겠지만 여전히 답을 어떻게 해야 할 지는 잘 모르겠다. 너무 확신을 가지고 내가 어딘가에서 살다가 왔을 것이라고 생각하기 때문에. 영어를 잘하는 비백인에게 너 영어를 참 잘하네! 라고 말하는 것은 레이시즘이지만, 살다 오지 않은 사람에게 너 어디서 살다 왔어? 라고 물어보는 것은, 음, 당연히 전혀 다른 일이겠지만, 언제나 그 상황이 생각나고 언제나 기분이 묘하다.</p>
<p>랩미팅 몇 번을 하고 나서, 사람들도 만나고, 익숙해졌다. 공통지인이 있거나 내 지인을 만나는 사람들도 생겼다. 참 신기한 것이, 사람들이 모두 나를 ‘영어 잘하시는 분’ 이라고 소개했노라고 전해주곤 했다.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>아, 어제 해수씨 친구 만났어요. 해수씨 영어 되게 잘하신다고 제가 말했는데.
</code></pre></div></div>
<p>감사하고, 조금은 당황스럽고, 기분이 묘하다. 여기 사람들 어디 가서 절대 영어로는 안 질 사람들일텐데. 정말 외국인도 있고, 외국 국적자도 있고. 나는 여기서 위기감을 느꼈을 정도로 다들 너무 영어를 잘한다고 생각했는데, 콕 집어 ‘그 영어 잘하시는 분’으로 소개될 일이었는가 - 라는 생각은 들었다. 나만 모르는 뭔가가 있나. 여하튼 감사했지만, 알 수가 없다. 고맙다. 기분이 좋다. 연구 잘하시는 분으로 소개된다면 그것도 나쁘지 않을 것 같다.</p>
<p>흠. 아직 잘 모르겠다. 이게 내 정체성의 전부가 되어서는 안 되고, 이것이 우월감의 원천이 되어서도 안 된다. 다른 사람들보다 잘해서보다는, 내가 이로 인해서 많은 다른 즐거움을 얻을 수 있을 만큼 영어를 많이 접할 수 있다는 것이 즐거워야겠지. 그럼에도 무언가를 ‘잘한다는 것’ 이 정체성의 일부가 된다는 것은 참 재미있는 일이다.</p>슬랙과 영어대화, 유교적 나생애 첫 컨퍼런스 참여 - ACM DIS 2019 후기 Part 22019-07-05T00:00:00+00:002019-07-05T00:00:00+00:00https://haesookim.github.io/TIL/personal/2019/07/05/firstconference<h2 id="페이퍼-쓰기">페이퍼 쓰기</h2>
<p>개발도 개발이었지만, 페이퍼 쓰는 건 정말 신기한 경험이었다. 물론 Work in Progress일 뿐이고, 물론 내가 1저자도 아니었지만… 그간의 영어공부는 다 여기서 빛을 발하기 위해 있었던 것이겠지. 내가 알고 있는, 머릿속에 들고 있는 나름의 생각과 저</p>
<h2 id="학회에-도착했다">학회에 도착했다</h2>
<h2 id="어드바이저-없이-혈혈단신으로-네트워킹하기">어드바이저 없이 혈혈단신으로 네트워킹하기</h2>
<h2 id="diversity--inclusion">Diversity & Inclusion</h2>
<p>DIS는 내가 지금까지 경험해 온 그 어떤 공간과 집단보다도 더 accessibility에 대한 고민을 많이 한 곳이었다. 식단에 있어 채식 등을 고려하는 것은 기본이고, 휠체어용 램프, 애초부터 턱이라고는 찾아볼 수 없는 학회 장소 선정, 듣기 어려우신 분들을 위해 꼭 항상 마이크를 써 달라는 주최측의 요청 등등…</p>
<h2 id="포스터-발표">포스터 발표!</h2>
<h2 id="설레는-일을-한다는-것은">설레는 일을 한다는 것은</h2>페이퍼 쓰기생애 첫 컨퍼런스 참여 - ACM DIS 2019 후기 Part 12019-06-28T00:00:00+00:002019-06-28T00:00:00+00:00https://haesookim.github.io/TIL/personal/2019/06/28/firstconference<h2 id="연구에-참여하다">연구에 참여하다</h2>
<p>학부를 졸업하고 나면 대학원을 갈 거라는 건 나에게 늘 너무 당연한 사실로 다가왔던 것 같다. 내가 어떤 연구를 하고 싶은지, 심지어는 가면 연구를 해야 한다는 것, 논문을 써야 한다는 걸 알기 전에도… 어째선지 대학원 자체는 내 삶에서 늘 staple과 같은 존재였다. 성장 환경의 영향일까? 여하튼, 정말이지 ‘늘’ 그랬다. 대입을 치를 때만 해도 내 관심사라고 생각했던 것들이 모두 붕괴하는 충격적인 시기를 지나고 나서, 용케 하고 싶은 걸 찾았다. (이게 정말 내가 하고 싶은 일이라는 걸 전공 선택하고 나서 알았다는 게 신기할 따름이다) 아, HCI가 재미있구나. 뭘 만들어도 사람이 쓸 수 있게, 어떻게 잘 쓸 수 있는지, 어떤 방식으로 써 볼 수 있는지 고민해볼 수가 있구나. 하면서 굉장히 빠른 속도로 동화되었던 것 같다.</p>
<p>열심히 해 버릇 하는 습관이 있어서 다행이었다. 정보문화학 진입하고 첫 학기에 ‘전필이라서’ 들었던 수업에서 멋진 사람들을 만났다. 얼굴도 뵈어본 적 없는 교수님께 연구 주제가 맞아서 인턴 연락을 드렸노라는 팀원 언니의 말을 듣고, 할 줄 아는 것도 없는 주제에 무모하게 이것저것 던져 보기 시작했다. 뵌 적도 없는 분께 연락드리기엔 너무 소심한 사람이라, HCI 기초 수업을 해 주신 교수님께 연락을 드렸다. 교수님, 혹시 이번 여름에 인턴 받으시나요. 그렇게 ‘찐 HCI 사람’의 삶이 시작됐다.</p>
<p>또 참 대단한 우연으로, 진입한 전공에서 친구를 만들어보겠노라는 굳센 다짐에서 랩실 TA로 일하기 시작한 학기에 굉장히 열정 넘치는 대학원생 분이 학과 조교를 맡아주셨다. 교수님은 조교질 하기 좋아하는 친구라고 (ㅋㅋㅋ) 말씀하시지만, 그만큼 아는 게 많이 없는 입장에서는 나쁘지 않은 것도 같고. 여하튼 그렇게 피눈물 쏟는 한 학기가 지났더니, 학기말에 조교님이 우리를 꼬셨다. 해수야, 애들 모아서 게임 만들어서 연구해보자. 게임 만드는 얘들은 게임 기획하고, 우리는 개발하고 논문 쓰고.</p>
<strike>(그 때는 이게 이렇게 될 줄 몰랐지)</strike>
<h2 id="직접-뭐라도-만들어보기">직접 뭐라도 만들어보기</h2>
<p>어디어디 학회에 낼 거라는 말도 듣긴 들었다. 학회에 대해서 아는 것도 아직 많이 없는 입장에서는 그냥 이걸 내면 외국 어디어디로 갈 수 있다~ 정도의 의미였지만, 그래도 마냥 좋았다. 해볼 만 했다.</p>
<p>사실 나는 CSS 담당으로 영입되었는데… 웹을 안 건드려봤던 건 아니었는데 늘 CSS에서 막혀서 뭔가 엉망진창이 되고, 때려친 웹사이트만 수 개였다. 그런데 내가 CSS 담당을? 웹 담당을? 간단한 프로토타입 구현 수준의 개발이야 할 수 있지만, 내가 저걸 과연 할 수 있을까?</p>
<p>결론부터 말하자면 어떻게든 해냈다. 이래서 사람들이 프로젝트를 해 보라고 하는 걸까… 외국에서도 코딩했고, 밤 새서도 코딩했고, 공항에 앉아서도 했다. 명확하게 주어진 목표가 있고, 구현해야 하는 디자인도 있으니 생각했던 것보다는 훨씬 수월하게 만들어졌다. CSS를 제외한 모든 웹 개발을 담당한 석사님은 한 고생 하셨지만 ㅎㅎ</p>
<p><a href="miro.xyz">프로젝트 웹사이트</a> 에서 완성된 결과물을 플레이해볼 수 있다!</p>
<hr />
<p>Part 1이라고 적어 두기도 했고… 할 말도 많고, 무엇보다 Closing Keynote가 시작했으니 나머지 이야기는 천천히 적어야겠다.</p>
<p>앞으로 할 이야기들… 페이퍼 쓰기, 어드바이저 한 명 없이 혈혈단신으로 네트워킹하는 병아리 학부생 (이 글의 시작 자체가 네트워킹에 지쳐 혼자 학회장에 앉아 써지고 있다는 것에서 나의 네트워킹이란 이미 물 건너 갔음을 알 수 있다), 포스터 세션과 트랙 후기, 그리고 설레는 일을 한다는 것에 대한 병아리적 소회? 정도가 있을 것 같다. 천천히 풀어 봐야지. :)</p>연구에 참여하다Gitmoji에 대해 배우다!2019-06-08T00:00:00+00:002019-06-08T00:00:00+00:00https://haesookim.github.io/TIL/git/2019/06/08/gitmojis<h2 id="how-to-use-gitmojis">How to use Gitmojis!</h2>
<p>오늘은 Gitmoji라는 시스템에 대해 배웠다! 비주얼라이제이션 팀원들이 레포에 커밋할 때 신기한 이모티콘 같은 걸 쓰는데, 예쁘기도 하고, 커밋 메시지 자체를 조금이나마 더 체계적으로? 정리할 수 있는 방법 + 텍스트를 읽지 않아도 한 눈에 들어올 수 있도록 해 주는 방법이라고 생각한다. 프로토콜을 익히는 데는 시간이 좀 걸릴 것 같지만, 그래도 한 번 잘 써 보면 좋을 것 같다.</p>How to use Gitmojis!Figuring out Scrollytelling2019-05-03T00:00:00+00:002019-05-03T00:00:00+00:00https://haesookim.github.io/TIL/front-end/2019/05/03/scrollytelling<h2 id="scrollytelling-using-position-sticky">ScrollyTelling using position sticky</h2>
<p>CSS에는 position: sticky라는 attribute가 있다. 기본적으로는 position: relative와 position: fixed의 기능을 섞인 상태로 가지고 있는 것인데, 사용자가 directional variable (top, bottom, left, right)으로 지정한 일정 threshold에 닿기 전까지는 position: relative의 성격을 지니고 있다가 threshold에 도달하면 position: fixed의 형태로 바뀐다.</p>
<p>이 방법을 사용해 scrollytelling을 할 경우, 자바스크립트를 활용한 다양한 스크롤 이벤트를 잡아 줄 필요성이 줄어든다. (scrolly element 내에서 애니메이션을 넣어 줄 경우 step trigger 등이 추가적으로 필요하다)</p>ScrollyTelling using position stickyML #4: Normal Equations2019-01-10T00:00:00+00:002019-01-10T00:00:00+00:00https://haesookim.github.io/TIL/coursera%20stanford%20ml/2019/01/10/ml-lecture4<h3 id="normal-equation">Normal Equation</h3>
<p>In contrast to Gradient descent, a method that solves for the parameter theta iteratively, normal equations solve for theta analytically, through calculus methods. For a simple polynomial equation(where theta is a Real Number), one obtains the derivative of the equation by theta and setting the value of theta so that the derivative equals zero.</p>
<p>For a multidimensional vector theta, you obtain the partial derivative for each separate value of theta to solve for the inclusive vector.</p>
<figure class="highlight"><pre><code class="language-octave" data-lang="octave">pinv(X' * X) * X' * y
// Take the inverse of X transposed & X, multiply that matrix with the transpose of X, then y
// Use pinv() instead of inv() in octave to obtain answers where the matrix is degenerate</code></pre></figure>
<ul>
<li>Compare and contrast with Gradient Descent
<ul>
<li>Gradient Descent
<ul>
<li>Need to explicitly choose the value of alpha (learning rate) through a trial-and error process</li>
<li>requires iterations</li>
<li>works well for a large n (time complexity: <em>O(kn^2)</em>)</li>
<li>requires feature scaling for efficient iterations</li>
</ul>
</li>
<li>Normal equations
<ul>
<li>solving for n is slow for large n, since the time complexity of solving for an inverse matrix is high</li>
<li>time complexity of <em>O(n^3)</em></li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="non-invertability">Non-invertability</h3>
<p>Somtimes the matrix may not be invertible (These are called degenerate/singular matrices)</p>
<ul>
<li>Redundant features (features that are linearly dependent to one another)</li>
<li>too many features (m < n)</li>
</ul>Normal EquationJavascript Notes2019-01-07T00:00:00+00:002019-01-07T00:00:00+00:00https://haesookim.github.io/TIL/javascript/2019/01/07/javascript-notes<p>으악 자바스크립트로 앱 개발도 해봤으면서 이제서야 기초를 다지고 있다니 너무 웃기지만! 기초가 없는 상태로 쭉 가는 것모단 이게 더 낫겠지…</p>
<p>(심지어는 Node 스터디 포스팅이 더 먼저라니ㅠㅠ)</p>
<h3 id="variable-assignment">Variable assignment</h3>
<ul>
<li>var
<ul>
<li>Is function scoped</li>
<li>variable is declared globally no matter the block of declaration</li>
</ul>
</li>
<li>let : allows you to change the value later
<ul>
<li>Difference with var: is Block scoped</li>
<li>declaration only stands for the block it is declared in</li>
<li>범위를 명확하게 정할 수 있으면 var보다 더 좋은 declaration method일 수도 있나?</li>
</ul>
</li>
<li>const : cannot change value
<ul>
<li>cannot leave as ‘undefined’ type, must be initialized with declaration</li>
</ul>
</li>
</ul>
<h3 id="string-interpolation">String interpolation</h3>
<ul>
<li>Must use backticks to ensure this working
<ul>
<li>not regular quotation marks!</li>
<li>on macOS korean mode, type using Option + ‘`’ (otherwise will print ₩)</li>
</ul>
</li>
</ul>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">myName</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Haesoo</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`my name is </span><span class="p">${</span><span class="nx">myName</span><span class="p">}</span><span class="s2">.`</span><span class="p">);</span>
<span class="c1">// this will print 'my name is Haesoo.'</span></code></pre></figure>
<h3 id="-vs---whats-the-difference">’==’ VS ‘===’ : What’s the difference?</h3>
<ul>
<li>JS에서는 equal operator가 ‘==’ 이 아니라 ‘===’이다
<ul>
<li>다른 언어에서의 isEqual()과 동일한 역할을 한다</li>
<li>type과 value의 일치를 검사한다는 느낌</li>
<li>unequal operator도 ‘!==’임</li>
</ul>
</li>
<li>’==’는 반면 value operator로서 typecast 후의 결과를 출력한다</li>
</ul>
<h3 id="conditionals">Conditionals</h3>
<ul>
<li>Short-circuit
<ul>
<li>operands are considered from the left, and short-circuits if said operand is true
<ul>
<li>if first operand is true, the second operand is ignored even if true</li>
<li>if first operand is false, second operand is considered</li>
</ul>
</li>
<li>used for defaulting a value?</li>
<li>This is how you implement it</li>
</ul>
</li>
</ul>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// pickOne will take the value of 'Truth' since an empty string takes a boolean value of false</span>
<span class="kd">var</span> <span class="nx">one</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">two</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Truth</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">pickTwo</span> <span class="o">=</span> <span class="nx">one</span> <span class="o">||</span> <span class="nx">two</span><span class="p">;</span>
<span class="c1">// Essentially operates like this</span>
<span class="kd">var</span> <span class="nx">pickOne</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">one</span><span class="p">){</span>
<span class="nx">pickOne</span> <span class="o">=</span> <span class="nx">one</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span><span class="p">{</span>
<span class="nx">pickOne</span> <span class="o">=</span> <span class="nx">two</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
<h3 id="function-expression">Function Expression</h3>
<ul>
<li>Define a function within a function expression, using an anonymous function
<ul>
<li>declare a variable to take the function name (usually uses const)</li>
<li>assign an anonymous function to that variable</li>
</ul>
</li>
</ul>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// This is to declare the function</span>
<span class="kd">const</span> <span class="nx">identifier</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">arg1</span><span class="p">,</span> <span class="nx">arg2</span><span class="p">){</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// This is to call the function</span>
<span class="nx">identifier</span><span class="p">(</span><span class="nx">parameter1</span><span class="p">,</span> <span class="nx">parameter2</span><span class="p">);</span></code></pre></figure>
<ul>
<li>Arrow function syntax
<ul>
<li>Essentially the same as a function expression but uses the fat arrow syntax ()=> instead of using the keyword ‘function’</li>
</ul>
</li>
</ul>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">const</span> <span class="nx">identifier</span> <span class="o">=</span> <span class="p">(</span><span class="nx">arg1</span><span class="p">,</span> <span class="nx">arg2</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
<ul>
<li>Conscise Arrow functions
<ul>
<li>Basically used for simplifying javascript code</li>
<li>If you have one argument/parameter, then you don’t need parentheses
<ul>
<li>if you have zero or 2 <=, then you need parentheses</li>
</ul>
</li>
<li>Single-line code blocks do not require curly braces</li>
<li>Implicit return
<ul>
<li>Single-line code implies the result of the expression will be the return value</li>
<li>this means that the return statement can be omitted</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="arrays">Arrays</h3>
<ul>
<li>can define arrays using the ‘let’ or ‘const’ keywords
<ul>
<li>with ‘let’-defined arrays you can reassign elements or the entire array</li>
<li>with ‘const’-defined arrays you can reassign individual elements, but not the entire array</li>
</ul>
</li>
<li>Mutating/non-mutating methods
<ul>
<li>Methods such as .push(), .pop() etc. are <em>mutating methods</em>, meaning that such methods, when called, will alter the original array and save a new form to it.</li>
<li>in contrast, methods like .slice() are non-mutating</li>
</ul>
</li>
</ul>
<h3 id="pass-by-reference">Pass-by Reference</h3>
<p>When you pass a variable to a function: array 자료형 등은 값 자체가 대입되는 것이 아닌 값이 저장되어 있는 memory reference를 보내는 것, therefore the variable is modified outside of the scope</p>
<ul>
<li>Find a more robust explanation for this</li>
</ul>
<h3 id="functions">Functions</h3>
<ul>
<li>Functions as a <strong>First-class object</strong>
<ul>
<li>In JavaScript, functions are also considered as data</li>
<li>as first-class objects, javaScript functions can have properties and methods as well as its invoked utility
<ul>
<li>i.e.) .name, .length, .tostring() etc.</li>
</ul>
</li>
<li>We can also assign a function to a variable</li>
</ul>
</li>
</ul>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">thisDoesSomething</span><span class="p">(){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">do Something</span><span class="dl">'</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="k">do</span> <span class="o">=</span> <span class="nx">thisDoesSomething</span><span class="p">;</span>
<span class="c1">// This will assign the functional value(reference) of the 'thisDoesSomething' function</span>
<span class="c1">// Not the return result! Note that there are no parentheses</span>
<span class="k">do</span><span class="p">();</span>
<span class="c1">// This will have the same functionality as thisDoesSomething();</span></code></pre></figure>으악 자바스크립트로 앱 개발도 해봤으면서 이제서야 기초를 다지고 있다니 너무 웃기지만! 기초가 없는 상태로 쭉 가는 것모단 이게 더 낫겠지…Node.js Tutorial #22019-01-05T00:00:00+00:002019-01-05T00:00:00+00:00https://haesookim.github.io/TIL/node/2019/01/05/nodejs-tutorial-2<h3 id="eventemitter-class">EventEmitter Class</h3>
<p>event 모듈을 필요로 하고, 여러 가지 기능에 따라 다른 method를 사용한다.</p>
<ul>
<li>addListener(event, listener)
<ul>
<li>listener는 여러 번 추가될 수 있다 (같은 조합으로 여러 번 호출할 경우)</li>
<li>지정된 event의 listener array의 끝에 해당 listener를 추가한다</li>
</ul>
</li>
<li>on(event, listener)
<ul>
<li>addListener와 차이는?</li>
</ul>
</li>
<li>once(event, listener)
<ul>
<li>1회성 listener를 추가한다</li>
<li>event가 이 다음에 호출되는 첫 번째 경우에 listener가 작동하고, 그 후에는 작동하지 않음</li>
</ul>
</li>
<li>removeListener(event, listener)
<ul>
<li>listener array에서 해당하는 listener를 제거한다</li>
<li>array index가 바뀐다</li>
</ul>
</li>
<li>removeAllListeners([event])</li>
<li>setMaxListeners(n)
<ul>
<li>기본적으로 EventEmitter는 10개 이상의 listener를 가질 때 경고메시지를 출력한다</li>
<li>Zero input -> unlimited output</li>
</ul>
</li>
<li>listeners(event)
<ul>
<li>returns listener array</li>
</ul>
</li>
<li>emit(event, [arg1], [arg2], ….)
<ul>
<li>execute each of the listeners in order with the supplied arguments</li>
<li>return boolean for whether the event had listeners</li>
</ul>
</li>
</ul>EventEmitter ClassML #3: Multivariate Linear Regression2019-01-03T00:00:00+00:002019-01-03T00:00:00+00:00https://haesookim.github.io/TIL/coursera%20stanford%20ml/2019/01/03/ml-lecture3<h3 id="linear-regression-with-multiple-variables">Linear Regression with multiple variables</h3>
<p>Multiple variables (features) come together to output a single output variable</p>
<p>Need an update in notations:</p>
<ul>
<li><em>n</em> : Number of features</li>
<li><em>x(i)</em> : Features of the <em>i</em>th training example (an n-dimensional vector)</li>
<li><em>x_j(i)</em>: Value of feature <em>j</em> in the <em>i</em>th training example</li>
</ul>
<p>An hypothesis with <em>n</em> features is expressed by (Theta transposed) * (X) where</p>
<ul>
<li>Theta is the n+1 dimensional vector comprised of the parameters</li>
<li>X is the n+1 dimensional vector comprised of the features
<ul>
<li>for notation purposes, <em>x_0</em> = 1, so that theta_0 is kept and preserved</li>
</ul>
</li>
</ul>
<h3 id="gradient-descent-for-multivariate-regression">Gradient descent for multivariate regression</h3>
<p>Similar to univariate gradient descent, but there is a nested sum variable to stand for the hypothesis that now allows for multiple variable slots.</p>
<p>The repeat until convergence step is also preserved, except to iterate for all <em>n</em> features of the set</p>
<ul>
<li>add cost function equations here</li>
</ul>
<h3 id="methods-to-facilitate-gradient-descent-in-multivariate-regression">Methods to facilitate gradient descent in multivariate regression</h3>
<ul>
<li>Feature Scaling
<ul>
<li>Make sure the features are on a similar scale when using gradient descent</li>
<li>Skewed models oscillate, which lead to inefficient convergence</li>
<li>match the features in an approximately -1 <= x <= 1 scale
<ul>
<li>rule of thumb may vary</li>
</ul>
</li>
</ul>
</li>
<li>Mean Normalization
<ul>
<li>allow the features to have approximately zero mean to account for variation scales</li>
<li>divide by range or standard deviation</li>
</ul>
</li>
</ul>
<h3 id="debugging-gradient-descent">Debugging Gradient Descent</h3>
<ul>
<li>Automatic Convergence test
<ul>
<li>conclude for convergence if the change in cost function value is less than an arbitrary epsilon?</li>
<li>basically checking for convergence</li>
</ul>
</li>
</ul>
<p>For a sufficiently small learning rate (alpha), the cost function value will decrease on every iteration.</p>
<ul>
<li>if the learning rate is too small, the convergence may be too slow</li>
<li>if too large, may diverge
<ul>
<li>if the cost function value is diverging over iteration, one must decrease the learning rate to ensure convergence</li>
</ul>
</li>
</ul>
<h3 id="polynomial-regression">Polynomial regression</h3>
<ul>
<li>Add arbitrary features that are polynomial values of the original feature value</li>
<li>must consider for feature scaling and mean normalization since scales multiply in a geometric scale</li>
</ul>Linear Regression with multiple variables