Angular의 dev-to 복제에 대한 업데이트 - 8월 27일

제안을 제공하여 이러한 업데이트를 개선할 수 있도록 도와주세요.

Github 레포 - https://github.com/ajitsinghkaler/devto-clone

Firebase에 배포됨 - https://dev-toclone.firebaseapp.com/

지난 주에 상세 페이지 기사 섹션과 기본 댓글 섹션을 마쳤습니다.


이번 주에 전체 댓글 섹션을 추가했습니다. dev.to UI를 구축하면서 가장 복잡한 작업 중 하나였습니다. 주석 구조는 렌더링하기가 약간 복잡합니다. 주석은 다시 주석을 포함할 수 있는 children이라는 키를 포함하므로 구조와 같은 트리와 같았습니다.

├── comment
│   ├── comment ─── comment
│   │   └── comment
│   ├── comment
│   ├── comment ─── comment ─── comment
│   │   └── comment ─── comment ─── comment
│   └── comment
├── comments
│   ├── comment ─── comment
│   │   └── comment 
│   └── comment 
├──── comment
│   ├── comment
│   └── comment
└──── comments

무한 트리를 렌더링하는 방법. 그런 다음 주석 구성 요소에서 주석 구성 요소를 호출했습니다. 전체 구성 요소 트리를 렌더링하는 시나리오와 같은 재귀를 생성합니다. 이에 대한 자세한 내용은 여기article에 작성했습니다.

도 추가했습니다
커밋 메시지를 쉽게 읽을 수 있도록 린트를 리포지토리에 커밋합니다. 나는 그것에 대해 감사합니다.

첫 라이브 스트림

나는 또한 앱을 angular-cli에서 NxDevTools로 이동하면서 첫 번째 라이브 스트림을 했습니다. 우리는 스트림에서 기본 사항을 수행했으며 프로젝트를 이동하는 방법을 알고 싶다면 왜 Nx인지에 대한 많은 질문을 검토했습니다. Nx를 통해 팔로우해주세요.
라이브 스트림을 통해 전체 dev.to 클론을 Nx로 마이그레이션할 것입니다. 첫 강연이라 조금 긴장했지만 Santosh 덕분에 마음이 놓였습니다. 감사합니다.

이것이 바로 지금 우리가 있는 곳입니다.


다음 주에 저는 팟캐스트 페이지 작업을 시작할 것입니다.

문제

Create a 404 page

Comments section css is a bit off

Add number of child comments in comments section

커밋

Commit lint

Basic comments

Comments section completed