JavaScript5 [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. [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. Javascript 문제 풀이 기록 1. 아래 코드 실행 시 오류 발생의 원인 찾기 const array = [] for (const i = 0; i for 문 안쪽 변수 i 선언이 변할 수 없는 변수를 선언하는 const 로 선언하였기 때문, let으로 수정하면 정상적으로 작동 2. 1부터 100까지 숫자를 곱한 값을 계산하는 코드 작성 let output = 1 for (let i = 2; i < 101; i ++) { // i 는 2부터 1씩 증가(0 부터 시작하면 결과값 0으로 될 것) output += i // output 과 곱한 값을 output 으로 지정한다 } console.log(output) // 5050 3. 피.. 2023. 4. 5. 이전 1 다음
