본문 바로가기
728x90
반응형

코딩/React29

react custom 달력 axios 연동 달력을 만들고 axsio에 연동하는 내용을 담고 있습니다. 2023.07.06 - [코딩/React] - [React] date-fns와 style-components로 커스텀하기 쉬운 달력 만들기(1편) [React] date-fns와 style-components로 커스텀하기 쉬운 달력 만들기(1편) 올해 새로운 프로젝트를 맡게 되면서 달력에 서버에 있는 데이터를 보여줘야하는 기능을 구현하게 되었다. 다양한 라이브러리가 있었지만 디자이너의 요구에 맞는 달력을 제작하기가 어려워 da quddkflty.tistory.com 2023.07.06 - [코딩/React] - [React] date-fns와 Style-Components로 커스텀하기 쉬운 달력 만들기(2편) [React] date-fns와 St.. 2023. 10. 30.
React Google Map으로 지역간 거리 및 이동 시간 계산하기 1. 구글 맵 API key 받아오기 모든 api가 거의 그러하듯 인증키를 받아와야한다. 아래 링크에 접속하여 API key를 발급받으면 된다. https://console.cloud.google.com/google/maps-apis/start?utm_source=Docs_GS_Button&ref=https:%2F%2Fdevelopers.google.com%2Fmaps%2F&hl=ko Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 2. React에 입력창 제작하기 저는 간단한 기능 테스트용이라 2지역간의 좌표를 받아오는 입력창을 제작하였습니다. 더보기 import React, { useState } from "react"; import axi.. 2023. 10. 27.
React AWS S3 업데이트 및 삭제 기능 (CRUD) S3 파일 업로드에 대해 궁금하시다면 아래 포스트를 찾아주세요. 2023.10.26 - [코딩/React] - React AWS S3 파일 업로드 및 연동 React AWS S3 파일 업로드 및 연동 Amazon S3 (Amazon Simple Storage Service)란 Amazon Web Services (AWS)의 클라우드 기반 스토리지 서비스로, 사진, 영상과 같은 데이터를 저장하고, 해당 데이터에 대해 url로 제공해주어 프론트엔드에서 사용할 quddkflty.tistory.com S3 삭제 기능 S3에서 원하는 파일에 대해 삭제해야할 경우 아래와 같은 코드를 쓸 수 있다. 파일의 위치를 알 수 있는 Key를 파라미터로 받아 관리한다. const deleteS3File = async (fil.. 2023. 10. 26.
React AWS S3 파일 업로드 및 연동 Amazon S3 (Amazon Simple Storage Service)란 Amazon Web Services (AWS)의 클라우드 기반 스토리지 서비스로, 사진, 영상과 같은 데이터를 저장하고, 해당 데이터에 대해 url로 제공해주어 프론트엔드에서 사용할 수 있도록 해준다. Amazon S3 (Amazon Simple Storage Service) 구성 요소 버킷 (Bucket): Amazon S3에서 데이터를 저장하는 논리적인 컨테이너로 모든 객체(파일)는 버킷에 저장된다. 전역적으로 고유한 이름을 가져야 하며, 이름은 모든 AWS 고객 간에 고유해야 한다. 그렇게 .env를 통해 보안요소로 관리된다. 객체 (Object): Amazon S3에 저장되는 데이터 항목을 객체라고 하며, 객체는 파일, .. 2023. 10. 26.
반응형