Apricoding

리액트

1. Nodejs

nodejs, npm 설치

npm i npx -g

npx create-react-app {앱 이름}

cd goole-calendar

npm start

화면 크기 변경 없이 코드(텍스트)만 확대/축소하고 싶을 때는 Mouse Wheel Zoom을 이용하면 된다.

Mouse Wheel Zoom 설정에 체크한 뒤, Ctrl 키를 누르고 마우스 휠을 움직이면 텍스트를 확대/축소할 수 있다.

[설정방법]

Ctrl + ,  (컨트롤 + 콤마) 키를 눌러서 Settings 창을 연 뒤 'mouse'를 검색하여 Mouse Wheel Zoom에 체크하거나

File - Preferences - Settings - Text Editor 에서 Mouse Wheel Zoom을 찾아 체크하면 된다.  

[설정 후]

Ctrl + 마우스 휠을 이용하여 텍스트를 확대/축소

Ctrl + - , Ctrl + + 키로 화면을 확대/축소

const express = require('express');
const router = express.Router();
const passport = require('passport');
const axios = require('axios');
const qs = require('qs');
const session = require('express-session');

const passportConfig = require('../passport');
const { CODE_SUCCESS } = require('../utils/constant');
const { encrypt } = require('../utils/cryption');

// 카카오 인증 설정
const clientID = 'clientID00192099';
const clientSecret = 'clientSecret1283920';
const callbackURL = 'http://localhost:8080/member/kakao/callback2';

let accessToken = null;
const uuidList = [];

// Express 세션 설정
router.use(session({
    secret: 'your session secret',
    resave: false,
    saveUninitialized: true,
    cookie: { secure: false }
}));

// 카카오 로그인
router.get('/kakao/login', passport.authenticate('kakao-login'));

// 카카오 로그인 콜백
router.get('/kakao/callback',
    passport.authenticate('kakao-login', {
        failureRedirect: 'http://localhost:8080/schedule/fail'
    }),
    (req, res) => {
        accessToken = req.user.access_token;
        res.json({
            code: CODE_SUCCESS,
            msg: '로그인 성공',
            data: {
                token: encrypt(req.user.access_token + '//' + req.user.user_email)
            }
        });
    }
);

// 추가 동의 처리
router.get('/kakao/callback2', async (req, res) => {
    const param = qs.stringify({
        grant_type: 'authorization_code',
        client_id: clientID,
        code: req.query.code,
        redirect_uri: callbackURL
    });

    const header = {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    }

    const result = await callAPI('POST', 'https://kauth.kakao.com/oauth/token', param, header);
    console.log(result.data);

    res.json({
        code: CODE_SUCCESS,
        msg: '추가 동의 완료',
        data: result.data
    });
});

// 카카오 친구 목록 가져오기
router.get('/kakao/friends', async (req, res) => {
    const uri = 'https://kapi.kakao.com/v1/api/talk/friends';
    const header = {
        'Authorization': 'Bearer ' + accessToken
    }

    const result = await callAPI('GET', uri, null, header);
    const friendsList = result.data.elements;
    uuidList.length = 0; // 기존 UUID 초기화

    friendsList.forEach(friend => {
        uuidList.push(friend.uuid);
    });

    console.log('친구 UUID 목록:', uuidList);
    res.json({
        code: CODE_SUCCESS,
        msg: '친구 목록 조회 성공',
        data: uuidList
    });
});

// 카카오톡 친구 메시지 전송
router.get('/kakao/friendsmsg', async (req, res) => {
    const uri = 'https://kapi.kakao.com/v1/api/talk/friends/message/send';
    const param = qs.stringify({
        receiver_uuids: JSON.stringify(uuidList),
        template_id: '68610',
        template_args: '{"title":"캘린더 마감", "memo":"마감일자입니다.", "datetime":"2022-01-22, 09:30 ~ 18:30"}'
    });

    const header = {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Bearer ' + accessToken
    }

    const result = await callAPI('POST', uri, param, header);
    console.log('메시지 전송 결과:', result.data);
    res.json({
        code: CODE_SUCCESS,
        msg: '메시지 전송 성공',
        data: result.data
    });
});

// API 호출 공통 함수
async function callAPI(method, uri, param, header) {
    try {
        const response = await axios({
            method: method,
            url: uri,
            headers: header,
            data: param
        });
        return response;
    } catch (err) {
        console.error('API 호출 오류:', err);
        return err.response;
    }
}

passportConfig();

module.exports = router;

마이크로소프트 스토어에서 윈도우즈 터미널 설치

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

컴퓨터 재부팅

주소를  ctrl + 클릭하여 마이크로소프트 스토어로 이동

LTS(Long Term Support) 판을 설치

오랜 기간 버그 수정 및 보안 관련 업데이트를 지원해줌. 서버용으로 적합.

기능 업데이트는 일반(정규)판이 빠르므로 데스크톱 용도일 경우 일반판 설치

위와 같은 에러 발생 시 컴퓨터 재부팅 후 실행

다시 관리자 권한으로 터미널 열어준 후 wsl 입력

아래와 같이 To run ~ 나오면 정상적으로 설치된 것

exit 하여 로그아웃 해준 뒤 wsl -l로 버전 확인

버전이 1일 경우 

아래 단계 진행

https://docs.microsoft.com/ko-kr/windows/wsl/install-manual#step-4---download-the-linux-kernel-update-package

wsl --set-version Ubuntu-20.04 2

wsl --set-version Ubuntu 2

노드js 설치

$ sudo apt install curl

$ curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

$ sudo apt install -y nodejs

React Router v6 변경사항: Switch → Routes

❌ 기존 코드 (v5)

import { Switch, Route } from 'react-router-dom';

<Switch>
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
</Switch>

✅ 변경 후 코드 (v6)

import { Routes, Route } from 'react-router-dom';

<Routes>
    <Route path="/home" element={<Home />} />
    <Route path="/about" element={<About />} />
</Routes>

- Switch → Routes로 변경하고 component → element 사용

- JSX에서 함수 이름 그대로 사용하지 말고, <Component /> 형식으로 사용