코딩 타자 연습 사이트 만들기

코드보기 : https://github.com/maplesyrup0423/DevTyper 리액트 프로젝트 생성 및 기본 설정 1. 새폴더 devtyper 를 생성하고 다음 명령어를 통해 React 앱을 설치. 2. 기본 코드 정리 src 폴더에서 다음 파일을 삭제

TypingArea.js코드의 경우 임시 하드코딩TypingArea.css문제 코드와 사용자 입력이 일치할 경우 텍스트 색을 초록색으로불일치할 경우 배경색을 빨간색으로 변경사용자가 타이핑할 때마다 handleInputChange 을 호출하여 실시간으로 확인 가능

GitHub API를 사용해서 오픈 소스에서 코드르 가져오는 과정에서 수많은 이슈가 있었다.특정 파일만(예 .js) 필터링할경우 해당 확장자의 파일이 리포지토리의 없는 경우파일의 전체 코드가 아닌 특정 구분만(코드 스니펫) 가져오고 싶은 경우 처리GitHub API의

현재 위치는 배경색을 회색으로 지정가져온 데이터에 공백문자 대신 다른 값이 들어있어 사용자가 공백문자를 입력해도 오답으로 처리되는 이슈불필요한 공백의 반복이 입력되는 현상해결 : 모든 공백 문자를 단일 공백으로 대체.replace(/\\s+/g, " ");render

correctChars: 사용자가 맞게 입력한 문자 개수입니다.cleanedCodeToType.length: 타자 연습용 코드의 총 글자 수입니다.(correctChars / cleanedCodeToType.length) \* 100: 정확도를 백분율로 나타내기 위한

타이머 일시정지/시작 기능 타이머 정지시 입력불가 다시 시작 시 이어서 진행가능 ![](https://velog.velcdn.co

따라칠 코드 새로고침 TypingArea.js 코드 전문

const textareaRef = useRef(null);

따라쓰기 코드 출처 표기(클릭시 이동)새로고침 버튼위치입력 시작 시 타이머/ 타이머 조정버튼 보임타이핑 종료시 타이머 조정버튼 안보임/ 타자연습결과 보임

코드보기 : https://github.com/maplesyrup0423/DevTyper따라쓰기 코드를 드래그해서 복사 붙여넣기가 가능함헤결 : css에서 처리

##코드 패턴 추가 기존 코드의 경우 함수만 타자연습 대상으로 삼았지만, 더욱 다양한 코드에 익숙해지기 위해 코드패턴 추가 클래스 정의 Arrow Function (화살표 함수) 비동기 함수 (async/await) 루프 코드 조건문 블록 (if-else) 객체 초기화

기존 코드의 경우 다양한 데이터 처리와 유틸리티 기능을 제공하여 배열, 문자열, 객체 작업을 간단하게 해주는 라이브러리인 Lodash의 레포지토리에서만 코드를 조회해서 보여줬다.코드 다양성을 위해 다음 레포지토리들을 추가했다.lodash/lodash

기존의 코드를 가져오는 정규표현식에 이슈가 있어 수정한다.래당 코드의 경우 특정 키워드 (function, class, for)등으로 시작하고}가 나올 때까지 모든 내용을 가져오는 코드이다.이코드는 중괄호 {}가 중첩되어 있을 경우 내가 원하는 결과를 가져오지 못하는

코드보기 : https://github.com/maplesyrup0423/DevTypergitHub API를 단기간에 많이 요청하면 403에러가 발생함그렇기에 다음 사항을 적용함fetchJSFilesFromGithub 의 재시도 횟수제한재시도 시 2초 동안 대

타자연습 로그 남기기 로그 남기는 방식 DB를 이용하는 방법은 기존 다른 프로젝트에서 많이 사용해 봤기에 이번에는 로컬 스토리지를 사용하는 방법으로 진행하기로 했다. > ## 1. 로컬 스토리지 사용 로컬 스토리지는 사용자의 브라우저에 데이터를 저장하는 방식입니다. 장

프로젝트명: DevTyper목적: 사용자가 실전 코드를 통해 타이핑 실력을 키울 수 있는 웹 애플리케이션을 제공주요 타겟 사용자: 타자 실력을 향상하고자 하는 초급 및 중급 개발자, 코딩 초보자실전 코드를 기반으로 한 타자 연습을 통해 개발자들에게 유익한 연습 환경 제

코드보기 : https://github.com/maplesyrup0423/DevTyper결과를 도달 창으로 출력하고 "다음"버튼을 눌러 새로고침된 코드 연습을 이어서 할 수 있도록 구현setIsModalOpen(true);추가

https://velog.io/@maplesyrup0423/VITE-%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4-%EC%A0%9C%EC%9E%91%ED%95%98%EA%B8%B0-%EB%B0%B0%ED%8F%AC Netlify 로

코드보기 : https://github.com/maplesyrup0423/DevTyperapi 호출이 많을 경우 403에러가 발생한다.403 에러가 발생할 경우 사용자에게 Alert로 "잠시 후 다시 시도해주세요" 라는 메세지를 출력한다.일반 Alert 의 경

코드보기 : DevTyper스피너 애니메이션 사용