react11 [React] Drag & Drop으로 파일 첨부하기 React 로 파일 업로드 기능을 구현하기 위해 기존에는 Bootstrap Form Control 에서 type='file'로 구현했었는데,위와 같이 구현하면 파일을 드래그 앤 드랍 방식으로 업로드를 할 수 없었다.드래그 앤 드롭 방식의 파일을 업로드를 지원하는 다른 사이트들 처럼 구현해 보고 싶어서 연습을 했다. 1. 패키지 설치React 에서 구현하는 것이 목표이므로 React용 패키지, 그리고 스타일링을 위해 Bootstrap 를 설치했다.npm install react-dropzone bootstrap 2. 기본 구현파일을 업로드할 화면을 먼저 구현했다.import { Container, Card } from "react-bootstrap";const FileUploadFiekd = () => {.. 2024. 8. 21. [React] 카카오 로그인 SDK 구현하기 1. 사전 준비 카카오 로그인을 구현하기 위해서는 먼저, 카카오 디벨로퍼스에서 앱을 만들어야 한다. 아래 링크에서 앱 이름과, 사업자 이름을 입력하면 되는데, 작성자는 사업자가 없어서 앱 이름과 동일하게 넣었다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 다음으로는, 앱에 발급되는 키를 사용하기 위한 URL을 넣어줘야하는데 현재 개발중으로 서비스 URL이 없으면 개발 환경 URL을 넣어주면 된다. 다음으로, 로그인 사용을 위해 Redirect URI까지 등록해주면 된다. (프론트엔드 UR.. 2024. 3. 13. [Bootstrap] React에 Bootstrap 적용하기 https://chunws13.tistory.com/55 [React] Project Levup - 메모 수정 기능 만들기 이전 작업으로 DB에 저장된 메모를 불러오는 것 까지 확인했다. 백엔드에서 수정및 삭제 기능을 구현했지만, 프론트엔드에서 부드럽게 구현할 수 있도록 구상을 해야했다. 구상 결과 각 메모를 chunws13.tistory.com 가장 기본적인 기능 (메모 CRUD)을 백엔드와 프론트엔드 모두 구현했으므로 이용할 때 보기 좋게 기본적인 스타일링을 진행하려고 한다. 문제는, 본인의 색감이나 구도 잡는 능력 등 스타일링에 관련해서는 별로 좋지가 않다는 점과 css 문서를 만들어서 하나하나 적용하다보면 시간이 매우 오래걸릴 것이라는 우려로 인해 스타일링을 직접 하는 것 보다는 외부 기능을 사용.. 2023. 12. 5. [React] Project Levup - 메모 수정 기능 만들기 이전 작업으로 DB에 저장된 메모를 불러오는 것 까지 확인했다. 백엔드에서 수정및 삭제 기능을 구현했지만, 프론트엔드에서 부드럽게 구현할 수 있도록 구상을 해야했다. 구상 결과 각 메모를 반환하며, 수정 버튼을 눌렀을 때만 해당 메모가 수정되는 방향으로 정리했다. 그 전에, 수정 및 삭제 요청이 들어갈 때 각 메모의 ID 별로 처리할 수 있도록 컴포넌트를 세분화 시켰다. 1 . 컴포넌트 세분화 - 수정 전 코드 {memo.map((item, index) => { return ( { item._id.$oid } { item.content } 수정 삭제 ) })} 2 . 컴포넌트 세분화 - 수정 후 코드 const EachMemo = ({ memoId, content }) => { return ( { con.. 2023. 12. 2. [React] Project Levup - Axios 활용하기 백엔드에서 구현한 사항 : 메모 만들기, 메모 조회하기 백엔드에서는 로그인이 완료되면 토큰을 발급하고, 토큰과 함께 메모 조회 요청을 하면 해당 ID로 작성한 메모를 가져오도록 구현했다. 먼저, 메모 뷰가 랜더링 되면 API 요청을 통해 헤더에 토큰을 담아 데이터를 요청한다. import { useState, useEffect } from 'react' import {Cookies} from "react-cookie"; const cookie = new Cookies(); const token = cookie.get("token"); const [memo, setMemo] = useState([]); useEffect(() => { axios.get("http://127.0.0.1:8000/api/mem.. 2023. 11. 25. [React] Project Levup - 로그인 기능 만들기 https://chunws13.tistory.com/46 [FastAPI] Project Levup - 회원가입과 로그인 기능 만들기 개인적으로 사용할 용도이긴 하지만, 주변 사람들에게 소개하면서 사용을 권장하기 위해 간단한 회원 가입 기능을 만들어 두려고 한다. 회원 가입 기능을 만들기 전 몇 가지 패키지 설치가 필요 chunws13.tistory.com 백엔드 로그인 기능 구현이 끝났다면, 프론트엔드에서 응답을 받아 로그인을 구현하는 뷰를 만들어 보자 React 설치하는 방법은 이전에 작성한 적이 있으므로 생략한다. npm install axios npm install react-cookie 백엔드로 요청을 보내기 위해 axios, 응답한 내용 (로그인이 되었다는 증거)을 cookie에 저장하기 위해.. 2023. 11. 17. 이전 1 2 다음
