Frontend18 [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. [Javascript] 페이지 스크롤 기능 만들기 사전에 정의한 이벤트가 발생했을 때, 페이지 내 특정 컨텐츠를 보여주고 싶어서보여주고 싶은 컨텐츠로 자동으로 스크롤 되는 기능을 만들어 보았다.요소를 html의 id나 유니크한 class 값이 있었다면 더 간결하게 만들 수 있었겠지만,나의 경우에는 해당 요소를 구별할 수 있는 유니크한 값이 아니었기 때문에, 특정 텍스트를 포함하는 조건으로함수를 만들어봤다.1. 찾아야 할 값 지정하기먼저, 변수에 찾아야 하는 컨텐츠의 텍스트를 선언하고찾아야하는 값을 id나 class로 찾을 수 없으므로 모든 요소를 elements 변수에 담아준다그 후, 배열을 순회 하며 텍스트와 일치하는지 확인한다. 2. 컨텐츠가 위치한 값 찾아서 스크롤하기요소를 찾으면, 해당 요소가 위치한 정보를 알아내기 위해 getBoundingcl.. 2024. 7. 22. [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. 이전 1 2 3 다음
