gongboo

배경 이미지랑 영상을 겹쳐둔다. 이미지가 밑으로 effect창을 킨다. green screen keyer를 끌어다가 영상에다가 넣는다 https://support.apple.com/ko-kr/guide/final-cut-pro/ver40b003bc/mac

  https://ai.google.dev/pricing 무료 기준 1.5 flash 15 RPM (requests per minute) 1 million TPM (tokens per minute) 1,500 RPD (requests per day) 1.5 pro 2 RPM (requests per minute) 32,000 TPM (tokens per minute) 50 RPD (requests per day) 1.0 pro 15 RPM (requests per minute) 32,000 TPM (tokens per minute) 1,500 RPD (requests per day)

https://www.deepl.com/ko/pro-api 괜찮아보이는데 DeepL API Free 특징: 모든 기능 사용 가능 DeepL REST API에 액세스 한 달에 500,000자까지 번역 용어집 1,000개(일부 언어만 해당) 언제든 Pro로 업데이트 가능

 클립 선택해서 cmd+R 상단에 나오는 바 끝을 눌러 드래그 해서 길이를 조절하면 그것에 맞춰져서 속도가 자동 조절

 hierarchical: 하이얼아키컬 이라고 발음 https://skilled.dev/course/tree-traversal-in-order-pre-order-post-order

 Cloudflare Pages와 Cloudflare Workers는 Cloudflare가 제공하는 서비스로, 모두 개발자들이 웹 콘텐츠를 효율적으로 배포하고 관리할 수 있도록 설계되었습니다. 그러나 이 두 서비스는 각기 다른 용도와 기능을 가지고 있습니다. 여기 각 서비스의 주요 차이점을 설명하겠습니다. ### Cloudflare Pages Cloudflare Pages는 주로 정적 웹사이트의 배포에 초점을 맞춘 서비스입니다. 정적 사이트 생성기(예: Hugo, Jekyll)로 만든 웹사이트 또는 단순 HTML, CSS, JavaScript 파일을 사용하는 사이트를 쉽게 배포하고 관리할 수 있습니다. - **목적**: 정적 웹사이트 호스팅과 배포. - **기능**:   - Git 저장소(GitHub, GitLab, Bitbucket)와 직접 통합하여 자동으로 웹사이트를 빌드하고 배포합니다.   - 무료 SSL 인증서를 자동으로 제공하여 HTTPS를 통한 보안 연결을 지원합니다.   - 전 세계 Cloudflare의 CDN을 통해 빠르게 콘텐츠를 제공합니다.   - 배포할 때마다 새 URL을 생성하여 미리보기와 테스트가 용이합니다. ### Cloudflare Workers Cloudflare Workers는 서버리스 함수를 글로벌 네트워크에서 실행할 수 있는 서비스로, 동적 콘텐츠 생성, API 요청 처리, 웹 요청 수정 등에 사용됩니다. - **목적**: 서버리스 컴퓨팅 및 웹 요청 처리. - **기능**:   - 사용자 정의 코드를 Cloudflare의 글로벌 네트워크에서 실행하여, 어느 위치에서나 낮은 지연시간으로 응답할 수 있습니다.   - JavaScript, Rust, C, C++ 등 여러 언어를 지원합니다.   - 강력한 API와 통합 기능을 제공하여, 외부 API와의 상호작용이나 웹사이트의 요청/응답을 동적으로 조작할 수 있습니다.   - 다양한 Cloudflare의 ...

 music > setting > files > import settings > import using wavfiles 로 설정한 후 music 에서 음원 선택 후 file > convert > create wav version  변환 파일 finder의 music > media  쪽에서 찾으면 됨.

Voice Memos app > under All Recordings section > right click the file > Services > Open with Finder.

 JavaScript에서 `sort` 메서드는 배열을 정렬하는 데 사용됩니다. `sort` 메서드는 기본적으로 요소들을 문자열로 변환한 후 유니코드 값에 따라 정렬합니다. 이를 커스터마이즈하려면 비교 함수를 전달할 수 있습니다. ### 기본 사용법 ```javascript let numbers = [4, 2, 5, 1, 3]; numbers.sort(); // [1, 2, 3, 4, 5] ``` ### 비교 함수 사용 숫자나 사용자 정의 기준으로 정렬하려면 비교 함수를 전달합니다. #### 숫자 정렬 ```javascript let numbers = [4, 2, 5, 1, 3]; numbers.sort((a, b) => a - b); // 오름차순 [1, 2, 3, 4, 5] numbers.sort((a, b) => b - a); // 내림차순 [5, 4, 3, 2, 1] ``` #### 문자열 길이 기준 정렬 ```javascript let strings = ["short", "medium", "longest", "tiny"]; strings.sort((a, b) => a.length - b.length); // ["tiny", "short", "medium", "longest"] ``` ### 정렬 안정성 ES2019 이후, JavaScript의 `sort` 메서드는 안정적인 정렬을 보장합니다. 즉, 같은 값을 가진 요소들의 순서는 정렬 후에도 유지됩니다. ### 주의 사항 - `sort` 메서드는 원본 배열을 직접 변경합니다. - 비교 함수가 없으면 기본적으로 문자열 유니코드 순서로 정렬됩니다. 이러한 기본과 비교 함수를 활용하여 다양한 방식으로 배열을 정렬할 수 있습니다.

JavaScript의 `Object`와 `Map`은 둘 다 키-값 쌍을 저장하는 자료구조이지만, 몇 가지 중요한 차이점이 있습니다. ### Object - **키 타입**: 문자열 또는 심볼만 키로 사용할 수 있습니다. - **순서**: 키의 순서는 삽입 순서를 보장하지 않습니다. - **성능**: 주로 간단한 구조의 데이터를 저장할 때 사용됩니다. - **기본 메서드**: `hasOwnProperty`와 같은 기본 메서드를 가지고 있습니다. ### Map - **키 타입**: 모든 값을 키로 사용할 수 있습니다 (객체 포함). - **순서**: 삽입된 순서를 보장합니다. - **성능**: 대량의 데이터 및 빈번한 삽입/삭제에 더 최적화되어 있습니다. - **메서드**: `size`, `set`, `get`, `delete`, `has` 등 다양한 메서드를 제공합니다. ### 예제 #### Object ```javascript let obj = {}; obj['key'] = 'value'; console.log(obj['key']); // "value" ``` #### Map ```javascript let map = new Map(); map.set('key', 'value'); console.log(map.get('key')); // "value" ``` ### 요약 - `Object`는 문자열/심볼 키, 삽입 순서 비보장, 간단한 데이터 저장에 적합. - `Map`은 모든 키 타입, 삽입 순서 보장, 대량 데이터/빈번한 삽입/삭제에 적합.  ### `Map` 메서드 1. **`set`**: 키-값 쌍을 추가하거나 업데이트합니다.    ```javascript    let map = new Map();    map.set('key1', 'value1');    ``` 2. **`get`**: 키에 해당하는 값...

 컴퓨터를 켤 때 나는 한 번의 비프음은 일반적으로 "POST"라고 불리는 전원 켜기 자체 진단 과정이 성공적으로 완료되었음을 나타냅니다. POST는 Power-On Self-Test의 약자로, 컴퓨터의 기본 하드웨어 요소들이 제대로 작동하는지 확인하는 절차입니다. 비프음은 컴퓨터의 메인보드에서 내장된 스피커를 통해 발생하며, 이는 CPU, 메모리, 비디오 카드 등 주요 부품들이 정상적으로 작동하고 있다는 신호입니다. 따라서 한 번의 비프음은 좋은 징조로, 시스템이 정상적으로 시작되고 있다는 것을 의미합니다. 원래 비프음이 나지 않다가 갑자기 나기 시작했다면 몇 가지 가능성을 고려해 볼 수 있습니다: 1. **바이오스 설정 변경**: 최근에 바이오스 설정을 변경했다면, 비프음 설정이 활성화되었을 수 있습니다. 바이오스에 접근하여 비프음과 관련된 설정을 확인해 보세요. 2. **하드웨어 추가 또는 변경**: 새로운 하드웨어를 추가하거나 기존 하드웨어를 변경한 경우, 시스템이 새로운 구성을 인식하고 그에 따라 비프음을 내는 것일 수 있습니다. 3. **하드웨어 문제**: 비프음이 예고 없이 갑자기 시작된 경우, 이는 때때로 하드웨어 문제를 알리는 신호일 수 있습니다. 특히 비프음이 한 번 이상 반복되거나 다른 패턴을 보이는 경우, 문제가 있는 하드웨어 구성 요소를 진단하는 데 도움이 될 수 있습니다. 4. **케이블 접속 문제**: 내부 케이블이 느슨해지거나 접촉이 제대로 되지 않을 경우, 비프음이 발생할 수 있습니다. 컴퓨터 내부를 점검하여 모든 케이블이 제대로 연결되어 있는지 확인하세요. 위의 가능성을 확인해 보시고, 문제가 지속된다면 추가적인 진단을 위해 전문가의 도움을 받는 것도 고려해 보세요. CMOS 배터리를 교체한 후 비프음이 시작되었다면, 몇 가지 원인이 있을 수 있습니다: 1. **바이오스 설정 초기화**: 배터리를 교체하면 바이오스 설정이 초기화될 수 있습니다. 이 경우, 기본 설정이 복원되면서 비프음 설정이 활성화되었을 수 있...

 여기는 bandwidth가 무료래서 옮겼다. 분기 그냥 메인이고 (나중에 배포 분기를 따로 만들어야겠다.) 빌드 명령 npm run build 로 안되서 왜인가 했는데 이전에 Netlify 로 배포하면서 내가 명령어 설정을 바꿨나 기억이 잘 안난다. <img alt="" data-original-height="432" data-original-width="958" height="144" src="https://blogger.googleusercontent.com/img/a/AVvXsEhE05eKnC4FKB5F0bIeiOxFE8rNJ54HILD8S-ZOcuAQrZIMiJoAQLb0cKzUDVa6mhGWtuXK_wyBKdRS3YacE-XYXJeFdXHzML0NRUVS2n6gbF_B0MFfj2MuxZoKIn5KYW87TfkOcBZ79gHqTWhhYg4MvYyyCFg6s4NKF0Hty5vKKbAXliIox--PBWoesn8Y" width="320" /> 배포도 쉽게 되고 훨씬 좋은 듯 cloudflare pages 설명 https://pages.cloudflare.com/

 final cut pro 의 실시간 렌더링 기능 때문에 용량이 많이 차지하는 문제가 생긴다. movies(동영상)> fcpbundle 확장자의 파일로 들어가서(show package content)> render files > high quality media 안의 파일들을 삭제하면된다. 실시간 렌더링 기능 자체를 끌 수도 있고 final cut pro 자체에서도 삭제가 가능한듯 아래 내용 참고 --- Final Cut Pro에서 실시간 렌더링 기능은 프로젝트 작업 중 실시간으로 변화하는 편집 내용을 렌더링하여 시각적으로 확인할 수 있도록 도와줍니다. 그러나 이 기능은 배경 렌더링과 연계되어 디스크 공간을 많이 사용할 수 있습니다. 이 기능을 끄려면 다음 단계를 따라 하시면 됩니다: ### 배경 렌더링 끄기 1. **Final Cut Pro 열기**: 프로그램을 열고 프로젝트를 로드합니다. 2. **Preferences 접근**: 상단 메뉴에서 `Final Cut Pro` 메뉴를 선택한 후 `Preferences` (단축키: `Command + ,`)를 클릭합니다. 3. **Playback 탭 선택**: Preferences 창에서 `Playback` 탭을 선택합니다. 4. **Background Render 비활성화**:     - `Background Render` 옵션의 체크박스를 해제합니다. 이 설정을 비활성화하면 Final Cut Pro가 사용자가 명시적으로 요청할 때만 렌더링을 수행하게 됩니다. ### 추가적인 디스크 공간 관리 - **렌더 파일 삭제**: 기존에 생성된 렌더 파일들이 많이 쌓여 있다면, 이 파일들을 삭제하여 공간을 확보할 수 있습니다. `File` > `Delete Generated Library Files` 메뉴를 통해 렌더 파일, 프록시 파일, 최적화된 미디어 등을 선택적으로 삭제할 수 있습니다.    - **프록시 미디어 사용**: 고해상도 미디어의 렌더링으로 ...

netlify 100gb 트래픽 제한인데 디도스 받으면 자동 정지 이런 기능은 없어서 요금 폭탄 나올 수 있다고 해서  잠시 내릴까 고민, 옛날 꺼는 싹 지움 진짜 조금이지만 접속한 사람이 있어서 고민. 어떻게 온거지  

https://support.apple.com/ko-kr/guide/final-cut-pro/welcome/mac 흔들림 보정 https://support.apple.com/ko-kr/guide/final-cut-pro/verbacf92b/mac

  https://reactnative.dev/docs/environment-setup?guide=native&platform=android cli 설치하는 거 권장 안하고 npx로 하는 걸 권장 npx react-native@latest init AwesomeProject 다른거 다 있어서 이걸로 프로젝트 바로 생성

 https://youtu.be/J8-91kpT4wU?si=G2FR0CNx6wn7QRtG

 "JPG"와 "JPEG" 사이에 기술적인 차이는 없습니다. 두 용어는 모두 같은 이미지 파일 포맷을 가리키며, "JPEG"는 "Joint Photographic Experts Group"이라는 그룹의 이름에서 유래했습니다. 이 그룹은 JPEG 이미지 압축 표준을 개발했습니다. "JPEG"는 이 파일 포맷의 공식 이름이지만, 초기 윈도우 운영 체제에서는 파일 확장자를 3글자로 제한했기 때문에 "JPG"가 널리 사용되기 시작했습니다. 따라서, 대부분의 사용자와 운영 체제는 ".jpg"를 주로 사용하지만, 기술적으로 ".jpeg"도 정확히 같은 방식으로 처리됩니다. 결론적으로, ".jpg"와 ".jpeg"는 동일한 이미지 형식을 나타내며 사용할 때 특별히 선호되는 형식은 없습니다. 파일 확장자는 주로 사용하는 시스템이나 소프트웨어의 관습에 따라 결정될 수 있습니다. 파일의 확장자를 ".jpeg"에서 ".jpg"로 변경해도 파일 자체에 영향을 주지 않습니다. 확장자는 파일이 어떤 형식으로 저장되었는지를 시스템에 알려주는 역할을 하지만, ".jpeg"와 ".jpg"는 동일한 이미지 형식을 가리키므로 어느 것을 사용해도 문제가 없습니다. 파일 확장자를 변경하는 것은 일반적으로 파일 이름을 직접 수정하여 할 수 있습니다. 다만, 파일을 변경하기 전에는 해당 파일 형식을 시스템이나 사용 중인 애플리케이션이 지원하는지 확인하는 것이 좋습니다. 예를 들어, 어떤 소프트웨어는 ".jpeg" 확장자만 인식할 수 있고, 다른 소프트웨어는 ".jpg"를 선호할 수도 있습니다. 그러나 대부분의 현대 소프트웨어는 두 확장자를 모두 지원합니다.

 https://youtu.be/TGVut1z5IZ8?si=XA9g6nqqJJb6Sz8h

 맥북을 사용중이라면 도커 앱 켜놔야 함. 그냥 켜놓기만 하면 됨. <img alt="" data-original-height="186" data-original-width="150" height="240" src="https://blogger.googleusercontent.com/img/a/AVvXsEiVoLxL3HUG6LwFrLJnAft3LZWTxyaGkKwLwXMW9RMl2A6tvkp8cTx7T7NW7SzOIOcenDzcqeiQruPQHThCIx2hq92xFY-41Yraiy628ZwFdSi3z3SRcsBV08BbnJn6Jd7KQCaz9uwcEoSIumnkVyTJYePNGeTLPAhslnMjB6P_EbIMaCF1XmunDJhDEn4Z" width="194" /> https://stackoverflow.com/questions/46971182/on-building-docker-image-level-error-msg-cant-close-tar-writer-io-read-write

 JavaScript에서 랜덤 숫자를 생성하는 기본 방법은 `Math.random()` 함수를 사용하는 것입니다. 이 함수는 0 이상 1 미만의 부동소수점 의사난수를 반환합니다. 다양한 범위의 랜덤 숫자를 생성하려면, 반환된 값을 조정해야 합니다. ### 기본 사용법: ```javascript const randomNumber = Math.random(); console.log(randomNumber); // 예: 0.123456789 ``` ### 지정된 범위 내에서 랜덤 정수 생성하기: 범위를 지정하여 랜덤 정수를 생성하려면, `Math.random()` 결과를 조정하고 `Math.floor()`를 사용하여 소수점 아래를 버림 처리해야 합니다. #### 예시 1: 0 이상 10 미만의 랜덤 정수 생성 ```javascript const randomInt = Math.floor(Math.random() * 10); console.log(randomInt); // 0에서 9 사이의 정수 ``` #### 예시 2: min 이상 max 미만의 랜덤 정수 생성 ```javascript function getRandomInt(min, max) {   return Math.floor(Math.random() * (max - min)) + min; } console.log(getRandomInt(1, 10)); // 1에서 9 사이의 정수 ``` #### 예시 3: min 이상 max 이하의 랜덤 정수 생성 ```javascript function getRandomIntInclusive(min, max) {   min = Math.ceil(min);   max = Math.floor(max);   return Math.floor(Math.random() * (max - min + 1)) + min; } console.log(getRandomIntInclusive(1, 10)); // 1에서 10 사이의 정수 ``` 이 함수들은 ...

 React에서 `onSubmit` 이벤트가 예상치 않게 작동하는 경우는 여러 가지가 있을 수 있습니다. 코드를 보면, `onSubmit` 핸들러는 `form` 태그에 바인딩되어 있어서, "Submit" 버튼을 클릭하면 `makeCrossWord` 함수가 호출되어야 합니다. 하지만, 어떤 상황에서는 사용자가 "Submit" 버튼을 클릭하지 않았음에도 불구하고 이 함수가 호출되는 것처럼 보일 수 있는데, 그 원인 중 일부를 살펴보겠습니다: 1. **버튼의 기본 타입**: HTML에서 `<button>` 태그의 기본 `type`은 `submit`입니다. 이는 `<button>`이 `form` 내에 있을 때, 클릭되면 `form`의 `onSubmit` 이벤트를 발생시킨다는 것을 의미합니다. 코드 내에 "목록 보이기" 옆에 있는 추가 버튼(`<button onClick={...}>+</button>`)에 `type="button"`을 명시적으로 추가하지 않으면, 이 버튼이 클릭될 때도 `form`이 제출될 수 있습니다. 이를 해결하기 위해, 해당 버튼에 `type="button"`을 추가해 보세요:    ```jsx    <button      type="button"      onClick={() => {        setwordLst([...wordlst, ""]);      }}    >      +    </button>    ``` 2. **이벤트 버블링**: 때때로, 버튼 클릭 이벤트가 상위 DOM 요소로 전파되어 `form`의 `onSubmit`을 실수로 트리거할 수 있습니다. 그러나 이 사례에서는 `e.preventDefault()`가 `onSub...

# 객체를 깊은 복사  JavaScript에서 객체의 깊은 복사 (deep copy)를 수행하는 방법은 여러 가지가 있지만, 가장 간단하고 자주 사용되는 방법 중 하나는 `JSON.parse()`와 `JSON.stringify()`를 조합하는 것입니다. 이 방법은 객체를 JSON 문자열로 변환한 다음, 이 문자열을 다시 객체로 파싱하여 깊은 복사본을 생성합니다. 다음은 이 방법을 사용한 예시입니다: ```javascript const original = {   name: 'John',   age: 30,   details: {     hobbies: ['reading', 'games'],     location: 'New York'   } }; const deepCopy = JSON.parse(JSON.stringify(original)); // 이제 deepCopy는 original의 깊은 복사본입니다. // original과 완전히 분리되어 있으며, 구조는 같지만 서로 다른 메모리를 차지합니다. ``` 그러나 이 방법에는 몇 가지 한계가 있습니다: - 메서드(함수)를 포함한 객체를 깊은 복사할 때는 메서드가 복사되지 않습니다. - `Date` 객체, `RegExp` 객체 같은 특수 객체들이나 `undefined`, `Function` 같은 값들은 적절히 복사되지 않을 수 있습니다. - 순환 참조가 있는 객체를 이 방법으로 복사하려고 하면 오류가 발생합니다. 만약 이러한 한계로 인해 문제가 발생한다면, Lodash 라이브러리 같은 외부 라이브러리의 깊은 복사 기능을 사용하는 것을 고려할 수 있습니다. Lodash의 `_.cloneDeep` 함수는 위에서 언급한 제한 사항들을 해결하고 더 복잡한 객체도 잘 처리할 수 있습니다. ```javascript // Lodash 라이브러리의 예시 const _ = require('lodash'); const deepCopy = _.cloneD...

  js shuffle 하려고 하면서 느낀점이 파이썬은 다 기본제공인데 너무 귀찮다는 것이었다. Python은 매우 편리한 표준 라이브러리와 내장 함수들을 제공해서, 여러 작업들을 매우 간단하게 처리할 수 있죠. 예를 들어, Python에서는 리스트를 무작위로 섞기 위해 `random.shuffle()` 함수를 바로 사용할 수 있습니다: ```python import random my_list = [1, 2, 3, 4, 5] random.shuffle(my_list) print(my_list) ``` JavaScript와 같은 다른 언어들에서는 이러한 편의성을 직접 구현해야 할 때가 많습니다. 그래서 때로는 JavaScript에 Python의 편리함이 그리울 수도 있어요. 그러나, JavaScript는 웹 개발에서의 강력한 기능과 유연성으로 널리 사용되며, 다양한 라이브러리와 프레임워크를 통해 이러한 차이를 극복하고 있어요.  각 언어마다 장단점과 사용 사례가 다르기 때문에, 상황에 맞게 적절한 언어를 선택하는 것이 중요합니다. 때로는 더 많은 코드를 작성해야 할 수도 있지만, 그 과정에서 해당 언어의 더 깊은 이해와 프로그래밍 능력의 향상을 기대할 수 있어요. 파이썬이 특히 편리하게 느껴지는 이유 중 하나는 그 설계 철학과 목표에 있어요. 파이썬의 창시자 귀도 반 로섬은 사용하기 쉽고, 읽기 쉬운 언어를 만들고자 했어요. 파이썬의 공식 모토인 "There should be one-- and preferably only one --obvious way to do it."는 이러한 설계 철학을 잘 반영하고 있죠. 이 때문에 파이썬은 초보자부터 전문가까지 널리 사용되며, 다양한 분야에서 인기가 많습니다. JavaScript는 원래 웹 브라우저 내에서 작동하는 스크립트 언어로 시작했어요. 따라서 그 초점은 동적인 웹 콘텐츠 생성에 맞춰져 있었죠. 시간이 지나면서 Node.js의 등장으로 서버 측 개발에도 사용되기 시작했고, 이제는 웹 개발뿐만 아니...

 JavaScript에서 배열의 원소들을 무작위로 섞으려면, 일반적으로 Fisher-Yates (또는 Knuth) 셔플 알고리즘을 사용합니다. 이 방법은 배열 내의 각 원소에 대해 임의의 다른 위치를 선택하고, 두 위치의 원소를 교환함으로써 배열을 무작위로 섞는 효율적인 방법입니다. 다음은 Fisher-Yates 셔플 알고리즘을 사용하여 JavaScript에서 배열을 섞는 방법의 예시입니다: ```javascript function shuffleArray(array) {     for (let i = array.length - 1; i > 0; i--) {         // 0에서 i 사이의 임의의 인덱스를 선택         const j = Math.floor(Math.random() * (i + 1));         // array[i]와 array[j]를 교환         [array[i], array[j]] = [array[j], array[i]];     }     return array; } // 사용 예시 const myArray = [1, 2, 3, 4, 5]; shuffleArray(myArray); console.log(myArray); // myArray는 이제 무작위로 섞여 있음 ``` 이 코드는 배열 `array`를 매개변수로 받아, 그 배열의 원소들을 무작위로 섞은 후 그 배열을 반환합니다. `Math.random()` 함수는 0 이상 1 미만의 부동소수점 의사난수를 반환하므로, `Math.floor(Math.random() * (i + 1))`는 0 이상 `i` 이하의 정수 중 하나를 무작위로 선택합니다. 이 선택된 인덱스를 사용하여 현재 인덱스 `i`의 원소와 교환함으로써 배열을 섞습니다. --- 느낀점: 파이썬은 다 ...

js에 sort함수는 python 처럼 key로 sort하기 JavaScript의 `sort` 함수는 Python의 `sort` 함수와 같이 직접적으로 `key` 인자를 지원하지 않습니다. 그러나 JavaScript에서는 `sort` 함수에 비교 함수를 제공하여 객체 배열을 속성 값에 따라 정렬할 수 있습니다. 이 비교 함수는 두 요소를 인자로 받아서, 첫 번째 요소가 두 번째 요소보다 작을 경우 음수를, 같을 경우 0을, 큰 경우 양수를 반환해야 합니다. 이를 통해 Python의 `key` 인자와 유사한 기능을 구현할 수 있습니다. 예를 들어, 객체의 특정 속성을 기준으로 배열을 정렬하려면 다음과 같이 할 수 있습니다: ```javascript let items = [     { name: "Banana", quantity: 2 },     { name: "Apple", quantity: 10 },     { name: "Orange", quantity: 5 } ]; // name 속성을 기준으로 오름차순 정렬 items.sort((a, b) => a.name.localeCompare(b.name)); // quantity 속성을 기준으로 오름차순 정렬 items.sort((a, b) => a.quantity - b.quantity); ``` 여기서 `localeCompare`는 문자열 비교를 위해 사용되며, 문자열 속성을 기준으로 배열을 정렬할 때 유용합니다. 숫자 속성의 경우 간단히 두 값을 빼서 정렬 순서를 결정할 수 있습니다. 따라서 JavaScript에서는 `sort` 함수의 비교 함수를 적절히 정의하여 Python의 `key` 인자와 비슷한 기능을 구현할 수 있습니다. 좀 더 단순화해서 설명해볼게요. JavaScript에서 배열을 정렬할 때 `sort()` 함수를 사용하는데, 이 함수 안에 또 다른 함수를 넣어서 "어떻게" 정렬할지 정의할 수 있어요. 이 내부 함수를...

JSON.parse(JSON.stringify(word_map)) ### 코드의 작동 원리 1. **`JSON.stringify(word_map)`**: 먼저 `word_map` 객체를 JSON 문자열로 변환합니다. 이 과정에서 객체의 구조는 보존되지만, 모든 것이 문자열 형태로 변환됩니다. 이 변환 과정에서 함수, `undefined`, 심볼과 같은 JSON으로 표현할 수 없는 값들은 무시되거나 삭제됩니다. 2. **`JSON.parse(...)`**: 그 다음, `JSON.stringify`로 생성된 문자열을 다시 객체로 변환합니다. `JSON.parse` 메서드는 JSON 문자열을 받아 해당 문자열을 기반으로 새로운 JavaScript 객체를 생성합니다. ### 코드 사용 시 고려할 점 - **함수, `undefined`, 심볼 무시**: 이 방법은 객체 내의 함수, `undefined`, 심볼 값 등 JSON에서 지원하지 않는 값을 복사하지 않습니다. 따라서 이러한 값들은 결과 객체에 포함되지 않습니다. - **원형(Prototype) 정보 누락**: 복사된 객체는 원본 객체의 프로토타입 체인을 상속받지 않습니다. 즉, 원본 객체가 특정 클래스의 인스턴스였다면, 복사된 객체는 단순한 리터럴 객체가 되며 해당 클래스의 메서드나 속성을 가지지 않습니다. - **성능 고려**: 대용량 객체를 다룰 때 이 방법은 성능 저하를 일으킬 수 있습니다. 객체를 문자열로 변환하고 다시 객체로 파싱하는 과정은 비용이 많이 드는 연산입니다. - **순환 참조 문제**: 객체 내부에 순환 참조가 있는 경우(`obj.a = obj`와 같이 자기 자신을 참조하는 경우), `JSON.stringify`는 에러를 발생시킵니다. 이는 JSON 형식이 순환 참조를 지원하지 않기 때문입니다. 이러한 이유로, 이 방법은 단순한 객체를 깊은 복사할 필요가 있을 때 유용할 수 있지만, 모든 상황에 적합한 것은 아닙니다. 객체의 구조가 복잡하거나, 특정 타입의 값을 포함하고 있거나, 성능이 중...

JavaScript에는 Python의 딕셔너리와 비슷한 데이터 구조로 '객체(Object)'가 있습니다. JavaScript의 객체는 키와 값의 쌍으로 이루어져 있으며, Python의 딕셔너리와 유사한 방법으로 사용할 수 있습니다. 예를 들어: Python 딕셔너리: ```python my_dict = {   "name": "John",   "age": 30,   "city": "New York" } print(my_dict["name"])  # John 출력 ``` JavaScript 객체: ```javascript var myObj = {   name: "John",   age: 30,   city: "New York" }; console.log(myObj.name);  // John 출력 ``` JavaScript에서도 객체의 속성에 접근하기 위해 대괄호(`[]`)를 사용할 수 있으며, 이 경우 속성 이름을 문자열로 지정해야 합니다: ```javascript console.log(myObj["name"]);  // John 출력 ``` 이렇게 JavaScript의 객체는 Python의 딕셔너리와 매우 유사한 기능을 제공합니다. var myObj = {   name: "John",   age: 30 }; // 새 속성 추가 myObj.city = "New York"; // 기존 속성 변경 myObj.age = 31; console.log(myObj); // 출력: {name: "John", age: 31, city: "New York"} JavaScript 객체와 Python의 딕셔너리는 비슷한 방식으로 데이터를 저장하고 관리하지만, 각 언어에서의 역할과 사용법에는 차이가 있습니다. 그럼에도 불구하고 JavaScr...

 중국 여러 개발자 커뮤니티 및 기술 관련 웹사이트 1. **SegmentFault (思否)** - SegmentFault는 중국의 개발자들이 기술적인 문제를 해결하기 위해 질문하고 답변을 공유하는 플랫폼입니다. 스택 오버플로우와 비슷한 형식으로, 개발자들이 코드 관련 문제를 해결할 수 있는 유용한 자원입니다. 2. **InfoQ 中文版** - InfoQ는 기술 트렌드, 소프트웨어 개발, 프로그래밍 등에 관한 최신 정보를 제공합니다. 글로벌 사이트의 중국어 버전으로, 기술 뉴스와 인사이트를 제공하며, 개발자 및 IT 전문가들에게 인기가 있습니다. 3. **OSChina (开源中国)** - OSChina는 오픈 소스 소프트웨어 프로젝트와 개발자 커뮤니티에 중점을 둔 플랫폼입니다. 소스 코드 호스팅, 기술 뉴스, 토론 포럼 및 코딩 대회 등 다양한 서비스를 제공합니다. 4. **ITEYE** - ITEYE는 중국의 또 다른 개발자 커뮤니티로, 기술 블로그, 포럼, 기술 뉴스, 소프트웨어 개발 리소스 등을 제공합니다. 개발자들이 경험을 공유하고 토론할 수 있는 공간을 제공합니다. 일본 개발자들을 위한 다양한 웹사이트와 포럼 1. **Qiita (キータ)** - Qiita는 일본의 대표적인 개발자 커뮤니티 웹사이트 중 하나로, 개발자들이 기술 관련 정보를 공유하고 서로의 경험을 나눌 수 있는 플랫폼입니다. 사용자들은 기술 노하우, 프로그래밍 팁, 코드 스니펫 등을 공유합니다. 2. **teratail (テラテイル)** - teratail은 일본에서 인기 있는 Q&A 사이트로, 개발자들이 프로그래밍 관련 질문을 하고 다른 개발자들로부터 답변을 받을 수 있는 공간입니다. 이 사이트는 스택 오버플로우와 유사한 기능을 제공합니다. 3. **Stack Overflow Japan** - 전 세계적으로 유명한 개발자 포럼인 스택 오버플로우의 일본어 버전입니다. 개발자들이 기술적인 질문을 하고 답변을 받을 수 있는 곳으로, 다양한 프로그래밍 언어와 기술에 대한 질문과...

  <p></p><div class="separator" style="clear: both; text-align: center;"><br /></div><br />&nbsp;<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEi-IwnMb9onpvPoM63Yaifvfw0-2bMM2tNAadnZF6VqMzqoHp1VbHuEQVBDKZqXAFWYBwWgi_hyIn-jgwPkUC9VHWPZVVYF2SZqWGDnljxfyCkHkOugwBCVJIf4biUoLykA32pTp4p8wvAbBwB78vAM380PnnkqcWdlgx5A5FYgYuDdwMRJBbIxzjAKDdiF" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="301" data-original-width="495" src="https://blogger.googleusercontent.com/img/a/AVvXsEi-IwnMb9onpvPoM63Yaifvfw0-2bMM2tNAadnZF6VqMzqoHp1VbHuEQVBDKZqXAFWYBwWgi_hyIn-jgwPkUC9VHWPZVVYF2SZqWGDnljxfyCkHkOugwBCVJIf4biUoLykA32pTp4p8wvAbBwB78vAM380PnnkqcWdlgx5A5FYgYuDdwMRJBbIxzjAKDdiF=s16000" /></a></div><div><br /></di...

  https://www.youtube.com/shorts/zkrVpleJIeI 이거 보고 해보고 싶어서 appscript samples 여러 예시를 볼 수 있음. 채팅앱도 만들수 있네 예제 위주 https://developers.google.com/apps-script/samples Fundamentals of Apps Script with Google Sheets  구글 시트랑 사용하는 기본 가이드 감 잡을 수 있음 주요 클래스 알려주고    SpreadsheetApp ,  Spreadsheet ,  Sheet , and  Range . https://developers.google.com/codelabs/apps-script-fundamentals-2#1 대충보고 여기 링크되어 있는 각각의 문서 사이트 참고   SpreadsheetApp ,  Spreadsheet ,  Sheet , and  Range 시트앱은 전체 삭제 생성 가능하고 스프레드시트는 시트 하나를 말하는 거 https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet-app https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet 스프레드시트 아이디 https://stackoverflow.com/questions/36061433/how-do-i-locate-a-google-spreadsheet-id cors에러 해결 https://stackoverflow.com/questions/53433938/how-do-i-allow-a-cors-requests-in-my-google-script 이거는 디버그 모드에서만 되는 듯(logger class 사용) https://stackoverflow.com/questions/11539411/how-to-de...

링크에 +가 끼어 들어가서 원하는대로 해석이 안되는 문제 발생 링크의 쿼리 스트링에서 `+` 기호는 공백을 나타내는 데 사용될 수 있습니다. URL에서 직접 공백을 사용할 수 없기 때문에, 공백을 표현하기 위한 인코딩 방식이 필요한데, 그 중 하나가 `+` 기호를 사용하는 것입니다. 예를 들어, 검색 엔진에 "hello world"를 검색할 때 생성되는 URL은 `hello+world`의 형태로 공백을 `+`로 대체하여 인코딩할 수 있습니다. URL에서는 공백을 `%20`으로도 표현할 수 있는데, 이는 URL 인코딩에서 공백 문자의 헥사데시멀 값입니다. `+`와 `%20` 모두 공백을 나타내지만, 일반적으로 쿼리 스트링에서는 `+`가 더 자주 사용됩니다. 반면, URL의 경로 부분에서는 공백을 `%20`으로 인코딩하는 것이 일반적입니다. 실제 사용 예시를 들어보자면, 사용자가 웹 브라우저에 "OpenAI GPT-4"을 검색할 때, 검색 엔진의 URL은 다음과 같이 구성될 수 있습니다: `https://www.example.com/search?q=OpenAI+GPT-4`. 여기서 `+` 기호가 공백을 대체하고 있음을 알 수 있습니다. 쿼리 스트링에서 `+` 기호가 제대로 처리되지 않는 경우는 주로 `+`가 공백으로 해석되어야 하는 상황과 실제로 `+` 문자 자체를 전달해야 하는 상황 사이의 혼동 때문에 발생합니다. `+` 문자 자체를 쿼리 스트링의 일부로 전달하려면, URL 인코딩을 사용하여 이를 `%2B`로 변환해야 합니다. 이렇게 하면 서버나 받는 어플리케이션이 `+` 기호를 문자로서 정확히 인식할 수 있습니다. 예를 들어, 사용자가 "C++ Programming"에 대한 정보를 요청하는 쿼리를 생성하고자 할 때, 쿼리 스트링은 `q=C%2B%2B+Programming`과 같이 인코딩되어야 합니다. 여기서 `+`는 공백을 나타내고, `%2B`는 실제 `+` 문자를 나타냅니다. 이런 변환을 수동으로 하기보다...

같은 와이파이에 연결되어 있다면 노트북에서 로컬 호스트로 올린 리액트 사이트에 다른 핸드폰에서 접속하는 것이 가능합니다. 하지만 몇 가지 설정을 확인하고 조정해야 할 수 있습니다. 여기에 몇 가지 확인해야 할 사항들을 정리해두었습니다: 방화벽 설정 확인: 노트북의 방화벽 설정이 들어오는 연결을 차단하지 않도록 해야 합니다. 방화벽 설정에서 해당 포트(보통 리액트 개발 서버는 3000번 포트를 사용합니다)를 열어주어야 합니다. 리액트 개발 서버 설정: 리액트 개발 서버가 로컬호스트(localhost) 뿐만 아니라 네트워크 인터페이스를 통해서도 접근할 수 있도록 설정되어 있어야 합니다. package.json에서 scripts 항목에 있는 start 커맨드를 "start": "react-scripts start --host 0.0.0.0"와 같이 수정하면, 모든 네트워크 인터페이스를 통해 서버에 접근할 수 있게 됩니다. IP 주소 확인 및 사용: 노트북의 IP 주소를 확인한 후, 핸드폰 브라우저에서 http://노트북의-IP-주소:3000 형태로 접속해보세요. IP 주소는 운영체제에 따라 커맨드 라인에서 ipconfig(Windows) 또는 ifconfig(Mac/Linux) 명령어로 확인할 수 있습니다. 같은 네트워크 확인: 노트북과 핸드폰이 정말로 같은 와이파이 네트워크에 연결되어 있는지 확인해주세요. 때때로 장치들이 게스트 네트워크나 다른 분리된 네트워크에 연결되어 있는 경우가 있습니다. 이러한 점들을 확인하고 설정해보세요. 설정 후에도 접속이 안된다면, 네트워크 설정이나 장치의 방화벽/보안 소프트웨어 설정을 다시 한번 검토해볼 필요가 있습니다. --- 리액트 개발 서버를 실행할 때 기본적으로는 `localhost`에서만 접근이 가능하게 설정되어 있습니다. 이는 보안상의 이유와 개발 중에 국한된 환경에서 테스트하기 위함입니다. 그러나 다른 장치에서도 접속을 허용하려면 다음과 같은 설정이 필요합니다: 1. **호스트 설정 변...

 파일이 너무 커지기 전에 파일 분할을 해야한다. 주피터 노트북으로 알고리즘 문제 풀었는데  파일이 너무 커져서 갑자기 안 열렸다. 노트북에서 안열려서 코랩으로 옮겨서 열어서 아웃풋 너무 긴거랑 긴 셀만 옮기고 지워주고 노트북으로 열었더니 열렸다. 코랩도 한번 튕기기는 했는데 새로고침해서 열었다. 이런 귀찮은 일을 겪지 않기 위해 파일 분할을 꼭하고 알고리즘 문제 푼거는 여기에 모아놔야겠다

 touch에는 기본적으로 touch over라는게 없다. 터치가 그런식으로 작동하지 않기때문.. 해결 과정 touch-action을 none으로 바꿔서 브라우저가 터치 액션을 네이티브 액션으로 캐치하지 않도록 하자 https://stackoverflow.com/questions/48124372/pointermove-event-not-working-with-touch-why-not -> 이건 실패 이걸로 해결했다 https://stackoverflow.com/questions/70973822/no-pointerenter-event-if-you-touch-and-then-move-into-element ``` function handlePointerDown ( e ) { e. target . releasePointerCapture (e. pointerId ) } ``` e.target.releasePointerCapture(e.pointerId)는 이벤트와 연관된 포인터의 캡처를 해제합니다. 여기서 e.target은 이벤트가 발생한 요소, e.pointerId는 이벤트를 발생시킨 포인터의 고유 식별자입니다. 포인터 캡처는 요소가 포인터 이벤트(예: 마우스, 터치)를 독점적으로 받도록 할 때 사용됩니다. 이 코드는 특정 상황에서 포인터 캡처를 해제하여 다른 요소들도 포인터 이벤트를 받을 수 있도록 하는데 사용됩니다.