개념

"해시맵"은 재미있는 유행어입니다.

사용자 이름 대신 user_id와 함께 제공되는 주석을 사용하고 있던 API에서 문제가 발생했습니다. 이것은 내가 만든 API였으며 이를 수정하는 올바른 방법은 기본 API 가져오기가 돌려주는 것을 조정하는 것이었지만 시간이 부족했고 해시맵을 사용하여 빠른 솔루션을 만들 수 있었습니다.



"사용자 151에서"

내가 한 것은 React 앱의 앱 수준에서 모든 사용자에게 추가 가져오기를 한 번 수행하고 사용자 ID를 사용자 이름으로 교체하고 전달하기 위한 해시맵을 생성한 것입니다.

해시맵이란 무엇입니까?

해시맵은 종종 작은 사전과 같습니다. 출력이 무엇인지 알고 나면 함수를 여러 번 실행할 필요가 없도록 계산량이 많은 일부 함수의 출력을 객체에 저장하는 데 사용할 수 있습니다.

이 경우 user_id와 username을 연결하는 "사전"을 만들고 싶습니다. 따라서 다음과 같이 보일 것입니다.

hashmap = {
    id1: "user 1"
    id2: "user 2"
}

이제 코드에 user_id가 있는 곳마다 이를 다음으로 바꿀 수 있습니다.

hashmap[user_id]

사용자 이름 자체를 가져옵니다.

암호

다음은 Sinatra & Ruby 백엔드가 있는 React 앱에서 구현한 방법입니다.

해시 저장을 위한 상태 추가

const [ userHash, setUserHash ] = useState();

새 가져오기 추가...

useEffect(() => {
  fetch("http://localhost:9292/userhash")
  .then(resp => resp.json())
  .then(data => {setUserHash(data)});
 }, []);

애플리케이션 컨트롤러에서

get "/userhash" do
  userhash = {}
  User.all.map{|u| userhash[u.id] = u.username }
  userhash.to_json
end

이제 가져오기는 우리에게 돌려줍니다...

// 20221011094622
// http://localhost:9292/userhash

{
  "50": "DaddyCham",
  "51": "Mullet",
  "52": "Cass",
  "53": "bigsis"
}

🚨 USERHASH를 사용할 구성 요소에 전달 🚨

이제 우리가 예를 들어...

{comment.user_id}:}

우리는 그것을 다음으로 대체할 수 있습니다...

{userHash[comment.user_id]}:

그리고 우리는 올바르게 귀속된 코멘트를 얻습니다:



이것이 누군가를 돕기를 바랍니다!
-엘리엇/빅 시스