Legacy Frontend Archive
1.[JS] 변수(variable)와 상수(constant)
#변수 #상수 #리터럴 #선언 #할당 #식별자
2.[JS Statement(문)]
#문 #표현식이아닌문 #블록문 #예외문 #제어문 #표현식 #연산자표현식 #식별자표현식 #리터럴표현식
3.[JS Statement(문)] 제어문(control statement)
#제어문 #조건문 #반복문 #제어문의공백
4.[JS Statement(문)] 연산자(operator)
#연산 #산술연산자 #대입연산자 #논리연산자 #비교연산자 #확산연산자 #rest(나머지매개변수)
5.[JS Data-types(데이터 타입)]
#데이터타입 #원시값 #객체
6.[JS Data-types(데이터 타입)] 값 타입(value type) vs. 참조 타입(reference type)
#데이터타입 #값타입 #value-type #참조타입 #reference-type #deep-copy #깊은복사 #v8 #엔진
7.[JS Data-types(데이터 타입)] 불변성
#불변성 #immutable #원시값 #객체 #Object.freeze() #객체를const로선언
8.[JS Data-types(데이터 타입)] 평가 전략 (evaluation strategy)
#평가전략 #Call by Value #Call by Sharing #Call by Reference
9.[JS Data-types(데이터 타입)] 원시 값(primitive value)
#원시값 #숫자 #문자열 #이스케이프 #특수문자 #문자열병합 #문자열템플릿 #불리언 #Truthy #Falsy #심볼 #null #undefined
10.[JS Data-types(데이터 타입)] 객체(object)
#객체 #객체생성 #프로퍼티접근 #비구조화할당 #객체비구조화할당 #배열비구조화할당 #확산연산자 #접근자프로퍼티 #getter #setter #프로퍼티나열 #for...in #Object.keys
11.[JS Data-types(데이터 타입)] 래퍼 객체(Wrapper Objects)와 자동 형 변환 (Type Coercion)
#래퍼객체 #wrapper objects #자동형변환
12.[JS Data-types(데이터 타입)] 배열(array)
#배열 #배열생성 #비구조화할당 #배열조작메서드
13.[JS Data-types(데이터 타입)] 함수(function)
#함수 #함수선언 #익명함수 #화살표함수 #함수호출 #함수참조 #매개변수 #매서드
14.[JS] 작동방식
#스코프 #정적스코프 #전역스코프 #블록스코프 #변수숨김 #함수스코프 #클로저 #IIFE #호이스팅 #스트릭트모드
15.[JS] 객체지향 프로그래밍(OOP)
#클래스 #객체생성자함수 #클래스상속 #메서드 #프로토타입 #인스턴스메서드 #클래스메서 #다형성
16.[JS] 비동기적 프로그래밍
#비동기적프로그래밍 #동기적프로그래밍 #콜백 #callback #setTimeout() #setInterval() #clearInterval() #callbackhell #콜백헬 #Promise #프라미스 #then핸들러 #catch핸들러
17.[JS] Math
#Math #숫자형식메서드 #고정소수점 #지수표기법 #고정전체자리수 #다른진수 #상수 #대수함수 #거듭제곱 #기타함수 #의사난수생성 #삼각함수
18.[JS] DOM(Document Object Model)
#DOM #DOM요소찾기 #DOM요소조작 #DOM요소생성 #DOM요소스타일링 #API
19.[JS] 이벤트(Event)와 이벤트 핸들러(Event handler)
#이벤트 #event #이벤트핸들러 #eventHandler
20.[JS] JS엔진과 런타임 환경
#JS엔진 #메모리힙 #memoryHeap #호출스택 #callStack #스택오버플로우 #단일호출스택의문제 #런타임환경 #runtimeEnvironment #브라우저에서JS #WebAPIs #콜백큐 #callBackQueue #이벤트루프 #eventLoop
21.[JS] 정규 표현식(Regular expression; RegExp)
#정규표현식 #RegularExpression #RegExp
22.[JS] 웹 개발에서 로컬스토리지 활용하기
#로컬스토리지 #localStorage
23.[JS] 비동기 HTTP 통신 (Ajax, Axios, Fetch)
#HTTP #Ajax #Axios #Fetch
24.[JS] .(점)은 뭘까? 프로퍼티 접근자
#프로퍼티접근자 #점표기법 #괄호표기법
25.[JS] 식별자를 겉모습으로 판단?
#식별자의겉모습 #함수 #메소드 #변수 #프로퍼티
26.[JS] 조건문을 스마트하게?
#조건문을배열로 #.includes()메서드 #조건문을객체로
27.[JS] new 없이 클래스 호출?
#class선언 #function선언 #new.target #일반함수호출 #클래스호출
28.[JS] 확산 연산자를 썼던 이유
#newArray() #.fill() #empty-item #확산연산자
29.[JS] ?., ?? ?!
#옵셔널체이닝 #null병합연산자
30.[JS] 브라우저가 어떻게 동작하는데요?
#브라우저주요기능 #브라우저기본구조 #UI #렌더링엔진 #파싱
31.[CSS] BEM(Block, Element, Modifier)
#BEM #Block #Element #Modifier
32.[CSS] Responsive Web(반응형 웹)
#ResponsiveWeb #반응형 웹 #Viewport #뷰포트 #미디어쿼리 #MediaQuery #분기점 #종단점 #모바일퍼스트
33.[CSS] a tag, button tag reset
#aTagReset #buttonTagReset
34.[CSS] clamp() 함수: 반응형 디자인
#clamp()
35.[CSS] CSS Module
#CSSModule #classNames #Sass
36.[CSS] Safari에서 border-radius와 overflow: hidden
#CSS #border-radius #overflow: hidden #isolate #WebKit #Safari
37.[Sass]
#Sass
38.[Sass] Partial 파일로 스타일 관리
#Sass #Partial
39.[React]
#React #SPA #MPA #SSR #CSR #virtualDOM #가상 #Diffing #Reconciliation
40.[React] JSX
#JSX #표현식 #조건문 #반복문 #camelCase #카멜케이스 #태그 #tag #inlineStyle #인라인스타일
41.[React] Component(함수 컴포넌트)
#Component #컴포넌트 #props #구조분해 #defaultProps #props.children
42.[React] <input> 상태관리
#input
43.[React] Shallow comparison
#ShallowComparison #얕은비교
44.[React] React.memo
#React.memo
45.[React Hook]
#Hook
46.[React Hook] useState
#useState
47.[React Hook] Lifecycle & useEffect
#Lifecycle #useEffect
48.[React Hook] useRef
#useRef
49.[React Hook] useMemo
#useMemo
50.[React Hook] useCallback
#useCallback #useMemo,useCallback차이점
51.[React Hook] useReducer
#useReducer
52.[React] .env(환경변수)로 API key 숨기기
#React #env #환경변수 #API #key
53.[React Library] react-router-dom
#react-router-dom #<Routes> #<Route> #<Outlet> #useParams #<Link> #<NavLink> #useNavigate
54.[React Library] styled-reset
#styled-reset
55.[React Library] react-helmet-async
#helmet
56.[PWA] React에서 PWA 셋팅
#PWA #CRA #template #manifest #service-worker
57.[PWA] Manifest doesn't have a maskable icon 해결
#PWA #Manifest #maskable #icon
58.[TS] Setting
#Setting #Vanilla #React
59.[TS] TypeScript
#TypeScript #개요 #TypeAlias #UnionType #TupleType #fn #class #unknown #any #option
60.[TS] Narrowing & Assertion
#Narrowing #Assertion
61.[TS] Type Aliases
#TypeAliases #UnionType #ObjectType #extend
62.[TS] Literal Type
#LiteralType
63.[TS] Function Type
#FunctionType
64.[TS] DOM Type
#DOM #instanceof #옵셔널체이닝 #assertion
65.[TS] Class Type
#Class
66.[TS] interface for Object
#interface
67.[호사로운] README.md
#호사로운 #README.md
68.[호사로운] 반응형 웹 구현
반응형 웹 구현
69.[호사로운] Sticky Header
Sticky Header #display #visibility #scrollEvent
70.[호사로운] Mobile ver. navigation menu
Mobile ver. navigation menu #ClickEvent #Transition
71.[호사로운] 현재 페이지 표시
현재 페이지 표시 #document.title
72.[호사로운] Carousel slider
Carousel slider
73.[호사로운] Image preloading
Image preloading #동기적로드 #synchronousLoad #loadEvent
74.[호사로운] React 리팩토링
React 리팩토링
75.[식선비] READEME.md
#식선비 #siksunbi #READEME.md
76.[식선비] 웹폰트 적용
#웹폰트
77.[식선비] 현재 페이지 표시
#현재페이지표시 #NavLink
78.[식선비] 스크롤 설정
#스크롤 #세로스크롤 #줄바꿈안함 #스크롤바숨기기
79.[식선비] QR코드 생성
#QR코드생성 #googleAPI
80.[식선비] 스크롤 고정 블러효과
#스크롤고정 #블러효과