내 맘대로 적는 일기[TIL]-67

오늘은 input form을 추가로 작성하고, url 복사 기능, pdf 다운로드 기능(라이브러리 활용) 작성하였습니다.

url copy

input form의 경우 항상 작성하던 것을 작성하였지만, url 다운로드의 경우 처음 작성하는 로직이라 검색해서 작성하였습니다.

검색해서 알아본 기준으로는 생각보다 간단히 작성할 수 있었서 많이 놀랐던 거 같습니다.

export const onClickCopyClipBoardHandler = async (text: string) => {
    try {
        await navigator.clipboard.writeText(text);
        alert("클립보드에 링크가 복사되었어요.");
    } catch (err) {
        console.log(err);
    }
};

위의 함수를 사용해서 text안에 링크를 집어넣으면 그게 복사가 되는 형식으로 사용하였습니다. text가 string이니 다른 문장도 사용할 수 있을꺼 같습니다.

url 복사를 작성하면서 처음 접한 navigator.clipboard.writeText 내용인거 같습니다.

이거를 활용하면 생각보다 간단히 클립보드와 관련된 것을 구현할 수 있다는 것을 알게되었습니다.

pdf 다운로드

pdf 다운로드의 경우 react-to-pdf라는 라이브러리를 사용하여 구현하였는데 ref로 범위를 지정해서 다운로드가 구현되게 됩니다.
그래서 렌더링이 안 되어있는 컴포넌트를 타켓으로 잡으면 타겟이 없다면서 다운로드가 되지 않습니다.

그래서 타겟으로 잡을거를 div로 감싼 다음에 opacity(투명도)를 0%로 해서 안보이게 하는 식으로 해결하였습니다.