오봉이와 함께하는 개발 블로그

비동기 JavaScript를 사용하는 SPA는 JavaScript에서 제공하는 비동기 함수를 사용한다. callback JavaScript에서 함수는 객체 함수의 파라미터로 함수를 전달하여 실행하는 함수를 callback 함수라고 한다. 비동기성을 구현해주는 기능 자체를 callback이라 하는 것이 아니라, 비동기성을 구현하기 위해 callback을 사용하는 것 비동기성 함수를 호출할 때는 제어권이 넘어가지 않지만, 동기성 함수를 호출할 때는 제어권이 넘어가게 된다. 비동기 함수에 callback이 있다면, 해당 callback은 pending되어 있다가 함수가 종료되었을 때 해당 callback을 실행 일반 함수에 callback을 사용하는 것은 실행 순서를 보장하는 내부 함수를 사용하는 것 call..

상태 관리 SPA 라이브러리나, 프레임워크에서 상태(state)는 부모-자식 컴포넌트 간에 props로 공유가 가능하다. 컴포넌트 관계가 간단하게 구성되어 있다면 props 전달과 관리가 어렵지 않겠지만 아래와 같이 복잡하게 구성되어 있다면 props를 통해 모든 데이터를 전달해야 하는 문제가 있다. 중앙 상태 관리 라이브러리나 프레임워크마다 명칭은 다르지만, 중앙 집중화 시켜 상태 관리를 하는 라이브러리가 있다. 중앙 저장소를 통해 관리하고 여러 부분에서 공유되기 때문에 상태의 일관성이 향상된다. 단, SPA와 상태 관리 라이브러리 모두 비동기적으로 실행되기 때문에 일관성을 보장하진 않는다. 상태의 출처가 한 곳이기 때문에 컴포넌트간 데이터 흐름 추적과, 예측 가능성이 향상된다. 반복되는 코드를 줄일 ..

라이프 사이클 Vue create beforeCreate 컴포넌트 생성자 인스턴스 생성, 상태 설정 및 초기화 전에 진행 DOM 추가 전이기 때문에 DOM 접근 불가능 created 컴포넌트 인스턴스 생성, 데이터, 이벤트 초기화 이후 호출 DOM 추가 전이기 때문에 DOM에 접근 불가능 mount beforeMount 컴포넌트가 마운트되기 전 호출 컴포넌트의 템플릿이 컴파일 실제 DOM과 연결되기 직전 단계로 DOM 접근 불가능 mounted 컴포넌트가 DOM에 마운트된 후 호출 컴포넌트의 템플릿이 실제 DOM에 렌더링된 이후의 상태 비동기 작업(사용자 요청 API, 기타 작업 등)을 수행하기 적합한 단계 update beforeUpdate state나 props, 부모 컴포넌트에서 데이터 변경 등 렌..

데이터 변경 감지 SPA에서 데이터가 변경되면 데이터 변경을 감지하고 자동으로 화면을 렌더링 한다. 데이터를 SPA에서는 state 라 칭한다. 컴포넌트가 다시 렌더링 되는 조건 state 변경 props 변경 중앙 상태값(redux, vuex...) 변경 부모 컴포넌트 재렌더링에 따라 자식 컴포넌트 재렌더링 state는 set 메서드를 통해 업데이트 되어야 SPA 프레임워크 or 라이브러리에서 변경을 감지하고 다시 렌더링 한다. 정확하게 하면 set 메서드는 state 변경을 요청 하는 것 react는 setState or useState vue는 data에 정의된 state의 경우 변경시 자동으로 setter를 호출해서 수행 SPA는 성능 최적화를 위해 DOM 업데이트를 비동기, 배치로 처리한다. s..

DOM (Document Object Model) DOM은 HTML 문서를 파싱해 구성 요소들을 객체로 구조화 시킨 것 DOM은 트리 형태를 가진다. 문제 브라우저 렌더링 과정 HTML 문서를 파싱하여 DOM 객체 (트리) 생성, CSS 파싱하여 스타일러스 규칙 생성 어테치먼트 과정을 거쳐 실제 보여져야 할 요소인 렌더 트리 생성 렌더 트리를 통해 렌더링 과정을 거쳐 화면에 표시 브라우저 DOM 변경 작업 (DOM 수정 작업) DOM 트리에서 변경될 node와 하위 node제거 하위 node를 포함한 변경된 node를 다시 추가 css에 맞춰 렌더링 트리에서 node를 제거하고 다시 추가하는 작업은 효율적인 알고리즘을 사용한다면 복잡한 작업은 아니지만, 렌더링 하는 작업을 변경 시 반복적으로 하게 된다면..