🖋 개발하며 얻은 인사이트를 기록합니다.
https://shinjungoh.tistory.com/
네트워크 기초 - 네트워크, 트래픽, 처리량, 대역폭, RTT
네트워크 토폴로지 - 버스, 스타, 트리
네트워크 토폴로지 - 링, 메시
네트워크 토폴로지의 필요성과 병목현상
네트워크의 분류 - LAN, MAN, WAN
IP(Internet Protocol)
TCP, UDP
TCP/IP 4계층 - 개념, 캡슐화, 비캡슐화, PDU, OSI 7계층
TCP/IP 4계층 - MTU, MSS, PMTUD
TCP/IP 4계층 - 애플리케이션 계층(application) HTTP, SSH, FTP, SMTP
TCP/IP 4계층 - 전송 계층(transport) TCP, UDP
TCP/IP 4계층 - 인터넷 계층(network) ICMP
TCP의 연결성립과정 - 3-way Handshake
TCP의 연결해제과정 - 4-way Handshake, TIME_WAIT
라우팅 - 개념, 라우터
라우팅 - 라우팅 테이블
IP 주소, MAC 주소, ARP, RARP
IP 주소체계 - 이진수 이해하기
IP 주소체계 - IPv4와 IPv6
IP 주소체계 - 클래스풀(Classful IP Addressing)
IP 주소체계 - 클래스리스, 서브넷마스크, 서브네팅
IP 주소체계 - NAT, public IP, private IP
브라우저 렌더링 과정
PORT(포트)
DNS
URI
웹 브라우저 요청 흐름
HTTP 기본
HTTP1, HTTP2, HTTP3
HTTPS, TLS - 암호화
HTTPS, TLS - TLS 핸드쉐이크
클라이언트 서버 구조
Stateful, Stateless
비연결성(connectionless)
HTTP 메시지
HTTP API
HTTP 메소드 - GET, POST
HTTP 메소드 - PUT, PATCH, DELETE
HTTP 메소드 속성
클라이언트에서 서버로 데이터 전송
HTTP API 설계 예시
HTTP 상태코드
HTTP 상태코드 - 304 Not Modified
HTTP 일반 헤더(전송, 정보, 인증, 쿠키)
HTTP 헤더 (캐시와 조건부 요청)
Rest-API vs Graphql-API
CORS(교차 출처 리소스 공유)
OAuth2.0
캐싱 종류, 개념
쿠키, 세션
웹브라우저 캐시 - 로컬스토리지
웹브라우저 캐시 - 로컬스토리지와 오리진
웹브라우저 캐시 - 로컬스토리지를 활용한 UX 개선
웹브라우저 캐시 - 세션스토리지
AccessToken, RefreshToken
API
DOM
Event
Event Loop 개념
자바스크립트 엔진과 Event Loop
Web Worker
DOM 개념
브라우저 렌더링 과정
브라우저 렌더링 최적화
브라우저 성능 측정
Console API
웹 바이탈(Web Vitals)
Git과 Github 개념
Git Workflow
기본 명령어 - add, status, diff, commit, log, tag
undo 명령어 - restore, reset, reflog, revert
디버깅 명령어 - blame, bisect
브랜치 명령어 - branch, merge, rebase
WebStorm에서 rebase하기
rebase 중단하기
stash
port kill
SSH keys
Husky 설치 방법
Husky 사용 방법
gitignore 사용 방법
github에 업로드한 커밋 메시지 수정
github에 업로드한 이전 커밋 덮어쓰기
github 잔디 표시 설정
git 커밋 컨벤션 설정
디렉토리 구조 출력 명령어 tree
github에서 프로젝트 가져오기 - remote, fetch, push, pull
git fork
git fork - 원본 저장소에 PR 요청하기
git fork - 원본 저장소에 브랜치 push하기
git fork - origin, upstream
git fork - fork repository 잔디 심기
Git Book 활용하기
WakaTime 이용하기
CI - 로컬 환경에서 markdown lint 테스트하기
데이터 타입
실행 컨텍스트
this
메소드, 함수
콜백 함수
클로저
프로토타입
클래스
클래스 개념
객체 지향 프로그래밍
block scope
block scoped variables
template literal
default parameter
rest parameter
spread operator
enhanced object functionalities
arrow function
function
destructuring assignment
symbol
set, weakset
map, weakmap
Iterable, Iterator
generator
class
promise
var
스코프
일급 객체
생성자 함수
new Function
map, filter, find
getElementById, querySelector
Date 객체
toLocaleString
Object.freeze
글자 수 채우기 - padStart, padEnd
Array.at
node.js
모듈 시스템
DOM 요소 탐색
데이터 속성 사용하기
이벤트 위임(event delegation)
이벤트 전파 중단 - 캡처링, 버블링
localStorage, sessionStorage
localStorage 이용하기
debounce
throttle
const 폴더로 자주 사용하는 값 관리하기
prettier, eslint 설치 및 실행 방법
tab focus 이동 tabIndex 속성 이용하기
Promise와 비동기 처리
Promise와 async/await
논리 연산자
패키지 매니저 - npm, pnpm, yarn, yarn berry
Yarn Plug'n'Play
Day.js로 날짜, 시간 표기하기
faker를 이용해 더미 데이터 생성하기
barrelsby로 모듈화하기
React concept
React, Vue 비교
JSX
React tools
브라우저 렌더링 패턴 - CSR, SSR
eslint ignore
Node.js package 생성
Node.js dependencies, devDependencies
NODE_ENV 값으로 개발, 배포 환경 세팅하기
React에서 label for 사용하기
react에서 select 사용하기
모바일 100vh 스크롤 문제 해결
react 검색어 일치 글자 볼드처리
Context API
Legacy API
a tag 사용하기
Checkbox 구현하기
쿼리 스트링
Container 컴포넌트 설계 방식
index로 파일 모듈화하기
input 커서 위치 조정하기
useRef로 반응형 구현하기
이벤트 등록하기
라디오 버튼 구현하기
비밀번호 변경 구현하기
item 대신 list가 선택되는 이슈 해결하기
유효하지 않은 토큰 처리하기
개발 중인 웹페이지 모바일로 미리보기
정보값이 여러개인 메뉴 구현하기
로딩바 구현하기
이미지 경로 설정하기(public, src)
React 18
Axios
API 호출 함수 분리하기
라우터 - React Router
라우터 - react router v6 오류 해결
라우터 - react router 동적 라우팅
라우터 - react router 뒤로가기 방지
라우터 - ProtectedRoute
라우터 - 에러 페이지 구현하기
테스트 - CodeceptJS 개념
테스트 - CodeceptJS로 E2E 테스트하기
테스트 - CodeceptJS Custom Helpers 사용하기
테스트 - vite 프로젝트에서 jest 설정하기
테스트 - Jest로 Lottie 모킹하기
MSW 설정하기
useSocket으로 웹소켓 연결하기
스토리북 - 스토리북 개념
스토리북 - 스토리북 사용하기
스토리북 - 크로마틱으로 스토리북 관리하기
스토리북 - 크로마틱 토큰 관리하기
스토리북 - 스토리북에 글로벌 스타일 적용하기
React Query - Devtools
React Query - 무한 스크롤 구현하기
React Hook Form
useState 동작 원리
useState 상태 값 업데이트
MobX observer
Redux
React-Redux
Redux-Middleware
Zustand
Next.js page layout
Next.js dynamic routes
Next.js data fetching
Next.js shallow routing
Next.js link component
Next.js image component
Next.js react router migration
Next.js App Router
Next.js 서버 컴포넌트
NextAuth로 로그인 구현하기
NextAuth useSession
Suspense로 Streaming해서 loading, error 최적화하기
Next.js Caching
Next.js build
TypeScript
interface, type
Typescript Hierarchy - unknown, any, never
enum
JavaScript 프로젝트 TypeScript로 변경하기
React PropsWithChildren
React event type
is 타입가드
as const
CSSProperties
기본 개념
우선순위 적용
box-model
layout - float, flex, grid
font
절대 단위, 상대 단위
background
position, z-index
transition
transform
animation
미디어 쿼리
flex
공백 처리하기 - white-space
라디오 버튼
반응형 웹사이트 기본
반응형 - 모바일 웹사이트
반응형 - 태블릿 웹사이트
반응형 - 데스크탑 웹사이트
웹폰트 적용하기
오픈 그래프 프로토콜
CSS 방법론 - SMACSS, BEM, OOCSS
브라우저 선택 영역 스크린샷 찍기
Tailwind CSS
styled-components
styled-components 스크롤바 스타일 적용
styled-components textarea 태그 rows, cols 속성
Emotion - Global Style 적용하기
CSS-in-JS props 문법 사용하기
classnames로 조건부 className 결합하기
Vanilla Extract 사용방법
Vanilla-extract recipes
JSON
XML
API
클라우드, SaaS, IaaS, PaaS
도커, 컨테이너
정적 타입시스템
운영 체제 종료 코드
디자인패턴
싱글톤 패턴
의존성 주입
팩토리 패턴
이터레이터 패턴
전략 패턴
옵저버 패턴
프록시 패턴
MVC MVP MVVM패턴
Spring의 MVC패턴 적용사례
flux 패턴
의존성주입과 전략패턴의 차이
프로그래밍 컨텍스트
자바스크립트 class, static
자료구조, 알고리즘
자료구조와 알고리즘의 중요성
코딩테스트 준비 방법
자료구조의 종류
시간 복잡도
배열
배열과 객체
연결 리스트
연결 리스트의 종류
스택
큐
덱
해시 테이블
셋
재귀함수
재귀 패턴
하노이 탑
버블 정렬
선택 정렬
삽입 정렬
병합 정렬
Yarn berry - 개발 환경 버전 설정
Yarn berry - yarn workspace 패키지 만들기
Yarn berry - 공통 라이브러리 패키지 만들기
Yarn berry - tsconfig, eslint, prettier 적용하기
Yarn berry - 리액트 컴포넌트 공유하기
Yarn berry - type check
모노레포 프로젝트 설정하기