본문 바로가기

Frontend/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.
[Nodejs] Express 에서 router 연결 Node js로 웹 페이지를 개발 할 수 있는 프레임워크 중 하나인 Express 에서 클라이언트 측 요청에 대한 처리 방법을 일반적으로 프로젝트 폴더 바로 아래에 index.js (이름 변경 가능) 파일 내 기재한다. // index.js const express = require("express") // 프레임워크 호출 const app = express(); // 실행 const port = 3000(); // 1. 도메인 + '/' (초기 페이지) 접속 시 처리 로직 app.get('/' (req, res) => { res.send('Hello world!'); } // 2. 도메인 + '/goods' (상품 페이지) 접속 시 처리 로직 app.get('/goods' (req, res) => { .. 2023. 4. 26.
[Javascript] this 바인딩 (call, apply) javascript에서 상황 별 this 가 바라보는 객체는 아래와 같다 1. 함수 자체로써 호출되었을 때 : 브라우저 환경 - window / node js 환경 - global 2. Method로써 호출되었을 때 : 호출 주체 (객체) // 함수 자체로써 호출되었을 때 - node js 환경 let example_func = function(x, y, z){ console.log(this, x, y, z); } example_func(1, 2, 3); // output : global(실제 출력된 내용은 너무 길게 나옴), 1, 2, 3 // Method로써 호출되었을 때 let example_func_2 = { name: "chunws", ex_method: function (x, y, z){con.. 2023. 4. 8.