[Intern] 체인별 트랜잭션 조회 API 설계 및 구현 수정할 파일 확인

✏ 근무 내용

• 윈도우 환경에서 aws 배포 에러 해결
• https://github.com/planetarium/interchain-explorer 프로젝트 수정해야 할 파일 확인

⭐근무 결과

1. Backend API 수정

• api.controller.ts: 클라이언트의 요청을 처리하고, **api.service.ts*에 트랜잭션 조회를 요청하는 역할을 합니다.
• api.service.ts: 실제로 Ethereum, Base, Arbitrum 간의 트랜잭션을 조회하는 로직을 처리합니다. 여기서는 Etherscan 및 Base Explorer API 호출을 포함합니다.
• api.module.ts: ApiController와 ApiService를 NestJS 모듈에 통합하여 사용할 수 있도록 설정합니다.
• api.service.spec.ts: Service의 기능을 테스트하는 파일로, API 응답을 모킹하여 테스트합니다.
• api.controller.spec.ts: Controller의 테스트 파일로, 클라이언트 요청을 처리하는 부분을 모킹하여 테스트합니다.

2. Frontend 수정 (index.html)

Frontend에서 사용자가 입력한 트랜잭션 해시를 통해 Backend API로 요청을 보내고, 그 결과를 표시하는 역할을 합니다. 아래 작업을 해야 합니다:

1. 트랜잭션 조회 함수 수정 (JavaScript): getTransactions() 함수에서 Backend API를 호출하여 트랜잭션 정보를 받아오는 로직을 수정합니다. 현재 HTML 파일에는 fetch() 요청을 보내는 코드가 이미 포함되어 있으므로, 이 부분은 변경 없이 사용할 수 있습니다.
2. 기존 코드:

async function getTransactions() {
  const enteredTxHash = document.getElementById('txHash').value;
  const response = await fetch(`/api/list?txHash=${enteredTxHash}`);
  const result = await response.json();
  // 응답 처리 및 결과 표시
}

1. 결과 출력: displayBridge() 함수와 displayMultipleTransactionGroups() 함수는 서버로부터 받은 트랜잭션 정보를 화면에 표시하는 역할을 합니다. 이 함수들이 필요한 데이터를 적절하게 처리하여 HTML에 삽입합니다.

3. 통합 흐름

1. 사용자가 트랜잭션 해시를 입력하고 검색 버튼을 클릭합니다.
2. Frontend에서 getTransactions() 함수가 호출되어 Backend API(api/list?txHash={txHash})에 요청을 보냅니다.
3. Backend는 Etherscan API 및 Base Explorer API를 사용하여 트랜잭션 정보를 조회합니다.
4. 조회된 트랜잭션 정보는 Frontend로 반환되어 **displayBridge()**와 displayMultipleTransactionGroups() 함수에서 처리되어 화면에 출력됩니다.

---

4. 핵심 수정 포인트

• Backend:
  • 트랜잭션 조회 로직을 api.service.ts에 구현 (Etherscan API, Base Explorer API 사용).
  • 컨트롤러에서 클라이언트의 요청을 처리하도록 수정.
• Frontend:
  • getTransactions() 함수에서 트랜잭션 해시를 사용해 Backend API를 호출.
  • 반환된 데이터를 화면에 적절하게 표시하도록 displayBridge() 및 displayMultipleTransactionGroups() 함수 활용.

---

5. 결론

위 파일들(Backend와 Frontend)을 수정하면 Ethereum, Base, Arbitrum 간의 트랜잭션 조회와 결과 표시 기능을 구현할 수 있습니다. 추가적으로 Backend의 API와 Frontend의 요청/응답 처리 부분을 수정하여 요구 사항을 충족시키는 방식으로 진행하기

수정 후 테스트를 진행하여 모든 트랜잭션 조회가 정상적으로 이루어지고, 화면에 결과가 잘 출력되는지 확인하기

🚩인사이트

오늘 한 일 : 각 체인별 트랜잭션 조회 API 설계 및 구현 작업 분담

내일 할일 : 프로젝트 작업 분담 및 각 체인별 API 설계 및 호출 확인