茶屋クローンコード-2


茶屋


Inputのデフォルトをクリア


前述したように、値を入力しなくても0が含まれます.
0を入力するのは、1つの平と1平方メートルを入力するときに互いに変換しなければならないからです.
// useEffect로 값을 불러오면 최초 state 생성때 한번 값을 불러오기 때문에 input value가 처음부터 0으로 설정되어있음 -> 0도 없애고 싶었음
// 그래서 useEffect는 사용하기를 포기...
useEffect(() => {
  if (!pyeongInput.current.value) {
    pyeongInput.current.value = "1";
  } else {
    pyeongInput.current.value = m_square / 3.306;
  }
}, [m_square]);

useEffect(() => {
  mSquareInput.current.value = pyeong * 3.306;
}, [pyeong]);
// input 값이 변할때마다 함수를 불러오기로 함.
// input 값을 지웠을때는 또 0으로 설정이 되기때문에 강제로 "" 빈칸으로 되도록 조건 분기함.
const calcPyeong = (value) => {
  if (value) {
    pyeongInput.current.value = value / 3.306;
  } else {
    pyeongInput.current.value = "";
  }
};

const calcMSquare = (value) => {
  if (value) {
    mSquareInput.current.value = value * 3.306;
    setM_square(value * 3.306);
  } else {
    mSquareInput.current.value = "";
  }
};

...

<input
  ...
  onInput={(e) => {
    e.target.value = e.target.value
      .replace(/[^0-9.]/g, "")
      .replace(/(\..*)\./g, "$1");
    setPyeong(e.target.value);
    calcMSquare(e.target.value);
  }}
  ref={pyeongInput}
  />
<input
  ...
  onInput={(e) => {
    e.target.value = e.target.value
      .replace(/[^0-9.]/g, "")
      .replace(/(\..*)\./g, "$1");
    setM_square(e.target.value);
    calcPyeong(e.target.value);
  }}
  ref={mSquareInput}
  />

イメージをS 3にアップロードする


回収しやすいファイルを書きます...
  • マニュアル第1部
  • マニュアル第2部
  • AWS.config.update({
      region: "ap-northeast-2", // 버킷이 존재하는 리전을 문자열로 입력합니다. (Ex. "ap-northeast-2")
      credentials: new AWS.CognitoIdentityCredentials({
        IdentityPoolId: "ap-northeast-2:5ff31b93-dc5f-416c-a12c-aa67c74c7025", // cognito 인증 풀에서 받아온 키를 문자열로 입력합니다. (Ex. "ap-northeast-2...")
      }),
    });
    
    const handleFileInput = (e) => {
      // input 태그를 통해 선택한 파일 객체
      const file = e.target.files[0];
    
      // S3 SDK에 내장된 업로드 함수
      const upload = new AWS.S3.ManagedUpload({
        params: {
          Bucket: "dabangclone", // 업로드할 대상 버킷명
          Key: moment().format("YYYY-MM-DD-HH-mm-ss") + ".jpg", // 업로드할 파일명 (* 확장자를 추가해야 합니다!)
          Body: file, // 업로드할 파일 객체
        },
      });
    
      const promise = upload.promise();
    
      promise.then(
        function (data) {
          alert("이미지 업로드에 성공했습니다.");
          dispatch(createImageUpload(data.Location));
        },
        function (err) {
          return alert("오류가 발생했습니다: ", err.message);
        }
      );
    };
    
    ...
    
    <input
      type="file"
      id="upload"
      className="image-upload"
      onChange={handleFileInput}
      />
      <label htmlFor="upload" className="image-upload-wrapper">
      사진 등록
    </label>
    #imageUpload .image-upload {
      width: 120px !important;
      height: 40px !important;
      font-size: 100px;
      text-align: right;
      min-width: 0 !important;
      outline: none;
      background: rgb(0, 0, 0);
      cursor: inherit;
      display: block !important;
      border-radius: 50% !important;
      cursor: pointer;
      position: absolute;
      margin: 0 !important;
      z-index: -1;
    }
    
    #imageUpload .image-upload-wrapper {
      position: inherit;
      height: 40px;
      color: rgb(255, 255, 255);
      font-size: 14px;
      font-weight: 500;
      background-color: rgb(35, 45, 74);
      padding: 0px 20px;
      border: 0px;
      border-radius: 3px;
      width: 120px;
      line-height: 40px;
      display: block;
      text-align: center;
      cursor: pointer;
    }

    Kakaoマップ(アドレス検索ウィンドウ付き)


    住所を検索すると地図の中央に住所が置かれます!これはいいですよ.
    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
    <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=앱키&libraries=services,clusterer,drawing"></script>
    useEffect(() => {
      var mapContainer = document.getElementById("staticMap"), // 지도를 표시할 div
          mapOption = {
            center: new daum.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표
            level: 5, // 지도의 확대 레벨
          };
    
      //지도를 미리 생성
      var map = new daum.maps.Map(mapContainer, mapOption);
      //주소-좌표 변환 객체를 생성
      var geocoder = new daum.maps.services.Geocoder();
      //마커를 미리 생성
      var marker = new daum.maps.Marker({
        position: new daum.maps.LatLng(37.537187, 127.005476),
        map: map,
      });
    
      execDaumPostcode = () => {
        new daum.Postcode({
          oncomplete: function (data) {
            var addr = data.address; // 최종 주소 변수
            setJibun(data.jibunAddress);
            setRoad(data.roadAddress);
            var center = map.getCenter();
            const Lat = center.getLat();
            const Lng = center.getLng();
            setLatitude(Lat);
            setLongitude(Lng);
    
            // 주소 정보를 해당 필드에 넣는다.
            document.getElementById("daumAddressInput").value = addr;
            // 주소로 상세 정보를 검색
            geocoder.addressSearch(data.address, function (results, status) {
              // 정상적으로 검색이 완료됐으면
              if (status === daum.maps.services.Status.OK) {
                var result = results[0]; //첫번째 결과의 값을 활용
    
                // 해당 주소에 대한 좌표를 받아서
                var coords = new daum.maps.LatLng(result.y, result.x);
                // 지도를 보여준다.
                mapContainer.style.display = "block";
                map.relayout();
                // 지도 중심을 변경한다.
                map.setCenter(coords);
                // 마커를 결과값으로 받은 위치로 옮긴다.
                marker.setPosition(coords);
              }
            });
          },
        }).open();
      };
    }, []);
    
    ...
    
    <input
      type="button"
      onClick={() => {
        execDaumPostcode();
      }}
      value="주소 검색"
      />
    
    ...
    
    <div
      id="staticMap"
      style={{
        width: "440px",
          height: "330px",
      }}
      ></div>

    ページ内の特定の領域の構成部品の登録


    各領域の入力を異なるreduceでstateに登録し、ミドルウェアを使用してstateを一度に呼び出す形式で...これか…?

    S 3配備の使用

  • リソースの配備
  • サイトの配備
  • 振り返る


    クローンコードはcssに多くの時間を費やします...
    ちょっとやりすぎたような気がしますが、仕事にはちょっと負担がかかります.
    APIの詳細に関する計画は非常に簡潔で、バックエンドチームとのコミュニケーションは非常に順調で、満足しています.