4월, 2024의 게시물 표시

javascript random

 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 사이의 정수 ``` 이 함수들은 ...

onSubmit 이벤트가 예상치 않게 작동하는 경우: form 안의 버튼은 무조건 on submit이 작동함(form 제출됨)

 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

# 객체를 깊은 복사  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 귀찮

  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 shuffle은 보통 Fisher-Yates 알고리즘을 활용한다

 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`의 원소와 교환함으로써 배열을 섞습니다. --- 느낀점: 파이썬은 다 ...

javascript sort

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(array))

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 형식이 순환 참조를 지원하지 않기 때문입니다. 이러한 이유로, 이 방법은 단순한 객체를 깊은 복사할 필요가 있을 때 유용할 수 있지만, 모든 상황에 적합한 것은 아닙니다. 객체의 구조가 복잡하거나, 특정 타입의 값을 포함하고 있거나, 성능이 중...

js vs python

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** - 전 세계적으로 유명한 개발자 포럼인 스택 오버플로우의 일본어 버전입니다. 개발자들이 기술적인 질문을 하고 답변을 받을 수 있는 곳으로, 다양한 프로그래밍 언어와 기술에 대한 질문과...

google spread sheet

이미지
  <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...

app script와 구글 스프레드 시트를 사용하기

  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`는 실제 `+` 문자를 나타냅니다. 이런 변환을 수동으로 하기보다...

노트북에서 로컬 호스트로 올린 react 사이트에 다른 핸드폰에서 접속하는 법

같은 와이파이에 연결되어 있다면 노트북에서 로컬 호스트로 올린 리액트 사이트에 다른 핸드폰에서 접속하는 것이 가능합니다. 하지만 몇 가지 설정을 확인하고 조정해야 할 수 있습니다. 여기에 몇 가지 확인해야 할 사항들을 정리해두었습니다: 방화벽 설정 확인: 노트북의 방화벽 설정이 들어오는 연결을 차단하지 않도록 해야 합니다. 방화벽 설정에서 해당 포트(보통 리액트 개발 서버는 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. **호스트 설정 변...

Jupyter notebook 파일이 너무 커지면 안열리는 문제가 생길 수도 있다.

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

touch over.. pointerover 가 모바일에서 작동 안하는 문제해결

 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는 이벤트를 발생시킨 포인터의 고유 식별자입니다. 포인터 캡처는 요소가 포인터 이벤트(예: 마우스, 터치)를 독점적으로 받도록 할 때 사용됩니다. 이 코드는 특정 상황에서 포인터 캡처를 해제하여 다른 요소들도 포인터 이벤트를 받을 수 있도록 하는데 사용됩니다.