Skip to content

Main Navigation

References

Types

Appearance

Sidebar Navigation

Algorithm

Programmers 2020 카카오 인턴십 경주로 건설 Programmers 2020 카카오 인턴십 동굴 탐험 Programmers 42576. 완주하지 못한 선수 Programmers 42577. 전화번호 목록 Programmers 42578. 위장 Programmers 42579. 베스트 앨범 Programmers 42583. 다리를 지나는 트럭 Programmers 42584. 주식 가격 Programmers 42586. 기능 개발 Programmers 42587. 프린터 Programmers 42626. 더 맵게 Programmers 42627. 디스크 컨트롤러 Programmers 42628. 이중우선순위큐 Programmers 42746. 가장 큰 수 Programmers 42747. h-index Programmers 42748. k번째 수 Programmers 42839. 소수 찾기 Programmers 42840. 모의고사 Programmers 42842. 카펫 Programmers 42860. 조이스틱 Programmers 42862. 체육복 Programmers 42883. 큰 수 만들기 Programmers 42885. 구명보트 Programmers 43165. 타겟 넘버

Authentication

SSO 인증 대칭키 vs 비대칭키

Books

일 잘하는 사람은 단순하게 말합니다 제텔카스텐 해커와 화가

Browser

<script>의 async와 defer 속성 Chromium(크로미움)WebKit(웹킷)레이어(Layer)리플로우(Reflow) vs 리페인트(Repaint)뷰포트(Viewport)브라우저 렌더링 1 브라우저 렌더링 2 브라우저 렌더링 3 브라우저 렌더링 4 브라우저 렌더링 5 브라우저 렌더링 원리 하드웨어 가속

Computer Science

관심사의 분리(Separation of Concerns)추상화(Abstraction)

Conference

FEConf 2020 OpenAPI Specification으로 타입 세이프하게 API 개발하기 희망편 vs 절망편 요약 FEConf 2021 - Can I use Vue3 JSConf Korea 2022

CSS

block vs inline vs inline block bootstrap getting started CSS in JS CSS Reset CSS 개요 CSS 단위 CSS 박스 모델 CSS 속성 01. width height CSS 속성 02. margin CSS 속성 03. padding CSS 속성 04. border CSS 속성 05. box sizing CSS 속성 06. display CSS 속성 07. overflow CSS 속성 08. opacity CSS 속성 09. font CSS 속성 10. text CSS 속성 11. float position CSS 속성 12. background CSS 속성 13. transition transform CSS 속성 14. animation CSS 속성 15. columns CSS 속성 16. flex CSS 속성 17. grid CSS 의사 클래스(Pseudo Classes)CSS의 Wildcard 선택자 display vs visibillity Reset CSS와 Normalize CSS Sass built in functions Sass comment data type Sass extend Sass flow control Sass functions Sass import Sass mixins Sass nesting Sass operations Sass overview Sass variables will-change 미디어 쿼리(Media Query)반응형 디자인 1 media queries 선택자(selector) - 1편 선택자(selector) - 2편 쌓임 맥락(Stacking Context)

Design System

디자인 시스템 디자인 시스템 아티클 모음

Frontend

프론트엔드 기술 트렌드 추적하기

Gadget

해피해킹 키보드

Git

git reflog git submodule git tag tag vs release 여러 개의 커밋 로그를 하나로 묶기 원격 브랜치를 추적하는 새로운 로컬 브랜치 만들기 이미 커밋된 파일을 gitignore에 추가하기 최초 커밋 수정하기 현재 로컬 브랜치에서 추적하고 있는 리모트 브랜치 보기 현재 브랜치가 추적하는 원격 브랜치 변경하기

GitHub & GitLab

GitHub Package registry로 npm 패키지 배포하기 GitLab 다른 사람의 MR에 커밋 추가하기 수동으로 로컬 컴퓨터에 GitLab Runner 설치하기

Glossary

AJAX alpine CDN(Content Delivery Network)deprecated DNS(Domain Name System)Domain-specific language End-to-End(E2E)Framework Agnostic General-purpose language GraphQL Headless UI LTS(Long Term Support)MAU(Monthly Active User)MVP(Minimum Viable Product)ROI(Return Of Investment)Test Pyramid Testing Trophy W3C WAI-ARIA 거버넌스(Governance)교차 출처(Cross Origin)구문적 설탕(Syntatic sugar)국제화(i18n)도메인(Domain)동일 사이트(Same Site)동일 출처(Same Origin)디렉티브(Directive)매개변수(parameter) vs 인자(argument)멱등성 명시적(Explicit) vs 암시적(Implicit)변성(Mutable) vs 불변성(Immutable)부수 효과(Side Effect)블로킹(blocking) vs 논블로킹(non blocking)서브도메인(Subdomain)선언적 프로그래밍(Declarative Programming)세계화(g11n)순수 함수(Pure Functions)에자일(Agile)의존성 주입(Dependency Injection)일급 객체(First class object)일급 시민(First class citizen)점진적 향상(Progressive enhancement) vs 우아한 성능저하(Graceful degradation)정규화(Normalization)진입점(Entry point)처리량(throughput)최상위 도메인(Top Level Domain)출처(Origin)카멜 케이스(camelCase)코드 스플리팅(Code Splitting)크로스 사이트(Cross Site)토큰(Token)트리 쉐이킹(Tree Shaking)파스칼 케이스(PascalCase)파싱(Parsing)프로토콜(Protocol)현지화(l10n)

HTML

<article> vs <section>data 속성 DOCTYPE href HTML html 시작하기 lang 속성 메타데이터 meta 요소 시맨틱(Semantic) 태그

HTTP

Accept-Language Cache-Control Content-Language Content-Type HTTP Request HTTP Response HTTP 메서드 HTTP 프로토콜 HTTP 헤더 HTTPS 프로토콜 Media Types 디지털 인증서

i18n

다국어 사이트를 디자인하거나 개발할 때 주의해야 할 사항

JavaScript

ECMAScript modules enumerable(열거 가능)export default vs export for of vs for in html 속의 자바스크립트 iterable(반복 가능)JavaScript 최적화 Object Tagged Templates TDZ(Temporal Dead Zone)Testing JavaScript this URL 인코딩 함수 var vs let vs const 값(Value)객체(Object)객체지향 프로그래밍(Object Oriented Programming)데코레이터(Decorator)동일성(equality)디바운싱(debouncing) vs 쓰로틀링(throttling)변수와 스코프 메모리 스코프(Scope)실행 컨텍스트(Execution Context)실행 컨텍스트와 클로저 싱글 스레드 얕은 복사(shallow copy) vs 깊은 복사(deep copy)언어의 기초 엄격 모드(strict mode)원시 값(Primitive)이벤트 루프(Event Loop)자바스크립트란 무엇인가 정수 프로퍼티 제너레이터(Generator)참조(Reference)클래스(Class)클로저(Closure)클린 자바스크립트 타입 체크 프로미스(Promise)프로토타입 객체 프로토타입(prototype)함수 선언 vs 함수 표현식 vs 화살표 함수 함수와 프로토타입 체이닝 1 함수와 프로토타입 체이닝 2 함수와 프로토타입 체이닝 3 형 변환(Type conversion)호이스팅(hoisting)

Jira

JQL(Jira Query Language)

l10n

국가별 콘텐츠를 제공하기 위한 방법

Library

Swiper Vue Query

Linux

유용한 Linux 명령어 모음

macOS

macOS 유틸리티 설정 macOS 키체인에 인증서 추가하기

Network

OSI 7 Layer vs TCP IP 4 Layer

Note

4세대 노트 앱

npm

npm dedupe npm outdated npm unpublish npm update package-lock.json SemVer 캐럿(caret) vs 틸드(tilde)

Programming

Naming Convention Observer Pattern vs PubSub Pattern Pass by Reference vs Pass by Value sic xe machine architecture 시스템 소프트웨어란 어셈블러 asembler

Project

blog.younho9.com Link Preview MDN Link Preview notes.younho9.com Notion URL Shortener roadmap.younho9.com yeoman generator 만들기

Python

Python pip 패키지 관리

React

Context API Context API vs Redux Fiber Forwarding Refs Props vs State React React Hooks React import 스타일 useCallback과 useMemo useEffect useRef useState vs useReducer 가상 돔(Virtual DOM)리액트(React)리액트를 다루는 기술 1장 리액트 시작 리액트를 다루는 기술 2장 jsx 리액트를 다루는 기술 3장 component 리액트를 다루는 기술 4장 이벤트 핸들링 리액트를 다루는 기술 5장 ref dom에 이름 달기 리액트를 다루는 기술 6장 컴포넌트 반복 리액트를 다루는 기술 7장 라이프사이클 메서드 리액트를 다루는 기술 8장 hooks 의존성 배열(dependency list)재조정(Reconciliation)

React Native

kawai-todo 따라 만들기

Regex

유용한 정규표현식 모음

RxJS

combineLatest Observable vs Subject RxJS 퀵스타트

Test

Cypress Visual Testing Cypress vs Testing Library 단위(Unit) 테스트 소프트웨어 테스트 통합(Integration) 테스트

Thoughts

React vs Vue 이 노트에 대해

Tool Chain

Cypress MSW(Mock Service Worker)Nuxt3 Playwright Testing Library 일렉트론(Electron)

Tools

VS Code import suggestion WebStorm 유용한 단축키 모음 버추얼박스(VirtualBox)에 설치된 우분투(Ubuntu) 맥 터미널에서 접속하기 버추얼박스(VirtualBox)에 우분투(Ubuntu)설치하기

Troubleshooting

Invalid Date in Safari Netlify Node Version NodeJS Jest VS Code Debugging npm missing write access error SSL certificate problem: self signed certificate in certificate chain

TypeScript

infer type vs interface unknown vs any 공변성 vs 반공변성 구별된 유니온(Discriminated Unions)타입 레벨 동일성(Type Level Equality)

Vue

Options API vs Composition API slots Testing Vue v-model v-show vs v-if vee-validator Vite Vue2 애플리케이션 보일러플레이트 Vue Vue Composition API Vue School Vue Vue 라이프사이클 Vue 컴포넌트 라이브러리 구축하기 Vue 한글 입력 방지 Vue2 및 3로 동작하는 라이브러리 만들기 반응성(Reactivity)싱글 파일 컴포넌트(SFC)

Web

CORB(Cross Origin Read Blocking)Core Web Vitals CORS(Cross Origin Resource Sharing)CSR vs SSR vs SSG FOUC(Flash of unstyled content)FP vs FCP vs FMP vs LCP PRPL 패턴 REST vs GraphQL SSL vs TLS TTFB(Time To First Byte)TTI(Time To Interactive)검색 엔진 최적화(SEO)누적 레이아웃 이동(Cumulative Layout Shift)사이트 격리(Site Isolation)사이트가 Google 색인에 포함되어 있는지 확인하기 지속 쿠키(Permanent Cookie)최초 입력 지연(First Input Delay)쿠키(cookie)크로스 사이트 스크립팅(XSS)크로스 사이트 요청 위조(CSRF)클라이언트 서버 모델 프록시(Proxy)

Web API

beforeunload vs unload document.readyState document.visibiltyState DOM(Document Object Model)DOMContentLoaded vs load Intersection Observer localStorage Node vs Element requestAnimationFrame sessionStorage visibilitychange Web Storage API window window vs document window.localtion.href vs window.location.replace vs window.location.assign의 차이점 window.navigator.language window.open window.opener 세션 쿠키(Session Cookie)세션(Session)웹 스토리지(Web Storage)웹 워커(Web Worker)이벤트(Event)쿠키(cookie)와 웹 스토리지(Web Storage)의 차이점 페이지 라이프사이클(Page Lifecycle) API

반응성(Reactivity)

Title

반응성(Reactivity)

Category

Tags

Aliases

반응성(Reactivity)

Created

last year

Updated

last year

Vue는 JavaScript 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행한다.

Edit this page on GitHub

Previous pageVue2 및 3로 동작하는 라이브러리 만들기

Next page싱글 파일 컴포넌트(SFC)

Released under the MIT License.

Copyright © 2022-present Younho Choo