ネット漫画の好みテストを作成する(2)

次の記事は、漫画好きテスト結果ウィンドウでKakaoTalkを使用して共有ボタンを追加する過程を記録した記事です.

0.開始

Kakadibellopersのウェブサイトの内容に従ってやれば簡単だと思いますが、考えと行動は千差万別です.このサーバリースで実装されたプロジェクトでは、apiキーをどのように非表示にしますか?以前はapiキーを直接旗号にアップロードして警告メールを受け取った記憶が生き生きとしていて、目がくらくらします.

1.試行（問題）

Webページの手順に従って以下のように書きます.リンクに沿って歩いて、詳しく説明しました.

Kakao Dibellopersログイン後にアプリケーションを登録
https://developers.kakao.com/docs/latest/ko/getting-started/app

KakaoLink API/KakaoTalkメッセージAPIの選択
比較的簡単なKakaolink APIを使いました.

メールタイプ/構成方法/送信先の選択
(Kakao Dibellopers>ツール>情報テンプレート)パスに沿って入ると、事前にサンプル情報を送信できます.

apiを使うのはもともとフレンドリーで、問題ないように見えますが、鍵をどのように隠すかが問題です.「.envファイルに入れてgitinoreに入れればいい!」あなたが考えているように、npm i othanv、import othanv from「othanv」、othanv.config(). 問題は解決すると思います.
Uncaught SyntaxError: Cannot use import statement outside a module
このエラーを解消するために、パッケージ.jsonに「type」:「module」を入れる方法を見つけましたが、これは無駄です.
調べてみましたが、反応ソフトにあります.envを書く方法は本当に簡単です.この機会に、反応を学ぶために、1ヶ月以上前に反応を覚えて、反応Hook.vanillaJSで作成したアイテムをReactionに再作成してKakaoTalk共有機能に追加しましょう!これは計画で、時間がかかりましたが、作成しました.

2.反応の再生成（解決）

create-act-appで書き込みenv

dotnvを設定する必要もありません!srcフォルダの外(上部)にあります.envファイルを作成すればいいです.gitignoreでenvを入れて隠すと終わりです.
なお、反応アプリでAPIキーを使用する場合は、名前の前に「REACT APP」を付けなければならない.

//.env
REACT_APP_KAKAO_API_KEY=따옴표 없이 key 를 넣으면 됨!

他のファイルで鍵を使用する場合は、以下の形式でロードするだけです.

process.env.REACT_APP_KAKAO_API_KEY

Kakao Link APIの実装

Kaka DibellopersのWebサイトに私のアプリケーションを登録した後、KakaリンクAPIを使用してfeed形式のメッセージを選択しました.

public/index.htmlファイルヘッダに次のスクリプトを追加します.

    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

は、最初に実行されたファイル(ここではindex.js)に初期化コードを追加する.

window.Kakao.init(발급받은 API 키);

共有テンプレートロジックを転送するファイルを生成します.(ここではkakao.js)

共有ボタンから関数を呼び出します.

// result.jsx
import { shareKakao } from '../../kakao';

const Result = () => {
    return(
        // 중간 코드 생략
        <a onClick={shareKakao}>
            <Button text="카카오톡으로 공유하기"/>
        </a>
    );
}

export default Result;

3.結果画面

共有ボタンを押した時に共有するのは
受け取ったリンクは次のとおりです.

4.解決すべき問題

画像urlを指定しても画像は表示されません!パスの指定方法を解決したいです.

実際には、デフォルトのテンプレートではなくカスタムテンプレートを使用したいと思っています.ただし、重複するエラーは解決されず、実装されたデフォルトテンプレートが使用されています.メッセージテンプレートビルダーで必要なテンプレートを作成したらsendCustom()を使用できますが、エラーの原因はまだ分かりません.🥲

反応器を用いてすべての機能を実現したが、性能の改善が必要である.