Dev-Contents-House

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

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

📖 This Week

• 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 확인방법.
• Lambda@Edge 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. 개발 일반

2. 언어 & Tool

3. FrontEnd

4. 디자인

5. 모바일

6. 기타

🔒 Rule

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

:house: Your_name / category / detail_comment

ex) :house: 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