프로젝트 설명
Code Bridge는 도형과 명령 블록을 조합하고 실행 결과와 생성된 JavaScript 코드를 함께 확인하며 프로그래밍의 흐름을 시각적으로 익힐 수 있도록 구성한 비주얼 코딩 학습 도구입니다.
주요 기능
• 학습 미션 목록과 완료 진행률 확인
• 도형 종류와 색상을 선택하는 도형 생성 기능
• 도형 선택과 위치·속성값 편집
• 이동·회전·색상 변경 등 명령 블록 구성
• 대상 도형과 블록 실행값 설정
• 드래그를 이용한 블록 실행 순서 변경
• 블록 단위 단계별 실행
• 초기화 및 전체 프로그램 연속 실행
• 블록 구성에 따라 생성되는 JavaScript 코드 확인
• 미션 실패 원인과 목표값 차이 안내
• 실행값 수정 후 미션 성공 여부 확인
• 데스크톱·모바일 반응형 워크스페이스
https://youtu.be/pV1YFJQPUEgsiKophle0AMdTmAmy0
기술 스택
JavaScript/TypeScriptReact/Next.jsNode.jsPostgreSQL
