본문 바로가기

전체 글82

2. JWT 토큰 검증 ※JWT를 이용한 토큰 검증 방식 사용자 인증 미들웨어  -백엔드-  middleware - : JWT를 사용하여 사용자의 인증을 확인하고 요청을 보호하는 미들웨어  -split() : 문자열을 특정 기준으로 잘라서 배열로 변환하는 함수    -req.headers.authorization.split("Bearer ")[1]; : [0] : Bearer, [1] : 실제 토큰     (중간에 공백이 존재하기 떄문) -> ["Bearer", ""]const jwt = require("jsonwebtoken");const User = require("../model/userModel");const jwtSecret = process.env.JWT_SECRET;const authUser = async (re.. 2024. 5. 20.
1. user 파일, score 파일 병합 ※user 관련 파일과 score 관련 파일을 하나로 병합 -백엔드- model - : user model과 score model을 하나로 병합 const mongoose = require("mongoose");const Schema = mongoose.Schema;const UserSchema = new Schema({ username: { type: String, require: true, unique: true, }, password: { type: String, require: true, }, imageScore: { type: Number, default: 0, }, combineScore: { type: Number, defau.. 2024. 5. 20.
3. Redux Toolkit Redux-Toolkit : Redux를 더 간결하고 편리하게 사용할 수 있는 pakage   -리덕스보다 더 짧은 코드로 짤 수 있음  -state를 mutate(변형)이 가능함. 단 리턴을 해야 함 ex) return store.push() = O>> npm install @reduxjs/toolkit //redux toolkit 설치 redux - ※createSlice : Redux-Toolkit에서 reducer를 생성하는 함수.    -name : 이름    -initialState : 초기값    -reducers : 리듀서 생성import { createSlice } from "@reduxjs/toolkit";const countSlice = createSlice({ //슬라이스 생성 n.. 2024. 5. 14.
2. useDispatch dispatch : reducer에게 메세지(action)를 전달하는 함수 page -   ※useDispatch : react-redux에서 디스패치를 사용할 수 있게 함import React from "react";import { useDispatch, useSelector } from "react-redux";function ReduxCount() { const count = useSelector((state) => state); const dispatch = useDispatch(); //디스패치 const addCount = (e) => { e.preventDefault(); dispatch({ type: "ADD" }); //카운터 증가 }; const minusCount .. 2024. 5. 12.
1. useSelector, Provider 리덕스   -자바스크립트의 state를 관리하는 라이브러리   -React, Angular, Vue.js 등 자바스크립트 어디에서는 사용 가능  -state를 mutate(변형)하지 않고 새로운 object를 리턴해야 한다     ex) store.push() = X           [return [...state, {type : "ADD"}] = O>> npm install react-redux //리액트 리덕스 설치 redux -   ※store : data가 저장되는 state  ※createStore() : store를 생성하는 함수  ※reducer : data를 수정(modify)하는 함수  ※ action : reducer에게 명령을 내리는 매개변수      -type : 명령 이름 지정 .. 2024. 5. 12.
17. 포인트 기능 -정답을 맞출 떄마다 점수 10점 씩 증가 -만점 받을 시 포인트를 1씩 증가해서 서버 데이터로 보내 저장 -서버에 저장된 각 게임 포인트 데이터를 가져와 페이지에 표시 -백엔드- model - const mongoose = require("mongoose");const Schema = mongoose.Schema;const ScoreSchema = new Schema({ imageScore: { type: Number, // 숫자 타입으로 변경 default: 0, // 초기값 설정 (옵션) }, combineScore: { type: Number, // 숫자 타입으로 변경 default: 0, // 초기값 설정 (옵션) },});module.exports = mongoos.. 2024. 5. 11.
16. 무작위 나열 배열에 저장된 낱말들을 섞어서 무작위로 나열 page - Game - ※sort(): 배열에 요소를 유니코드 값에 따라서 적절하게 나열하는 메서드 - Math.random() - 0.5의 값이 양수이면 오름차순으로, 음수이면 내림차순으로 정렬 -0.1에 가까울 시 '사과(ㅅㅏㄱ ㅘ)로, 0.9에 가까울 시 '사과(ㅘ ㄱㅏㅅ)로 정렬 import axios from "axios";import React, { useEffect, useState } from "react";import "../../css/game.css";import Canvas from "../../component/Canvas";import Typing from "../../component/Typing";function CombineGa.. 2024. 4. 29.
15. 초성/중성/종성 분리 유니코드를 이용해서 서버에서 가져온 텍스트 데이터의 초성/종성/중성을 분리 ※유니코드: 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 하는 표준 문자 전산 방식    -한글 유니코드에서 자음(ㄱ~ㅎ)은 12593 ~ 12622로 총 27개, 모음(ㅏ~ㅣ)은 12623 ~ 12643로 총 21개    -종성은 숫자 1마다, 중성은 29 (ㅏ -> ㅐ) 마다, 초성은 589(ㄱ -> ㄲ)마다 값이 변함[참고] [자바스크립트] 한글 자음 모음 분리 / 초성 * 중성 * 종성|작성자 Scripter page - Game - ※charCodeAt(): index에 해당하는 문자의 unicode 값을 리턴  -choIndex: 초성은 589(ㄱ -> ㄲ)마다 변하므로 588로 나눔(시작 인덱스.. 2024. 4. 29.

티스토리툴바