깊은 끝으로 뛰어들기

오픈소스에 대한 세 번째 기여로 저는 투자 포트폴리오 관리 제품군인 ghostfolio 프로젝트에 참여했습니다.

고스트 폴리오 / 고스트 폴리오

오픈 소스 자산 관리 소프트웨어. 각도 NestJS Prisma Nx TypeScript?

고스트폴리오

오픈 소스 자산 관리 소프트웨어

Ghostfol.io | 라이브 데모 | 고스트폴리오 프리미엄 | FAQ | 블로그 | 슬랙 | 엑스

Ghostfolio는 웹 기술로 구축된 오픈소스 자산관리 소프트웨어입니다. 이 애플리케이션은 바쁜 사람들이 주식, ETF 또는 암호화폐를 추적하고 데이터 기반의 확고한 투자 결정을 내릴 수 있도록 지원합니다. 이 소프트웨어는 지속적인 작업에서 개인용으로 설계되었습니다.

고스트폴리오 프리미엄

공식 Ghostfolio Premium 클라우드 서비스는 시작하는 가장 쉬운 방법입니다. 시간이 절약되므로 이는 대부분의 사람들에게 최선의 선택이 될 것입니다. 수익은 호스팅 인프라 비용을 충당하고 지속적인 개발 자금을 조달하는 데 사용됩니다.

자체 인프라에서 Ghostfolio를 실행하려는 경우 자체 호스팅 섹션에서 추가 지침을 찾아보세요.

왜 Ghostfolio인가요?

Ghostfolio는 당신을 위한 것입니다...

• ? 여러 플랫폼에서 주식, ETF 또는 암호화폐 거래
• ? Buy & Hold 추구…

GitHub에서 보기

[특징] 트리맵 차트 컴포넌트에 툴팁 설정 #3808

dtslvr 게시일: 2024년 9월 22일

이번 호의 목표는 Chart.js를 기반으로 하는 트리맵 차트 구성 요소에 툴팁을 설정하는 것입니다.

• [baseCurrency]="user?.settings?.baseCurrency"를 에 전달합니다. home-holdings.html에서
• 도구 설명에는 사용자 통화(baseCurrency)와 함께 가능한 경우 보유 자산의 valueInBaseCurrency가 표시되어야 합니다.
• 스타일에 getTooltipOptions()를 사용해 보세요

GitHub에서 보기

GitHub에서 작업할 공개 이슈를 찾다가 이 이슈를 발견했습니다. 나는 이번에는 내 게임을 한 단계 더 발전시키고 기능을 작업하고 싶었기 때문에 이것이 좋은 문제가 될 것이라고 판단하고 작업해 보았습니다. 별로 알아보지도 않고 가입했어요. 나중에 보니 Angular 문제라는 것을 알게 되었고, Angular를 배우는 것에 대한 호기심이 생겨서 더욱 관심을 갖게 되었습니다.

등록했지만 학교 과제와 생활에 방해가 되어 한동안 작업을 할 수 없었습니다. 일주일이 지나고 일을 시작해야겠다고 결심하고 기여 문서를 읽기 시작했고 그들이 Docker를 사용하는 것을 보았습니다. 저는 "완벽해요. 이번 주에 다른 강좌에서 Docker를 가르치니까 이제 준비됐어요"라고 생각했습니다. 저장소를 포크하고 복제하고 종속성 설치를 시도했지만 즉시 문제가 발생했습니다. 이는 피어 종속성 충돌과 관련된 것입니다. 지침을 따랐는데도 앱이 시작되지 않습니다. 이 때문에 일주일 동안 작업하는 것이 겁이 났습니다.

다시 시도했을 때 포크를 다시 복제하여 이번에 빌드할 앱을 얻었지만 시작하기도 전에 일부 테스트가 실패했습니다. 나는 프로젝트의 Slack에 연락하여 그것이 내 쪽인지 물어보려고 생각했고, 관리자는 CI의 빌드가 통과되고 있다고 응답했습니다. 또 한번 겁이 나서 프로젝트를 진행하지 못했어요.

결국 관리자가 문제에 대해 업데이트를 요청하는 댓글을 남겼습니다. 더 이상 미룰 수 없다고 판단하고 이 문제를 해결하기 위해 좋은 시간을 보낼 준비를 했습니다.

업스트림에서 변경 사항을 가져오고 포크를 다시 복제했지만 테스트는 여전히 실패했습니다. 앱을 시작할 때 서버에서 일부 가져오기가 실패했다는 경고를 기록했기 때문에 이를 조사해 보기로 결정했습니다. 해당 프로젝트에서는 Nx라는 모노레포 관리 기술을 사용했는데, 해당 이슈가 관련이 있는 것 같아서, 무슨 일인지 잠시 살펴보았습니다. 그들은 또한 Storybook이라는 것을 사용했는데, 기여 문서에서 시작하는 방법을 언급했지만 그것이 무엇인지 설명하는 데는 신경 쓰지 않았습니다. 확인해 보니 컴포넌트를 별도로 렌더링하여 개발하기 위한 것이었습니다. Storybook을 시작했을 때 작동하지 않고 가져오기 오류가 발생했습니다. 가져오기 문제를 디버깅하는 데 시간이 좀 걸렸지만 문제를 처리하지 않고도 문제를 해결할 수 있다는 것을 깨달았기 때문에 무시하기로 결정하고 작업에 착수했습니다.

제가 무엇을 해야 하는지, 문제의 범위가 무엇인지 파악하는 데 시간이 좀 걸렸습니다. 원래 문제는 "좋은 첫 번째 문제"라는 라벨이 붙어 있음에도 불구하고 돌이켜 보면 상당히 비밀스러웠습니다. 나는 좋은 첫 번째 이슈를 만드는 것에 대해 프로젝트마다 아이디어가 다르다고 생각합니다. 작업할 구성 요소를 찾기 위해 파일을 살펴보는 것부터 시작했습니다.

작업해야 할 차트 구성 요소를 UI에서 찾아보았지만 상위 구성 요소에는 표시되지 않았습니다. 관리자에게 물어보는 댓글을 남겼는데 바로 알아냈습니다. 차트 구성 요소와 상위 구성 요소에서 몇 가지 초기화 기능을 보았기 때문에 그 안에 console.log(this)를 작성하여 작업 중인 내용을 확인했는데, 그때 차트 구성 요소가 렌더링되지도 않는다는 것을 깨달았습니다. 클라이언트의 설정을 뒤져 실험적인 기능 토글을 찾았는데, 구성 요소의 HTML 템플릿을 보고 조건문 뒤에 숨겨져 있다는 사실을 확인하여 알아냈습니다.

내가 하고 있는 일을 실제로 보니 일이 좀 더 쉬워졌습니다. 프로젝트에서는 차트에 Chart.js를 사용했기 때문에 툴팁이 어떻게 작동하는지 확인하기 위해 해당 문서로 이동했습니다. 툴팁 전용 도우미 기능이 있었기 때문에 "좋아, 앱의 다른 차트에서 툴팁을 어떻게 사용하는지 살펴보자"라고 생각했습니다. 저는 툴팁을 사용하는 몇 가지 다른 구성 요소를 살펴보고 제가 작업 중인 구성 요소와 공통점이 무엇인지, 즉 구성 옵션을 툴팁에 전달하는 방법 등을 살펴보기 시작했습니다. 나는 그들이 다른 구성 요소에 툴팁을 설정하고 이를 복제하려고 시도한 방법을 기록했으며 작동했습니다! 작동하는 툴팁이 있었습니다! 2주 후! ...아직도 올바른 데이터가 표시되지 않았습니다! 하지만 그럼에도 불구하고 그것은 진전이었습니다! 갑자기 문제가 훨씬 더 실행 가능해 보였습니다. 방대한 모노레포에 겁을 먹기보다는 정확히 작업해야 할 부분에 집중할 수 있었고 걱정할 필요는 그것뿐이었습니다.

툴팁에 데이터를 전달하는 방법을 찾으려고 좀 더 애썼습니다. 제가 복사하고 있던 구성 요소가 어떻게 데이터를 도구 설명에 전달했는지 자세히 살펴본 후, 제가 작업 중인 구성 요소에서는 작동하지 않는다는 것을 깨달았습니다. 그것은 나와 다른 방식으로 데이터를 수신하고 처리했는데, 내 구성 요소가 libs/ui/src/lib에 있는 동안 그것이 apps/client/src/app/comComponents/에 있다는 것을 알았을 때 깨달았습니다. 모노레포의 전혀 다른 부분에 있는 컴포넌트가 다르게 작동하도록 설계되었을 수도 있다고 생각하여 툴팁을 사용하는 다른 컴포넌트를 검색했는데 운 좋게도 내 컴포넌트와 같은 디렉토리에 있는 컴포넌트를 발견했습니다.

처음에는 도구 설명을 구성하기 위해 추가한 함수의 매개변수에 대해 유형 안전성을 꺼야 했습니다. 옵션을 가져오던 개체에 액세스해야 했지만 유형에 대해 정의되지 않은 속성이 있었기 때문입니다. 나는 이에 대해 관리자에게 물어보려고 했지만 내 것과 더 가깝게 작동하는 구성 요소를 찾았을 때 매개 변수가 전혀 필요하지 않다는 것을 깨달았습니다. 매개변수를 정의하는 대신 툴팁 객체의 라벨 콜백 함수에 자동으로 전달되는 컨텍스트 객체를 사용했기 때문에 저도 같은 작업을 수행했습니다. 더 이상 매개변수가 필요하지 않음에도 불구하고 매개변수를 제거하려고 하면 다른 구성 옵션이 정의되지 않는 문제가 발생했습니다. 처음에는 무슨 일이 일어나고 있는지 확신하지 못했지만 잠시 후에 작동하기 시작했기 때문에 컴파일러가 내 변경 사항보다 뒤처진 것 같습니다. (파일을 저장하는 것을 잊어버렸을까요?)

그래서 필요한 데이터를 툴팁에 넣을 수 있었지만 그래도 포맷을 해야 했습니다. 나는 다른 구성 요소가 어떻게 작동하는지 다시 한 번 살펴보았습니다. 컨텍스트 객체의 값을 Number.toLocaleString()으로 전달하고 그 결과가 툴팁에 렌더링되었으므로 동일한 작업을 수행했는데 보기 좋고 깔끔하게 나오므로 PR이 준비되었습니다.

트리맵 차트 구성 요소의 기능/도구 설명 설정 #3897

우데이-라나 게시일: 2024년 10월 9일

수정 #3808.

portfolio-proportion-chart.comComponent.ts의 도구 설명을 기반으로 구현했습니다. 변경하고 싶은 사항이 있으면 알려주시기 바랍니다.

GitHub에서 보기

PR을 검토할 준비가 되었다고 표시하고 일부 형식 변경에 대한 피드백을 받았습니다. 모든 것이 하나로 합쳐졌기 때문에 코드에서 더 많은 줄 바꿈을 사용해야 한다는 사실이 밝혀졌습니다. 관리자가 이를 지적한 후에야 이 사실을 알게 되었습니다.

요청한 변경사항을 적용했지만 며칠 동안 답변을 받지 못해 불안했습니다. 다행히 관리자가 결국 나에게 연락해 변경 사항을 병합했습니다.

더 좋은 점은 관리자가 툴팁에 더 많은 데이터를 추가하기 위해 작업할 수 있는 후속 문제가 있다고 말했습니다. 이제 프로젝트가 어떻게 설정되었는지 알았고, Angular와 Chart.js의 툴팁에 대해 조금 더 알게 되었기 때문에 이 문제는 첫 번째 문제에 비해 훨씬 쉬워 보였습니다. 물론 이 문제는 한 시간 정도 밖에 걸리지 않았으며 검토 후에 해당 문제도 병합되었습니다.

[기능] 트리맵 차트 구성요소의 툴팁을 이름으로 확장 #3904

dtslvr 게시일: 2024년 10월 10일

이 문제의 목표는 이름(또는 대체 기호)을 추가하여 트리맵 차트 구성 요소의 도구 설명을 확장하는 것입니다.

return [
  // `${name ?? symbol}`,
  // value or percentage as before
];

GfPortfolioProportionChartComponent에서 영감을 얻으세요.

GitHub에서 보기

이름별 트리맵 차트 구성 요소의 기능/도구 설명 확장 #3907

우데이-라나 게시일: 2024년 10월 10일

수정 #3904.

이 PR은 GfTreemapChartComponent의 도구 설명 레이블에 이름(및 대체 기호)을 추가합니다.

원하는 경우 이름/기호를 툴팁 제목으로 표시할 수도 있지만 GfPortfolioProportionChartComponent가 이를 라벨에 넣기 때문에 일관성을 유지하기로 결정했습니다.

GitHub에서 보기

이 문제를 해결하면서 알 수 없는 코드에 뛰어들 때 자신감이 크게 높아졌습니다. 처음에는 엄청나게 스트레스를 받았지만 실제로 해야 할 일에 집중하고 나니 Angular나 Nx, Chart.js에 대한 지식이 전혀 없는 상태에서도 작업을 수행할 수 있었습니다.

이번 포스팅은 여기까지입니다. Hacktoberfest를 위해 작업해야 할 끌어오기 요청이 하나 더 있으니 곧 다른 블로그 게시물을 볼 수 있을 것으로 기대하세요!

위 내용은 깊은 끝으로 뛰어들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!