챔's coding 챔's coding

Virtual DOM : DOM을 추상화한 가상의 객체 기존의 DOM의 문제점 ? ⇒ 비효율적인 DOM 조작에 의한 랜더링 ⇒ SPA(Single Page Application)의 특징으로 DOM 복잡도 증가에 따른 최적화 및 유지 보수가 더 어려워지는 문제 ⇒ DOM이 변경될 때마다 브라우저는 CSS를 다시 계산한다는 문제점 리액트의 Virtual DOM ⇒ 변경 사항을 DOM에 직접 수정하는 게 아니라 중간 단계로 Virtual DOM을 수정하고 Virtual DOM을 통해서 DOM을 수정하게 한다. Virtual DOM은 생성되기 전, 이전 상태 값과 수정사항을 비교하여 달라진 부분만 DOM에게 한번에 전달하여 딱 한 번만 랜더링을 진행한다. → 직접 DOM에 접근하는 것을 막아주는 역할 DOM이 ..

오늘은 리액트 메인 페이지 설계를 마무리하고 세부 페이지 설계 작업을 시작할 것이다. 회원가입 페이지(아이디/비밀번호/비밀번호확인/이름/이메일/휴대폰/주소/성별/생년월일/추가입력 사항/이용약관 동의) 등 다양한 기능을 상세하게 설계할 예정이다. 전반적으로 리액트 훅의 대표적인 특징인 useState와 useEffect에 대한 이론을 공부할 것이며, useState와 useEffect를 사용하여 회원가입 페이지에서 아이디, 비밀번호, 이메일을 입력받아 상태값이 변할 때 버튼 색상을 넣어주도록 할 예정이다.

오늘은 리액트가 어떻게 동작하는지, 주로 어떤 구조로 코드가 이루어지는지 전반적인 리액트 프로그램 구조를 살펴볼 예정이다. 그리고 주 학습내용은 기존의 DOM과 리액트의 Virtual DOM의 차이점과 각 특징을 공부해볼 것이다. 그리고 리액트의 컴포넌트의 정의와 특징을 알아보며 '컴포넌트화'가 정확히 어떤 걸 의미하는지 학습할 예정이다.

[1. HTML의 DOM이란?] DOM(Documet Object Model) == 문서 객체 모델 → XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스 → 문서 내의 모든 요소를 정의, 각각의 요소에 접근하는 방법 제공 → DOM의 계층 구조 → DOM == HTML문서를 브라우저가 이해할 수 있도록 만든 트리 자료구조 HTML의 DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법을 의미한다. 모든 HTML 요소는 HTML DOM을 통해 접근이 가능하다. DOM은 뷰 포트에 무엇은 랜더링할지 결정하기 위해 사용된다. DOM은 페이지의 콘텐츠 및 구조, 그리고 스타일이 js 프로그램에 의해 수정되기 위해 사용된다. 항상 유효한 HTML 형식이다. js에 수정될 수 있는 동적 모델이어야 한다..

오늘은 vscode를 사용하여 웹사이트의 전반적인 메인페이지를 만들 계획이다. 주로 html구조와 css style을 적용하는 작업을 할 것이며, 메인 배너와 로고 이미지, 그리고 로그인, 회원가입, 고객센터 아이콘과 로고 head 등에 대해 설계할 것이다. 페이지를 설계하며 태그의 이론적인 구조를 구체적으로 배울 예정이다. [메인 페이지] - 광고 배너 - 메인 로고 - 로그인/회원가입/고객센터 아이콘 - 상단 메뉴바

[Basic Mixer Terminology] - Input이란? Mixer나 오디오 인터페이스와 같은 오디오 하드웨어 장비로 들어가는 오디오 시그널의 이동 경로 - Output이란? Mixer나 오디오 인터페이스와 같은 오디오 하드웨어 장비에서 나오는 오디오 시그널의 이동 경로 - Insert란? 개별적인 인풋이나 트랙으로부터 아웃풋으로 전달되는 오디오 시그널의 이동 경로 사이에 플러그-인이나 하드웨어 타입으로 삽입되어 이펙터를 사용할 수 있는 시그널 패치 포인트 => Plug-In Insert / Hardware Insert - Sends & Returns > Send(Aux) : 다른 수신장비로 전송되는 하나 이상의 오디오 트랙에 대한 Mix Output을 위해 사용되는 용어 *Pre-Fader :..

*스칼라 : 1, 2, 3.14와 같이 크기 값을 가지는 양 *벡터 : 순서가 있는 스칼라 값의 배열 의미 / 열벡터 표기법 사용 *벡터의 norm : 벡터의 크기 [벡터 x의 p차 norm] p = 1 -> Manhatten distance(차원별 거리의 합)이 되고 l1 norm이라고 한다. p = 2 -> 유클리디안 norm(벡터의 시작점에서 끝점을 화살표로 표현할 때 화살표의 길이) / l2 norm *벡터 / 유클리드 norm값 = 길이가 1인 벡터(단위벡터;unit vector) *벡터의 정규화 : 길이 1인 벡터로 만드는 일 *Hadamard곱 : 가장 간단하면서도 벡터 연산 여러 영역에서 유용한 곱 *dot product(스칼라곱) *cross product(벡터곱) 크기와 방향을 갖는 새..

[Solvable problems] Solvable problems는 세 가지 유형으로 구분할 수 있다. 1) Provably intractable (infeasible) problems : efficient한 알고리즘이 존재하지 않는 문제들(polynomial time 알고리즘에 존재하지 않는다고 증명된 문제들) 2) Probably intractable problems : polynomial time 알고리즘에 존재하지 않는다고 추측할 수 있는 문제들 => NP 3) Tractable problems (feasible problems) : polynomial time 안에 해결할 수 있는 문제들 => P - 1) Provably intractable (infeasible) problems : poly..