feat(typescript): React 템플릿 타입스크립트 도입 및 마이그레이션 지원

[uthem150]

수정 사유 Reason for modification

• 버그수정 Bug fixes
• 기능개선 Enhancements
• 기능추가 Adding features
• 기타 Others

수정된 소스 내용 Modified source

본 PR은 전자정부 표준프레임워크 React 템플릿에 TypeScript 지원을 추가하는 PR입니다.

최근 웹 개발의 트렌드 및 안전성을 반영하여
Issue #14: TypeScript 버전 추가 요청을 해결했습니다.

이를 통해 기존 JavaScript 코드베이스와의 완전한 호환성을 보장하면서,
타입스크립트 마이그레이션 및 새로운 기능 개발이 가능하도록 프로젝트 구조를 개선했습니다.
개발자는 필요에 따라 기존 .jsx 파일을 유지하거나 .tsx 파일로 전환할 수 있도록 설계하였습니다.

---

1. 주요 기능

• 컴파일 시점에서 타입을 체크하여 타입 안정성을 확보하고 런타임 오류를 사전에 방지합니다.
• 코드 자동완성, 타입 추론, 안전한 리팩토링을 통해 개발자 경험을 향상시킵니다.

---

2. 주요 변경사항

1. TypeScript 설정 파일 추가

   • tsconfig.json: 프로젝트의 TypeScript 컴파일러 옵션을 설정했습니다. (strict 모드 활성화, 경로 별칭 @/* 설정 등)
   • jsconfig.json: JavaScript 개발 환경을 위한 경로 별칭 등을 설정했습니다.

2. ESLint 설정 현대화 (Flat Config)

   • eslint.config.js: 최신 Flat Config 형식으로 변경하여 설정을 단순화했습니다.
   • JavaScript와 TypeScript 파일에 각각 최적화된 린트 규칙을 적용하고, @typescript-eslint 플러그인을 통합했습니다.

3. 타입 정의 시스템 구축

   • src/types/ 디렉토리를 생성하여 공통, API, 환경변수 타입을 관리하도록 설계하였습니다.
   • 백엔드 API 명세서를 기반으로 정확한 요청/응답 타입을 정의하여 데이터 정합성을 높였습니다.
   • common.ts: 비즈니스 로직 관련 공통 타입 (e.g., Board, LoginUser)
   • api.ts: API 요청/응답 관련 타입 (e.g., ListResponse)
   • env.d.ts: Vite 환경 변수 타입

4. 빌드 시스템 통합 (Vite)

   • vite.config.js: .ts 및 .tsx 파일을 처리하도록 Vite 설정을 업데이트하고, 타입 경로 별칭(@/types)을 추가했습니다.

5. package.json 스크립트

   • typescript, typescript-eslint 등 개발 의존성을 추가하였습니다.
   • typescript 관련 검사 스크립트등을 추가하였습니다

---

설계 고려사항 및 기대효과

본 프로젝트를 타입스크립트를 적용하는데 있어, 기존 프로젝트와의 호환성을 최대한 고려하여 설계를 진행하였고,
기존 .jsx 코드와의 충돌 없이, 점진적으로 타입스크립트 마이그레이션이 가능하도록 구성하였습니다.

아래는 본 pr을 통해 예상되는 기대효과를 정리해 보았습니다.

• 타입 안전성: 런타임에 발생할 수 있는 오류를 컴파일 시점에 발견하여, 런타임 에러를 크게 줄일 수 있습니다
• 개발 생산성: 강력한 자동완성 및 타입 추론기능이 추가되어 코드 작성 속도가 향상됩니다.
• 코드 품질 및 유지보수성: 안전한 리팩토링이 가능해져 장기적인 프로젝트 유지보수가 용이해집니다.
• 호환성: 기존 JavaScript 코드를 수정할 필요 없이, 필요한 파일부터 점진적으로 TypeScript로 전환할 수 있습니다.

---

상세 내용은 아래 파일을 확인해주시면 감사하겠습니다.
TYPESCRIPT.md

---

JUnit 테스트 JUnit tests

테스트를 완료하셨으면 다음 항목에 [대문자X]로 표시해 주세요. When you're done testing, check the following items.

• JUnit 테스트 JUnit tests
• 수동 테스트 Manual testing

테스트 브라우저 Test Browser

• Chrome
• Firefox
• Edge
• Safari
• Opera
• Internet Explorer
• 기타 Others

테스트 스크린샷 또는 캡처 영상 Test screenshots or captured video

src/
├── components/ 
│   ├── EgovHeader.jsx  
│   ├── EgovFooter.jsx
│   ├── EgovPaging.jsx 
│   └── TypeScriptExample.tsx  # TypeScript 예제
├── pages/  
├── types/  
│   ├── common.ts        # 공통 타입들
│   ├── api.ts           # API 관련 타입들
│   ├── env.d.ts         # 환경변수 타입
│   └── index.ts         # 타입 export
├── utils/  
├── api/                 # API 통신 관련
└── assets/  

[eGovFrameSupport]

[2025년 전자정부 표준프레임워크 컨트리뷰션 참가 기념품 발송안내]

안녕하세요
전자정부 표준프레임워크 센터입니다.

'25년 5월부터 전자정부 서비스 개발 표준 기반인 "전자정부 표준프레임워크" 개선에 민간 SW개발자의 아이디어와 의견을 반영하기 위해 "2025 전자정부 표준프레임워크 컨트리뷰션"을 개최하였습니다.
표준프레임워크 깃허브(github.com/egovframework)에 보내주신 귀하의 의견에 감사드리며, 전자정부 표준프레임워크 운영·개선 과정에서 유용하게 활용토록 하겠습니다.
본 설문에 응답 주시면 표준프레임워크에서 마련한 소정의 기념품을 발송 드릴 예정이오니, 문항에 빠짐없이 응답 해 주시기 바랍니다.
아래의 URL을 통하여 설문지로 이동, 항목에 응답 부탁드립니다.

https://forms.gle/RmYSLrasGMoy1diU8

앞으로도 전자정부 표준프레임워크에 지속적인 관심 부탁드립니다.

※ 센터에서 준비한 감사장과 표준프레임워크 오픈커뮤니티에서 소정의 기념품을 택배 배송 해 드립니다.
※ 컨트리뷰션 종료 후, 시상 관련하여 연락 갈 예정이오니, 꼭 통화 가능한 본인번호를 기재해 주시기 바랍니다.
※ 귀하께서 답변해 주시는 내용은 컨트리뷰션 참가 확인 및 기념품 발송 목적으로만 활용되며, 개인정보는 기념품 발송 후 즉시 영구 삭제처리 됩니다.

감사합니다.

[eGovFrameSupport]

표준프레임워크에 대한 지속적인 참여에
대단히 감사드립니다.

[uthem150]

@eGovFrameSupport 안녕하세요, 관리자님.

전자정부 표준프레임워크에 대한 지속적인 관리에 감사드립니다.
제가 기여했던 Pull Request #83 (React 템플릿 타입스크립트 도입 및 마이그레이션 지원) 건에 대해 문의드리고자 코멘트를 남기게 되었습니다.

다른 기여 건은 반영이 된 것을 확인했는데, 해당 PR은 머지되지 않고 'Closed' 상태로 변경된 것을 확인하게 되었습니다

혹시 제 PR에 반영되기 어려운 문제나 부족한 점이 있었는지,
혹은 구체적인 다른 이유가 있었는지 여쭤봐도 괜찮을까요?

• 기술적인 문제가 있었던 건지
• 프로젝트 방향성과 맞지 않는 건지
• 추가로 보완이 필요한 부분이 있는 건지 등

피드백을 주시면 내용을 보완하여 다시 기여하거나, 앞으로의 컨트리뷰션 활동에 참고하는 데 큰 도움이 될 것 같습니다.

바쁘시겠지만 잠시 시간을 내어 답변해 주시면 대단히 감사하겠습니다.