[JS] Json 데이터에서 key, value 다 가져오기

skills 항목과 이를 설명하는 skillDescription 항목을 따로 만들어 관리하는 데이터가 있다.

각각 따로 map()으로 출력하여도 문제는 없지만
skills를 key로 사용하고
skillDescription을 value로 사용하여 전부 출력하는 형식으로 바꾸고자 한다.

1. 우선 skills를 json 형태로 다시 바꿔준다. value는 배열이 들어가있다.
   

2. Object.keys()를 이용하면 key 전체를 배열로 반환합니다.
   배열로 변환되었으니 map()을 이용해 가져오고
   value는 key값을 이용해 가져온다.
   

※ 위 코드에서 key는 String으로 반환됩니다.
때문에 점 표기법을 사용하여 data.skills.key 형태로 사용하게 되면
data.skills.'JSP'로 사용하는 셈이니 오류가 발생한다.

Json 데이터의 올바른 접근법
1. 점 표기법 : data.skills.JSP
2. 대괄호 표기법 : data.skills['JSP']

---

key만 전부 가져오려고 할 때에는 Object.key()를 사용하는게 좋지만
위와 같이 key, value를 모두 가져오려고 할 때에는 Object.entries()를 사용하는 것이 더 좋습니다.

{Object.entries(data.skills).map(([key, vals])=>(
  <>
    <div>
      {key}
    </div>
    <ul>
      {vals.map((val)=>(
        <li>
          {val}
      	</li>
      ))}
    </ul>
  </>
))}