hee-ya07 님의 블로그

2. useReducer: 상태 관리 훅: useState보다 복잡한 상태 로직을 처리할 경우 유용: 주로 여러 하위 값들이 의존하는 상태를 관리 or 상태 업데이트 로직이 복잡할 경우 사용const [, ] = useReducer(, , );const [state, dispatcher ] = useReducer(reducer, initialState, init);구성- 반환 값은 useState와 동일하게 상태 값과 업데이트 함수-  state :: 현재 useReducer의 값- dispatcher :: state를 업데이트하는 함수, setState와 달리 인수로 정해진 action 값을 넘김(동작을 미리 정의 및 제한)- reducer :: useReducer의 기본 ..

1. useState: 함수형 컴포넌트 내부에서 상태를 정의 및 관리: useState로 지정은 내부 변수 (= 제어 컴포넌트로, 변경 시 리렌더링O)const [state ,setState] = useState(); // 초기값 미정의 시 undefined: 현 상태, 세터가 제공됨유의점- setState를 통해 값을 업데이트할 경우 비동기적 업데이트임 확인해야함- 리렌더링 시에 set~를 한번에 진행const App = () => { const [state, setState] = useState('hello') return ( {state} { setState('hi') console.log(state) // hello }} ..

1. Vite: Vue, React, Svelte 등을 지원하는 빌드 도구1.1 배경- 다른 번들링 도구들인 webpack, Rollup, Parcel의 경우,1) JS의 크기가 커지면서 병목 현상의 발생 가능성도 증가2) 느린 피드백(느린 반영)번들러 기반 설정의 흐름파일 편집 시, 전체 번들을 빌드  보여줌 -> 비효율적(파일 크기에 따른 속도의 선형적 저하를 초래) -> 이를 해결하고자 Vite가 나옴esbuild를 사용 → 종속성을 미리 번들로 묶음네이티브 ESM을 통해 소스코드 제공⇒ 네이티브 ESM에서 HMR을 수행 시, 편집된 요소의 주변만 교체 및 무효1.2 설치- 프로젝트 내 수동 설치npm install -D vite2. 파일 구성파일 설명 .eslintrc.cjs : 컴파일 설정 = ..

1. 기본적인 DOM과 WB의 Rendering 과정: Rander Tree = DOM Tree + CSSOM Tree1.1 첫 방문 -> WB의 Rendering 과정페이지 방문-> HTML 파일 로드WB의 렌더링 엔진 -> HTML 파싱 및 DOM 트리 생성(2)에서 CSS파일을 만나면 CSS 파일 로드 및 WB 렌더링 엔진을 통한 CSSOM 트리 생성WB는 DOM트리의 노드 순회 -> 사용자의 현재 페이지의 구성 노드만 방문(display:none 같은 안보이는 건 방문 X)방문한 노드에 대한 CSSOM 노드 탐색 및 CSS적용- layout( or reflow) : 각 노드가 화면 어느 좌표에 나타는지 계산하는 과정 -> 반드시 이후에 페인트를 함- painting : 레이아웃 단계를 거친 노드에..

보호되어 있는 글입니다.

1. 클래스 컴포넌트: v16.8 이전까지의 리액트 컴포넌트 구성 방식- 전체 코드더보기class Person { // 생성자 (Constructor) constructor(name, age) { this._name = name; // 내부적으로 사용하는 _name, _age this._age = age; } // Getter: name 속성의 값을 가져올 때 호출 get name() { return this._name; } // Setter: name 속성의 값을 설정할 때 호출 set name(newName) { if (newName.length > 0) { this._name = newName; } else { console.log("이름..

1. React 문법 : JSX: JSX (JavaScript XML, JavaScript Syntax eXtension): 마크업 언어와 로직을 따로 분리하지 않고 하나의 파일에 보이는 컴포넌트라는 느슨하게 연결된 유닛- Angular와 React더보기1. Angular의 경우 : 마크업 언어와 로직을 분리하여 개발2. React, Vue의 경우 : 컴포넌트라는 느슨하게 연결된 유닛으로 개발2-1. Vue: HTML + JS + CSS가 ".vue" 파일 내 존재 가능2-2. React : HTML or XML + JS + CSS가 ".jsx" 파일 내 존재 가능1.1 문법적 요소들1) .jsx는 무조건 하나의 요소로 반환되어야 함 -> 전체를 감싼 하나의 태그가 필요// Ex) 오늘의 할 일 빨래..

1. DOM 조작의 변화1.1 "직접" 조작 - Javascript: js를 통해 DOM을 변경하여 view에 영향: 각 WB에 맞는 코드를 작성해야 했음(각 WB의 JS엔진 구성에 따라 문법 수행이 다르기 때문)단점1) Hard to Manage : DOM 요소를 매번 선택 및 조작 -> 개발자의 어려움2) Repetitive : DOM 요소의 상태가 바뀔 때마다 이뤄지는 반복적인 Rendering -> 상호작용이 많을 경우 보기 불편1.2 "간편" 조작 - JQuery: JQuery는 Javascript 라이브러리로 이를 통해 DOM조작을 간편하게 할 수 있음JQuery를 통해 DOM 요소 선택, 조회 및 수정 가능But, 상태 변화에 따른 반복적인 Rendering은 아직도 단점으로 존재: 추가적으..

1. 문자열1.1 문자열 포멧팅(String Literal)1) 백틱 사용const user = { name: 'Hee', age: 10, favor: 'Game' }console.log(`제 이름은 ${user.name}이고, 나이는 ${user.age}이며, ${user.favor}를 좋아합니다.`) 2) 정규식... 나중에 돌아와서 하는걸로...자료구조1. Map: 유일 Key 및 Key-Value 집합: 자료구조를 위해 사용const initialized = new Map([ [1, 'first'], [2, 'second'], [3, 'third'], ['Aaron', { phone: '010-000-0000', address: 'Earth' }], ['Baron', { phone: '0..

1. Parameter 관련1.1 Rest Parameter: 함수 파라미터 펼치기function foo(first, ...rest) { // 1, 2, 3, 4 = ...rest console.log(rest) // [ 2, 3, 4 ] = rest console.log(...rest) // 2, 3, 4 = ...rest}foo(1, 2, 3, 4) // 2, 3, 4 = ...rest1.2 함수 기본 파라미터값(Default Parameters)function create({ name = 'Unnamed', age = 1, favor = undefined }) { return { name, age, favor ..