MyTutorials

2021을 마무리하며.

hYhY1234 — Sun, 26 Dec 2021 00:36:54 +0900

올해 초에 신년계획으로 3가지 목표를 세웠다. 내가 얼마나 이뤘는지 한번 회고를 해보려고 한다.

JavaScript 잘 알게 되기

확실히 이건 이뤘다. Modern JavaScript Deep Dive책도 보고 완전 프론트개발자로 일도 시작하게 되면서 브라우저의 특성 등에 대해서 더 이해가 깊어지지 않았나 싶다. 그리고 가장 좋은 점은 이전에는 JavaScript가 C나 C++에 비해서 너무 무근본인거같아서 좀 당혹스러웠지만 프로토타이핑을 계속하다보니까 대충 설계되어있는 언어의 장점도 있다는것과 왜 Typescript등 타이핑 시스템이 필요한지 느낄수 있었다.

밥벌이 하기

이부분도 생각보다 많이 이루었다. 이번해는 처음으로 플러터 프로토타이핑을 해주는 외주도 경험했고, 프론트엔드 전업으로 일도 해보니 전문성이 좀 증가하면서 밥벌이도 훌륭하게 해낸 해가 아닌가 싶다.

블로그, 스택오버플로우 reputation 쌓기, 오픈 소스활동 등.

블로그는 티스토리와 미디엄을 병행하면서 쓰고 있고, 이제 점점 어떤 방향으로 블로그를 관리하면 좋을지 감을 잡게 되었다.

https://medium.com/@hayoung0.lee

Hayoung Lee – Medium

Read writing from Hayoung Lee on Medium. Working at BGPworks. Every day, Hayoung Lee and thousands of other voices read, write, and share important stories on Medium.

medium.com

미디엄에 글을 쓸때는 더 상세하게 쓰려고 노력하는 면도 있긴하다.

올해동안 그래도 꽤많이 씀

그리고 StackOverflow의 reputation은 100이 목표였는데 그렇게까진 자주 못했는데 운이 좋게도 이래저래 점수를 좀 받아서 79점에 도달했다!

오픈소스 활동도 좀 시작을 했는데 내년에는 오픈소스를 더 많이 해보려고 한다.

후기

대충 올해 아무것도 안한것같긴했는데 나름 많이 이루었다. 뿌듯하다. 개발이확실히 할수록 매력이 있는 분야이긴하다. 내년 목표도 조만간 정해봐야지

Didact 키 구현 제대로 참교육 당했다. 키를 잘쓰자

hYhY1234 — Thu, 11 Nov 2021 00:14:08 +0900

https://codesandbox.io/s/didact-8-forked-rguiq?file=/src/index.js

didact-8 (forked) - CodeSandbox

didact-8 (forked) by hayoung0Lee using react, react-dom, react-scripts

codesandbox.io

리액트 구조를 파헤쳐 본답시고 didact글을 열심히 보고 있다.

키 최적화가 어떻게 구성될까 싶어서 대충 내머리를 굴려서 해봤는데,

개박살이 난다. 키를 다 넣어주면 되지만, 넣었다 안넣었다 난리를 치면 박살이 나는데,

react도 키를 중구난방으로 넣으면 예기치 못하게 동작한다더니, 나도 그렇다.

이제 키를잘써야겠다.

https://pomb.us/build-your-own-react/

Rodrigo Pombo

An overengineer building tools for better code reading comprehension

pomb.us

이글을 열심히 읽엇는데 이제 진짜 react코드도 한번 뜯어봐야겠다.

https://reactjs.org/docs/how-to-contribute.html

How to Contribute – React

A JavaScript library for building user interfaces

reactjs.org

UI 알면 알수록 아주 요물이다.

rustup, cargo, wasm-pack 차이

hYhY1234 — Tue, 21 Sep 2021 20:51:43 +0900

- cargo는 rust 패키지 관리를 한다.

ls ~/.cargo/bin/

이렇게 하면 cargo가 지금 global하게 뭔 패키지를 관리하고 있는지 확인 가능하다.

- rustup은 rust 언어의 버전을 관리한다. 아래 방식으로 현재 rust 툴체인 확인을 한다.

- wasm-pack 은 rust 로 wasm 프로젝트 생성하고 진행하는걸 돕는 패키지이다.

zsh 알아보기 + Terminal, console, shell, kernal 정리하기

hYhY1234 — Sat, 18 Sep 2021 00:52:21 +0900

Terminal, console, shell, kernal 정리하기

우선 zsh을 알아보기 전에 Terminal, console, shell, kernal의 차이를 한번 잠깐 리프레시하고 가는 글을 읽었다.

요약하자면, linux든, mac os든 terminal이 있다. 그걸 키고 우리가 명령어를 뚝딱뚝딱 치는건데, terminal 자체가 우리가 치는 명령을 process 하는 것은 아니고 얘는 그냥 commands를 받고 결과물을 스크린에 보여주는 역할을 하고 있다(윈도우에서는 console이라고 부름). 그리고 실제로 처리는 shell에 맡긴다.

shell은 commands를 해석하고, syntax확인이나 제대로 써진건지 그런걸 확인한다. 다 괜찮으면 kernel이 이해할 수 있는 형태로 변경해서 kernel에 보낸다. 오류가 있었다면 error message을 반환한다.

kernel은 shell 다음에 있는 애고, shell이 넘겨준 명령을 처리를 해야한다. os 라이브러리와 디바이스 드라이버등을 이용한다.

kernel은 위키피디아에서 좀더 살펴보면 아래와 같다.

위키피디아 이미지: https://en.wikipedia.org/wiki/Kernel_(operating_system)#/media/File:Kernel_Layout.svg

kernel은 os의 코어이다. 모든걸 통제한다. 실제로 cpu, memory, 디바이스에 뭘 처리할지 일을 하는 애다. (더 알아보기)

* 추가 글: https://www.geeksforgeeks.org/what-is-terminal-console-shell-and-kernel/

What is Terminal, Console, Shell and Kernel? - GeeksforGeeks

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

www.geeksforgeeks.org

zsh이란?

그럼 이제 이건 뭔가.

https://www.howtogeek.com/362409/what-is-zsh-and-why-should-you-use-it-instead-of-bash/

What is ZSH, and Why Should You Use It Instead of Bash?

ZSH, also called the Z shell, is an extended version of the Bourne Shell (sh), with plenty of new features, and support for plugins and themes. Since it’s based on the same shell as Bash, ZSH has many of the same features, and switching over is a breeze.

www.howtogeek.com

Terminal 에서 echo $SHELL 하면 지금 무슨 shell 쓰는지 나온다.

나는 zsh 쓰는 중

zsh은 bash shell 보다 제공하는 기능이 많다. automatic cd 같은 것들. 그리고 plugin이나 theme 을 제공한다는 차이가 있다.

Plugin이나 Theme은 oh-my-zsh을 통해서 설정할 수 있다. oh-my-zsh은 zsh의 플러그인 프레임워크이다. 여기에 많은 theme들이 있다.

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

이렇게 terminal에 입력해서 설치하고 나서 설치가 되면 default theme은 Robby의 Theme이다.

일케 생겼다. 좀더 좋은게 있나 봤더니, https://github.com/ohmyzsh/ohmyzsh/wiki/Themes 여기서 theme을 찾을 수 있다.

나는 적당해보이는애로 일단 한번 골라서 써보려고 한다. 적용하고 Terminal 재시작하면 적용된다.

Shadow-cljs란

hYhY1234 — Tue, 7 Sep 2021 00:16:15 +0900

https://code.thheller.com/blog/shadow-cljs/2019/03/01/what-shadow-cljs-is-and-isnt.html

What shadow-cljs is and isn't

I’ll try to properly describe what shadow-cljs actually is since there seem to be a few common misconceptions that keep coming up that are simply incorrect. This is not actually an introduction for shadow-cljs, rather a definition of why it is different

code.thheller.com

Shadow-cljs는 ClojureScript와 JavaScript build툴이다. npm JavaScript ecosystem을 clojureScript에서 접근할 수 있게 해준다. 근데 얘는 JVM위에서 돌기때문에, JavaScript랑, ClojureScript할건데도 JVM 깔아야한다. 그리고 내부적으로는 clojure compiler로 JavaScript를 처리하고, 최적화된 JavaScript output을 만든다.

두달간 Clojure/ClojureScript를 써본 후기

hYhY1234 — Mon, 6 Sep 2021 23:43:31 +0900

Clojure/ClojureScript를 쓰는 회사에 와서 함수형프로그래밍을 본격적으로 해보게 되었는데, 두달간 사용해본 후기를 정리를 잠깐 해보려고 한다.

ClojureScript란

(defn func-example [data value]
    (assoc data
           [path1 path2]
           value))

대충 뭐 이렇게 생겨가지고, 괄호 괄호로 생겼고, data가 js로 쳤을때 {:path1 : {:path2 value}} 이렇게 생긴 데이터가 있을때, value의 값을 업데이트 할 수 있는 함수이다. 저렇게 생겨먹은 식으로 뭘 처리하는 언어고, clojureScript는 컴파일해서 JavaScript를 뿜는다. 이걸 두달정도 다뤄봤는데, 후기는 아래와 같다.

함수형 프로그래밍을 빡세게 쓴 느낌

https://www.inflearn.com/course/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/

[무료] 자바스크립트로 알아보는 함수형 프로그래밍 (ES5) - 인프런 | 강의

마플(http://www.marpple.com)의 CTO 유인동님이 알려주는 함수형 프로그래밍에 대한 강좌 입니다. 함수형 프로그래밍으로 라이브러리를 직접 만들어가며 함수형 프로그래밍의 패러다임과 코딩의 즐거

www.inflearn.com

올해 초에 함수형 프로그래밍에 유인동님의 강의를 들으면서 입문했었는데, 그때 뭔소린지 잘 못알아들으면서도 지금까지 해왔던 프로그래밍에 비해서는 확실히 재밌다는 생각을 했었다. 그러고나서는 딱히 실제 프로젝트에 적용은 못했는데(능력부족..) 이번에 함수형 프로그래밍을 하면서 느낀 것은 첨에는 Immutable하게 모든걸 처리한단게 이래도 되나... 싶을때도 있긴하지만 오히려 이상한데서 내 데이터 값을 바꿀리가 절대 없다는게 보장이 되어서 마음이 좀 편한 것도 있었다. 하지만 중첩된 데이터내에서 뭐하나 바꾸려고, assoc-in, update-in 같은 함수를 쓰다보면 첨에는 진짜 골치가 아팠다.

ClojureScript, Reagent, Reframe으로 React앱을 개발하는 느낌

JavaScript로 React앱 개발할떄보다 훨씬 흐름이 자연스럽다. vscode에서 calva익스텐션을 쓰면 함수를 단축키로 뗏다 붙였다, 이동도 하다보니 개발할때 진짜 키보드만 써도 되고, 위에서부터 아래로 읽어내려간다는 느낌으로 개발을 할수가 있다는 느낌.

학습 관련 느낌

느낌인진 모르겠는데, clojure쪽의 문서들은 JavaScript 설명하는 글들보다 엄청 자세하고, 상세하다. 자료의 절대량은 JavaScript보다 훨씬 적지만, 퀄리티는 엄청 좋은 것 같다. 하지만 나는 아무래도 주니어다보니 아직 모르는 부분들이 있다보니 첨에 엄청 헤매고, 지금도 해맨다.

https://www.learn-clojurescript.com/

Learn ClojureScript

Learn ClojureScriptGetting started with functional programming for the webClojureScript is a pragmatic functional programming language for building web applications. Whether you are an experienced JavaScript developer or a brand-new programmer, this book i

www.learn-clojurescript.com

이책도 좋다.

후기

나는 개인적으로 함수형 프로그래밍이 아직뭔지 잘 모르겠지만, 확실히 개발이 더 재밌어지는것 같다. 러닝 커브가 좀 있다곤 하지만, c언어첨에 말귀 못알아들었던것 생각하면 그리 나쁘지도 않을지도...?하지만 이건 더 하면서 매콤한맛 보다보면 생각이 변할 수도 있을것 같다.

JavaScript modules, defer, async 메모

hYhY1234 — Tue, 31 Aug 2021 23:29:30 +0900

JavaScript 생태계는 아무리 봐도 카오스다.

- module 소개: https://ko.javascript.info/modules-intro

모듈 소개

ko.javascript.info

- defer, async: https://ko.javascript.info/script-async-defer

defer, async 스크립트

ko.javascript.info

여러본 본 내용인데도, 역시나 혼란스러워서 자주 아리까리하다.

Three.js 쪽 공부를 하는데, module script를 사용해서 오랜만에 위의 문서를 다시 읽었다.

요약

1. defer, async

script를 로드하는게 html 파싱을 블락킹한다. 그래서 주로 듣는 해결책은 script 태그를 가장 하단에 포함시키는 것이다.

- defer 외부 스크립트를 부를때, script를 백그라운드에서 다운로드를 한다. 하지만 DOMContentLoaded event가 발생하기 전에 실행되는데, 이는 html 파싱할거 다하고, 발생하는 이벤트이다. 즉, html파싱 다하고 화면에 그린다음에, DOMContentLoaded event가 발생하는데, 이사이에 script를 백그라운드로 다운로드 받고, 실행을 할때까지 기다린다는 것이다. 그래서 script는 다 그려진 dom 트리를 볼수가 있다.

- async defer처럼 백그라운드에서 다운로드 하긴하는데, 완전 걍 자기 따로다. async스크립트끼리 서로 순서를 지키는것도 아니고, html페이지도 async가 뭘하던말던 걍 처리된다(asnyc script가 실행될때는 파싱이 잠깐 멈춘다고함). 글고 먼저 로드되면 걍 먼저 실행된다.

2. module

import될때 한번만 실행되고, import 하는 여러 곳에서 공요한다.

// admin.js
export let admin = {
  name: "John"
};

//   1.js
import {admin} from './admin.js';
admin.name = "Pete";

//   2.js
import {admin} from './admin.js';
alert(admin.name); // Pete

// admin.js는 한번 실행되고 공유됨

Jump to definition 기능 확장을 위한 vscode extension 개발

hYhY1234 — Sun, 1 Aug 2021 17:37:36 +0900

Jump to definition 기능을 보완하는 Vscode extension 개발기

VScode extension을 개발한 이유

medium.com

Medium에다가 글을 첨써봤다. 너무 뭔가 본격적인데 같아서 쓸때 달달 떨린다.

원했던 기능은 vscode에서 키워드에 마우스 올렸을때 definition으로 이동하는 기능을 확장하는거였다. css modules을 사용하는데, css-module을 사용하는 부분에서 jump to definition을 했을때, css 파일로 이동하는게 아니라, post-css가 뭔가 처리한 파일에다가 연결을 해줬다. 그래서 매번 css 파일을 열다가 이러다가 장수하긴 글른거같아, vs code extension을 만들어봤다. 생각보다 어려운건 아니었는데, 하는 사람들이 많이 없어서 난감했다.

하지만 기본적인건 jump to definition 기능은 location을 받아서 동작하는건데, location만 원하는대로 가공해서 반환해주로도록 definitionProvider 를 확장하면 되는 것이다.

버블링과 캡처링

hYhY1234 — Thu, 17 Jun 2021 10:15:44 +0900

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링

ko.javascript.info

이 문서가 가장 잘되어있다.

이벤트가 동작하면 일단 window객체에서 타깃으로 이벤트가 내려갔다가(캡처링), 다시 상위로 전파되는 동작(버블링)이 일어난다.

이때 대부분은 이벤트 핸들러가 상위로 전파되는 버블링단계에서 동작하는데, elem.addEventListener(..., {capture: true}) 이렇게하면 캡처링단계에서 동작하게 할 수도있다.

이때 버블링되는것을 막고 싶으면 e.stopPropagation을 사용할 수 있다.

* 추가: e.preventDefault

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault

event.preventDefault - Web API | MDN

이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.

developer.mozilla.org

preventDefault는 이벤트에 의해서 브라우저가 기본적으로 처리하는 동작을 취소하는 것이다. 이벤트 전파는 막는건 아니다.

스택으로 큐, 큐로 스택 메모

hYhY1234 — Tue, 15 Jun 2021 14:17:03 +0900

https://bellog.tistory.com/143

[리트코드(LeetCode)] 큐로 스택 구현하기, 스택으로 큐 구현하기 - Python

leetcode.com/problems/implement-queue-using-stacks Implement Queue using Stacks - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get..

bellog.tistory.com

자주 받는 질문인데, 자주까먹어서 찾아본 자료.

1. 스택으로 큐를 구현할때

- 스택 두개를 준비한다

- 큐의 성질은 뺄때 먼저 넣은게 먼저 나온다는 것(FIFO)

- 스택a에는 일단 밀어 넣고, 스택 b는 꺼낼때 이용한다.

- 스택 b에서 원소를 꺼낼때 비어있으면 a가 빌때까지 원소를 모두 b로 옮긴다. 이때 스택이기때문에 옮겨지면 b스택 가장 위에는 a스택에 가장 먼저 들어갔던것이 있게 된다.

- b가 빌때까지 계속 b에서 deque때 원소를 빼간다.

2. 큐로 스택을 구현

- 이건 방법이 여러개가 있는 것 같은데, 내가 이해한 방법은 아래와 같다.

- 일단 큐를 하나 준비한다.

- 스택의 성질은 나중에 넣은게 먼저 나오도록 해줘야한다(LIFO)

- 큐에 일단 밀어 넣되, 넣기전에 있었던 갯수만큼 큐에서 꺼낸다음 현재 넣은것 뒤로 순서대로 넣어준다. (원소를 넣기 전에 큐의 길이가 len이었다면 len번 큐에서 deque를 하고 enque를 해준다)

- 큐에서 꺼낼때는 앞에 있는게 가장 마지막에 넣었던 것이 된다.