KODA 링크 페이지 구현

 

 

  

👆 링크 페이지 구현 움짤

 

 

KODA

 

 

 

총 4명이서 구성된 Team Koda ( FE : 2, BE : 2 ) 제작

그 중 맡았던 링크 페이지(FE)를 기록합니다

 

링크 페이지 (FE) 편

 

 

 

---

 

구현한 기능

 

 

• 메인 페이지에서 받았던 url 보여주기, 복사 기능

 

---

 

 

👆 구현한 코드 (mainPage, linkPage)

 

 

 

 

링크 페이지는 따로 fetch를 쓰지 않고 메인 페이지에서 받은 id 값과 해당 url 데이터 값을 그대로 가져와 썼다.

이는 최대한 fetch를 줄이자는 백엔드 팀원의 의견이었는데 한 페이지당 무조건 데이터 받아오는 fetch가 있어야한다는 생각이 박혀있었던 터라 매우 흥미롭게 들렸고 회의 후 이런 코드가 나왔다.

 

Link to 로 state 에 담아 객체로 Link 와 해당 타이틀(name)을 그대로 넘겼고

Link 페이지에선 Location을 써 해당 타이틀과 링크를 가져왔다

 

 

 

 

그리고 복사 기능 관련해서는 비동기적으로 작동하며 promise 객체를 반환하는 클립보드 API를 사용했다.

먼저 url 를 받는 input에 vaule를 주며 readOnly 속성을 주었고

이 값을 클립보드에 복사하기 위해 버튼에 onClick 이벤트를 걸며 해당 함수를 사용해 간단하게 구현했는데

 

잘 돌아가던 복사 기능이 프로젝트 막바지, 도커 배포 후 '복사 실패!' 가 나오는 에러를 겪었다 🥲

그 이유는 홈페이지에서 확인할 수 있었는데

 

 

 

 

클립보드에 저장하는 특성상 https 보다 보안이 떨어지는 http 는 엑세스 권한이 없던 것 🥲

실사용하기 위해 https 사이트가 된다면 기능은 충분히 돌아가겠지만 이를 자세히 알아보지 못하고 구현했다는 아쉬움이 아주 크게 남았다.

공식 문서를 잘 살펴보고 기능을 구현해야겠다는 교훈을 얻었던 작업이었다 😂

 

 

 

 

 

 

[출처] https://developer.mozilla.org/ko/docs/Web/API/Clipboard_API

[출처] https://developer.mozilla.org/ko/docs/Web/API/Clipboard

 

 

 

---

 

 

 

 

 

👇 KODA Project 회고록 링크

 

https://0119eunji.tistory.com/57?category=1055529 

KODA Project 회고록 및 위코드 수료 회고록