Cheatsheet

Next.js

Basic

• Next.js 무엇인가?

Typescript

Basic

• Exclude<T, U>
• Extract<T, U>
• never
• Record<K, T>
• unknown vs any

React

Optimization

• How to preload component
• Code splitting using 'Loadable'
• Headless Component

Basic

• batching
• flushsync
• forward ref
• List Key의 중요성
• memo
• useCallback
• Virtual Dom

Tip

• How to wrap component (2 ways)
• useEffect vs useLayoutEffect
• useEffect에 사용하는 익명함수 대신 named 함수로 쓰면 좋은 이유
• useCallback, useMemo 제대로 사용하자

Trouble Shooting

• Error: ReactDOMServer does not yet support Suspense.

SSR

• CRA 방식이 아닌 방법으로 직접 설치하기
• SSR 기본 동작 원리

FE

ETC

• oEmbed
• Lottie란 무엇인가

Security

• CSRF (Cross Site Request Forgery)
• XSS (Cross Site Scripting)

Optimization

• First Contentful Paint
• Largest Contentful Paint
• 사용하지 않는 코드 확인하기
• 레티나(Retina) 고해상도 이미지 처리

Monitoring

• Sentry 핵심요약

Tool

• eslint & prettier 적용하기
• pnpm 기본 개념
• webpack으로 번들링된 React 파일 hot deployment로 개발 빠르게 하기

Basic

• Node 버전 간편하게 관리하기

Progressive Web App

• PWA 란?
• Service Worker

Browser

• 브라우저는 어떻게 동작하는가?
• reflow & repaint
• Rendering 개념

Javascript

Basic

• arguments
• 소수 비교
• ?? vs ||
• delete
• Destructuring assignment
• isNaN() vs Number.isNaN()
• falsy values
• ES6 Import & Export
• Object.entries()
• Object.keys()
• Object.values()
• reduce()

CSS

Advanced

• Animation Concept
• Animation steps
• Floating Swipeable Button
• Transform
• Transition

Layout

• Box Model
• Footer 웹 페이지 최하위에 고정하는 방법
• rem, em

Responsive

• viewport

iOS Browser (Safari)

• iPhoneX Safe Area

Interactive

Basic

• Rotating Text
• requestAnimationFrame()

Event

• 마우스 클릭한 위치에 element 이동하기
• 스크롤 위치에 따라 HTML Element 조작하기
• 이벤트 위임
• 이벤트 리스너 & this

BE

Optimization

• Connection Pool
• 서버 성능 올리기

Node

• Event Loop
• ES6로 개발하기

Cloud

• Serverless

Docker

• Node.js 도커라이징

Infrastructure

• Forward & Reverse Proxy

DB

Basic

• 동시성 문제, 격리
• Transaction

Optimization

• Mongoose Redis Cache

Data structure

Basic

• Array 핵심요약
• Bubble Sort
• Hash
• Insertion Sort
• Linear, Binary Search
• Selection Sort
• Stable Sort

OS

Basic

• 컴퓨터 구조 (1) > CPU 기본 개념
• Interrupt
• 컴퓨터 구조 (2) > Memory 기본 개념
• 컴퓨터는 어떻게 정보를 처리할까?
• OS 기본 개념

Gatsby

Tip

• Gatsby에 Recoil 적용하기

Troubleshooting

• Site hosted by Gatsby Cloud is not indexed due to x-robots-tag:none

Git

Basic

• Add
• Branch
• Commit
• Prune
• pull vs fetch
• Rebase
• Reset
• Stash
• Status
• Tag

Tip

• Git pull, push, clone이 명령어로 안될 때

Network

Basic

• NAT 기본 개념
• Packet 기본 개념

ETC

Test

• A/B Test 기본 개념

Productivity

• 맥에서 다음 이미지 보는 방법
• GIPHY Capture The GIF Maker
• oh my zsh로 업무 생산성 높히기

SEO

• Needs Met

Team Work

• Speed of code reviews

VS CODE

• VIM short cut
• D2Coding Font 적용하기
• VIM 사용 적응기 1탄
• 파일 저장 시 자동으로 eslint과 prettier 실행하기
• command not found: code