19)なぜ写真ファイルがアドレスとしてロードされるのでしょうか.🧐 cloud storage service、イメージの流れを理解し、投稿に私の写真を登録します!(map中のmap、reduce、固定データオブジェクトを使用して、)Code-Camp FE 6


Somenelは先輩基数のプロジェクト発表を熱心に聞いているMergina^^*
私はずっと**コカムに感謝しています.彼はいろいろなことに触れることができて、勉強に努力しています.**
  • 今日のダイジェスト(今日を過ぎるとお酒が読めます!)
    今日は画像登録レッスンを勉強しました!
    コアコンセプトは覚えていますか?実際の画像を格納する場所はリポジトリです!
    データベースは実際のイメージファイルではなく、アクセスが許可されたurlを格納します.すなわち、フロントエンドがイメージの登録を要求すると、実際のイメージはアレイに格納されurlに戻ります.backではfrontに画像のアドレス値(url)を与え、そのアドレス値に対応する画像をクエリーできます!
    ブラウザでWebサイトにアクセスすると、画像、フォント以外のhtml、css、javascriptファイルが先に届くと言っていましたよね?
    その後、htmlのurl(画像やフォントなど)を要求する方法!そうでなければ、多くの写真のサイトがすべての写真をダウンロードする前に空白の画面しか見えず、効率が低下します!
    また、ファイルの拡張子やサイズなど、指定した条件に合わないファイルをアップロードしないように、イメージファイルの検証プロセスも理解しました.アップロード時にも検証が行われ、より安全なロジックが作成されました.
    以前使用したuserefを使用してinputラベルを非表示にし、作成したボタンを使用して非表示の醜いinputラベルにアクセスします.
  • -ポートフォリオのコメント

  • Firebase掲示板はバックエンド06などのapiがない場合、フロントが自分で作ったものです!!一人で小さなプロジェクトやPopoleをするとき!Firebase(データベース作成用)を使用できます.
  • 招待状は登録して、照会して削除してすべてできます!
  • はFirebaseとして実際に配備されているプログラムも多いですが、様々なセキュリティルールが増えてきており、ソースコード公開の問題で最初からFirebaseにはなりません!小さなプロジェクトやポールを作りましょう.

  • 私たちが音楽を送信するときはとても複雑ですが、1つの形式では登録完了の柔軟な形式です!気軽に作れます!
  • mapにデータを送信する場合、npm上のuuidライブラリを使用できます!(primeキーidを自動的に生成します!)
    -糸install uuid、糸add--dev@types/uuidを使用してmapに適用する様子!
  • firebaseを導入して、効果で書いた部分をよく見て、私もPopoleでやってみました!
  • -イメージプロセスの理解

  • 画像はどのようにdbに入りますか?
    実際の画像は別のコンピュータに保存されます!
    画像をダウンロードできるアドレスを追加すると...!すぐに展示形式を持ってきます.
  • クラウドプロバイダ?-aws(アマゾンWebサービス)、gcp(Googleプラットフォーム)、azure...クラウドプログラマーと呼ばれています!
    簡単に言えば、写真や大きなファイルを格納したパソコンを借りる場所です!
    -cloud storageservice<-接続されている多くのコンピュータの名前!
  • ブラウザページでinputtype=fileをクリックすると、ファイルを選択するウィンドウが表示されます!ファイルという名前のオブジェクトをstateに保存したり、変数として保存したり、バックエンドapiがstorageにファイルを保存したりすることで、storageはバックエンドでダウンロードファイルのアドレスをフロントエンドに渡すことができます.
  • ファイルのみを渡したくない場合、createboardに同時に送信したい場合は、画像アドレスをwriter title contents画像アドレスに一緒に渡す必要があります.

  • の実際の画像をデータに入れるには、blob、clobというタイプです.
    -blob:0と1からなるデータ(写真は0と1からなる)
    (バイナリオブジェクト)(写真はテキストと違って本当に大きい)
    だから実際には保存しないで、アドレスをロードする方法を使います!
  • -イメージ実習


    ファイルのインデックスをアップロードします.tsxを作ってください.
    糸add apollo-upload-client受信画像ファイルアップロード
    <<今音楽を作る過程で、元斗先生のように、順番に整理したり、見たり、写したりしなくても、出てきます!>
  • app.tsxではアポロクライアントにインストールするだけでなく、createuploadlinkをuploadlinkに掛けて掛ける...!保存するapiに住所を書けばいい!

    Popolに適用するときはちゃんと設定しておきましょう.
    コンピュータに説明して、リンクをアップロードすることによって、apolloclientを使ってリンクから画像をロードします!

    ここで見たように、メモリに保存してアドレスをもらいました.でも住所ってちょっと変ですよね?
    前はGoogleクラウドストレージに保存されているので、検索するにはアドレスを貼り付ける必要があります.
    src={ https://storage.googleapis.com/${imageUrl} }
    だから私が作成したimageUrlリンクの前にアドレスを貼ります!Baekticと$は今よく知っていますよね?
    いろいろ検証できますが.
    あなたがやりたいことをここに置いて、検証がなければ、車に戻ってもいいです.

    ファイルにサイズがない場合、ファイルはありません.
    条件はファイルが大きすぎて、ファイルが大きすぎることです.

    blobファイルが大きい場合は、テキストとして指定し、挿入する部分...よくわからないけど?各サイズはバイトで、1つの1024と1つのギガビットはギガビットバイトです.

    次にカーソルを掛ける部分の条件はsrcに置かれますが、jsxファイルは作成されませんのでtsとして作成します.

    しかし、別途削除した条件が返されると、検証した関数が終了し、アップロードが終了するので、削除したファイルで条件が一致しなければfalseが一致しなければtrueを打つことはできません.
    オリジナルのisvalidがfalseの場合は、元のisvalidを終了させることもできます.
  • - useRef


    特定のタグの役割を選択し、指定します.ラベルを含める!
    画像タグを特定の変数に配置し、きれいなボックスとしてonclickを掛けます.
    変数に入れるクリックすればいい
    当時の変数.フォーカスみたい!
    const fileRef = useRef<HTMLInputElement>(null)
    彼にやらせる.
    ボタンの関数
    const onClickImage = ()=> {
          fileRef.current?.click();}
    クリックするとFileRefをクリック
    ラベルのref={fileref}を入力します.

    実験画面
    画像タグのアドレスを送ってIDで検索すると
    住所がわかったら、後でinputラベルでimage[0]...インデックス値で地球のアドレスを前に付けて保存すればいいです.
    私たちのバックエンドは現在、グーグルのストレージに入れるように開発されているので、何の指示も必要ありません.グーグルのアドレスとファイル名を追加すれば、自動的にロードできます.
    userefを書く理由は、ボックスをクリックすると自動的にボックスのファイルをボックスに入れてクリックするためです

    -2日間のアルゴリズムの授業~


    <<世俊先生のいつも頭のいいアルゴリズムの授業が昨日なくなりました.残念ですね.
    昨日は思いもよらずチームに入ってその状態で止まっていましたさらに今日2016年の曜日計算の問題はコードがほぼ100行^^~曜日で書き終わったことです
    今日も集中!今日とても嬉しかった勢俊サムはとても丁寧で惹かれる口調で、ああ.聞こえますか?>>
    
    1. 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 
     같은 열의 값을 서로 더한 결과가 됩니다. 
     2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.
    arr1	            arr2         	        return
    [[1,2],[2,3]]	  [[3,4],[5,6]]	       [[4,6],[7,9]]
    [[1],[2]]	     [[3],[4]]	                [[4],[6]]
    
    **내가 풀다가 못푼 풀이..**
    function solution(arr1, arr2) {
       var answer = [];
       let result = [];
       for(i=0; i<arr1.length; i++){
           for(l=0; l<arr1[i].length; l++){
              // result[]= (arr1[i][l]+arr2[i][l])
               result[i,l] = (arr1[i][l]+arr2[i][l])
           }
           
         console.log([result])
       
       }
       
    }
    
    **세준쌤의 정석풀이1**
    function solution(arr1, arr2) {
       const answer = [[]];
    //     이중배열로 받아온다는 뜻
       for(let i = 0; i< arr1.length; i++){
           for(l=0; l<arr1[i].length; l++){
               // console.log(arr1[i],arr1[i][l],i,l,arr2[i],arr2[i][l])
    //             찍어서 확인하는 습관들이기 
               const sum = arr1[i][l] + arr2[i][l]
               // console.log(sum) 4,6,7,9 가 나옴 
               if(answer[i] === undefined){
                   answer[i] = [];
               }
               answer[i][l] = sum
           }
       
       } return answer 
       
    }
    私が入れるアレイのアレイがなければ、エラーが発生します!(冗長アレイで)

    したがって、条件が空の配列である場合、動的に配列を追加して配列を増やす方法!
    ちょっとわかりにくい
    2番目の解...
    驚愕の地図の地図を加えて...座っているジャガイモが聞こえました...
    中の結果は並んでいて、そして答えは並んでいたので二重に並んでいました
    mapを利用して配列に戻ります!

    2016年の何曜日に知った私の驚愕の44行草!^^
    開発者の草とは言えません~(誰かが見ているなら笑わないでください)
    答えだけを答える草...
    function solution(a, b) {
        if(a === 1||a === 4|| a ===7){
            if(b%7 === 0){return "THU"} else if(b%7 === 1){
            return "FRI"} else if (b%7 ===2){ return "SAT"}
            else if(b%7 ===3){return "SUN"} else if(b%7 === 4){return "MON"}
            else if(b%7 === 5){return "TUE"}else if(b%7 ===6){ return "WED"}
                }
        if(a === 2||a === 8){
            if(b%7 === 0){return "SUN"} else if(b%7 === 1){
            return "MON"} else if (b%7 ===2){ return "TUE"}
            else if(b%7 ===3){return "WED"} else if(b%7 === 4){return "THU"}
            else if(b%7 === 5){return "FRI"}else if(b%7 ===6){ return "SAT"}
                }
        if(a === 3||a === 11){
            if(b%7 === 0){return "MON"} else if(b%7 === 1){
            return "TUE"} else if (b%7 ===2){ return "WED"}
            else if(b%7 ===3){return "THU"} else if(b%7 === 4){return "FRI"}
            else if(b%7 === 5){return "SAT"}else if(b%7 ===6){ return "SUN"}
                }
        if(a === 9||a === 12){
            if(b%7 === 0){return "WED"} else if(b%7 === 1){
            return "THU"} else if (b%7 ===2){ return "FRI"}
            else if(b%7 ===3){return "SAT"} else if(b%7 === 4){return "SUN"}
            else if(b%7 === 5){return "MON"}else if(b%7 ===6){ return "TUE"}
                }
        if(a === 5){
            if(b%7 === 0){return "SAT"} else if(b%7 === 1){
            return "SUN"} else if (b%7 ===2){ return "MON"}
            else if(b%7 ===3){return "TUE"} else if(b%7 === 4){return "WED"}
            else if(b%7 === 5){return "THU"}else if(b%7 ===6){ return "FRI"}
                }
        if(a === 6){
            if(b%7 === 0){return "TUE"} else if(b%7 === 1){
            return "WED"} else if (b%7 ===2){ return "THU"}
            else if(b%7 ===3){return "FRI"} else if(b%7 === 4){return "SAT"}
            else if(b%7 === 5){return "SUN"}else if(b%7 ===6){ return "MON"}
                }
         if(a === 10){
            if(b%7 === 0){return "FRI"} else if(b%7 === 1){
            return "SAT"} else if (b%7 ===2){ return "SUN"}
            else if(b%7 ===3){return "MON"} else if(b%7 === 4){return "TUE"}
            else if(b%7 === 5){return "WED"}else if(b%7 ===6){ return "THU"}
                }
            }
     <br>
    세준쌤의 정석풀이를 봐보쟈
    1. 고정되어있는 데이터를 먼저 볼것, 
    2. 나머지 (반복되는 값)으로 해당 데이터를 접근  
    const month = {
        1 : 31,
        2 : 29,
        3 : 31,
        4 : 30,
        5 : 31,
        6 : 30,
        7 : 31,
        8 : 31,
        9 : 30,
        10 : 31,
        11 : 30,
        12 : 31
    }
    const week = ["FRI","SAT","SUN","MON","TUE","WED","THU"]
    function solution(a,b){
        let answer = 0;
        for(let i =1; i <a; i++){
            answer += month[i] 
            // 5월이라 가정했을때 4월까지의 날짜를 다 더해주는 느낌
        }
        answer += b - 1
    //     당일을 제외한 날을 빼줘야 흘러준 값을 계산할수 있다 
    //     Week의 인덱스 값으로 7나눈 나머지를 접근한다
        return week[answer%7]
    }```

    この気性を利用して発散したのです!
    そしてreduceを使って解決する方法
    a月b日まで何日を過ぎて、求めたのは同じです
  • dateオブジェクトについて...!
    new Date()は、objectの後ろに入ったデータを新しいオブジェクトにする演算子です...!
    Date()は、文字列
  • です.
    getFullYear()
    getMonth()+1
    getDate()
    文字型では使いにくいので、日付型メソッドを使用する場合は新しい演算子を使用します.
    getDay()-日曜日から何日か経った文法を教えてくれます
    だから私たちは彼に日曜日を基準にした手配をして、それからデートを書いて彼に頼みましょう.