gongboo

# draft js https://draftjs.org/docs/advanced-topics-issues-and-pitfalls/ 한국어가 잘 안되는 에러가 있음. # prose mirror https://prosemirror.net/docs/

CRA(Create React App)를 사용하려면 터미널에서 다음 명령어를 실행하면 됩니다: ```bash npx create-react-app my-app ``` 여기서 `my-app`은 프로젝트의 이름입니다. 원하는 이름으로 변경할 수 있습니다. 이 명령어를 실행하면 React 프로젝트를 생성하고 필요한 파일과 디렉터리를 자동으로 구성합니다. 설치가 완료되면 다음 명령어로 프로젝트 디렉터리로 이동하고 로컬 개발 서버를 시작할 수 있습니다: ```bash cd my-app npm start ``` 이제 로컬 서버에서 React 앱을 확인할 수 있습니다.

# QR 코드란 1. **오류 수정 레벨 (Error Correction Level)**: QR 코드에는 오류 수정 기능이 포함되어 있어, 일부가 손상되더라도 데이터를 복구할 수 있습니다. 오류 수정 레벨은 총 4가지가 있으며, 다음과 같습니다:     - **L (Low)**: 약 7%의 오류 복구 가능     - **M (Medium)**: 약 15%의 오류 복구 가능     - **Q (Quartile)**: 약 25%의 오류 복구 가능     - **H (High)**: 약 30%의 오류 복구 가능 2. **버전 (Version)**: QR 코드에는 총 40개의 버전이 있습니다. 각 버전은 QR 코드의 크기와 저장할 수 있는 데이터 양에 영향을 줍니다. 버전 1은 21x21 셀 크기이고, 버전이 1씩 증가할 때마다 각 측면에 4셀씩 추가됩니다. 따라서 버전 40은 177x177 셀 크기입니다. 버전이 높아질수록 더 많은 데이터를 저장할 수 있지만, 크기와 복잡성도 증가합니다. 따라서 정리하면: - QR 코드에는 손상 시 복구할 수 있는 4가지 오류 수정 레벨이 있습니다. - QR 코드의 버전은 1부터 40까지 있으며, 버전이 높을수록 더 많은 데이터를 저장할 수 있습니다. QR 코드에 대해 알아두면 유용한 몇 가지 추가 정보가 있습니다: ### 구조와 구성 요소 QR 코드는 다양한 패턴으로 구성되어 있습니다. 주요 구성 요소는 다음과 같습니다: 1. **위치 패턴 (Position Pattern)**: QR 코드의 세 모서리에 있는 큰 사각형 패턴으로, 스캐너가 QR 코드를 쉽게 인식할 수 있도록 도와줍니다. 2. **정렬 패턴 (Alignment Pattern)**: QR 코드의 왜곡을 보정하는 데 사용되며, 버전 2 이상에서 추가됩니다. 3. **타이밍 패턴 (Timing Pattern)**: 위치 패턴 사이에 있는 교차하는 선으로, QR 코드의 셀 위치를 정확하게 결정하는 데 사...

 i18next vs react-intl i18next  많이 쓰는 라이브러리. next js 등 다른 거랑 같이 쓸 때 유용 react-intl  표준 라이브러리. 좀더 단순

 React 프로젝트에 JSON 데이터베이스 파일을 추가하는 방법은 여러 가지가 있습니다. 파일을 어디에 배치할지는 주로 프로젝트의 구조와 데이터 파일의 용도에 따라 달라집니다. 일반적인 방법은 `public` 또는 `src` 디렉토리 내에 JSON 파일을 두는 것입니다. ### 1. `public` 디렉토리 `public` 디렉토리에 JSON 파일을 두면, 이 파일은 정적 자산으로 간주되며, 애플리케이션이 빌드될 때 그대로 복사됩니다. 이를 통해 서버에서 직접 JSON 파일에 접근할 수 있습니다. #### 파일 위치 ``` my-react-app/ ├── public/ │   ├── index.html │   ├── ... │   ├── data.json └── src/     ├── App.js     ├── ... ``` #### 파일 접근 이 경우, JSON 파일을 fetch API를 사용하여 접근할 수 있습니다. ```js // src/App.js import React, { useEffect, useState } from 'react'; function App() {   const [data, setData] = useState(null);   useEffect(() => {     fetch('/data.json')       .then((response) => response.json())       .then((data) => setData(data));   }, []);   return (     <div className="App">       {data ? (         <pre>{JSON.stringify(data, ...

 React input에서의 value를 꼭 써야하나? `value={wordSearched}`는 React에서 입력 요소를 제어 컴포넌트로 만들 때 필요한 속성입니다. 제어 컴포넌트란 React 상태(state)를 통해 입력 요소의 값을 제어하는 방식을 말합니다. 이를 통해 React는 입력 요소의 상태를 관리하고, 변경할 때마다 화면이 자동으로 업데이트됩니다. ### 왜 필요한가요? 1. **상태 관리**: `value={wordSearched}`를 사용하면 입력 요소의 현재 값을 `wordSearched` 상태에 연결할 수 있습니다. 사용자가 입력하는 내용이 상태에 반영되므로, 이 값을 이용해 다양한 연산을 수행하거나 다른 컴포넌트와 상호작용할 수 있습니다. 2. **제어**: React가 입력 요소의 상태를 관리하므로, 사용자 입력에 따라 다른 컴포넌트나 기능을 동작시킬 수 있습니다. 예를 들어 검색 기능이나 필터링 기능을 구현할 때 매우 유용합니다. 3. **일관성**: React의 가상 DOM(Virtual DOM)에서는 상태와 UI를 동기화하기 위해 입력 요소의 상태를 추적합니다. `value` 속성을 사용하면 React가 이 변화를 감지하고 UI를 업데이트할 수 있습니다. ### 사용하지 않을 때의 문제점: 만약 `value={wordSearched}`를 사용하지 않고 입력 요소를 일반 HTML처럼 사용한다면, React의 상태 관리를 이용하지 않고 DOM에 직접 접근해야 합니다. 이는 React의 성능과 일관성을 저하시킬 수 있고, 복잡한 상태 관리나 UI 업데이트를 구현하기 어려울 수 있습니다. 따라서, React에서는 입력 요소의 상태를 제어 컴포넌트로 만들어 `value` 속성을 사용하여 상태를 관리하는 것이 좋은 프랙티스입니다. 이는 React의 기본 원칙 중 하나이며, React의 강력한 상태 관리 기능을 활용하는 방법입니다. `useEffect`는 주로 컴포넌트가 마운트되거나 업데이트될 때 부수 효과(side effects)를...

 React에서 리스트 요소를 반복적으로 그리려면 `map()` 함수를 사용하여 배열을 순회하고 각 요소에 대해 컴포넌트를 렌더링합니다. 예를 들어, 다음과 같은 JSON 배열이 있다고 가정해보겠습니다: ```json [   { "id": 1, "name": "Alice" },   { "id": 2, "name": "Bob" },   { "id": 3, "name": "Charlie" } ] ``` 이 배열의 각 요소를 React 컴포넌트로 렌더링하는 방법을 예제 코드로 보여드리겠습니다. ### 예제 코드 ```javascript import React from 'react'; // 예제 데이터 const data = [   { id: 1, name: 'Alice' },   { id: 2, name: 'Bob' },   { id: 3, name: 'Charlie' } ]; // 리스트 아이템 컴포넌트 const ListItem = ({ item }) => (   <li key={item.id}>     {item.name}   </li> ); // 메인 컴포넌트 const ListComponent = () => {   return (     <ul>       {data.map(item => (         <ListItem key={item.id} item={item} />       ))}     </ul>   ); }; export default ListComponent; ``` ### 설명 1. **데이터 준비**: 렌더링할 데이터를 배열 형태로 준비합니다. 2. **리스트 아이템 컴포넌트 (`ListItem`)**: 각 리스트 아이템을 렌더링하는...

같은 와이파이에 연결되어 있다면 노트북에서 로컬 호스트로 올린 리액트 사이트에 다른 핸드폰에서 접속하는 것이 가능합니다. 하지만 몇 가지 설정을 확인하고 조정해야 할 수 있습니다. 여기에 몇 가지 확인해야 할 사항들을 정리해두었습니다: 방화벽 설정 확인: 노트북의 방화벽 설정이 들어오는 연결을 차단하지 않도록 해야 합니다. 방화벽 설정에서 해당 포트(보통 리액트 개발 서버는 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는 이벤트를 발생시킨 포인터의 고유 식별자입니다. 포인터 캡처는 요소가 포인터 이벤트(예: 마우스, 터치)를 독점적으로 받도록 할 때 사용됩니다. 이 코드는 특정 상황에서 포인터 캡처를 해제하여 다른 요소들도 포인터 이벤트를 받을 수 있도록 하는데 사용됩니다.