[React] 코딩 타자 연습 사이트 만들기 (11) - 코드 패턴 추가

코드보기 : https://github.com/maplesyrup0423/DevTyper

##코드 패턴 추가
기존 코드의 경우 함수만 타자연습 대상으로 삼았지만, 더욱 다양한 코드에 익숙해지기 위해 코드패턴 추가

• 클래스 정의
• Arrow Function (화살표 함수)
• 비동기 함수 (async/await)
• 루프 코드
• 조건문 블록 (if-else)
• 객체 초기화 블록

	  // 정규 표현식 패턴 정의
      const regexPatterns = {
            function: /function\s+\w+\s*\(.*?\)\s*{[^}]*}/g,
            class: /class\s+\w+\s*{[^}]*}/g,
            arrow: /\w+\s*=\s*\(.*?\)\s*=>\s*{[^}]*}/g,
            async: /async\s+function\s+\w+\s*\(.*?\)\s*{[^}]*}/g,
            loop: /\b(for|while)\s*\(.*?\)\s*{[^}]*}/g,
            conditional: /\b(if|switch)\s*\(.*?\)\s*{[^}]*}/g,
            object: /const\s+\w+\s*=\s*{[^}]*}/g,
          };

          // 모든 패턴을 적용하여 코드 조각을 가져옴
          let allMatches = [];
          for (const pattern of Object.values(regexPatterns)) {
            const matches = decodedContent.match(pattern) || [];
            allMatches = allMatches.concat(matches);
          }

          if (allMatches.length > 0) {
            // 랜덤으로 하나의 코드 조각 선택
            const randomSnippet =
              allMatches[Math.floor(Math.random() * allMatches.length)];
            setCodeToType(randomSnippet); // 선택한 코드 조각 설정
            setFileLink(item.html_url); // 파일 출처 링크 설정
          } else {
            console.log("파일에 코드 조각이 없습니다. 다시 시도합니다.");
            fetchJSFilesFromGithub(); // 코드 조각이 없으면 다시 파일을 가져옵니다.
          }