└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # articles 2 | The easy-to-understand articles. 3 | 4 | ## Javascript 5 | 6 | #### ES5 7 | - [자바스크립트는 왜 프로토타입을 선택했을까](https://medium.com/@limsungmook/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%99%9C-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85%EC%9D%84-%EC%84%A0%ED%83%9D%ED%96%88%EC%9D%84%EA%B9%8C-997f985adb42) 8 | - [JavaScript 표준을 위한 움직임: CommonJS와 AMD](https://d2.naver.com/helloworld/12864) 9 | - [RequireJS - AMD의 이해와 개발](https://d2.naver.com/helloworld/591319) 10 | - [Scope의 이해](http://www.nextree.co.kr/p7363/) 11 | - [쉽게 이해하는 자바스크립트 프로토타입 체인](https://meetup.toast.com/posts/104) 12 | - [자바스크립트 함수 (1) - 함수 객체, 함수 객체 생성](https://meetup.toast.com/posts/118) 13 | - [자바스크립트 함수 (2) - 함수 호출](https://meetup.toast.com/posts/123) 14 | 15 | #### ES6+ 16 | - [Proxy](https://medium.com/@la.place/javascript-es6-proxy-da8ae2946dff) 17 | - [Async-await](https://developers.google.com/web/fundamentals/primers/async-functions?hl=ko) 18 | - [Optional Chaining](http://dev-momo.tistory.com/entry/Javascript-Optional-Chaining) 19 | - [Javascript Iterator](http://dev-momo.tistory.com/entry/Javascript-Iterator?category=536788) 20 | - [Async-wait는 어떻게 구현하는가](http://dev-momo.tistory.com/entry/Asyncawait%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94%EA%B0%80-1) 21 | - [ES6의 제너레이터를 사용한 비동기 프로그래밍](https://meetup.toast.com/posts/73) 22 | - [Generator in Practice](https://meetup.toast.com/posts/93) 23 | - [자바스크립트 프라미스: 소개](https://developers.google.com/web/fundamentals/primers/promises?hl=ko) 24 | - [let과 const는 호이스팅 될까?](https://wonism.github.io/is-let-hoisted/) 25 | 26 | #### React 27 | - [Making Sense of React Hooks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) 28 | - [Redux Middleware, 비동기 작업](https://velopert.com/3401) 29 | - [Redux-Saga: 사이드 이펙트 관리](https://meetup.toast.com/posts/136) 30 | - [Redux-Saga: 제네레이터와 이펙트](https://meetup.toast.com/posts/140) 31 | - [Redux-Saga: Channel](https://meetup.toast.com/posts/145) 32 | - [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) 33 | - [Mixins Considered Harmful](https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html) 34 | - [React 렌더링과 성능 알아보기](https://meetup.toast.com/posts/110) 35 | - [리액트의 Hooks 완벽 정복하기](https://velog.io/@velopert/react-hooks) 36 | - [함수형 컴포넌트와 클래스, 어떤 차이가 존재할까?](https://overreacted.io/ko/how-are-function-components-different-from-classes/) 37 | - [You Probably Don't Need Derived State](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html) 38 | - [Flux로의 카툰 안내서](https://bestalign.github.io/translation/cartoon-guide-to-flux/) 39 | - [단단한 컴포넌트 부수기(feat. 조합, IoC)](https://brunch.co.kr/@finda/556) 40 | - [Getting Closure on React Hooks by Shawn Wang | JSConf.Asia 2019](https://youtu.be/KJP1E-Y-xyo) 41 | - [React Testing Library 사용법](https://www.daleseo.com/react-testing-library/) 42 | - [Making setInterval Declarative with React Hooks](https://overreacted.io/making-setinterval-declarative-with-react-hooks/) 43 | - [다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법](https://velog.io/@velopert/react-context-tutoria) 44 | 45 | #### Engine 46 | - [자바스크립트와 이벤트 루프](https://meetup.toast.com/posts/89) 47 | - [최신 브라우저의 내부 살펴보기 1 - CPU, GPU, 메모리 그리고 다중 프로세스 아키텍처](https://d2.naver.com/helloworld/2922312) 48 | - [최신 브라우저의 내부 살펴보기 2 - 내비게이션 과정에서 일어나는 일](https://d2.naver.com/helloworld/9274593) 49 | - [최신 브라우저의 내부 살펴보기 3 - 렌더러 프로세스의 내부 동작](https://d2.naver.com/helloworld/5237120) 50 | - [JavaScript 엔진 동작을 알아야 하는 이유](https://devtimothy.tistory.com/94) 51 | - [Hidden Class](https://engineering.linecorp.com/ko/blog/v8-hidden-class/) 52 | 53 | #### TypeScript 54 | - [타입스크립트 조건부 타입 완벽 이해하기](https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A1%B0%EA%B1%B4%EB%B6%80-%ED%83%80%EC%9E%85-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0) 55 | 56 | #### Useful 57 | - [100,000개의 아이템도 거뜬한 셀렉트박스 만들기](https://meetup.toast.com/posts/160) 58 | - [Proxy와 가상 돔을 사용하여 나만의 프레임워크 만들기](https://meetup.toast.com/posts/158) 59 | - [TDD와 Mocha](http://dev-momo.tistory.com/entry/TDD-Mocha-Javascript-Test-Framework) 60 | - [이미지 필터 만들기](http://dev-momo.tistory.com/entry/Javascript-Image-Filter-%EB%A7%8C%EB%93%A4%EA%B8%B0?category=536788) 61 | - [알아두면 쓸만한 크롬 콘솔 기능](http://dev-momo.tistory.com/entry/%EC%95%8C%EB%A7%88%EB%91%90%EB%A9%B4-%EC%93%B8%EB%A7%8C%ED%95%9C-Chrome-Console-%EA%B8%B0%EB%8A%A5?category=536788) 62 | - [성능 좋은 웹 애니메이션과 인터렉션: 60 FPS 달성](https://github.com/codepink/codepink.github.com/wiki/%EC%84%B1%EB%8A%A5-%EC%A2%8B%EC%9D%80-%EC%9B%B9-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%EA%B3%BC-%EC%9D%B8%ED%84%B0%EB%A0%89%EC%85%98:-60-FPS-%EB%8B%AC%EC%84%B1) 63 | - [javascript-algorithms](https://github.com/trekhleb/javascript-algorithms/blob/master/README.ko-KR.md) 64 | - [design-patterns-JS](https://github.com/fbeline/Design-Patterns-JS) 65 | - [크롬 개발자 도구를 이용한 자바스크립트 디버깅](https://subicura.com/2018/02/14/javascript-debugging.html) 66 | - [실용적인 프론트엔드 테스트 전략 (1)](https://meetup.toast.com/posts/174) 67 | - [must-watch-javascript](https://github.com/AllThingsSmitty/must-watch-javascript) 68 | - [Middleware Parttern TDD](http://blog.jeonghwan.net/series/2018/12/08/node-web-8_middleware.html) 69 | - [프런트엔드 엔지니어를 위한 베지에 곡선(Bézier Curves)](https://blog.coderifleman.com/2017/01/02/bezier-curves-for-frontend-engineer-1/) 70 | - [벨로퍼트와 함께하는 리액트 테스팅](https://velog.io/@velopert/series/react-testing) 71 | - [트리 쉐이킹으로 자바스크립트 페이로드 줄이기](https://ui.toast.com/weekly-pick/ko_20180716) 72 | - [Vanilla Javascript로 가상돔(VirtualDOM) 만들기](https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/) 73 | - [토스ㅣSLASH 21 - JavaScript Bundle Diet](https://www.youtube.com/watch?v=EP7g5R-7zwM) 74 | - [type-challenges](https://github.com/type-challenges/type-challenges) 75 | 76 | ## HTML 77 | - [tabindex 사용](https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex?hl=ko) 78 | 79 | ## CSS 80 | - [CSS 애니메이션 성능 개선 방법](http://wit.nts-corp.com/2017/06/05/4571) 81 | - [하드웨어 가속에 대한 이해와 적용](https://d2.naver.com/helloworld/2061385) 82 | - [flexbox로 만들 수 있는 10가지 레이아웃](https://d2.naver.com/helloworld/8540176) 83 | - [효율적인 다크 모드 구현을 위한 배경/전경 컨텍스트 기반의 컬러 팔레트 만들기 (feat. CSS variable)](https://xenosium.com/entry/8679/) 84 | 85 | ## Functional Programming 86 | - [함수형 프로그래밍이란 무엇인가](https://medium.com/@jooyunghan/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-fab4e960d263) 87 | - [Currying Hello world](https://medium.com/@la.place/currying-hello-world-ce452b988f2b) 88 | - [고차 함수](http://blog.jeonghwan.net/js/2017/04/03/high-order-function-in-javascript.html) 89 | - [HOF란 무엇인가](http://dev-momo.tistory.com/entry/HigherOrder-Function-%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80?category=536788) 90 | - [FP in JS(자바스크립트로 접해보는 함수형 프로그래밍)](https://velog.io/@nakta/series/FP-in-JS) 91 | - [소프트웨어 합성](https://tpgns.github.io/2018/04/28/composing-software-translation-epilogue/) 92 | - [JS개발자는 아직도 모나드를 모르겠어요](https://overthecode.io/i-am-js-developer-and-still-dont-know-monad/) 93 | 94 | ## Server 95 | - [서버리스 아키텍쳐(Serverless)란?](https://velopert.com/3543) 96 | 97 | ## Nodejs 98 | - [Express Error Handling](http://dev-momo.tistory.com/entry/nodejs-error-handling?category=536788) 99 | - [GraphQL 개념잡기](http://tech.kakao.com/2019/08/01/graphql-basic/) 100 | 101 | ## Docker 102 | - [초보를 위한 도커 안내서 - 도커란 무엇인가](https://subicura.com/2017/01/19/docker-guide-for-beginners-1.html) 103 | - [Docker Swarm을 이용한 쉽고 빠른 분산 서버 관리](https://subicura.com/2017/02/25/container-orchestration-with-docker-swarm.html) 104 | - [쿠버네티스 안내서](https://subicura.com/k8s/guide/#%E1%84%80%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3) 105 | 106 | ## Design 107 | - [Designing Websites for iPhone X](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) 108 | 109 | ## iOS 110 | - [공식문서 만으로 iOS 개발 배우기](https://sungdoo.dev/programming/start-ios-development-with-offical-docs/) 111 | 112 | ## Tools 113 | #### Git 114 | - [Write yourself a Git!](https://wyag.thb.lt/) 115 | - [GitHub의 Merge, Squash and Merge, Rebase and Merge 정확히 이해하기](https://meetup.toast.com/posts/122) 116 | - [좋은 git commit 메시지를 위한 영어 사전](https://blog.ull.im/engineering/2019/03/10/logs-on-git.html) 117 | 118 | #### Terminal 119 | - [초보자를 위한 Vim 입문서](https://www.joinc.co.kr/w/Site/Vim/Documents/UsedVim?fbclid=IwAR2IetQJRJHrslHuWtsU2Ga8sekYspZ_yssjcOEJte94QingTD-nM5QMUNA#AEN18) 120 | - [macOS 초심자를 위한 터미널 공부 가이드](https://johngrib.github.io/wiki/my-mac-os-terminal/) 121 | - [알아두면 도움되는 iTerm2 고급기능](https://medium.com/harrythegreat/%EC%95%8C%EC%95%84%EB%91%90%EB%A9%B4-%EB%8F%84%EC%9B%80%EB%90%98%EB%8A%94-iterm2-%EA%B3%A0%EA%B8%89%EA%B8%B0%EB%8A%A5-81a4cd81bab7) 122 | 123 | ## Network 124 | - [HTTPS와 SSL 인증서](https://opentutorials.org/course/228/4894) 125 | - [HTTP Cache](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=ko) 126 | - [캐시가 동작하는 아주 구체적인 원리](https://parksb.github.io/article/29.html?fbclid=IwAR26jjGWzxOeYhdUapBWMmZXOYhH-4kvIAcT1y8iIGKSv8WINbCaIZh2oxs_) 127 | - [만화로 보는 DNS over HTTPS](http://hacks.mozilla.or.kr/2019/10/a-cartoon-intro-to-dns-over-https/) 128 | 129 | ## Security 130 | - [Node.js에서의 프로토타입 오염 공격이란 무엇인가](https://blog.coderifleman.com/2019/07/19/prototype-pollution-attacks-in-nodejs/?fbclid=IwAR1-fvZGaG57zCeW53dK8IF3AAQA1tDfc6ZAQb4zS19BZGxkJ-AgbHr4Dco) 131 | - [OAuth 2.0 대표 취약점과 보안 고려 사항 알아보기](https://meetup.toast.com/posts/105) 132 | - [안전한 패스워드 저장](https://d2.naver.com/helloworld/318732) 133 | 134 | ## Compiler 135 | - [Writing An Interpreter In Go](https://interpreterbook.com/) 136 | - [the-super-tiny-compiler](https://git.io/compiler) 137 | 138 | ## Algorithm 139 | - [geeksforgeeks](https://www.geeksforgeeks.org/) 140 | - [Halting Problem](https://johngrib.github.io/wiki/halting-problem/) 141 | 142 | ## ETC 143 | - [차이를 만드는 커리어 굴리기](https://speakerdeck.com/unbing/caireul-mandeuneun-keorieo-gulrigi) 144 | - [첫 프리랜서 도전기](https://brunch.co.kr/@chickenmoim/5?fbclid=IwAR0fNzAa13FnHjjAIXaT13ezHhFlLLZLND3NDEa1O0NBck1tOYD4SuBpiyo) 145 | - [Announcing the curl cookbook](https://catonmat.net/announcing-curl-cookbook) 146 | - [사용자 중심적인 성능 측정항목](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics?hl=ko) 147 | - [How to Read Paper](https://web.stanford.edu/class/ee384m/Handouts/HowtoReadPaper.pdf) 148 | - [Atlassian JIRA를 이용한 애자일 Scrum 프로젝트 관리](http://bcho.tistory.com/826) 149 | - [VS CODE extension for FE](https://amati.io/2019/04/25/vs-code-extension-for-fe/?fbclid=IwAR0P-JnrQ7QKeQDK-TBo4IQFfu3i-VyfVOWLbTrT67ROVLZQd8VpTnePEfI) 150 | - [구글의 디자인 윤리학자](https://brunch.co.kr/@cliche-cliche/61?fbclid=IwAR2m9WCwMaDz5NZ28RoXHBZ7h0vXB3d-ZICIRn1P1Dx74LaDW9N2kiD2K1g) 151 | - [라이트하우스 6.0에서 바뀐 성능 지표변화](https://ui.toast.com/weekly-pick/ko_20200528/) 152 | - [mobbin](https://mobbin.design) 153 | - [wwit](https://wwit.design) 154 | - [지원자도 회사를 평가합니다. 이렇게요.](https://brunch.co.kr/@goodgdg/142) 155 | - [Learn Haskell by building a blog generator](https://lhbg-book.link/) 156 | - [간단한 유틸 함수 NPM 라이브러리 배포해보기 (feat. TypeScript 지원, ESM 지원)](https://junghyeonsu.com/posts/deploy-simple-util-npm-library/) 157 | - [Google Engineering Practices Documentation](https://google.github.io/eng-practices/) 158 | - [발표의 정석](https://drive.google.com/file/d/1uQ5VOXBNk_Nf6V5JUXhKl2pHZY5N1wA4/view?pli=1) 159 | --------------------------------------------------------------------------------