참고사이트 - ChoDragon9/posts GitHub Wiki

• https://woowacourse.github.io/javable/
• https://madnight.github.io/githut/#/pull_requests/2020/1
• https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks
• markdown을 웹 사이트로 만들 때 빠르게 만들기 유용함.
  • https://vuepress.vuejs.org/guide/getting-started.html

3D

• https://eyes.nasa.gov/curiosity/
• https://eyes.nasa.gov/apps/mars2020/#/home
• 미니카 게임 - https://bruno-simon.com/
  • https://threejs-journey.xyz/

React

• https://immigration9.github.io/
• https://overreacted.io/
• https://goidle.github.io/

게임

• 스네이크 게임
• 테트리스

브라우저별 블로그

• https://blog.chromium.org/
• https://devblogs.microsoft.com/typescript/
• https://www.ecma-international.org/news/
• https://nodejs.org/ko/blog/
• https://blogs.windows.com/windowsexperience/tag/internet-explorer/
• https://blogs.windows.com/windowsexperience/tag/microsoft-edge/
• https://blog.mozilla.org/en/category/products/firefox/
• https://webkit.org/blog/
• https://www.itpro.co.uk/web-browser

학습 사이트

• https://microsoft.github.io/frontend-bootcamp/
• https://solvesql.com/

무료 게임용 3D 렌더링

• https://www.mixamo.com/#/?page=1&type=Character

통계

• Github: https://octoverse.github.com/
• HTTP: https://almanac.httparchive.org/en/2020/
• UX와 통계학: https://present.do/decks/60bf964c1903093a77d16625

관리

• 소프트웨어 버전 semver
• commit 컨벤션: https://udacity.github.io/git-styleguide/

시각화(Visualization)

• npmgraph: A Fun Way to Visualize Package Dependency Graphs
• Gof Design Patterns
• Javascript Visualized
• 5 Beautiful Visual Resources for Visual Learners
• DOM Events
• https://www.taniarascia.com/javascript-mvc-todo-app/

재미

• Window 98 UI

You Dont Need

• You Might Not Need Vuex with Vue 3
• jQuery 바닐라로 구현
• You Dont Need Lodash Underscore

Angular

• Bloom Filter알고리즘과 Angular DI 성능 개선
• Version 10 of Angular Now Available

프레젠테이션

• 자바스크립트 마크다운 프레젠테이션

백엔드

• SQL 최적화 : https://www.eversql.com/

SSR

• 어서 와, SSR은 처음이지? - 도입 편

자료구조

• https://medium.com/javarevisited/7-javascript-data-structures-you-must-know-95123122cc39

그림 그리기 툴

• 설계 문서 웹서비스
• 손그림 그리기 서비스(협업 기능있음): https://excalidraw.com/
  • https://github.com/dai-shi/excalidraw-animate/blob/master/README.md
• 프로토타이핑
  • https://ovenapp.io/

성능 최적화

• https://jsperf.com/
• https://esbench.com/
• 성능 최적화 | Toast UI
• Vue Performance
• Front-End Performance Checklist 2020
• Javascript SDK Performance
• DOM 렌더링
  • Incremental DOM
  • Virtual DOM
• Lighthouse 웹 앱의 품질 개선 자동화 도구
• Loop Unrolling
• Duff's Device
• Front End Performance Checklist
• 프런트 엔드 성능 체크리스트 번역
  • https://frontendchecklist.io/
• 가비지 컬렉터
• CPU, RAM, HDD 속도 및 웹 캐싱
• Web Dev Fast
• AngularJs Object.observer() 성능개선
• 메모리
  • 모질라 메모리 특강
  • 크롬 메모리
  • 자바스크립트와 V8 엔진의 메모리 관리 프로세스

유용한 서비스

• 스니펫, snippet
  • https://www.30secondsofcode.org/js/p/1/
  • https://github.com/leonardomso/33-js-concepts#notification-settings
  • https://1loc.dev/
  • https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore
• 모바일 브라우저 개발자 툴 추가 오픈소스
• nodejs/playground
• Diff 서비스
• JSON to TypeScript 처럼 변환 사이트
• 오픈소스 CDN 서비스
• 코드 이쁘게 사진으로
• 코드 뷰티파이 웹서비스
• 라이브 코드 확인
• 정규식 시각화
• 정규식 참고 - https://regexr.com/2rhq7
• 링크 짧게 줄여줌
• 마크다운 프레젠테이션
• 페이스북 링크 썸네일 수정
• 스팸체
• 클로저 REPL

기술블로그

• 라인: https://engineering.linecorp.com/ko/blog/
• 우아한 형제들: http://woowabros.github.io/
• NHN: https://meetup.toast.com/
• 네이버: https://d2.naver.com/home

기술 트렌드

• Read Trend
• ES Next News
• NHN Ent FE Weekly
• https://blog.chromium.org/
• https://www.ecma-international.org/news/
• https://devblogs.microsoft.com/typescript/
• https://nodejs.org/ko/blog/
• https://blogs.windows.com/windowsexperience/tag/internet-explorer/
• https://blogs.windows.com/windowsexperience/tag/microsoft-edge/

설계

• 10가지 소프트웨어 아키텍처 패턴 요약

조직 관리

• 조직을 말려죽이는 micromanager

보안

• XSS Filter Evasion Cheat Sheet

포스트

• 로컬 HTTPs 인증서
• AST
• 웹팩 가이드
• 면접질문
• 점진적인 레거시 웹 애플리케이션 개선 과정
• 웹 서비스 아키텍쳐
• 소프트웨어 합성
• React의 탄생배경과 특징
• Front-End 프로젝트의 Test Code 작성 경험기
• Git Origin Story in Korean
• 자바스크립트 오픈 소스 통계
• 클린 코드 정리
• 면접에 알고리즘 문제를 내는 이유
• Bool 변수 이름 제대로 짓기 위한 최소한의 영어 문법

반응형

• 자바스크립트 Reactivity에 대한 가장 좋은 설명
• 0.7KB로 Vue와 같은 반응형 시스템 만들기

CSS

• https://hankchizljaw.com/wrote/a-modern-css-reset/
• https://github.com/vincentdoerig/latex-css/blob/master/README.md
  • 자연과학이나 인문과학중 수식, 그래프, 다이어그램을 많이 그리는 학자들에게 유용한 문서 저작도구. 문서 작성 도구의 일종으로, 논문이나 출판물 등의 특수 형식 문서를 작성하는 데 쓰이는 시스템.
• 이미지 애니메이션: https://itnext.io/creating-css-animations-using-sprite-sheet-47e2b7a3793c

TypeScript

• 타입스크립트 깃북정리
• 타입스크립트 핸드북
• 타입스크립트 스타일
• 클린코드 타입스크립트

PWA

• Tinder의 프로그래시브 웹 앱 성능 케이스 스터디
• PINTEREST 프로그래시브 웹 앱 성능 케이스 스터디

RxJS

• rxmarbles
• reactive.how
• 예제를 통해 익히는 RxJS - 이해하기

Javascript

• Tasks, microtasks, queues and schedules
• Worker DOM
• 7 Tricks with Resting and Spreading JavaScript Objects

강의

• 공개 대학 강의
• 머신 러닝 강의

플랫폼

• IOS Event Delegation
• Chrome Status
• iOS 10 / Safari / Select Element 삭제 버그
• 윈도우 6.x 버전

디자인

• 리메인 스타일 가이드
• 디자인 리펙토링 가이드
• 구글 한글 폰트 오픈소스
• 한글 폰트 최적화
• Design Seeds
• 무료 고화질 이미지
• 박스아이콘 800
• 디자인 쉐어링 사이트
• 디자인 방법론, 그리드 시스템

디자인 참고 사이트

• awwwards
• dribbble