[멋쟁이사자처럼] 프론트엔드 3일차 정리

1. DOM과 MVW 아키텍처 방식의 차이

• DOM (Document Object Model) 프로그래밍: 웹 페이지의 모든 내용을 객체처럼 다룰 수 있게 해주는 인터페이스입니다. 전통적으로 웹 페이지의 요소를 직접 선택하고 조작하는 방식입니다. 하지만 대규모 애플리케이션에서는 코드가 복잡해지고 유지보수가 어려워지는 경향이 있습니다.
  
  
• MVW (Model-View-Whatever) : MVC(Model-View-Controller)나 MVVM(Model-View-ViewModel) 등 다양한 아키텍처 패턴을 통칭하는 말입니다. 데이터(Model)와 화면(View)을 분리하여 관리하는 것이 핵심입니다.
  
  "데이터와 제어를 고립화시키지 않는다."라는 말은, MVW 패턴들이 데이터와 UI를 느슨하게 연결하여, 데이터 변경이 UI에 자동으로 반영되거나(바인딩), UI 상호작용이 데이터 변경을 일으키도록 하는 특징을 설명하는 것으로 생각했습니다. 즉, DOM을 직접 조작하기보다 데이터 변화에 따라 UI가 동기화되는 방식입니다.
  
  
• 바인딩 : 데이터(Model)와 화면(View) 요소를 연결하여 한쪽이 변하면 다른 쪽도 자동으로 업데이트되도록 하는 과정을 의미합니다. MVW 아키텍처의 핵심 원리 중 하나입니다.
  모델 : "바인딩에 사용되는 것"으로 언급된 '모델'은 애플리케이션이 다루는 데이터 그 자체를 지칭합니다.

---

2. Vue.js 관련 개념 (Directives와 바인딩)

• Built-ins / Directives: Vue.js에서 HTML 요소에 특수한 동작을 부여하는 특별한 속성(attribute)들 입니다. 주로 v- 로 시작하며, 데이터와 DOM을 연결(바인딩)하는 데 사용됩니다.
  • v-text: 요소의 텍스트 내용을 데이터에 바인딩합니다.
  • v-html: 요소의 HTML 내용을 데이터에 바인딩합니다 (HTML 태그가 그대로 렌더링됨).
  • v-show: 조건에 따라 요소의 display CSS 속성을 토글하여 요소를 보이고 숨깁니다.
  • v-if / v-else / v-else-if: 조건에 따라 요소를 렌더링할지 말지 결정합니다 (DOM 자체를 추가/제거).
  • v-for: 배열 데이터를 기반으로 목록을 렌더링합니다.
  • v-on: DOM 이벤트(클릭, 키보드 입력 등)를 수신하고 자바스크립트 코드를 실행합니다 (@ 단축 문법 사용).
  • v-bind: HTML 속성(attributes), 클래스(classes), 스타일(styles) 등을 데이터에 바인딩합니다 (: 단축 문법 사용).
  • v-model: 폼 입력 요소(input, textarea, select)에 양방향 바인딩을 설정합니다. 사용자 입력이 데이터에 즉시 반영되고, 데이터 변경이 입력 필드에 즉시 반영됩니다. 특히, "2way binding은 문자열로 입력된다. 바꾸기 위해서는 v-model을 사용한다."는 이 v-model의 중요한 특징과 용도를 잘 나타냅니다.
  • v-slot: 컴포넌트의 콘텐츠 배포를 위한 특수 속성입니다.
  • v-pre: 요소와 그 자식 요소의 Vue 컴파일을 건너뜁니다.
  • v-once: 요소를 한 번만 렌더링하고 이후 데이터 변경에 반응하지 않게 합니다.
  • v-memo: 요소와 컴포넌트 서브트리를 메모하여 특정 의존성이 변경될 때만 업데이트되도록 합니다.
  • v-cloak: Vue 인스턴스가 마운트되기 전까지 요소를 숨기는 데 사용됩니다 (초기 깜빡임 방지).
• MVC와 DOM: "MVC는 도큐먼트를 쓰지 않기 위한 것이다."라는 말은 MVC 패턴이 DOM을 직접 조작하는 것보다는 추상화된 모델과 뷰를 통해 데이터를 관리하고 화면을 업데이트하는 방식임을 의미하는 것이라고 생각했습니다. 즉, 개발자가 직접 DOM API를 호출할 필요를 줄여주는 효과가 있다는 뜻입니다.

---

3. 데이터 동기화와 Flux 아키텍처

• 모델에 대한 줄세우기 (동기화) = FLUX에 유리하며 리액트가 유리하다.
  • 이는 복잡한 애플리케이션에서 여러 컴포넌트가 하나의 공유된 상태(모델)를 참조하고 업데이트할 때 발생하는 문제를 해결하기 위해 Flux 아키텍처가 등장했음을 설명합니다.
    
    
  • Flux는 데이터 흐름을 단방향(Unidirectional Data Flow)으로 강제하여 데이터의 변경 경로를 예측 가능하게 만듭니다. 모든 상태 변경은 액션(Action)을 통해 디스패처(Dispatcher)로 전달되고, 스토어(Store)에서 처리된 후 뷰(View)에 반영됩니다. 이렇게 '줄을 세워서' 데이터를 관리하므로, 복잡한 데이터 동기화 문제를 효율적으로 해결할 수 있습니다.
    
    
  • React는 이러한 단방향 데이터 흐름과 Flux(혹은 Redux와 같은 파생 라이브러리) 아키텍처와 잘 어울려 사용됩니다.

---

4. Node.js와 번들링

• Node.js: 웹 브라우저 밖에서 자바스크립트를 실행할 수 있게 해주는 런타임 환경입니다. 이를 통해 자바스크립트로 서버 개발, 데스크톱 애플리케이션 개발, 개발 도구(예: 번들러) 등을 만들 수 있게 되었습니다.
  
  
• 번들(Bundle): 여러 개의 자바스크립트, CSS, 이미지 파일 등을 웹 브라우저에서 효율적으로 로드하고 실행할 수 있도록 하나의 파일 또는 몇 개의 파일로 합치고 최적화하는 과정입니다. "배포에 알맞게 포장하는 것"이라고 생각이 가능합니다. 웹팩(Webpack), Parcel 등의 번들러가 이 역할을 합니다.
  
  
• left-pad 사건: NPM(Node Package Manager) 생태계에서 발생했던 유명한 사건으로, 아주 작은 유틸리티 모듈 하나에 전 세계 수많은 프로젝트가 의존하고 있었는데, 해당 모듈이 갑자기 삭제되면서 대규모 장애가 발생했던 사례입니다. 이는 모듈 의존성 관리의 중요성과 복잡성을 보여줍니다.

---

5. 비동기 처리

• 동기식 / 동기화: 작업을 순차적으로 처리하는 방식입니다. 한 작업이 완료될 때까지 다음 작업이 줄을 서서 기다리는 형태입니다.
  
  
• 비동기식: 작업을 동시에 처리하거나, 한 작업의 완료를 기다리지 않고 다음 작업을 시작하는 방식입니다. "버퍼(완충지)에 저장 후에 필요할 때, 꺼내서 쓴다"는 것은 작업이 완료되기를 기다리지 않고 일단 요청을 보낸 뒤, 나중에 작업이 완료되면 결과(콜백 함수나 프로미스)를 받는 방식을 의미합니다.
  • 비동기식이 요구되는 상황 : 작업이 둘 이상일 경우
     예를 들어, 웹에서 데이터를 받아오는 네트워크 요청(오래 걸리는 작업)이 있을 때, 이 요청이 끝날 때까지 UI가 멈추지 않고 다른 작업을 할 수 있게 하기 위해 비동기 처리가 필요합니다.
• UI 스레드 (메인 스레드) / 보조 스레드: 웹 브라우저는 UI를 렌더링하고 사용자 이벤트를 처리하는 메인 스레드(UI 스레드)를 가집니다. 오래 걸리는 동기 작업은 이 메인 스레드를 막아 UI가 멈추게(freeze) 합니다. 비동기 작업은 이러한 블로킹을 피하기 위해 사용됩니다. 자바스크립트 자체는 싱글 스레드 언어이지만, 브라우저나 Node.js 환경에서 제공하는 Web APIs (Node.js의 경우 C++ 바인딩 등)를 통해 비동기 작업을 처리하여 메인 스레드의 블로킹을 막습니다.
  
  
• Promise (프로미스) 함수: 자바스크립트에서 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 비동기 작업의 결과를 마치 동기적인 값처럼 다룰 수 있게 하여 콜백 지옥(callback hell) 문제를 해결하고 코드를 더 깔끔하게 작성할 수 있게 해줍니다.
  
  
• 스레드, 프로세스, 콜백
  프로세스: 운영체제에서 실행되는 프로그램의 독립적인 인스턴스입니다. 각각의 프로세스는 자신만의 메모리 공간을 가집니다.
  스레드: 프로세스 내에서 실행되는 실행 단위입니다. 하나의 프로세스는 여러 개의 스레드를 가질 수 있으며, 스레드들은 프로세스의 메모리 공간을 공유합니다.
  콜백(Callback): 특정 이벤트가 발생하거나 비동기 작업이 완료된 후 나중에 호출될 함수입니다. 비동기 처리의 가장 기본적인 방법입니다.