내 React 애플리케이션 개선 "포스터"

클라이언트 측 라우팅을 특징으로 하는 React 애플리케이션을 만드는 일을 맡은 저는 일반적인 소셜 미디어 스타일의 뉴스 피드를 모방하고 싶었습니다. 열성적인 트위터 사용자라면 이것이 트위터의 형식에 크게 "영감을 받은"것을 볼 수 있을 것입니다.

내 목표(이 프로젝트의 제한 및 시간 제약 내에서)는 기본 로그인 및 게시 기능을 사용하는 것이었습니다. 따라서 추가할 수 있는 추가 기능에 대한 많은 가능성이 있습니다.

첫째, 현재 내 기술에 따라 추가할 수 있는 기능에 집중하고 싶었습니다. GET 및 POST만 사용해야 했기 때문에 PATCH 및 DELETE 요청을 사용하지 않기로 선택했습니다. 내 구성 요소 구조는 다음과 같습니다.

App
└───Login
or
├───NavBar
└───Home
    └───Post
├───Account
└───UserList

PATCH 및 DELETE 요청을 통합하는 간단한 방법은 각 개별 게시물의 버튼 및 삭제 버튼과 같습니다. 이 두 버튼을 내 Post 구성 요소에 넣을 것이므로 Post 구성 요소 내에서 이 두 요청을 코딩하는 것이 합리적이라고 생각합니다.

서버와 상호 작용하는 것 외에도 앱 및 홈 구성 요소에서 피드 상태 변수를 업데이트해야 합니다. Post Component의 현재 해체된 props를 고려했을 때:

Post에 피드와 setFeed를 소품으로 추가해야 합니다. 이렇게 하면 좋아요 수 또는 삭제 수와 같은 계정 페이지에 더 많은 통계를 추가할 수 있습니다.

현재 계정 페이지에는 많은 정보가 없지만 이 응용 프로그램에 실제 로그인, 암호, 이메일, 휴대폰 등이 필요한 경우 여기가 해당 위치입니다.

마지막으로 세 번째 구성 요소인 UserList는 사용자 이름 대신 게시물을 검색하도록 수정할 수 있습니다. 이것은 내 현재 UserList 구성 요소에 대한 코드입니다.



앱에서 피드 변수를 가져와 중복되지 않은 사용자 이름 배열을 가져오는 데 사용합니다. 사용자 이름 대신 게시물을 검색하도록 전환할 수도 있습니다.

if 문에서 조건문을 전환하기만 하면 게시물의 텍스트를 확인할 수 있습니다(원래 했던 방식이 더 쉬워졌습니다).

const matchingPosts = feed.map((post)=> {
        if (post.text.includes(search)) {
            return <li key={post.id}>{post.text}</li>
        }
    })

또한 Post 구성 요소를 반환할 수 있으며 실제 애플리케이션처럼 보일 수 있습니다. 사용자 이름 또는 게시물 콘텐츠로 필터링하기 위한 토글이 있을 수 있습니다. CSS는 약간의 작업을 사용할 수 있습니다. 많은 옵션.

여전히 무한한 가능성이 있지만 지금은 그 위치에 만족한다고 생각합니다.