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): 특정 이벤트가 발생하거나 비동기 작업이 완료된 후 나중에 호출될 함수입니다. 비동기 처리의 가장 기본적인 방법입니다.

멋쟁이사자처럼 2일차 정리 (6월 18일)

6월 18일 학습 내용은 JavaScript의 핵심적인 개념과 데이터 조작 방법에 중점을 두었으며 연산자, 함수, 배열, 객체, 그리고 JSON에 대해 깊이 있게 다루었습니다.

1. 데이터 분석을 위한 연산 (Operator)

• Truthy/Falsy 값: JavaScript에서는 if (3 + 4)와 같은 값도 truthy 또는 falsy로 판단합니다. C나 Java에서는 0이 아닌 모든 값이 참으로 인식됩니다.
  Truthiness examples: true, {}, [], 42, "0", "false", -3.14, new Date(), Infinity, -42, -Infinity, 12n, 3.14 Falsiness examples: false, null, undefined, 0, -0, 0n, NaN, ""
   
• 논리 OR (||) 연산자: 둘 중 하나라도 true이면 true를 반환하며, 첫 번째 truthy 값을 반환합니다 (참을 찾습니다).
   
• 논리 AND (&&) 연산자: 둘 중 하나라도 false이면 false를 반환하며, 첫 번째 falsy 값을 반환합니다 (거짓을 찾습니다. 만약 거짓을 찾지 못하면 마지막 값을 반환합니다).
   
• 기본값 설정 방법:
  || (OR) 연산자를 사용: var name = null || 'default string';
  Nullish coalescing operator (??): 좌항이 null 또는 undefined일 때 우항의 값을 반환합니다.
   
• 숫자 산술 연산 및 타입 변환:
  덧셈 (+): 숫자를 문자열로 변환하여 문자열 연결을 수행할 수 있습니다 ('3' + 3 결과 33). 
  곱셈 (*): 문자열을 숫자로 변환하여 연산을 수행합니다 ('3' * 3 결과 9).
  숫자와 문자열('a')의 덧셈은 문자열 연결 ('3a'), 곱셈은 NaN을 반환합니다.
   
• NaN과 Infinity 비교: isNaN()과 같은 전역 함수를 활용하여 비교해야 합니다.
   

2. Array Collections (배열 컬렉션)

• 배열은 객체: JavaScript에서 배열은 컬렉션으로, 객체의 일종입니다.
   
• 배열 초기화: new Array(), new Array(5) (비어있는 배열, 길이는 5.)
                      new Array(1, 2, 3) (요소 초기화)
   
• 데이터 구조 활용:
  스택 (Stack): 후입선출 (LIFO - Last In First Out) 구조로, pop()을 이용하여 뒤에서부터 자료를 수정할 때 사용합니다.
  큐 (Queue): 선입선출 (FIFO - First In First Out) 구조로, push()와 shift()를 이용합니다. 전송과 관련된 경우(버퍼)에 활용됩니다.
   
  • splice(): 배열 요소를 추가, 삭제, 교체하는 다목적 메서드입니다.
    splice(index): index부터 끝까지 모든 요소를 제거합니다.
    splice(index, deleteCount): index부터 deleteCount만큼 요소를 제거합니다.
    splice(index, 0): index 위치에 아무것도 제거하지 않고 삽입할 수 있습니다.
• 배열 순회 및 변환 메서드 (Loop over):
  forEach: 배열의 각 요소에 대해 함수를 실행합니다.
  for...of: 반복 가능한 객체 (배열 포함)를 순회합니다.
  find: 조건을 만족하는 첫 번째 요소를 반환합니다.
  filter: 조건을 만족하는 모든 요소를 포함하는 새 배열을 반환합니다.
  map: 배열의 각 요소에 함수를 적용하여 새로운 배열을 반환합니다. (배열 변환)
  join: 배열의 모든 요소를 연결하여 하나의 문자열로 만듭니다.
  reduce: 배열의 모든 요소를 단일 값으로 "축소"합니다 (예: 총합 계산).
   

3. Object 객체

• 속성 사용하기: object.property 또는 object['property'] (특수 문자가 포함된 속성명에 유용).
   
• delete: 객체 속성을 삭제합니다.
   
• Proto Type: JavaScript 객체는 프로토타입을 통해 속성과 메서드를 상속합니다. 모든 생성자는 객체를 가지며, 동일한 기능을 공유합니다.
   
   
• 생성자 함수: function Exam(kor, eng, math) { ... }와 같이 생성자를 정의하여 객체를 생성합니다. new 키워드를 사용하여 호출하면 this는 새로 생성될 객체를 가리킵니다.
   

4. Function Object (함수 객체)

• 함수는 객체: JavaScript에서 함수는 일급 객체입니다.
   
• 함수 재사용: 함수는 반복적으로 생성하기보다는 가능한 한 재사용하는 것이 바람직합니다.
   
• 매개변수 (Parameter)
  arguments 객체: 함수 내부에서 전달된 모든 인수에 접근할 수 있는 유사 배열 객체입니다.
  Rest Parameter (...rest): 남은 인자들을 배열로 묶어줍니다.
   
• 클로저 (Closure): 외부 함수의 변수에 접근할 수 있는 내부 함수를 의미합니다.
   
• 화살표 함수 (Arrow Function)
  일반 함수와 매개변수 처리에 차이가 있습니다.
  arguments 객체가 없습니다.
  this 바인딩이 없습니다 (렉시컬 스코프의 this를 따릅니다). 즉, 객체가 없습니다.
  생성자로 사용할 수 없습니다 (new 키워드 사용 불가).

5. JSON (JavaScript Object Notation)

• 자바스크립트의 기본형: Boolean, Number, String, Array, Object 등은 값이 존재하고 타입이 존재합니다.
   
• JSON의 역할: JavaScript의 모든 객체를 쉽게 표현할 수 있게 해줍니다.
   
• XML vs JSON: JSON은 XML (태그로 마크업하는 방식) 보다 가볍고 읽기 쉬운 데이터 교환 형식입니다.
   
• JSON 파싱: JSON.parse()를 사용하여 JSON 문자열을 JavaScript 객체로 변환합니다. 이때 JSON 문자열의 키는 반드시 큰따옴표로 감싸야 합니다.
   
• 객체 속성 정의: 키와 값이 동일할 때 간결하게 표현할 수 있습니다.
   
• 데이터 구조 및 Destructuring (구조 분해 할당):
  데이터 구조는 중첩을 낮춰서 사용하는 것이 좋습니다.
  객체 속성을 연산에 직접 사용하는 것보다 Destructuring을 통해 새로운 변수로 생성하는 것이 바람직합니다.
  ES6에서 지원하는 기능으로, 속성의 복잡도를 낮추어 사용할 수 있습니다.
   

멋쟁이사자들 프론트엔드 심화과정 5기 1일차 정리

1. 기본 용어 이해

• 프로그램 (Program)이란?
  컴퓨터가 특정 작업을 수행하도록 만드는 절차와 명령어의 집합입니다.
  
  
• 애플리케이션 (Application)이란?
  프로그램에 사용자 인터페이스(UI)가 추가되어, 특정 업무를 가진 '사용자'가 직접 상호작용할 수 있도록 만든 소프트웨어입니다.
  
  
• UI (User Interface)와 UX (User Experience)
  UI: 기술자/개발자 관점에서 사용자가 마주하는 시각적인 화면, 버튼, 레이아웃 등을 의미합니다.
  UX: 사용자 관점에서 애플리케이션을 사용하며 느끼는 모든 경험(편리함, 만족도, 불편함 등)을 의미합니다.
  
  
• 개발자 (Developer)란?
  단순히 코드를 짜는 프로그래머를 넘어, 사용자의 업무를 이해하고 해결하기 위한 응용 프로그램(애플리케이션)을 만드는 사람입니다. 

2. 웹 페이지의 종류와 변화

• 정적(Static) 웹 페이지란?
  미리 만들어진 HTML, CSS 파일이 그대로 사용자에게 전달되는 페이지입니다. 실행 중에는 내용이 바뀌지 않고, 서버는 단순히 파일을 전달하는 역할만 합니다.
  
  
• 동적(Dynamic) 웹 페이지란?
  사용자의 요청(Request)이 있을 때마다 서버가 데이터를 처리해 새로운 페이지를 생성해서 보여주는 방식입니다. 실행 중에 내용이 바뀔 수 있습니다.
• CSR (Client Side Rendering)이란?
  서버는 최소한의 HTML과 번들링된 JavaScript 파일만 보냅니다. 그러면 클라이언트(웹 브라우저)가 JavaScript를 실행해 동적으
  로 DOM을 만들고 화면을 그리는 방식입니다. 초기 로딩은 느릴 수 있지만, 초기 로딩이 끝나고 JavaScript 파일이 모두 준비되면 그 이후에는 빠릅니다. (SPA에서 사용)
  
  
• SSR (Server Side Rendering)이란?
  서버에서 미리 렌더링 가능한 페이지를 완성해 클라이언트에 보냅니다. **검색 엔진 최적화(SEO)**에 유리하고 초기 로딩 속도가 빠르다는 장점 때문에 과거의 기술이 아닌, Next.js를 통해 다시 주목받는 현재의 기술입니다.

3. 핵심 기술 스택과 프레임워크

• 리액트(React): UI를 만들기 위한 '라이브러리'입니다.
• 타입스크립트(TypeScript): JavaScript에 타입을 더해 안정성을 높인 언어입니다.
• Next.js: 리액트 기반의 풀스택 프레임워크입니다. SSR, 라우팅, API 등 기업형 프로젝트에 필요한 기능들을 쉽게 구현할 수 있게 해 프론트엔드 개발의 패러다임을 바꾸고 있습니다.
• Tailwind CSS: 미리 정의된 클래스를 조합하여 빠르고 일관성 있게 UI를 개발하는 CSS 프레임워크입니다.

4. 아키텍처와 프로그래밍 패러다임

• DOM (Document Object Model)이란?
  웹 브라우저가 HTML 태그들을 해석해서 만든 객체 모델입니다. JavaScript는 이 DOM API를 통해 HTML 요소를 제어(추가, 변경, 삭제)할 수 있습니다. (Fat Client: 서버 요청 없이 클라이언트 측에서 DOM을 조작해 화면을 바꾸면서 클라이언트의 역할이 커진 것을 의미)
  
  
• 컴포넌트화를 하는 이유
  UI를 독립적인 부품 단위로 만드는 것. 코드의 집중화, 재사용성 향상, 거대한 코드의 분리를 통해 유지보수를 쉽게 하기 위함입니다.
• MVC, Flux란?
  복잡한 애플리케이션의 코드를 역할에 따라 분리하는 설계 패턴(아키텍처)입니다.
  
  MVC: Model(데이터/로직), View(UI), Controller(중재자)로 나눕니다. (Angular, Vue에서 주로 사용)
  Flux: 단방향 데이터 흐름을 강조하는 패턴으로, 리액트와 함께 사용됩니다.
   리액트는 스파게티라는 표현은, 별도의 아키텍처 없이 사용하면 데이터 흐름이 복잡하게 얽힐 수 있다는 의미입니다.
  
  
• 리액트 프로젝트에 아키텍처를 더하는 이유?
  유지보수성을 높이기 위해서 리액트 프로젝트에 아키텍처를 더합니다. 사용자의 기능 요구사항인 업무 로직과 화면을 그리는 컴포넌트, 그리고 데이터(DB)를 각각 분리(계층 분리)하면 나중에 수정하거나 백엔드를 연결할 때 훨씬 수월해집니다.

5. 데이터베이스와 배포

• 데이터베이스 모델링이란?
  애플리케이션에서 다룰 데이터를 어떤 구조(테이블)로 저장할지 설계하는 과정입니다.
  
  
• On-premise (온프레미스)란?
  AWS, Vercel 같은 클라우드 서비스를 이용하지 않고, 회사나 개인의 자체 서버에 직접 시스템을 설치하고 운영하는 방식입니다.
  
  
• 배포 자동화 (CI/CD)
  Git에 코드를 push하는 순간, 테스트와 빌드, 배포가 자동으로 이루어지는 것을 말합니다. Git Action을 이용해 설정할 수 있습니다.
  
  CI (Continuous Integration): 지속적인 통합 (코드 변경분을 자동으로 통합하고 테스트)
  CD (Continuous Deployment): 지속적인 배포 (테스트 통과 시 자동으로 배포)