본문 바로가기

분류 전체보기82

2. 선 그리기 ※drawing 함수 추가 - 선 생성 ※drawingCanvas 함수 추가 - 선 그리기 ※stopDrawing 함수 추가 - 선 그리기 멈추기 ※canvasOut 함수 추가 - 캔버스 밖으로 나갔을 시 ※css 파일 삭제 - css를 적용하니 마우스 커서 위치 지정에 오류가 생김 마우스로 캔버스에 선을 그림 -getBoundingClientRect() : 캔버스 내의 좌표를 가져오는 매서드 -e.clientX : 마우스 이벤트가 발생한 X 좌표 위치 (브라우저 창 기준) -e.clientY : 마우스 이벤트가 발생한 Y 좌표 위치 (브라우저 창 기준) -rect.left : canvas 요소의 왼쪽 경계가 브라우저 창의 왼쪽 경계에서 얼마나 떨어져 있는지 -rect.top : canvas 요소의 위쪽.. 2024. 4. 11.
1. Canvas canvas : web에서 마우스로 글, 그림을 그릴수 있게 해주는 태그 -canvas는 html 태그를 이용하므로 useRef로 DOM에 접근 -getContext() : 캔버스의 드로잉 컨텍스트를 받아오는 메서드 page - import React, { useEffect, useRef } from "react"; import "../../css/canvas.css"; function Canvas() { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); //2d 형식의 드로잉 컨텍스트를 받아옴 }, []); return ( ); } exp.. 2024. 4. 11.
6. 로그인 페이지 로그인 기능 구현 -login.js 추가 -header.js, mainHeader.js, registerHeader.js 로 헤더 3개 분류 -백엔드- controllers - : 로그인 기능 (...) require("dotenv").config(); //.env 파일 불러오기 const jwt = require("jsonwebtoken"); //jsonwebtokeen 불러오기 const jwtSecret = process.env.JWT_SECRET; //비밀키 지정 (...) //Post Login User, / : 로그인 기능 const loginUser = asynchHandler(async (req, res) => { const { username, password } = req.body; c.. 2024. 3. 20.
20. 로그인, 토큰 쿠키 : 웹 브라우저를 이용할 때 사용자 컴퓨터에 저장되는 정보 -cookie-parser : 웹 애플리케이션에서 쿠키를 만들거나 구문을 분석할 떄 사용 >> npm install cookie-parser 세션 : 웹 브라우저를 이용할 때 서버에 저장되는 정보 캐시 : 데이터를 미리 복사해 놓는 임시 저장 장소 토큰 -세션과는 다르게 서버에 저장하지 않음 -사용자 정보, 위조를 막는 서명 등 인증에 필요한 모든 정보가 담김 -서버 간 공유할 수도 있음 JWT : 노드에서 자주 사용하는 JSON 형식의 토큰 방식 모듈, 헤더/페이로드/서명 3영역으로 나뉨 -헤더 : 알고리즘과 유형이 담김 -페이로드 : 사용자 인증 정보, 내용이 담김 -서명 : 비밀 키로 .env 파일같이 안전한 곳에 저장해서 사용 >> .. 2024. 3. 19.

티스토리툴바