Dev-Contents-House

🏄🏻‍ 서핑 중 유익한 글, 영상, 슬라이드를 공유합니다

📬 Facebook Page를 팔로잉하세요 👉 https://www.facebook.com/ImDevloper

📖 This Week

• 개발자의 AWS 권한을 GitOps로 우아하게 관리하는 방법
• readme.so
• A급 인재를 떠나게 하는 7가지 방법
• 쏘카 QA는 무슨 일을 하고 어떻게 일하나요?
• 쏘카 QA는 무슨 일을 하고 어떻게 일하나요?
• Just a moment...
• Just a moment...
• Wallaby
• TRACKIT에서 딥링크를 사용하는 방법
• [Experiment] X
• 고루틴의 동작 원리에 관하여
• 스타트업에서 AWS IAM 권한 관리 잘 하는법
• WebVM
• 그림으로 쉽게 보는 HTTP 변천사
• Just a moment...
• React Proto
• JavaScript 번들러로 본 조선시대 붕당의 이해
• Attention Required!
• Podman, Buildah, Skopeo를 활용하여 Docker CLI 대체하기
• podman 소개 및 설치
• Techie to tech lead: My five biggest mistakes
• NHN Cloud Meetup
• 프론트엔드와 THE TWELVE-FACTOR APP
• Attention Required!
• Attention Required!
• Helm 시작하기 - 1편. helm이란?
• Webpack 5
• Attention Required!
• PWA(Progressive Web Apps) Manifest 만들기
• Attention Required!
• Attention Required!
• next.js getInitialProps 사용법
• Attention Required!
• 타입 표명(Type Assertion)
• 사례별로 알아본 안전한 S3 사용 가이드
• react-philosophies
• DEVIEW 2021
• Github Action 을 cli 로 manual 하게 호출하기
• if(kakao) 2021
• NAVER D2
• Next.js Automatic Image Optimization with next/image Component
• NAVER D2
• Three.js Fundamentals
• 브라우저의 사용자 에이전트는 왜 이렇게 복잡하게 생겼을까?
• FEConf 2021
• Sentry로 사내 에러 로그 수집 시스템 구축하기
• Nextjs 11 릴리즈 노트 살펴보고 블로그에 적용하기
• When to useCallback and useMemo
• Faster React Apps With Memoization
• : 시행착오를 줄이는 방법
• Recoil
• React Error Handling and Logging Best Practices
• What's new in React 18?
• API Architectural Styles
• 변경에 유연한 컴포넌트
• What's new in React 18?
• 웹과 리액트 꼼꼼히 다시 배우기 #1 Element, Document, Dom tree, DOM
• 웹과 리액트 꼼꼼히 다시 배우기 #1 Element, Document, Dom tree, DOM
• Introducing Gatsby 4
• Create a new empty Nx Workspace
• 또 컴포넌트가 지멋대로 리렌더링 된다.
• Amplify Console에 monorepo를 연결해서 웹호스팅 할 때의 주의사항
• : Deploy a Server
• Notion – The all
• 도메인 주도 개발 전환 이야기
• How to Build a Monorepo with Nx, Next.js and TypeScript
• [Micro Frontend] 마이크로 프론트앤드
• 이모티콘 서비스는 왜 MSA를 선택했나? – tech.kakao.com
• Monolithic to Microservices Architecture with Patterns & Best Practices
• App Distribution(앱 배포)
• Version 6 (Development branch)
• 개발 실력을 위한 IT기업 기술 블로그 45곳 모음
• Incremental DOM과 Virtual DOM 비교
• Pre-Caching Images with React Suspense
• 오늘 또 잘못 커밋해 버리고 말았다...
• Nx와 Yarn Workspaces
• Micro Frontends 번역글 1/5
• 1 대결에서 이겼다.
• Stop Using Atomic Design Pattern
• 프론트엔드 개발자에게 가장 중요한 역량은?
• 세 달 간의 오늘의집 개발자 온보딩 과정을 돌아보다
• Systemizer
• 회복 탄력성 높은 프론트엔드 아키텍처 — 모니카 렌트, GOTO 2019
• TypeScript 4.4: The Good, The Bad and The Not So Bad
• React Virtual Dom and Memo on Performance
• stopPropagation vs stopImmediatePropagation 제대로 이해하기
• Rush로 프론트엔드 모노레포 도입기
• 도커는 무엇으로 어떻게 구성되어 있을까?
• http와 https가 어떤 차이가 있는지 간단하게 실습해 봅시다.
• LINE에서 테스트를 최적화하는 방법
• 개발자가 지양해야 할 공부법
• WebRTC 미디어 연결 방식 (MCU, SFU, P2P)
• 그 때 성장이라고 생각했던 것들
• Securing React Native Application
• Microfrontends With React
• swc
• 회사 매각 경험한 개발자들이 또 다시 스타트업 하는 이유
• StatusBar 다루기
• StatusBar 다루기
• [번역] 나만의 npm 저장소 만들기, Verdaccio
• [NPM] Make Private NPM Registry with sinopia
• : 마이구미 :: 마이구미의 HelloWorld
• "컨테이너 혁명을 주도하는" 도커의 의미와 장단점
• 회사에서 원하는 개발자에 대한 생각
• 배달의민족 CEO에게 뽑고 싶은 개발자를 물어보았다
• 배달의민족 CEO에게 뽑고 싶은 개발자를 물어보았다
• 습관이 되는 주니어의 25가지 실수
• 웹 성능 최적화 SSR + Cache 적용기
• 오늘의집 프론트엔드는 어떻게 일하나요?
• NAVER D2
• Electron을 대체할 Desktop App개발『Tauri』
• 객체지향 생활체조
• 14년째 Google에서 한국인 개발자로 활약 중이신 이진환 선배님 인터뷰(INTERVIEW)
• 브라우저에서 미디어 권한을 다루는 간단 tip
• Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ...
• useCancelToken: a custom React hook for cancelling Axios requests
• 웹 페이지에서 컨텐츠를 빠르게 보여주기 위한 트릭
• 쿠키와 document.cookie
• Adapting to Users with Client Hints
• AWS에서 어떤 컨테이너 서비스를 이용해야 하나요?
• 효율적인 프런트엔드 에러 핸들링
• 리액트의 조화(Reconciliation) 과정 정리
• How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust
• 오늘의집 프론트엔드는 어떻게 일하나요?
• NAVER D2
• Bulletproof React 🛡️ ⚛️
• Headless UI Library란?
• 스타트업 4년차 직장인들의 고민과 물음들
• HSL이 RGB보다 좋은 점 · Issue #2 · taihoon
• Getting Started
• <번역>자바스크립트의 메모리 모델
• Creating an accessible autocomplete experience
• 5 Code Smells React Beginners Should Avoid
• 코딩 잘하면 시니어가 될 수 있을까?
• 우리가 부르는 시니어 개발자는 누구인가?
• Redux 어떻게 써야 잘 썼다고 소문이 날까?
• 전역 상태 관리에 대한 단상 (stale
• 실용주의 데브옵스 for MSA – tech.kakao.com
• 누가 자바스크립트를 파괴할 수 있을까?
• 맞지 않은 인연은 정리하자.
• CloudWatch 이상 지표를 슬랙 알람으로 받기 (feat. SNS, Lambda)
• Social Network for Programmers and Developers
• Social Network for Programmers and Developers
• NHN Cloud Meetup
• 왜 Password hashing시 Bcrypt 가 추천되어질까?
• Low
• Storybook을 활용하여 본격적으로 디자인 시스템 구축하기
• Storybook을 이용한 React Test 환경 구축하기
• Chromium이 발표한 RenderingNG가 무엇인가?
• naradesign.github.io
• React 18을 준비하세요.
• [react
• 자바스크립트와 V8 엔진의 메모리 관리 프로세스
• 2021 오픈소스 컨트리뷰션 아카데미
• 2021 오픈소스 컨트리뷰션 아카데미
• Kubernetes Essential Tools: 2021
• UDC 2021
• Home
• Lerna와 yarn-workspace를 활용한 Mono Repo (Typescript & Jest) 환경 구성하기
• Moving away from ReactJs and VueJs on front-end using Clean Architecture
• React Native Boilerplate 🐙
• AI가 나 대신 코딩을? 깃헙 'Copilot' 을 사용해봤다!
• 스크린을 침범하는 노치, 펀치홀 어떻게 미리 볼 수 있을까?
• useMemo, useCallback을 언제 써야되나?
• React Clean Architecture
• cz-conventional-changelog-for-jira
• next-data-hooks ·
• 엔터프라이즈 프론트엔드 애플리케이션 아키텍쳐
• useMemo, useCallback을 언제 써야되나?
• 커밋 히스토리를 이쁘게 단장하자
• GitHub Labels that are logical, colorful and sensible
• Your PR Description Matters
• Your PR Description Matters
• React 18을 준비하세요.
• [react, next.js] SSR환경에서 access_token, refresh_tokne 관리하기(cookie이용)
• nodejs #08 무중단배포하기
• Where is Apple going with Safari 15? Websites are starting to look like apps
• 엔터프라이즈 프론트엔드 애플리케이션 아키텍쳐
• Documentation
• [번역] iOS를 위한 새로운
• filter
• 배포를 자동화해보자! (feat. Next js, pm2, Nginx)
• The 맛있는 브라우저 IE userAgent 확인방법.
• [email protected] Design Best Practices
• NAVER D2
• Web Share API 사용하기
• How to Limit File Upload Size in Nginx
• react
• PM2 기본 사용방법
• PM2를 활용한 Node.js 무중단 서비스하기
• pm2에 대해 알아보자
• [React Native] 빌드 및 배포하기
• 7 Steps to Secure JavaScript in 2021

📚 Category

1. 개발 일반

개발 문화	취업 정보	개발 정보	Performance

2. 언어 & Tool

GraphQL	REST	Git	Node.js
Java	Python	C C++	Rust
Go	Elm	MonoRepo	이외

3. FrontEnd

Javascript	CSS	Testing	WebPack
Functional Programming	Vue	React	TypeScript
Browser	상태관리	SVG	HTML
PWA	Babel	AMP	SVELTE
Web	HTTP	SEO	Rome
Gatsby	Security

4. 디자인

디자인 강의

5. 모바일

Flutter

6. 기타

네크워크	보안	TEST Case	알고리즘
OS	Vim	디자인 패턴	NSIS
ML	SPRING	Conference	Docker
AWS	Github	Nest.js

🔒 Rule

• 단순 기사, 저작권법 위반 컨텐츠는 공유하지 않는다.
• 본인이 반드시 읽어보고 올린다.(무작위로 올리지 않는다. 상대방의 시간을 뺏지 말자.)
• This Week에 올린 뒤, 차주 월요일에 카테고리별로 정리한다.
• 커밋은 아래의 작성법을 따른다.

🏠 Your_name / category / detail_comment

ex) 🏠 BKJang / javascript / [번역] React를 본격적으로 하기 전 알면 좋은 6가지

1. 개발 일반

개발 문화

• 함께 일하고 싶은 개발자
• 카카오스토리 팀의 코드 리뷰 도입 사례 - 코드 리뷰, 어디까지 해봤니?
• 개발자에게 좋은 직장 혹은 좋은 환경
• 불쌍한 프론트엔드 개발자
• 동기부여 - 질문 잘 하는 법(코드스쿼드 강의-10분)
• 러버덕 디버깅
• 코드리뷰, GitHub로 바로 적용하기
• 카카오스토리 팀의 코드 리뷰 도입 사례 - 코드 리뷰, 어디까지 해봤니?
• 스터디 모임 방법 몇 가지 - 애자일
• 우리 팀에서도 코드리뷰를 할 수 있을까? - deview
• 병아리 개발자의 걸음마 한 발짝 (feat. 파일럿 프로젝트)
• 당신의 개발자들은 결코 느리지 않다.
• 레거시 운영개발팀을 수습하다.
• 팀을 맡고, 한 달 동안 가장 공을 들인 일 | Huns.me
• 주니어 개발자가 회사를 떠나는 이유) :: Jay's Code Factory
• [브런치북] 스타트업, 그리고 개발이야기
• zigbang – Medium
• 토스 기술 블로그, 토스테크
• 의사코드(pseudo-code)란?

⬆ Top

---

취업 정보

• 주니어 개발자를 위한 취업 정보
• Front-end Job Interview Questions
• 신입 프론트엔드 개발자가 되려면 무엇을 학습해야 하나요?
• (인터뷰)이동욱 배달의민족 개발자/주니어 개발자 채용 github
• 삼성 청년 SW 아카데미
• NCSoft - 채용공고
• 해외 취업 - 신입 웹 개발자의 싱가포르 상륙기
• [면접] 개발자 면접관을 감동시키는 면접
• LINE 서버 개발자가 되기까지 내가 준비한 것들
• 나는 어떻게 개발자로 성장했는가?
• 1인분 개발자, 다음을 찾아서

⬆ Top

---

개발 정보

• Dev_free_book
• Nomad가 말해주는 향후 알아야하는 5가지(영상 약 5분)
• 인기 오픈소스 순위
• 2019 개발자 로드맵-devJang
• 2019 Programmers Report
• 2018년, 내가 모르는 기술들
• 백준 알고리즘 풀이 블로그
• 프로젝트를 마치며 회고한 경험
• 개발자 meetup
• 한국어 데이터를 제공하는 초간단 JSON API.
• 사다리 게임, 절대 걸리지 않는 법(통계와 프로그래밍)
• 시리즈:수학인듯 과학아닌 공학같은 컴퓨터과학/알고리즘 기초
• What makes a 10x Developer?
• Code Squad 우아한 코드(클린코드)
• Clean Code
• 프로그래밍 언어 선택에 대한 고민
• 후배개발자에게 - 2019년
• Best VS Code Extensions You Need in 2019
• 웹 프론트엔드 개발자, 어떻게 준비해야 할까?
• 문서화에 대해 아무도 말해주지 않는 것들 - 이상한모임
• VS CODE extension for FE
• GitHub로 프로젝트 관리하기 Part1 - 이슈 발급 부터 코드리뷰까지
• 프로그래머는 몇 살까지 할 수 있나 : 네이버 블로그
• 웹 개발자의 10가지 흔한 실수
• 개발자처럼 변수이름짓기
• 이해하기 쉬운 코드 작성방법 정리
• 목적의식 있는 연습을 통한 효과적인 학습
• console을 이쁘게 꾸며보자
• 2019 구글 스터디 잼
• notion으로 블로그 만들기
• 평범한 개발자의 학습 요령
• 구글I/O 2019
• Chrome 75 Beta(Low Latency Canvas), Babylon.js 4.0(WebGL)
• SI 탈출 가이드
• 구글, iframe 태그를 대체할 Portals 발표
• 기술 뉴스 #126 : 19-05-15 :: Outsider's Dev Story
• 구글이 생각하는 검색 친화적 사이트는? (구글 웹마스터 컨퍼런스 후기)
• 주니어의 짝코딩 경험기
• Frontend Focus
• Code Formatting 자동화
• Building Micro Frontends with React, Vue, and Single-spa
• 소프트웨어 환멸감
• Goodbye, Object Oriented Programming
• 10 top Programming Languages in 2019 for developers
• 야놀자를 떠나며... (feat. 레저큐)
• 구글의 코드 리뷰 가이드-번역
• 2019년 개발 툴 TOP 48
• 개발자의 글쓰기 PDF
• 2020 카카오 블라인드 공채 2차 오프라인 코딩 테스트 문제 해설
• 웹 서비스 구현의 모든 것! 무료 제작툴 39개 몽땅 알려드림!
• 프론트엔드 도구 (CSS/JS) 설문조사 2019
• 애플이 웹기술을 죽이려 하고 있다
• Octoverse, GitHub 2019
• Chrome 75 Update
• New year, new browser – The new Microsoft Edge is out of preview and now available for download
• 잘가, 클린 코드 — Overreacted
• 프로그래머를 지탱하는 3가지 성분
• MS가 개발한 새로운 코드 분석 툴, 오픈소스로 풀렸다
• 월간 개발자스럽다 #56
• deno 첫 외주 후기
• Use Chrome DevTools Like a Senior Frontend Developer
• 인텔리제이 Github Code Review
• 새로운 오픈 소스 컨트리뷰터분들을 환영합니다!
• Alfred Tip
• Chrome 콘솔 숨은 기능
• Semantic Versioning 2.0.0
• Uber 아키텍처와 시스템 디자인
• 지속 성장 가능한 소프트웨어를 만들어가는 방법
• CTO (Chief Technical Officer) 란?

⬆ Top

---

Performance

• 성능이 중요한 이유  |  Web Fundamentals  |  Google Developers
• 프론트엔드 성능 최적화 기본()
• 웹 성능 최적화에 필요한 브라우저의 모든 것
• CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용)
• 마이리얼트립 웹사이트 성능 측정 및 최적화 Part 1. 리소스 로딩
• 마이리얼트립 웹사이트 성능 측정 및 최적화 Part 2. 렌더링
• 소프트웨어 공학 - Scrum, Kanban 방법론
• 웹폰트 적용에서 최적화까지
• 프레임워크와 라이브러리 차이점 ? 비교? 정의
• 내 사이트 성능측정하고 진단받기(feat. Google)
• How to Resize Images Before Uploading for Performance
• 1. 페이징 성능 개선하기 - No Offset 사용하기
• 테스트
• 의존성 관리
• 디버깅
• 성능 최적화
• 정적 분석
• 안티 패턴
• 코딩컨벤션
• HTML
• Web Performance Recipes With Puppeteer

⬆ Top

---

2. 언어 & Tool

GraphQL

• GraphQL vs. REST
• GraphQL is not just a network protocol

⬆ Top

---

REST

• 그런 REST API로 괜찮은가
• REST API 응답은 어떻게 줘야할까?

⬆ Top

---

Git

• GitHub의 Merge, Squash and Merge, Rebase and Merge 정확히 이해하기
• GitHub 단축키 및 사용 팁 정리
• .git - 쩜깃의 이해
• GitHub 이미지 조절&정렬
• git과 github(youtube)
• git flow cheetsheet
• 이슈 PR로 처리시 키워드
• Git 그림으로 배우는 Add, Commit의 원리
• Navigating code on GitHub
• 구글에서도 사용하는 버전관리 방법론
• 🌳🚀 CS Visualized: Useful Git Commands - DEV Community 👩‍💻👨‍💻
• 지금 당장 좋은 커밋 메시지를 남기는 방법(with Git Commit Template)
• 좋은 PR에 대한 단상🤔
• git stash에 대해서 알아보자
• github jira 연동

⬆ Top

---

Node.js

• Node.js 이벤트루프 제대로 이해하기
• Probot으로 GitHub App 만들기
• probot 블로그
• Node Weekly
• [NodeJS] 모두 알지만 모두 모르는 package.json
• 로우 레벨로 살펴보는 Node.js 이벤트 루프
• package-lock.json이란?
• NPM Rank
• Docker, NodeJS, Nginx! 너로 정했다!
• 견고한 node.js 프로젝트 설계하기
• Node.js의 Events EventEmitter 번역
• Node 제작자가 만든 Deno: 자바스크립트의 새로운 접근
• NVM, Node, NPM

⬆ Top

---

Java

• 자바의 객체
• 자바 HashMap을 효과적으로 사용하는 방법
• 실전에 써먹는 스프링 부트 이야기
• 자바에서 null을 안전하게 다루는 방법
• KSUG 스프링캠프 2019 발표자료 - "무엇을 테스트할 것인가, 어떻게 테스트할 것인가"
• SOLID 원칙

⬆ Top

---

Python

• 초보자를 위한 파이썬 300제 - WikiDocs

⬆ Top

---

C C++

• 모두의 코드 - C/C++ 강좌 사이트

Rust

• rust-lang-book-ko
• Implementing Life - Rust and WebAssembly
• 쪼잔한 Rust 4.1. 소유권이 무엇이냐
• [🦀 러스트의 멋짐을 모르는 당신은 불쌍해요](https://parksb.github.io/article/35.html
• Rust
• WebAssembly + Rust + wasm-bindgen = ❤️ (Part 1)

⬆ Top

---

이외

• hyper.js 3
• [번역] 쾌적한 자바스크립트 코딩을 위한 VSCode 확장 프로그램 추천
• Chrome을 vim처럼 조작해보자
• How I use the Chrome Performance Panel (Part 1)
• V 프로그래밍 언어
• 터미널을 녹화하고 공유하자 - asciinema
• Alfred Workflows | Packal
• 개발을 위한 무료툴 모음
• 개발자를 위한 레디스 튜토리얼 01
• 한글 문자 집합 및 인코딩 (Korean Character Set and Encoding)
• 한글 인코딩의 이해 2편: 유니코드와 Java를 이용한 한글 처리
• JAVA 한글자르기(유니코드)
• 웹에서 앱으로 이동하기 (feat.딥링크)
• TypeOrm 기본개념

⬆ Top

---

3. FrontEnd

Javascript

• Dev.to처럼 포스팅 제목을 이미지로 만들어서 링크 미리보기(Link Preview) 이미지에 넣어보자
• Automated Notion backups
• requestIdleCallback으로 초기 렌더링 시간 14% 단축하기
• 자바스크립트 간단한 Test 코드 만들어보기
• 자바스크립트 엔진의 최적화 기법 (2) - Hidden class, Inline Caching
• 웹 폰트 사용과 최적화의 최근 동향
• 자바스크립트의 함수 정리본
• Does it mutate
• javascript ajax 크로스 도메인 요청하기
• New ES2018 Features Every JavaScript Developer Should Know
• typescript-in-5-minutes
• arguments 문제
• arguments in Detail
• requestAnimationFrame() 개념 정리하기
• 모두가 알지만 모두 모르는 package.json
• [번역] JavaScript Essentials: 자료형과 자료구조
• isNaN is not equal Number.isNaN
• Regex Cheat Sheet
• 2 Ways to Merge Arrays in JavaScript
• 12 Concepts That Will Level Up Your JavaScript Skills
• The Complete Guide to ES10 Features
• ES6 Cheatsheets
• isNaN is not equal Number.isNaN
• [번역] JavaScript Essentials: 자료형과 자료구조
• Intersection Observer API의 사용법과 활용방법
• How to Deep Clone an Array in JavaScript
• the complete guide to es10 features
• TensorFlow.js: 웹 프론트엔드에서 머신러닝 활용하기
• 3 Tools to Keep npm Packages Updated
• Understanding ES6 Modules
• 33 js concepts
• [번역]ES6 축약코딩 기법 19가지
• 타입스크립트 입문용으로 좋은 GitBook
• [자바스크립트] 프락시 패턴 - 이벤트 관리의 편리함을 주는 코드 디자인 스타일
• Understanding Memoization In JavaScript
• Understanding Closures in JavaScript
• Top 10 JavaScript array methods you should know
• How to Remove Duplicates from an Array in JavaScript?
• An Introduction to Web Components
• Moment.js를 Day.js로 대체하기
• Quick Debug with console.log using ||
• JavaScript Functions — Understanding The Basics – codeburst
• ES6: var, let and const — The battle between function scope and block scope
• Emulating Block Scope in JavaScript - A Drip of JavaScript
• [JS #5] ES6 Map(), Set() – Kevin Seokyou Hong – Medium
• Javascript performance test - for vs for each vs (map, reduce, filter, find)
• JavaScript Web Workers: A Beginner’s Guide
• JavaScript Functions — Understanding The Basics
• ES6: var, let and const — The battle between function scope and block scope
• Emulating Block Scope in JavaScript - A Drip of JavaScript
• The Difference Between Function and Block Scope in JavaScript
• Function scopes and block scopes in JavaScript
• All you need to know about Javascript's Expressions, Statements and Expression Statements
• JavaScript Scope and Closures
• Understanding Scope in JavaScript
• Understanding Scope in JavaScript
• Understanding Scope in JavaScript
• Why JAM Stack?
• Quick Tip: Function Expressions vs Function Declarations
• All you need to know about Javascript's Expressions, Statements and Expression Statements
• JavaScript Function — Declaration vs Expression
• Function Declarations vs. Function Expressions
• Function Declarations vs. Function Expressions
• Do ES6 Modules make the case of IIFEs obsolete?
• Essential JavaScript: Mastering Immediately
• Quick Tip: Function Expressions vs Function Declarations
• 간단하게 구축해 보는 JavaScript 개발 환경
• performance.now() - Web APIs | MDN
• CODE - 40 Useful JavaScript Tips, Tricks and Best Practices
• Optimizing Performance with Web Workers – Salesforce Engineering
• SharedArrayBuffer - JavaScript | MDN
• Javascript iterator와 iterable, generator 어떻게 구현하고 사용할까?
• How and why to use Functional Programming in modern JavaScript - Morioh
• Making a Calendar in Vanilla Javascript - Morioh
• JavaScript engine fundamentals: Shapes and Inline Caches | First Blog
• JavaScript engine fundamentals: Shapes and Inline Caches · Mathias Bynens
• Hidden classes in JavaScript and Inline Caching
• V8의 히든 클래스 이야기
• JavaScript 엔진 톺아보기 (2)
• JavaScript’s Arrow Functions Explained By Going Down A Slide - Morioh
• [javascript async, await를 사용하여 비동기 javascript를 동기식으로 만들자 | bono's blog](https://blueshw.github.io/2018/02/27/async-await/)
• The Modern JavaScript Tutorial
• JavaScript Closures: setTimeout Inside a For Loop - Will Vincent
• 최신 브라우저의 내부 살펴보기 3 - 렌더러 프로세스의 내부 동작
• 웹 어셈블리를 보다 쉽게 웹 어플리케이션에 적용하는 방법 : TOAST Meetup
• 7 Useful JavaScript Tricks
• Eloquent JavaScript-3rd edition(책)
• JavaScript for impatient programmers(책)
• Using JavaScript’s Bitwise Operators in Real Life
• JavaScript 30 — Build 30 things with vanilla JS in 30 days with 30 tutorials
• Simple Swipe with Vanilla JavaScript
• 구글 크롬 확장 프로그램 만들기
• { passive:true } 의 진정한 의미
• JavaScript’s Async/Await versus Promises: The Great Debate
• Javascript ES6 Proxy
• 자바스크립트에서 팩토리 함수란 무엇인가?
• JavaScript Weekly
• 당신이 Promise를 사용해야만 하는 5가지 이유
• Why ['1', '7', '11'].map(parseInt) returns [1, NaN, 3] in Javascript
• 2019년과 이후 JavaScript의 동향 - JavaScript(ECMAScript)
• Web Components Tutorial for Beginners [2019]
• [자바스크립트] 압축(Minify) / 난독화(Uglify)
• 30secondsofcode
• [영상]JS개발자라면 알아야하는 핵심 컨셉 - setTimeout, setInterval, rAF
• Basic monads in Javascript
• JavaScript can do that?
• 이미지 최적화 자동화
• 실행 취소 / 다시 실행 기능 구현하기
• Dan Abramov: Beyond React 16 | JSConf Iceland 2018
• Handing JavaScript events efficiently with bubble and capture
• Haunted: Hooks for Web Components
• Menus with "Dynamic Hit Areas"
• 2019년과 이후 JavaScript의 동향 - WebAssembly
• JavaScript의 함수는 1급 객체(first class object)이다
• 자바스크립트 async와 await
• 제너레이터와 async/awit - poiemaweb
• ES6 Iterator, Iterable 쉽게 이해하기
• 2019년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크 1
• Typescript가 두려운 당신에게 | 연애의 과학 팀 블로그
• 13 useful JavaScript array tips and tricks you should know
• 2019년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크 2
• WebRTC Sample
• Tasks, microtasks, queues and schedules
• WebRTC에 대해서
• 5 Interesting Uses of JavaScript Destructuring
• javascript ajax 크로스도메인 요청-CORS
• Optional chaining · V8
• 2019년과 이후 JavaScript의 동향 – 브라우저 밖의 JavaScript 2
• JavaScript 배열(Array)의 발전과 성능에 대해서 자세히 알아보기
• 웹 컴포넌트(4) - Template Element & HTML Imports
• You can create these elements without JavaScript
• produce 구현해보기(Proxy API를 사용한 ImmerJs 뜯어보기)
• 자바스크립트에서 [object Object] 가 대체 뭘까?
• Using JavaScript to Create Trello-Like Card Re-Arrange and Drag and Drop - JavaScript SDK 성능개선 방법 – 압축과 최적화로 실행시간 단축하기
• Promise, 가만히 냅두면 어떻게 될까?
• 컴포넌트 제대로 만들기
• 프런트엔드 트랜드가 한눈에! 2019 년의 가장 핫했던 JavaScript 라이브러리
• ECMAScript 2020: the final feature set
• Understanding JavaScript module formats and tools
• await의 함정, 숨은 병목을 찾자
• 13/ Image 업로드 시 회전에 대하여 (feat. exif 메타데이터 - Orientation) | 필오의 개발일지
• [JS] false를 반환하는 falsy
• 실시간 커뮤니케이션... WebRTC 기술을 주목하라!
• [WebRTC] 웹브라우저로 화상 채팅을 만들 수 있다고?
• JavaScript 기술 개요
• 1장 이해하기 쉬운 코드 작성법
• 모던 JavaScript 튜토리얼
• 자바스크립트와 V8 엔진의 메모리 관리 프로세스
• The Algorithms - JavaScript
• hwp.js
• Flowchart Maker & Online Diagram Software
• Reproducing Medium's image zoom
• await-of
• modal(popup) 에서 외부(body or parentElement) 스크롤 막기
• Comparing the New Generation of Build Tools

⬆ Top

---

CSS

• [번역] CSS GPU 애니메이션 제대로 하기
• Sass 문법 정리 (mixin, include, expend, partial, import, if문)
• Oh No! Our Stylesheet Only Grows and Grows and Grows! (The Append-Only Stylesheet Problem)
• Why I Write CSS in JavaScript
• CSS { position: sticky }
• flexbox로 만들 수 있는 10가지 레이아웃
• 내가 Framer X에 미쳐있는 이유 (Framer X 6개월 사용기)
• 레진 기술 블로그 - IntersectionObserver를 이용한 이미지 동적 로딩 기능 개선
• Design patterns in modern JavaScript development
• What the heck is the event loop anyway? | Philip Roberts | JSConf EU
• Instagram App UI using CSS
• html.css - Code Search
• System Fonts in CSS • furbo.org
• Centering in CSS: A Complete Guide
• 스크롤과 관련된 CSS 속성 3가지 - 코드쓰는사람
• 모바일 UI, UX 디자인시 고려해야 할 가이드라인
• Web Club :: CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch
• 종합 안내: Rem 그리고 Em, 언제 써야 할까
• JavaScript 클립보드 복사 구현하기
• Inside a super fast CSS engine: Quantum CSS (aka Stylo)
• 안티 패턴으로서의 CSS background-image 속성
• Houdini: Demystifying CSS - Google Developers
• Working with the new CSS Typed Object Model
• 자바스크립트의 프로토타입 흝어보기
• BEM( Block, Element, Modifier) Quick start
• 크롬85 부터 지원되는 content-visiblity 로 페이지 성능개선하기
• New in Chrome: CSS Overview
• 상황에 맞는 로딩 애니메이션 적용하기
• content
• An Overview of Scroll Technologies | CSS-Tricks
• 불규칙 속에서 규칙을 찾아내는 정규표현식
• getting your head ’round BEM syntax
• When to use @extend; when to use a mixin – CSS Wizardry – Web Performance OptimisationCSS Wizardry
• [번역] Sass에서 웬만하면 extend 말고 믹스인을 사용하자
• JavaScript Frameworks, Performance Comparison 2020
• The Top 3 New JavaScript ES 2021 (ES 12) Features I’m Excited About
• [Javascript IE 11 Ajax Caching 끄기 (jQuery, axios)](https://effortguy.tistory.com/m/36)
• 자바스크립트 센트리는 어떻게 동작할까?
• 웹 어플리케이션 모바일 화면 확대 방지 (입력, 더블탭, 확대)
• CSS in JS 라이브러리에서 Typesafe하게 Theme 관리하기
• Methods for modifying objects in OOCSS – Oliver Joseph Ash
• [sass] mixin과 extend 알맞게 사용하기

⬆ Top

---

Testing

• the Different Testing Tools (chai, mocha, enzyme, jest)
• Node.js 로 TDD 를 도전해보자
• BDD로 테스트에 중독되어 보자
• An Overview of JavaScript Testing in 2019
• Storybook
• Sentry로 사내 에러 로그 수집 시스템 구축하기

⬆ Top

---

WebPack

• How to setup Webpack config - Morioh -
• 웹팩의 기본 개념

⬆ Top

---

Functional Programming

• 함수형 프로그래머가 되고 싶다고? (Part 1)
• 함수형 프로그래밍과 테스트
• Javascript and Functional Programming: An Introduction
• 함수형 프로그래밍 언어에 대한 고찰 - LINE ENGINEERING

⬆ Top

---

Vue

• Vue 3.0 소식
• Vue 2.6 released! – The Vue Point – Medium
• Optimize the Performance of a Vue App with Async Components
• vuejs-interview-questions-korean
• Vue + WebAssembly – Brock Reece
• [번역]Vue.js 3: Future-Oriented Programming | 오르막길
• Vue.js 최근소식들5 — Vue 3 Alpha 버전 시작 등
• Vuex Dynamic Register Modules
• API Reference | Vue Composition API
• [RFC] Vuex naming conventions
• [Vue.js + PWA + Prerender] PWA와 Prerender 적용 웹 앱 개발
• Changing Scroll Behavior with Vue Router
• 도대체 Vuex가 뭐길래? - 최인탁 - Medium
• [Vuetorials] 6. Vuex Module pattern | JBEE.io
• Organize your routes with Vue Router - ITNEXT
• [Vue.js] Lazy load 적용하기2
• Vue 3로 마이그레이션하기 위해 준비해야 할 것
• Vue 3 가볍게 훑어보기
• Vue.js설계 및 Atomic Design
• JSON-LD with Vue.js
• vite vs webpack, 그리고 Vue 3.0의 미래.
• slidev

⬆ Top

---

React

• Next.js
• The online code editor for web dev
• React의 기본, 컴포넌트를 알아보자-모두 알지만 잘 알지는 못하는 컴포넌트
• Hook을 쉽게 배워보자
• React Hooks for daily use!
• 30-seconds-of-react
• 리액트 어플리케이션 업데이트 하기
• No-boilerplate global state management in React
• How To Write Better Code in React
• React 프로젝트의 디렉토리 구조
• [번역] React를 본격적으로 하기 전 알면 좋은 6가지
• Intro to React Hooks
• 리액트 어플리케이션 업데이트 하기
• How To Write Better Code in React
• No-boilerplate global state management in React
• React Hook의 이해
• devsisters react
• React hooks useCallback
• What are React Hooks?
• A Complete Guide to useEffect — Overreacted(너무 길어 Dan)
• React Code Splitting in 2019
• How to use Props in React?
• 페이지 주소가 바뀌어도 자연스럽게 이어지는 애니메이션 만들기
• Under the hood of React’s hooks system - Morioh
• [Reactjs] setState() 왜 비동기로 처리되는가?
• How to useReducer in React
• [번역] 리액트 테스팅 튜토리얼: 테스트 프레임워크와 컴포넌트 테스트 방법
• Intro to React Hooks(영상)
• Performance Profiling Your React App
• 리액트의 Hooks 완벽 정복하기
• Making Sense of React Hooks
• 그대로 따라해보기 좋은 react+node
• 'When to useMemo and useCallback' 를 읽고
• React.js Top 10 Articles for the Past Month (v.June 2019)
• 리액트 꽃길만 걷기
• React를 실질적으로 제어하는 updater
• Advanced React & GraphQL
• 리액트 아폴로(React Apollo) 리덕스와 무엇이 다른가?!
• Run the React Router v4 Examples with Create React App
• 리액트 HOC 집중 탐구 (1)
• 리액트 HOC 집중 탐구 (2)
• Fix the slow render before you fix the re-render
• React Hooks와 Context를 이용한 설계 패턴
• Mixin은 해롭다.
• React 전, 7가지 배경지식 다지기
• [번역] 심층 분석: React Hook은 실제로 어떻게 동작할까?
• React & Autobinding
• React starter kit for Chrome Extensions with Live Reloading
• React로 ChromeExtension에 빌드하기
• 탄력적인 컴포넌트 작성하기
• 리액트(ReactJS) 개발자가 걷게 되는 길
• 왜 내가 Redux 대신 MobX를 쓰게 되었나
• 상태 관리 라이브러리의 미학: Redux 또는 MobX 를 통한 상태 관리
• React에서 Mobx 경험기
• 🍪 프론트에서 안전하게 로그인 처리하기 (ft. React)
• Recoil 레시피: 소개
• TypeScript와 Storybook을 사용한 리액트 디자인 시스템 구축하기
• React Server Components 짧막 정리
• 5 Key Lessons React Tutorials Don't Teach
• The definitive guide to profiling React applications
• React Stack 2021
• Improved React APIs for Relay
• 벨로퍼트와 함께하는 리액트 테스팅
• Recoil 을 소개합니다 ①
• React Clean Code
• React Suspense with the Fetch API
• 7 reasons why you should use SWR.

⬆ Top

---

TypeScript

• typescript-book
• TypeScript at Google(번역), 원글
• 타입스크립트 3.0 – Huiseoul Engineering
• 남다른 개선방법을 다시 보여준 페이스북의 React Fiber
• React 렌더링 이해 및 최적화 (With Hook)
• [번역] useEffect 완벽 가이드
• TypeScript MS Blog
• [Typescript] type과 interface 차이
• 738/clean-code-typescript: 🚿 타입스크립트를 위한 클린코드 - 한글 번역판 🇰🇷
• Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior · Mark's Dev Blog
• Vite with Preact and TypeScript
• TSConfig Reference
• 올해 버려야 할 타입스크립트 나쁜 버릇 10가지

⬆ Top

---

Browser

• 최신 브라우저의 내부 살펴보기 1 - CPU, GPU, 메모리 그리고 다중 프로세스 아키텍처
• 최신 브라우저의 내부 살펴보기 2 - 내비게이션 과정에서 일어나는 일
• 최신 브라우저의 내부 살펴보기 4 - 컴포지터가 사용자 입력을 받았을 때
• 캐시가 동작하는 아주 구체적인 원리
• V8 release v7.5 · V8
• How Browsers Work: Behind the scenes of modern web browsers / 브라우저는 어떻게 동작하는가? - 한글 번역
• 크롬 네이티브 레이지 로딩
• What is the maximum size of a URL? Does it depend on the browser being used?
• V8 release v8.0 - 개발자를 위한 새로운 SameSite=None; 보안 쿠키 설정에 대비하기
• CORS A to Y
• 브라우저 뷰포트 (layout 와 visual viewport) 간단 정리하기
• cookies.CookieStore
• Tabnabbing 공격과 rel=noopener 속성

⬆ Top

---

상태관리

• Redux로의 카툰 안내서
• 아마 이게 제일 이해하기 쉬울걸요? React + Redux 플로우의 이해
• Redux의 ducks패턴에 대해서
• redux-observable 사용하기
• Recoil
• 새로운 상태관리 라이브러리의 탄생, Recoiljs
• Caching clash: useSWR() vs. react-query
• 리덕스없이 state 관리하기(hooks+context)

⬆ Top

---

SVG

• Paths: Stroking and Offsetting | Tavmjong Bah's Blog
• Can you control how an SVG's stroke-width is drawn?
• SVG Strokes
• shape-rendering - SVG: Scalable Vector Graphics | MDN
• Styling HTML checkboxes is hard - here's why
• A Closer Look at SVG Path Data
• The problem with SVG and Canvas
• SVG Icon System in Vue.js
• SVG, 사파리에서 흐리게 보이다
• Using SVG
• how to use both inline and external svgs
• SVG, 사파리에서 흐리게 보이다
• Inline SVG vs SVG File Performance

⬆ Top

---

HTML

• Why, How, and When to Use Semantic HTML and ARIA
• 꼼꼼히 살펴보는 SCRIPT 엘리먼트
• 텍스트 버튼은 사용성을 어떻게 해치는가?
• MIME types List
• ETag

⬆ Top

---

PWA

• [PWA] 프로그레시브 웹 앱 시작하기 (1) - PWA란?
• Progressive 웹 앱이 드디어 iOS에서도! | Sophie writes code
• Basic

⬆ Top

---

Babel

• 바벨(Babel)의 동작 원리 및 흐름에 대해 알아보자.

⬆ Top

---

AMP

• AMP 그게 뭐야?

⬆ Top

---

SVELTE

• 웹 프레임워크 Svelte를 소개합니다.
• Svelte v3
• 스칼라 번역자료
• LET’S START SVELTE - W3C 발표자료
• Serverless와 기술도입, Backend Application의 미래
• 1. svelte 소개

⬆ Top

---

Web

• [영문] Web Development Trends that will Dominate in 2019
• Line 블로그
• JSONP 알고 쓰자
• 서버리스 Serverless 아키텍처 파헤치기
• 웹팩의 기본 개념
• Babel | PoiemaWeb
• Webpack 4와 babel 7으로 react개발환경 셋업하기 – Clyde – Medium)
• Toast에서 공개한 FE Guide
• 모두를 위한 접근성
• Web Vitals
• The A-Z of Web Development
• RecordRTC.js | Live Demo
• Strict-Transport-Security
• Best practices for cache control settings for your website
• Cache-Control - How to Properly Configure It
• 콘텐츠가 캐시에 유지되는 기간(만료) 관리
• WebP 이미지 사용하기
• 자바스크립트 Window
• modal(popup) 에서 외부(body or parentElement) 스크롤 막기

⬆ Top

---

HTTP

• 브라우저 HTTP 최대 연결수 알아보기
• HTTPS는 어떻게 다를까?
• HTTP/3는 왜 UDP를 선택한 것일까?
• 빠른 웹을 제공하는 HTTP

⬆ Top

---

SEO

⬆ Top

---

Rome

• Rome Toolchain

⬆ Top

---

Gatsby

• 블로그 검색 기능 개발 과정
• Gatsby 블로그에 검색기능 구현하기

⬆ Top

---

Security

• 웹 보안, 웹 취약점을 간단한 설정으로 막아보자
• HSTS
• Referrer Policy, (방문)출처 정책

⬆ Top

---

4. 디자인

Design tool

• 디자인베이스 | 디자인 강좌의 시작
• Glassmorphism in user interfaces
• A guide of UI design trends for 2021

⬆ Top

5. 모바일

Flutter

• 플러터를 빠르게 배우기 좋은 4개의 사이트 :: 소프트웨어 이야기
• Flutter Docs
• Flutter, 왜 선택하지 못했나
• Contents of Flutter Code Examples
• Flutter - BLoC 패턴 알아보기
• 오준석의 생존코딩
• 다트 기본 구조 및 중요 개념
• Finally running Rust natively on a Flutter plugin! Here is how

⬆ Top

6. 기타

보안

• [번역] 비둘기로 설명하는 HTTPS(HTTPS explained with carrier pigeons)
• Tabnabbing 피싱 공격의 동작 원리와 대응책

⬆ Top

---

TEST Case

• 실용적인 테스트 코드 작성하기(JS)
• 유닛테스트에 대한 생각
• 효과적으로 TDD, 리팩토링, OOP를 연습하는 방법은?

⬆ Top

---

알고리즘

• 빅 오 분석법(Big-O Analysis)으로 알고리즘 성능시간 분석하기

⬆ Top

---

Go

• GOLANG TUTORIAL
• A Tour of Go
• Google’s Go Essentials For Node.js / JavaScript Developers
• 예제로 배우는 GO 프로그래밍

⬆ Top

---

네트워크

• 왕초보를 위한 클라우드 입문 1: 클라우드는 무엇인가?-영상
• 네트워크의 기본 'OSI 7계층' 한번에 이해하고 외우는 방법
• TCP의 헤더에는 어떤 정보들이 담겨있는걸까?
• URL 끝에 ‘/’ 는 왜 붙이는 걸까?
• NIO 기반 입출력 및 네트워킹 - TCP 블로킹 채널
• OpenAPI Generator

⬆ Top

---

OS

• 개념 정리 - (7) 운영 체제 편
• 쓰레드풀 과 ForkJoinPool
• : No, thank you

⬆ Top

---

Elm

• From Javascript to Typescript to Elm

⬆ Top

---

MonoRepo

• Release management in Angular with Lerna
• 11 Great Tools for a Monorepo in 2021

⬆ Top

---

Vim

• Vim Cheat Sheet
• Vim을 IDE처럼 사용하기
• vim 유용한 단축키 정리

⬆ Top

---

디자인 패턴

• [번역] 초보 프론트엔드 개발자들을 위한 Pub-Sub(Publish-Subscribe) 패턴을 알아보기
• 어댑터 패턴 Adapter Pattern
• How to Use the Observable Pattern in JavaScript
• Back-end for Front-end Pattern (BFF)
• 마이크로 서비스 아키텍처를 위한 Frontend 개발패턴
• Backend for Frontend Application Architecture – IBM Developer
• 마이크로 서비스 아키텍처를 위한 Frontend 개발패턴
• What is Serverless Architecture? - Twilio
• 디자인 시스템 소개

⬆ Top

---

NSIS

• NSIS Modern User Interface

⬆ Top

---

ML

• 머신러닝 단기집중과정 - 구글 colab
• AWS DeepRacer 강화학습 설명
• How To Create Deep Fakes Tutorial
• 머신러닝 쉽게 배우는 방법
• [번역] 왜 NumPy는 빠를까요?
• [머신러닝] 머신러닝의 개요

⬆ Top

SPRING

• 스프링 - 생성자 주입을 사용해야 하는 이유, 필드인젝션이 좋지 않은 이유
• Spring Security
• Entity, DTO, VO 바로 알기
• 디미터 법칙(Law of Demeter)

⬆ Top

---

Conference

• FEConf 2019 발표자료
• DEVIEW 2일차 후기

⬆ Top

---

Docker

• Docker (Compose) 활용법 - 개발 환경 구성하기
• docker compose 기초 사용법
• 쿠버네티스 vs. 도커 : 컨테이너와 오케스트레이션의 이해
• Docker image 구조
• 도커 컨테이너는 가상머신인가요? 프로세스인가요?

⬆ Top

---

AWS

• AWS Lambda에서 Puppeteer로 크롤링 하기
• AWS Lambda를 시작하기 전 알았으면 좋았을것들
• Serverless을 이용한 AWS Lambda의 배포 자동화
• S3, Cloudfront HTTP Referer 접근 제한 하기
• [IT 종사자라면 이 정도는 알자 시리즈] 1탄. 클라우드 기술과 서비스(SaaS, PaaS, IaaS)
• Lambda file System ./tmp

⬆ Top

---

Github

• Git, Github, branch 자주 사용하는 커맨드 정리
• 10 Standout GitHub Profile READMEs

⬆ Top

---

Nest.js

• NestJS-시작하기
• NestJS 빠르게 배우기 01
• Hello Nestjs
• Nest.js - Documentation

⬆ Top

---