Quartz sync: Jul 2, 2025, 9:43 PM

Author: codeyoma

content/Computer Science/1 Foundations & Theory/Data Structures/Fenwick tree (index tree).md

@@ -0,0 +1,40 @@
+---
+description:
+aliases:
+created: 2025-07-02
+modified: 2025-07-02
+---
+
+- 마지막 비트 크기로 현재 인덱스의 '저장 개수' 계산
+	- `i & -i`
+- ```cpp
+	int tree[sum_size];
+	
+	int sum(int i){
+		int res = 0;
+		while (i > 0){
+			res += tree[i];
+			i -= (i & -i);
+		}
+		return res;
+	}
+	
+	void update(int i, int dif){
+		// update값이 dif
+		// 기존 값과의 dif를 점진적 비트 크기로 이동하면서 업데이트
+		while (i <= sum_size){
+			tree[i] += dif;
+			i += (i & -i);
+		}
+	}
+	
+	int getSection(int start, int end){
+		return sum(end) - sum(start - 1);
+	}
+- [[Prefix Sum Array|psum]]과의 차이는?
+	- psum은 일차원 배열
+	- fenwick tree는 배열이지만 가상적 트리 구조
+	- 빈번한 업데이트에 따른 구간 합
+		- 펜윅트리, 세그먼트 트리가 유리
+	- 업데이트 없고, 구간합만 필요
+		- psum만 사용해도 충분

content/Computer Science/1 Foundations & Theory/Game Theory/Nim.md

@@ -0,0 +1,16 @@
+---
+description:
+aliases:
+created: 2025-07-02
+modified: 2025-07-02
+---
+
+# winning formula
+- 가지 수를 이진수로 XOR 연산
+	- 결과가 0이면 지는 상태
+	- 0이 아니면 이기는 상태
+- 예
+	- 상자 A에 3개, B에 5개 있으면:
+	    - $3 \oplus 5 = 6$ -> 이기는 상태
+	- 상자 A에 4개, B에 4개:
+	    - $4 \oplus 4 = 0$ -> 지는 상태

content/Computer Science/5 Software Development/Programming Language/JavaScript/Module.md

@@ -2,19 +2,36 @@
 description:
 aliases:
 created: 2025-06-09
-modified: 2025-06-09
+modified: 2025-07-01
 ---
 
-- 모든 버전의 노드에서 지원하는 일반적인 모듈 패턴
-	- ```js
-		const print() => log();
-		const log() => console.log();
-		
-		module.exports = {pritn, log};
-		
-		//---
-		
-		const {log, print} = require('./source-location')
-	- 동적 임포트
+- CJS
+	- 모듈 시스템이 필요해짐에 따라 표준이 없었기에 서버 사이드에서 최초 적용
+	- 모든 버전의 Node.Js에서 지원하는 일반적인 모듈 패턴
+		- `require`
+		- `module.exports`
+		- ```js
+			const print() => log();
+			const log() => console.log();
+			
+			module.exports = {pritn, log};
+			
+			//---
+			
+			const {log, print} = require('./source-location')
 	- 트리 쉐이킹에 어려움
-- `import`
+	- npm 패키지 시스템 발전 영향
+- ESM
+	- 정적 구조
+		- 최적화 가능
+	- 키워드
+		- `import`
+		- `export`
+			- named export
+		- `export default`
+			- default export
+	- 장점
+		- 트리 쉐이킹
+		- 동적 임포트
+		- 표준화
+		- 모듈 스코핑

content/Computer Science/7 Applications Development/Frontend/React/attachments/image-react lift cycle method.png

@@ -1,2 +1,2 @@
-- ref를 단순하게 자식에게 전달하면 `{ current : null}`로 전달됨
+- [[useRef|ref]]를 단순하게 자식에게 전달하면 `{ current : null}`로 전달됨
 - 접근해야하는 실제 dom 요소를 받으려면 `forwardRef`로 자식 컴포넌트 래핑

content/Computer Science/7 Applications Development/Frontend/React/forwardRef.md

@@ -0,0 +1,8 @@
+---
+description:
+aliases:
+created: 2025-07-01
+modified: 2025-07-01
+---
+
+- ![[image-react lift cycle method.png|800]]

content/Computer Science/7 Applications Development/Frontend/React/react life cycle method.md

@@ -0,0 +1,4 @@
+- 직접 DOM 접근
+- 리액트 생명주기 외의 변수를 관리하고 싶을 때
+	- 렌더링에 영향을 미치지 않는 변수가 필요할 때
+	- 스크롤 위치 등

content/Computer Science/7 Applications Development/Frontend/React/useRef.md

@@ -1,10 +1,12 @@
 ---
-created: 2025/4/11 15:07:05
-modified: 2025/4/13 16:03:26
+description:
+created: 2025-05-18
+modified: 2025-07-01
 aliases:
   - 오류경계
   - 오류 경계
 ---
+
 - ```js
 	import React, { Component } from "react";
 
@@ -32,4 +34,9 @@ aliases:
 - 오류 발생하면 `state.error` 설정
 - 오류가 있으면 `fallback 컴포넌트` 렌더링
 	- 이 컴포넌트의 프로퍼티로 오류 전달
-- 다른 컴포넌트에 합성해서, 트리에서 발생하는 오류를 포획하고  `fallback 컴포넌트` 렌더링
+- 다른 컴포넌트에 합성해서, 트리에서 발생하는 오류를 포획하고  `fallback 컴포넌트` 렌더링
+- with [Sentry.io](https://sentry.io/)
+	- ```js
+		if(process.env.NODE_ENV === 'production' ) {
+			Sentry.captureException(error, { extra: info });
+		}

content/Computer Science/7 Applications Development/Frontend/Terms/ErrorBoundary.md

@@ -1,23 +1,34 @@
 ---
-description:
+description: 
 aliases:
+  - 이벤트 버블링
+  - 이벤트 캡처링
 created: 2025-04-14
-modified: 2025-06-23
+modified: 2025-07-01
 ---
 
 - 이벤트가 부모 요소로 전달되는 현상
 - 이벤트 전파 3 단계 (이벤트 전파는 자동으로 실행됨)
 	- Capturing
+		- 이벤트가 발생한 하위 요소로 내려가는 과정
 		- `element.addEventListener('click', handler, true);`
 	- Target
 		- 해당 이벤트 리스너 실행, 캡처링 중단
 	- Bubbling
+		- 상위 요소로 이벤트가 전파되는 과정
 		- `element.addEventListener('click', handler, false 또는 생략);`
+		- 브라우저의 기본 이벤트 처리방법
+			- 최상위 요소까지 전파됨(body, html까지)
 - 장점
 	- 상위 컴포넌트에서 하위 이벤트 감지 - 이벤트 위임
 		- 부모 하나에만 리스너 달고, 자식의 이벤트 처리 가능
 		- 자식마다 이벤트 안달아도 된다
-- 버블링 막기
-	- 해당 이벤트가 부모로 전파되는 것을 막음
+- 이벤트 전파 막기
 	- `e.stopPropagation()`
-- portal에서 이벤트 버블링른 DOM트리가 아닌 리액트 트리를 따라간다
+	- 해당 이벤트가 전파되는 것을 막음
+		- 버블링, 캡처링 둘다 가능
+- 기본 동작 방지
+	- `e.preventDefault()`
+	- 해당 이벤트에 브라우저가 수행하는 기본 동작을 막음
+		- `form -> submit`은 브라우저가 refresh됨
+- portal에서 이벤트 버블링은 DOM트리가 아닌 리액트 트리를 따라간다

content/Computer Science/7 Applications Development/Frontend/Terms/Event bubbling, capturing.md

@@ -1,10 +1,12 @@
 ---
-description:
+description: 
 aliases:
+  - 이벤트 위임
 created: 2025-06-23
 modified: 2025-06-23
 ---
-
+- 이벤트 리스너를 각각의 자식들에게 반복적으로 설정하는 것이 아닌, 한 곳(부모)에서 처리
+	- [[Event bubbling, capturing|이벤트 버블링]]을 활용하여
 - ```js
 	const liEls = document.querySelectorAll('li')
 	liEls.forEach(liEl => {