트러블슈팅 - 인코딩과 디코딩

아이템을 누르면 해당 아이템의 정보를 보여주는 페이지로 이동시키는 페이지를 구현하던 중 트러블슈팅이 발생했다. champion 페이지 작성했던거를 참고해서 하면 된다고 생각했는데 뭔가 이상했다.

api 에서 넘겨준 데이터가 인코딩 형태였고 이를 디코딩 해야만 하는 상황이 발생했다. 새로운 메소드도 알게되어서 함께 정리해보려한다!

인코딩과 디코딩

In communications and information processing, code is a system of rules to convert information—such as a letter, word, sound, image, or gesture—into another form, sometimes shortened or secret, for communication through a communication channel or storage in a storage medium.

위키피디아에서 긁어온 내용이다. 간단하게 설명하면 아래와 같다.

• 인코딩 : 사람이 해석할 수 있는 데이터를 이진 형식 (binary format) 으로 변환하여 컴퓨터가 데이터를 처리하게 만든 형태 (데이터 압축)
• 디코딩 : 인코딩 된, 즉 이진형식의 데이터를 사람이 읽을 수 있도록 바꾼 형태

이처럼 인코딩과 디코딩은 데이터를 효율적으로 저장, 전송, 처리하는 역할을 한다.

트러블슈팅

01. 코드 보기👩🏻‍💻

처음에 작성한 코드는 이랬다. params 를 썼던게 기억나서 강의 들으면서 실습했던 코드를 참고해서 작성해주었다. params의 타입을 prop으로 받아주고 그걸 활용해서 동일한 name 값인 애들을 찾아서 아이템 정보를 받아오는 로직이다.

작성하고 브라우저를 열면 아무것도 보이지 않았고…😭 불현듯 champion 에서 받아오는 key 값이 id가 아니었던게 생각났다.

그래서 params 안에 어떤 데이터가 있는지 확인하기 위해 console.log를 추가해주었다.

터미널 확인하기 ✅

이건 서버 컴포넌트니까 터미널에서 확인! 했는데 이상한 외계어가 찍혀있었다.

사실 많이 보긴했는데 저렇게 생긴 주소? 형태?를 뭐라고 하는지 몰라서 (무식지송) 어떤 키워드로 검색을 해야하는지도 약간 당황했다.

개발자는 뭐다? 복붙이 필수다! 그래서 냅다 저 주소를 복사해서 구글에 검색했다.

검색하니까 역시 주르륵 떴고 인코딩 과 디코딩 이라는 키워드를 찾을 수 있었다.

또한 내가 params로 받은 데이터는 인코딩 형태이고 비교하려는 item의 name은 디코딩 된 형태여서 일치하는 값을 찾지 못한거다!

02. 인코딩 형태를 디코딩 시키기 🚧

그러면 이걸 어떻게 디코딩 시킬 수 있을까를 또 검색해봤다.

next.js decodding이라고 검색하니까 관련 github 주소가 떴고 decodeURIComponent() 메소드를 사용하면 쉽게 변환할 수 있다는 내용이었다.

decodeURIComponent() 메소드 사용하기

type ItemDetailProps = {
  params: { name: string };
};

export default async function ItemDetailPage({ params }: ItemDetailProps) {

// ✅ decodeURIComponent() 메소드 적용시키기!
  const decodedName = decodeURIComponent(params.name);

  const itemData = await fetchItemList();

  if (!itemData) {
    return <div>아이템 정보를 불러오는 중 오류가 발생했습니다.</div>;
  }

  const item = Object.values(itemData).find((i) => i.name === decodedName); // ✅ 변환한 값 변수로 담은거로 비교!

  if (!item) {
    return <div>아이템 정보를 불러오는 중 오류가 발생했습니다.</div>;
  }

03. 결과화면 확인 ✅

터미널 확인하기

너무나 원하던 데이터의 모습이 나와서… 과장보태서 눈물 좔좔 흘렀다.

브라우저에서도 모든 데이터가 잘 불러와졌다!

04. decodeURIComponent() 알아보기 🔍

우선 원하는 기능을 구현해서 다행이긴한데, 이 메소드를 사용해도 좋은건지 지양해야하는 함수인건지 고민이 되었다. 지양해야 한다면 추후 동일한 상황이 벌어질 것을 대비해 다른 방법을 찾아야한다고 생각했다.

다행히 MDN에 검색해보니 자바스크립트의 내장함수였고 튜터님께도 여쭤보았을 때 내장함수를 사용한 것이기 때문에 라이브러리 같은 걸 활용해서 변환한 것보다 훨씬 좋은 방법이고 써도 좋다는 답변을 받아서 안심되었다!

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent

---

메소드 하나로 이렇게 간단하게 변환이 가능하다니 너무 신기하고 재미있는 경험이었다. 두 번 작업하기 싫어서 코드 쓰기 전에 가이드 보면서 머리도 엄청 많이 굴려보고 뭐 하나 이해 안 되면 될 때까지 계속 파고드느라 시간이 꽤 걸리는 편인데 이렇게 하는게 맞나 조금 고민이 되는 요즘이다.

튜터님께 질문드리면서 직접 정리하신 글도 공유 받았는데 더 탄탄하게 인코딩, 디코딩에 대해 공부할 수 있었다. 나도 누군가에게 설명할 때 쉽게 이해할 수 있도록 설명할 수 있는 개발자가 되고 싶다.

---

참고링크

• https://onlydev.tistory.com/177
• https://brunch.co.kr/@simplebrunch/13