신입개발자_장민기

20240531_모놀리틱) 타입스크립트로 전환

일일일코_장민기 — Fri, 31 May 2024 23:56:57 +0900

타입스크립트

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { NavLink, useNavigate } from 'react-router-dom';

interface MemberData {
    id: number;
    username: string;
    email: string;
    country: string;
    area: string;
}

const MyPage: React.FC = () => {
    const [memberData, setMemberData] = useState<MemberData | null>(null);
    const navigate = useNavigate();

    useEffect(() => {
        axios.get('http://localhost:8888/MyPage', { withCredentials: true })
            .then(response => {
                if (response.status === 200) {
                    setMemberData(response.data);
                } else if (response.status === 401) {
                    navigate('/LoginPage');
                }
            })
            .catch(error => {
                console.error('There was an error!', error);
                navigate('/LoginPage');
            });
    }, [navigate]);

    if (!memberData) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <h1>My Page</h1>
            <p>ID: {memberData.id}</p>
            <p>Username: {memberData.username}</p>
            <p>Email: {memberData.email}</p>
            <p>Country: {memberData.country}</p>
            <p>Area: {memberData.area}</p>
            <h2>Cloth</h2>
            <h2>Weather</h2>
            <h2>Dust</h2>
            <h2>GPT</h2>
            <p>
                <NavLink to="/ClothEditPage">옷장</NavLink><br/>
                <NavLink to="/ChangePasswordPage">비밀번호 변경</NavLink><br/>
                <NavLink to="/ChangeEmailPage">이메일 변경</NavLink><br/>
                <h2>로그아웃</h2>
            </p>
        </div>
    );
}

export default MyPage;

자바스크립트

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import {NavLink, useNavigate} from 'react-router-dom';

function MyPage() {
    const [memberData, setMemberData] = useState(null);
    const navigate = useNavigate();

    useEffect(() => {
        axios.get('http://localhost:8888/MyPage', { withCredentials: true })
            .then(response => {
                if (response.status === 200) {
                    setMemberData(response.data);
                } else if (response.status === 401) {
                    navigate('/LoginPage');
                }
            })
            .catch(error => {
                console.error('There was an error!', error);
                navigate('/LoginPage');
            });
    }, [navigate]);

    if (!memberData) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <h1>My Page</h1>
            <p>{memberData.id}</p>
            <p>Username: {memberData.username}</p>
            <p>Email: {memberData.email}</p>
            <p>Country: {memberData.country}</p>
            <p>Area: {memberData.area}</p>
            <p><h2>Cloth</h2></p>
            <p><h2>Weather</h2></p>
            <p><h2>Dust</h2></p>
            <p><h2>GPT</h2></p>
            <p>
                <NavLink to="/ClothEditPage">옷장</NavLink><br/>
                <NavLink to="/ChangePasswordPage">비밀번호 변경</NavLink><br/>
                <NavLink to="/ChangeEmailPage">이메일 변경</NavLink><br/>
                <h2>로그아웃</h2>
            </p>
        </div>
    );
}

export default MyPage;

interface MemberData {
    id: number;
    username: string;
    email: string;
    country: string;
    area: string;
}

인터페이스를 생성해서 커스텀 타입 생성

const MyPage: React.FC = () => {

리엑트에서 타입스크립트를 사용하기 위한 React.FC

- 다만 이 경우에는 children Props의 타입 체킹이 되지 않기 때문에 지양하라는 글이 많기도 했다.

- 다음 작업부터는 사용하지 않고 명시적으로 타입을 입력할 것

const [memberData, setMemberData] = useState<MemberData | null>(null);

인터페이스를 useState에 타입 지정

기타 변경된 코드

LoginPage

import {NavLink, useNavigate} from "react-router-dom";
import React, {useState, FormEvent, ChangeEvent} from "react";
import axios from "axios";

const LoginPage: React.FC = () => {

    const [username, setUsername] = useState<string>('');
    const [password, setPassword] = useState<string>('');
    const navigate = useNavigate();

    const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        axios.defaults.withCredentials = true;
        try {
            const response = await axios.post('/login', {
                username: username,
                password: password
            }, {
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            if (response.status === 200) {
                navigate('/MyPage');
            } else {
                console.log('로그인 실패');
                navigate('/LoginPage');
            }
        } catch (error) {
            console.error('Error:', error);
        }
    };

    const handleUsernameChange = (event: ChangeEvent<HTMLInputElement>) => {
        setUsername(event.target.value);
    };

    const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
        setPassword(event.target.value);
    };

    return (
        <div>
            <h1>로그인 페이지</h1>
            <form id="loginForm" onSubmit={handleSubmit}>
                <label>username: <input type="text" value={username} onChange={handleUsernameChange}/></label>
                <label>password: <input type="password" value={password} onChange={handlePasswordChange}/></label>
                <span id="loginErrorField"></span><br/>
                <div>
                    <input type="submit" value="로그인"/>
                </div>
            </form>
            <p>
                <NavLink to="/RegisterPage">회원가입 페이지</NavLink><br/>
                <NavLink to="/FindUserInfo">회원 정보 찾기 페이지</NavLink><br/>
            </p>
        </div>
    );
}

export default LoginPage;

RegisterPage

import React, { useEffect, useState } from "react";
import { NavLink, useNavigate } from "react-router-dom";
import axios from "axios";

const RegisterPage: React.FC = () => {
    const [username, setUsername] = useState<string>("");
    const [password, setPassword] = useState<string>("");
    const [email, setEmail] = useState<string>("");
    const [country, setCountry] = useState<string>("");
    const [area, setArea] = useState<string>("");
    const [countryList, setCountryList] = useState<string[]>([]);
    const [areaList, setAreaList] = useState<string[]>([]);
    const [existUsername, setExistUsername] = useState<string>("");
    const [existEmail, setExistEmail] = useState<string>("");
    const [checkAuthorizationCodeField, setCheckAuthorizationCodeField] = useState<string>("");
    const [code, setCode] = useState<string>("");
    const navigate = useNavigate();

    useEffect(() => {
        fetch("/findCountries")
            .then((response: Response) => response.json())
            .then(function(result: string[]){
                setCountryList(result);
                if(result.length > 0){
                    setCountry(result[0]);
                }
            })
    }, []);

    useEffect(() => {
        fetch(`/findAreasByCountry?country=${country}`)
            .then((response: Response) => response.json())
            .then(function(result: string[]){
                setAreaList(result);
                setArea(result[0]);
            })
    }, [country]);


    // 아이디 중복 체크
    const usernameAjax = async (event: React.ChangeEvent<HTMLInputElement>) => {
        const newUsername = event.target.value;
        setUsername(newUsername);
        try {
            const response = await axios.post<boolean>(`/usernameAjax?username=${newUsername}`, {}, {
                headers: {
                    "Content-Type": "application/json"
                }
            });
            if (response.status === 200) {
                setExistUsername(response.data ? "아이디 중복" : "");
            }
        } catch (error) {
            console.error('Error checking username:', error);
        }
    }

    // 이메일 중복 체크
    const emailAjax = async (event: React.ChangeEvent<HTMLInputElement>) => {
        const newEmail = event.target.value;
        setEmail(newEmail);
        axios.defaults.withCredentials = true;
        try {
            const response = await axios.post<boolean>(`/emailAjax?email=${newEmail}`, {}, {
                headers: {
                    "Content-Type": "application/json"
                }
            });
            if (response.status === 200) {
                setExistEmail(response.data ? "이메일 중복" : "");
            }
        } catch (error) {
            console.error(error);
        }
    }

    // 이메일 인증 코드 요청
    const emailAuthorizationCode = async () => {
        axios.defaults.withCredentials = true;
        try {
            const response = await axios.post(`/emailAuthorizationCode?email=${email}`, {}, {
                headers: {
                    "Content-Type": "application/json"
                }
            });
            if (response.status === 200) {
                alert("인증번호가 메일로 전송되었습니다.");
            }
        } catch (error) {
            console.error(error);
        }
    }

    // 인증 코드 확인
    const codeAjax = async (event: React.ChangeEvent<HTMLInputElement>) => {
        const newCode = event.target.value;
        setCode(newCode);
        const cookies = document.cookie.split(";").map(cookie => cookie.split("=")).find(([name]) => name.trim() === "authorizationCode");
        if (cookies && cookies[1] === newCode) {
            setCheckAuthorizationCodeField("확인되었습니다.");
        } else {
            setCheckAuthorizationCodeField("인증번호 오류");
        }
    }

    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        let errorMessage = '';
        switch (true) {
            case existUsername === "아이디 중복":
                errorMessage = '아이디 중복 상태입니다.';
                break;
            case existEmail === "이메일 중복":
                errorMessage = '이메일 중복 상태입니다.';
                break;
            case checkAuthorizationCodeField === "인증번호 오류":
                errorMessage = '코드 불일치 상태입니다.';
                break;
            default:
                axios.defaults.withCredentials = true;
                try {
                    const response = await axios.post("/saveUser", {
                        username: username,
                        password: password,
                        email: email,
                        country: country,
                        area: area
                    }, {
                        headers: {
                            "Content-Type": "application/json"
                        }
                    });
                    if (response.status === 200) {
                        navigate("/LoginPage");
                    } else {
                        navigate("/RegisterPage");
                    }
                } catch (error) {
                    console.error("Error: ", error);
                }
        }
        if (errorMessage !== "") {
            alert(errorMessage);
        }
    }

    return (
        <div>
            <form id="registerForm" onSubmit={handleSubmit}>
                username:
                <input type="text" id="username" name="username"
                       onChange={usernameAjax}
                       required minLength={3} /><br />
                <span id="existUsername">{existUsername}</span><br />

                password:
                <input type="password" id="password" name="password"
                       onChange={(event) => setPassword(event.target.value)}
                       required minLength={3} /><br />

                email:
                <input type="email" id="email" name="email"
                       onChange={emailAjax}
                       required minLength={3} /><br />
                <span id="existEmail">{existEmail}</span><br />

                인증번호:
                <input type="text" id="authorizationCode" onChange={codeAjax} />
                <input type="button" id="sendEmail" value="인증번호 보내기" onClick={emailAuthorizationCode} /><br />
                <span id="checkAuthorizationCodeField">{checkAuthorizationCodeField}</span><br />

                country:
                <select id="country" value={country} onChange={(event) => setCountry(event.target.value)}>
                    {countryList && countryList.map((country: string, index: number) => (
                        <option key={index} value={country}>{country}</option>
                    ))}
                </select><br />

                area:
                <select id="area" value={area} onChange={(event) => setArea(event.target.value)}>
                    {areaList && areaList.map((area: string, index: number) => (
                        <option key={index} value={area}>{area}</option>
                    ))}
                </select>
                <input type="submit" value="회원가입" />
            </form>
            <p>
                <NavLink to="/loginPage">로그인 페이지</NavLink>
            </p>
        </div>
    );
}

export default RegisterPage;

App

import main from './images/main.jpg';
import LoginPage from './path/beforeLogin/LoginPage';
import ClothEditPage from './path/afterLogin/ClothEditPage'
import RegisterPage from "./path/beforeLogin/RegisterPage"
import './App.css';
import React, { useState, useEffect, FormEvent } from "react";
import {HashRouter, Routes, Route, NavLink, useNavigate, useLocation} from "react-router-dom";
import MyPage from "./path/afterLogin/MyPage";
import axios from "axios";

const App: React.FC = () => {

    return (
        <HashRouter>
            <div className="App">
                <header className="mainImage">
                    <NavLink to='/loginPage'><img src={main} className="App-logo" alt="logo" height={"100px"}/></NavLink>
                </header>
                <Routes>
                    <Route path='/' element={'MainPage'}/>
                    <Route path='/LoginPage' element={<LoginPage></LoginPage>}/>
                    <Route path='/RegisterPage' element={<RegisterPage></RegisterPage>}/>
                    <Route path='/FindUserInfo' element={<FindUserInfo></FindUserInfo>}/>
                    <Route path='/ViewUsername' element={<ViewUsername></ViewUsername>}/>
                    <Route path='/ViewChangedPassword' element={<ViewChangedPassword></ViewChangedPassword>}/>
                    <Route path='/MyPage' element={<MyPage></MyPage>}/>
                    <Route path='/ClothEditPage' element={<ClothEditPage></ClothEditPage>}/>
                    <Route path='/ChangePasswordPage' element={<ChangePasswordPage></ChangePasswordPage>}/>
                    <Route path='/ChangeEmailPage' element={<ChangeEmailPage></ChangeEmailPage>}/>
                    <Route path='/*' element={'Not Found'}/>
                </Routes>
            </div>
        </HashRouter>
    );
}

function FindUserInfo() {
    const [email, setEmail] = useState<string>("");
    const [username, setUsername] = useState<string>("");
    const [passwordEmail, setPasswordEmail] = useState<string>("");
    const navigate = useNavigate();

    const handleUsernameSubmit = async (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        axios.defaults.withCredentials = true;
        try{
            const response = await axios.post(`/ViewUsername?email=${email}`, {}, {
                headers: {
                    "Content-Type": "application/json"
                }
            });
            if (response.status === 200) {
                navigate("/ViewUsername", { state: { username: response.data } });
            } else {
                navigate("/FindUserInfo")
            }
        } catch (error: any){
            console.error("Error: ", error.response ? error.response.data : error.message);
            navigate("/FindUserInfo");
        }
    }

    const handlePasswordSubmit = async (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        axios.defaults.withCredentials = true;
        const response = await axios.post("/SendPassword", {
            username: username,
            email: passwordEmail
        }, {
            headers: {
                "Content-Type": "application/json"
            }
        });
        if(response.status === 200){
            console.log(response.data)
            navigate("/ViewChangedPassword")
        } else {
            navigate("/FindUserInfo")
        }
    }

    return (
        <div>
            <form method="post" action="/FindUsernameByEmail" onSubmit={handleUsernameSubmit}>
                email: <input type="email" name="email" onChange={(event) => setEmail(event.target.value)}/><br/>
                <input type="submit" value="아이디 찾기"/>
            </form>
            <form method="post" action="/UpdatePasswordByEmail" onSubmit={handlePasswordSubmit}>
                id: <input type="text" name="username" onChange={(event) => setUsername(event.target.value)}/>
                email: <input type="email" name="email" onChange={(event) => setPasswordEmail(event.target.value)}/><br/>
                <input type="submit" value="비밀번호 찾기"/>
            </form>
            <p>
                <NavLink to="/loginPage">로그인 페이지</NavLink>
            </p>
        </div>
    )
}

function ViewUsername(){
    const [username, setUsername] = useState<string>('');
    const navigate = useNavigate();
    const location = useLocation();

    useEffect(() => {
        const usernameFromState = location.state?.username;
        if (usernameFromState) {
            setUsername(usernameFromState);
        } else {
            navigate("/FindUserInfo");
        }
    }, [location.state, navigate]);

    return(
        <div>
            <h1>아이디 출력</h1>
            <p>username: {username}</p>
            <p>
                <NavLink to="/loginPage">로그인 페이지</NavLink><br/>
                <NavLink to="/RegisterPage">회원가입 페이지</NavLink><br/>
                <NavLink to="/FindUserInfo">회원 정보 찾기 페이지</NavLink><br/>
            </p>
        </div>
    )
}

function ViewChangedPassword(){
    return(
        <div>
            임시비밀번호로 변경되었습니다.
            <p>
                <NavLink to="/loginPage">로그인 페이지</NavLink>
            </p>
        </div>
    )
}

function ChangePasswordPage() {
    const [password, setPassword] = useState<string>("");
    const navigate = useNavigate();

    const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        axios.defaults.withCredentials = true;
        try {
            const response = await axios.post("/UpdatePasswordByUsername",
                {password: password},
                {headers: {'Content-Type':'application/json'}
                });
            if(response.status === 200){
                navigate('/=========================');
            } else {
                console.error("비밀번호 변경 실패")
                navigate('/=========================');
            }
        } catch (error) {
            console.error("Error: ", error)
        }
    }

    return (
        <div>
            <form id="ChangePasswordForm" onSubmit={handleSubmit}>
                New Password: <input type="text" value={password}
                                     onChange={(event) => setPassword(event.target.value)}/>
                <input type="submit" value="변경"/>
            </form>
            <p>
                <NavLink to="/MyPage">돌아가기</NavLink><br/>
            </p>
        </div>
    )
}

function ChangeEmailPage() {
    const [email, setEmail] = useState<string>("");
    const navigate = useNavigate();

    const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        axios.defaults.withCredentials = true;
        try{
            const response = await axios.post("/UpdateEmailByUsername",
                {email: email},
                {
                    headers: {
                        'Content-Type':'application/json'
                    }
                });
            if(response.status === 200){
                navigate('/=========================');
            } else {
                console.error("이메일 변경 실패")
                navigate('/=========================');
            }
        } catch (error) {
            console.error("Error: ", error)
        }
    }
    return(
        <div>
            <form id="ChangeEmailForm" onSubmit={handleSubmit}>
                email: <input type="text" value={email} onChange={(event) => setEmail(event.target.value)}/>
                <input type="submit" value="변경"/>
            </form>
            <p>
                <NavLink to="/MyPage">돌아가기</NavLink><br/>
            </p>
        </div>
    )
}

export default App;

20240530 모놀리틱)_ajax, 이메일인증 및 submit 제약

일일일코_장민기 — Fri, 31 May 2024 16:49:36 +0900

전체 코드

React

import React, {useEffect, useState} from "react";
import {NavLink, useNavigate} from "react-router-dom";
import axios from "axios";

function RegisterPage() {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [email, setEmail] = useState("");
    const [country, setCountry] = useState("");
    const [area, setArea] = useState("");
    const navigate = useNavigate();
    const [countryList, setCountryList] = useState([]);
    const [areaList, setAreaList] = useState([]);
    const [existUsername, setExistUsername] = useState("");
    const [existEmail, setExistEmail] = useState("");
    const [checkAuthorizationCodeField, setCheckAuthorizationCodeField] = useState("");
    const [code, setCode] = useState("");

    useEffect(() => {
        fetch("/findCountries").then((response) => {
            return response.json();
        }).then(function (result) {
            console.log(result)
            setCountryList(result)
            if (result.length > 0) {
                setCountry(result[0]);
            }
        })
    }, []);
    useEffect(() => {
        fetch(`/findAreasByCountry?country=${country}`).then((response) => {
            return response.json();
        }).then(function (result) {
            console.log(result)
            setAreaList(result);
        })
    }, [country]);
    const usernameAjax = async (event) => {
        const newUsername = event.target.value;
        setUsername(newUsername);
        axios.defaults.withCredentials = true;
        try {
            const response = await axios.post(`/usernameAjax?username=${newUsername}`, {}, {
                headers: {
                    "Content-Type": "application/json"
                }
            });
            if (response.status === 200) {
                console.log(response.data);
                if (response.data === true) {
                    setExistUsername("아이디 중복");
                } else {
                    setExistUsername("");
                }
            }
        } catch (error) {
            console.error(error);
        }
    }
    const emailAjax = async (event) => {
        const newEmail = event.target.value;
        setEmail(newEmail)
        axios.defaults.withCredentials = true;
        try {
            const response = await axios.post(`/emailAjax?email=${newEmail}`, {}, {
                headers: {
                    "Content-Type": "application/json"
                }
            });
            if (response.status === 200) {
                console.log(response.data)
                if (response.data === true) {
                    setExistEmail("이메일 중복")
                } else {
                    setExistEmail("")
                }
            }
        } catch (error) {
            console.error(error)
        }
    }
    const emailAuthorizationCode = async (event) => {
        axios.defaults.withCredentials = true;
        try {
            const response = await axios.post(`/emailAuthorizationCode?email=${email}`, {}, {
                headers: {
                    "Content-Type": "application/json"
                }
            });
            if (response.status === 200) {
                console.log(response.data)
                alert("인증번호가 메일로 전송되었습니다.")
            }
        } catch (error) {
            console.error(error)
        }
    }
    const codeAjax = async (event) => {
        const newCode = event.target.value;
        console.log("newCode: ", newCode)
        setCode(newCode);
        const cookies = document.cookie;    //모든 쿠키 가져오기
        const cookieArray = cookies.split(";") //모든 쿠키를 배열로 만들기
        const authorizeCookie = cookieArray.map(cookie => cookie.split("=")).find(([name]) => name === "authorizationCode");
        console.log(authorizeCookie)
        if (authorizeCookie[1] === newCode.toString()) {
            setCheckAuthorizationCodeField("확인되었습니다.")
        } else {
            setCheckAuthorizationCodeField("인증번호 오류")
        }
    }
    const handleSubmit = async (event) => {
        event.preventDefault();
        let errorMessage = '';
        switch (true) {
            case    existUsername === "아이디 중복":
                errorMessage = '아이디 중복 상태입니다.'
                break;
            case    existEmail === "이메일 중복":
                errorMessage = '이메일 중복 상태입니다.'
                break;
            case    checkAuthorizationCodeField === "인증번호 오류":
                errorMessage = '코드 불일치 상태입니다.'
                break;
            default:
                axios.defaults.withCredentials = true;
                try {
                    const response = await axios.post("/saveUser", {
                        username: username,
                        password: password,
                        email: email,
                        country: country,
                        area: area
                    }, {
                        headers: {
                            "Content-Type": "application/json"
                        }
                    });
                    if (response.status === 200) {
                        navigate("/LoginPage")
                    } else {
                        navigate("/RegisterPage")
                    }
                } catch (error) {
                    console.error("Error: ", error);
                }
        }
        if(errorMessage !== ""){
            alert(errorMessage);
        }
    }

    return (
        <div>
            <form id="registerForm" onSubmit={handleSubmit}>
                username:
                <input type="text" id="username" name="username" value={username}
                       onChange={usernameAjax}
                       required minLength="3"/><br/>
                <span id="existUsername">{existUsername}</span><br/>

                password:
                <input type="text" id="password" name="password" value={password}
                       onChange={(event) => setPassword(event.target.value)} required minLength="3"/><br/>

                email:
                <input type="email" id="email" name="email" value={email}
                       onChange={emailAjax}
                       required minLength="3"/><br/>
                <span id="existEmail">{existEmail}</span><br/>

                인증번호:
                <input type="text" id="authorizationCode" onChange={codeAjax}/>
                <input type="button" id="sendEmail" value="인증번호 보내기" onClick={emailAuthorizationCode}/><br/>
                <span id="checkAuthorizationCodeField">{checkAuthorizationCodeField}</span><br/>

                country:
                <select id="country" value={country} onChange={(event) => setCountry(event.target.value)}>
                    {countryList.map((country, index) => (
                        <option key={index} value={country}>{country}</option>
                    ))}
                </select><br/>

                area:
                <select id="area" value={area} onChange={(event) => setArea(event.target.value)}>
                    {areaList.map((area, index) => (
                        <option key={index} value={area}>{area}</option>
                    ))}
                </select>
                <input type="submit" value="회원가입"/>
            </form>
            <p>
                <NavLink to="/loginPage">로그인 페이지</NavLink>
            </p>
        </div>
    )
}

export default RegisterPage;

Java

RestController

package org.example.beforeLogin;

import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.example.mailController.MailController;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;

@RestController
@RequiredArgsConstructor
@Slf4j
public class BeforeLoginRestController {

    private final BeforeLoginService beforeLoginService;
    private final MailController mailController;

    @PostMapping("/usernameAjax")
    public ResponseEntity<Boolean> usernameAjax(String username) {
        return ResponseEntity.ok(beforeLoginService.usernameAjax(username));
    }

    @PostMapping("/emailAjax")
    public ResponseEntity<Boolean> emailAjax(String email) {
        return ResponseEntity.ok(beforeLoginService.emailAjax(email));
    }

    @PostMapping("/emailAuthorizationCode")
    public ResponseEntity<Boolean> emailAuthorizationCode(String email, HttpServletResponse httpServletResponse) throws IOException {
        log.info("emailAuthorizationCode: {}", email);
        mailController.mailCookie(httpServletResponse);
        mailController.authorizationCode_Email(email);
        return ResponseEntity.ok(true);
    }
}

username ajax

useState 설정

const [username, setUsername] = useState("");
const [existUsername, setExistUsername] = useState("");

- username은 현재 입력된 아이디를 저장하고 출력하는 변수

- existUsername은 현재 입력된 아이디가 중복된 아이디인지를 출력하기 위해 경고를 저장하고 출력하는 변수

return 설정

<input type="text" id="username" name="username" value={username}
       onChange={usernameAjax}
       required minLength="3"/><br/>
<span id="existUsername">{existUsername}</span><br/>

- onChange를 통해 입력할 때마다 ajax를 사용

- ajax의 결과값은 {existUsername} 을 통해 출력

- value={username}은 없어도 상관없음

axios 설정

const usernameAjax = async (event) => {
    const newUsername = event.target.value;
    setUsername(newUsername);
    axios.defaults.withCredentials = true;
    try {
        const response = await axios.post(`/usernameAjax?username=${newUsername}`, {}, {
            headers: {
                "Content-Type": "application/json"
            }
        });
        if (response.status === 200) {
            console.log(response.data);
            if (response.data === true) {
                setExistUsername("아이디 중복");
            } else {
                setExistUsername("");
            }
        }
    } catch (error) {
        console.error(error);
    }
}

- event.target.value를 통해 현재 입력한 username을 부르고, newUsername이라는 변수에 저장

- newUsername에 저장한 변수를 useState를 사용하기 위해 setUsername

- cors 처리를 위해 axios.defaults.withCredentials = true;

const response = await axios.post(`/usernameAjax?username=${newUsername}`

- post 타입으로 java에 username 전송하고 데이터를 response라는 변수로 받아옴

쿠키값과 비교하는 ajax

const codeAjax = async (event) => {
    const newCode = event.target.value;
    console.log("newCode: ", newCode)
    setCode(newCode);
    const cookies = document.cookie;    //모든 쿠키 가져오기
    const cookieArray = cookies.split(";") //모든 쿠키를 배열로 만들기
    const authorizeCookie = cookieArray.map(cookie => cookie.split("=")).find(([name]) => name === "authorizationCode");
    console.log(authorizeCookie)
    if (authorizeCookie[1] === newCode.toString()) {
        setCheckAuthorizationCodeField("확인되었습니다.")
    } else {
        setCheckAuthorizationCodeField("인증번호 오류")
    }
}

20240525_React와 Spring Boot 연결(SpringSecurity Login)

일일일코_장민기 — Sat, 25 May 2024 17:06:04 +0900

우선 알아야 할 것은 기존에 사용하던 SpringSecurity와의 차이이다.

1. 팀프로젝트

- 모놀리틱

- 프론트엔드는 jsp, 백엔드는 java를 사용하며 port 번호가 동일

2. MSA(1차)

- MSA

- 프론트엔드는 jsp, 백엔드는 java

--> SpringSecurity를 사용하는 모듈 자체가 동일

3. 프론트엔드와 백엔드의 분리

- 프론트엔드는 React

- 백엔드는 자바

--> 포트번호가 다름

--> SpringSecurity를 사용할 때 프론트엔드에서 인증요청이 백엔드로 넘어간 다음, 인증이 확인되면 프론트엔드로 다시 데이터를 브라우저에 뿌려줌

여기서 큰 차이가 발생하는 것은 1, 2번 vs 3번이다.

기존의 SpringSecurity 사용은 동일 모듈에서 사용했기 때문에 쿠키가 저장되는 것은 같은 포트 번호로 저장되었다.

ex) jsp도 java도 같은 모듈이기 때문에 동일한 포트번호를 사용

그런데 3번의 경우에는 프론트엔드와 백엔드가 분리되었기 때문에 쿠키가 다른 포트 번호로 저장되었다.

ex) react는 3000번, java는 8090번을 사용

이로인해 cors 등 다양한 문제가 발생했는데, 문제는 이걸 명시적으로 확인이 되지 않아서 문제 해결이 오래 걸렸다.

import { NavLink, useNavigate } from "react-router-dom";
import React, { useState } from "react";
import axios from "axios";

function LoginPage() {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const navigate = useNavigate();

    const handleSubmit = async (event) => {
        event.preventDefault();
        axios.defaults.withCredentials = true; //*******************************************************
        try {
            const response = await axios.post('http://localhost:8888/login', {
                username: username,
                password: password
            }, {
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            if (response.data.success) {
                navigate(response.data.frontendUrl);
            } else {
                console.log('로그인 실패');
                navigate(response.data.frontendUrl);
            }
        } catch (error) {
            console.error('Error:', error);
        }
    };

    return (
        <div>
            <form id="loginForm" onSubmit={handleSubmit}>
                <label>username: <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} /></label>
                <label>password: <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /></label>
                <span id="loginErrorField"></span><br/>
                <div>
                    <input type="submit" value="로그인" />
                </div>
            </form>
            <p>
                <NavLink to="/registerPage">회원가입 페이지</NavLink><br/>
                <NavLink to="/findUserInfo">회원 정보 찾기 페이지</NavLink><br/>
            </p>
        </div>
    );
}

export default LoginPage;

React의 로그인 페이지

- axios를 사용하여 백엔드의 스프링시큐리티 로그인인증 주소로 아이디와 비밀번호를 전송한다.

- 로그인에 성공하면 백엔드에서 지정해준 마이페이지 주소로 이동

- 로그인에 실패하면 백엔드에서 지정해준 로그인 페이지 주소로 이동

첫 번째로 문제가 되었던 부분

기존

@Override
public Authentication attemptAuthentication(final HttpServletRequest request, final HttpServletResponse response) {

    String username = request.getParameter("username");
    String password = request.getParameter("password");
    log.info("Attempting to authenticate user: " + username);
    UsernamePasswordAuthenticationToken authRequest = new UsernamePasswordAuthenticationToken(username, password);
    return authenticationManager.authenticate(authRequest);
}

- 기존에는 jsp의 파라미터를 가져왔기 때문에 request.getParameter를 사용하면 바로 username과 password를 가져올 수 있었다.

변경

@Override
public Authentication attemptAuthentication(final HttpServletRequest request, final HttpServletResponse response) {

    Map<String, String> requestBody = null;
    try {
        requestBody = new ObjectMapper().readValue(request.getInputStream(), Map.class);
    } catch (IOException e) {
        throw new RuntimeException(e);
    }
    String username = requestBody.get("username");
    String password = requestBody.get("password");
    log.info("Attempting to authenticate username: " + username);
    log.info("Attempting to authenticate password: " + password);
    UsernamePasswordAuthenticationToken authRequest = new UsernamePasswordAuthenticationToken(username, password);
    return authenticationManager.authenticate(authRequest);
}

- React에서 보내준 데이터를 받고자 할 때는 이와 같이 변경해야 했다.

- React에서 서버로 전송하는 데이터는 HTTP 요청의 본문으로 전달되며 JSON 형식이기 때문에 ObjectMapper를 사용하여 Body에서 username과 password를 가져와야 한다.

두 번째로 문제가 되었던 부분

@GetMapping("/myPage")
public ResponseEntity<Object> myPage(Principal principal) {
    log.info("principal : {}", principal);
    MemberVO memberVO = clothService.checkLogined(principal.getName());
    if (memberVO != null) {
        UseMemberDataDTO useMemberDataDTO = new UseMemberDataDTO();
        BeanUtils.copyProperties(memberVO, useMemberDataDTO);
        return ResponseEntity.ok(useMemberDataDTO);
    }
    String frontendUrl = "http://localhost:3000/loginPage"; 
    return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(frontendUrl);
}

여기서 principal이 null로 나오는 문제가 발생했다.

당연히 principal을 만들지 못한다고 생각하여 기존에 만들었던 LoginFilter와 JWTFilter를 계속 고쳐봤지만 문제가 해결되지 않았다.

특히 황당했던 부분은 쿠키를 만들었는데 안 만들어지는(?) 문제였다.

LoginFilter

@Override
protected void successfulAuthentication(final HttpServletRequest request, final HttpServletResponse response, final FilterChain chain, Authentication authResult) throws IOException, ServletException {

    SecurityUser securityUser = (SecurityUser) authResult.getPrincipal();
    String username = securityUser.getUsername();

    Collection<? extends GrantedAuthority> authorities = securityUser.getAuthorities();
    Iterator<? extends GrantedAuthority> authoritiesIterator = authorities.iterator();
    GrantedAuthority grantedAuthority = authoritiesIterator.next();
    String role = grantedAuthority.getAuthority();

    String token = jjwtUtil.createJwt(username, role, expiredMs);

    Cookie authCookie = new Cookie("AuthToken", token);
    authCookie.setMaxAge(360000);
    authCookie.setPath("/");
    authCookie.setHttpOnly(true);
    if (request.isSecure()) {
        authCookie.setSecure(true);
    }
    response.addCookie(authCookie);
    response.sendRedirect("/myPage");
}

이 파트에서

Cookie authCookie = new Cookie("AuthToken", token);
authCookie.setMaxAge(360000);
authCookie.setPath("/");
authCookie.setHttpOnly(true);
if (request.isSecure()) {
    authCookie.setSecure(true);
}
response.addCookie(authCookie);

이 코드를 통해 쿠키를 만들었고, 이 과정 자체에는 아무런 문제가 없다.

또한

JWTFilter

@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {

    String token = null;
    Cookie[] cookies = request.getCookies();
    if (cookies != null) {
        for (Cookie cookie : cookies) {
            if ("AuthToken".equals(cookie.getName())) {
                token = cookie.getValue();
                break;
            }
        }
    }
    log.info("JJWT Token: {}", token);

    if (token != null && jjwtUtil.validateToken(token)) {
        String username = jjwtUtil.getUsername(token);
        String country = jjwtUtil.getPassword(token);
        String area = jjwtUtil.getRole(token);

        MemberDTO memberDTO = new MemberDTO();
            memberDTO.setUsername(username);
            memberDTO.setCountry(country);
            memberDTO.setArea(area);

        SecurityUser springSecurityUser = new SecurityUser(memberDTO);
        Authentication authentication = new UsernamePasswordAuthenticationToken(springSecurityUser, null, springSecurityUser.getAuthorities());
        SecurityContextHolder.getContext().setAuthentication(authentication);
    }

    filterChain.doFilter(request, response);
}

이 파트에서

String token = null;
Cookie[] cookies = request.getCookies();
if (cookies != null) {
    for (Cookie cookie : cookies) {
        if ("AuthToken".equals(cookie.getName())) {
            token = cookie.getValue();
            break;
        }
    }
}
log.info("JJWT Token: {}", token);

이 코드를 통해 쿠키를 찾았고, 이 코드 자체에는 아무런 문제가 없다.

애초에 기존 프로젝트에서 잘만 작동하던 코드였다.

그런데 JWTFilter에서 token을 찾지 못하는 현상이 발생했고, Controller에서도 Principal이 null로 나오는 현상이 발생했다.

또한 크롬 개발자 도구에서 애플리케이션 탭의 쿠키를 확인했을 때 JWT가 없는 것도 확인할 수 있었다.

하지만 알고보니 이런 현상은 모두 CORS 때문에 발생한 현상이었다.

CORS는 MSA로 프로젝트를 짜면서 발생한 적이 있었지만, CORS 문제라고 명시적으로 표시되었는데 이번에는 CORS 문제라고 어디에도 표시되지 않았다. 애초에 CORS 문제는 생각하고 있었기 때문에 백엔드의 Configuration 설정은 이미 해두어서 더 찾기 어려웠던 것 같다.

package org.example.util;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true);
    }
}

그래도 CORS 문제라고 의심이 든 계기는 네트워크 응답헤더를 확인했을 때 Set-Cookie를 확인했을 때였다.

백엔드 어디에서도, 애플리케이션 탭에서도 확인이 안 되던 쿠키가 네트워크 응답헤더에는 있었다.

이 과정을 거치며 CORS 문제를 재검토하게 되었고, 프론트에서도 백엔드처럼 credential 설정이 필요하다는 것을 알게 되었다.

const handleSubmit = async (event) => {
    event.preventDefault();
    axios.defaults.withCredentials = true; //*******************************************************

********** 의문인 부분**********

# 쿠키가 백엔드에서 생성되었고 응답헤더에 넣었다. 또한 쿠키는 클라이언트에서 관리한다. 그러면 이번 문제 상황에서는 어디에 저장이 되었던 것인가?

-> 백엔드 8888포트 / 프론트 3000포트

1. 백엔드 8888포트에 저장이 되진 않았을 것이다.

-> 저장되었다면 백엔드에서 쿠키 조회를 했을 때 출력됐었겠지...

2. 프론트 3000번 포트에 저장이 되었는가?

-> 그러면 왜 localhost:3000 애플리케이션 탭의 쿠키에서 확인이 되지 않는거지?

3. 그러면 8888번 포트 클라이언트에 저장이 된건가?

-> 마찬가지로 localhost:8888 애플리케이션 탭의 쿠키에서 확인이 되지 않는다...

결론: 저장된 쿠키는 어디에 있었길래 확인이 어려웠던 걸까?

상황도 난해하고, 찾아도 나오질 않는다...보충해야 할 부분...

참고 자료

https://velog.io/@youjung/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%99%80-%EB%B0%B1%EC%97%94%EB%93%9C-%EB%B6%84%EB%A6%AC%ED%96%88%EC%9D%84-%EB%95%8C-%EC%BF%A0%ED%82%A4-%EA%B3%B5%EC%9C%A0-%EC%95%88%EB%90%A0-%EB%95%8C

프론트와 백엔드 분리했을 때 쿠키 공유 안되는 이유 (feat. Credentials 옵션)

문제 상황 [ 개발 환경 ] 프론트엔드: http://localhost:8081 백엔드: http://localhost:8080 혼자서 프론트엔드와 백엔드를 분리한 상황에서 로그인을 개발하고 있는데, 세션에서 유저 정보를 제대로 가져오

velog.io

20240525_옷 출력 필터링

일일일코_장민기 — Sat, 25 May 2024 09:57:09 +0900

옷 출력 화면에 간단한 필터 기능을 추가했다.

1. 카테고리가 기입된 필터를 변경하면 출력되는 옷은 해당 카테고리만 출력된다.

2. 옷 수정 화면에서 필터링이 된 상태로 옷을 추가할 경우, 추가한 옷의 카테고리로 자동 필터링

코드

jsp

<table>
    <tr>
        <th>필터:</th>
        <th>
            <select id="categoryFilter">
                <option value="기본">기본</option>
                <option value="모자">모자</option>
                <option value="겉옷">겉옷</option>
                <option value="상의">상의</option>
                <option value="하의">하의</option>
                <option value="양말">양말</option>
                <option value="신발">신발</option>
            </select>
        </th>
    </tr>
    <tr>
        <th>Category</th>
        <th>Cloth</th>
        <th>수정</th>
        <th>삭제</th>
    </tr>
    <tbody id="allClothesField"></tbody>
</table>

$("#categoryFilter").on("change", function(){
    viewMyClothes()
})

// 옷 저장 Ajax
$("#clothSaveField").on("submit", function(event){
    event.preventDefault();
    var userid = $("#userid").val();
    var clothdata = $("#cloth").val();
    var category = $("#categoryForCloth").val();
    var categoryFilter = $("#categoryFilter");

    $.ajax({
        type: "post",
        url: "/updateCloth",
        data: {
            userid: userid,
            clothdata : clothdata,
            category : category
        },
        datatype: "text",
        success: function(){
            if(categoryFilter.val() !== "기본"){
                $("#categoryFilter").val(category)
            }
            viewMyClothes()
        },
        error: function(){
            console.log("옷 저장 ajax 에러")
        }
    })
})// 옷 저장 Ajax

function viewMyClothes() {
    var userid = $("#userid").val()
    var categoryFilter = $("#categoryFilter").val()
    var allClothesField = $("#allClothesField")
    $.ajax({
        type: "post",
        url: "/selectAllClothes",
        data: {
            userid: userid,
            categoryFilter: categoryFilter
        },
        success: function (response) {
            var tableHtml = "";
            response.forEach(function (cloth) {
                tableHtml += "<tr>";
                tableHtml += "<td class='category'>" + cloth.category + "</td>";
                tableHtml += "<td class='clothdata'>" + cloth.clothdata + "</td>";
                tableHtml += "<td class='updateEvent' data-id='" + cloth.id + "'>수정</td>>"
                tableHtml += "<td class='deleteEvent' data-id='" + cloth.id + "'>" + "x" + "</td>";
                tableHtml += "</tr>";
            });

            // 생성된 표를 화면에 출력
            allClothesField.html(tableHtml);
        },
        error: function () {
            console.log("저장된 옷 불러오기 실패")
        }
    })
}

Controller

//옷 불러오기 메서드
@PostMapping("/selectAllClothes")
public List<ClothDTO> selectAllClothes(Integer userid, String categoryFilter){
    List<ClothDTO> clothDTOList = clothService.findAllByUserid(userid);
    if(Objects.equals(categoryFilter, "기본")){
        return clothDTOList;
    }
    List<ClothDTO> resultClothDTOList = new ArrayList<>();
    for (ClothDTO clothDTO : clothDTOList) {
        if(Objects.equals(clothDTO.category, categoryFilter)){
            resultClothDTOList.add(clothDTO);
        }
    }
    return resultClothDTOList;
}

jsp

<table>
    <tr>
        <th>필터:</th>
        <th>
            <select id="categoryFilter">
                <option value="기본">기본</option>
                <option value="모자">모자</option>
                <option value="겉옷">겉옷</option>
                <option value="상의">상의</option>
                <option value="하의">하의</option>
                <option value="양말">양말</option>
                <option value="신발">신발</option>
            </select>
        </th>
    </tr>
    <tr>
        <th>Category</th>
        <th>Cloth</th>
        <th>수정</th>
        <th>삭제</th>
    </tr>
    <tbody id="allClothesField"></tbody>
</table>

- 기존에는 div 태그 하나만 두고, js에서 모든 태그를 다 만들었다.

- 바뀌는 부분은 테이블의 내용물 뿐인데 그래야 하나 싶은 생각이 들었고, 테이블 껍데기는 jsp에서 바로 구현했다.

- 그런데 저 select 내용물은 DB에 저장된 전체 카테고리만 출력해야 할지, 아니면 이대로 기입을 하는게 좋을지 고민이다.

- 굳이 이런 것까지 DB에서 데이터를 불러와야 되나? 싶은 생각과 DB에 없는 카테고리가 출력되거나, DB에 추가된 카테고리가 출력되지 않을 수 있다는 생각이 교차 중.

- 다만, 해당 프로젝트에서는 카테고리가 더 추가될 만한 것이 애매하기 때문에 이대로도 괜찮다고 생각한다.(액세사리나 가방은 GPT가 패션을 잘 이해하기 못하고 날씨에 따라서 사용 구분을 잘하지 못한다.)

var userid = $("#userid").val()
var categoryFilter = $("#categoryFilter").val()
var allClothesField = $("#allClothesField")
$.ajax({
    type: "post",
    url: "/selectAllClothes",
    data: {
        userid: userid,
        categoryFilter: categoryFilter
    },
    success: function (response) {
        var tableHtml = "";
        response.forEach(function (cloth) {
            tableHtml += "<tr>";
            tableHtml += "<td class='category'>" + cloth.category + "</td>";
            tableHtml += "<td class='clothdata'>" + cloth.clothdata + "</td>";
            tableHtml += "<td class='updateEvent' data-id='" + cloth.id + "'>수정</td>>"
            tableHtml += "<td class='deleteEvent' data-id='" + cloth.id + "'>" + "x" + "</td>";
            tableHtml += "</tr>";
        });

- jsp에서 만드는 테이블의 껍데기를 제거하고 새로 생긴 필터 데이터를 컨트롤러로 보낼 수 있도록 추가했다.

$("#categoryFilter").on("change", function(){
    viewMyClothes()
})

- 필터를 변경할 때마다 재출력할 수 있도록 기능을 추가했다.

// 옷 저장 Ajax
$("#clothSaveField").on("submit", function(event){
    event.preventDefault();
    var userid = $("#userid").val();
    var clothdata = $("#cloth").val();
    var category = $("#categoryForCloth").val();
    var categoryFilter = $("#categoryFilter");

    $.ajax({
        type: "post",
        url: "/updateCloth",
        data: {
            userid: userid,
            clothdata : clothdata,
            category : category
        },
        datatype: "text",
        success: function(){
            if(categoryFilter.val() !== "기본"){
                $("#categoryFilter").val(category)
            }
            viewMyClothes()
        },
        error: function(){
            console.log("옷 저장 ajax 에러")
        }
    })
})// 옷 저장 Ajax

- 전체 옷이 출력되지 않은 상태에서만 옷을 추가했을 때, 자동 필터링이 되도록 기능을 개선했다.

java

@PostMapping("/selectAllClothes")
public List<ClothDTO> selectAllClothes(Integer userid, String categoryFilter){
    List<ClothDTO> clothDTOList = clothService.findAllByUserid(userid);
    if(Objects.equals(categoryFilter, "기본")){
        return clothDTOList;
    }
    List<ClothDTO> resultClothDTOList = new ArrayList<>();
    for (ClothDTO clothDTO : clothDTOList) {
        if(Objects.equals(clothDTO.category, categoryFilter)){
            resultClothDTOList.add(clothDTO);
        }
    }
    return resultClothDTOList;
}

- 기존에는 단순히 userid에 따라 옷 전체를 전부 출력하는 단순한 기능이었다.

- 이제는 2가지 케이스로 나누어서 필터가 '기본' 상태일 때는 이전과 동일하게 옷 전체를 출력한다.

- 필터가 '기본' 상태가 아닐 때는 해당 카테고리에 해당하는 옷들만 새로운 리스트에 넣어 필터링된 옷 목록을 출력한다.

개선될 부분

- 페이지네이션 추가

20240524_옷 수정하기

일일일코_장민기 — Fri, 24 May 2024 11:44:23 +0900

기존의 옷 출력 화면은 자바스크립트로 구현되었다.

그래서 옷 수정 버튼 및 수정 작업도 자바스크립트로 작동하는게 편하다...할 수 밖에 없다 인가?

아무

//옷 수정 상태로 변경
$(document).on("click", ".updateEvent", function () {
    var currentRow = $(this).closest("tr")                                 //버튼이 소속된 행을 찾음
    var categoryCell = currentRow.find(".category");            //categoryCell 찾기
    var clothdataCell = currentRow.find(".clothdata");          //clothdataCell 찾기
    var categoryText = categoryCell.text();                            //categoryText 찾기
    var clothdataText = clothdataCell.text();                          //clothdataText 찾기
    var updateCell = currentRow.find(".updateEvent")            //수정 버튼 찾기

    var selectHtml ='<select id="categoryForCloth" name="categoryForCloth">' +
                        '<option value="모자">모자</option>' +
                        '<option value="겉옷">겉옷</option>' +
                        '<option value="상의">상의</option>' +
                        '<option value="하의">하의</option>' +
                        '<option value="양말">양말</option>' +
                        '<option value="신발">신발</option>' +
                    '</select>';
    categoryCell.html(selectHtml);
    categoryCell.find('select').val(categoryText);

    clothdataCell.html("<input type='text' id='cloth' name='cloth' value='"+clothdataText+"'/>")

    updateCell.text("저장");
    updateCell.removeClass("updateEvent").addClass("saveEvent");
})

// 옷 업데이트 ajax
$(document).on("click", ".saveEvent", function () {
    var userid = $("#userid").val();
    var currentRow = $(this).closest("tr");                              // 버튼이 소속된 행을 찾음
    var categoryCell = currentRow.find(".category select");   // <select> 요소 찾기
    var clothdataCell = currentRow.find(".clothdata input");  // <input> 요소 찾기
    var updateCell = currentRow.find(".saveEvent");           // 저장 버튼 찾기

    var categoryText = categoryCell.val(); // 선택된 카테고리 값
    var clothdataText = clothdataCell.val(); // 입력된 옷 데이터 값

    $.ajax({
        type: "post",
        url: "/updateCloth",
        data: {
            id: updateCell.data("id"),
            userid: userid,
            category: categoryText,
            clothdata: clothdataText
        },
        success: function() {
            console.log("데이터 저장 성공");
        },
        error: function() {
            console.log("데이터 저장 실패");
        }
    });

    // 선택된 값과 입력된 값으로 셀을 업데이트
    categoryCell.closest(".category").text(categoryText);
    clothdataCell.closest(".clothdata").text(clothdataText);

    // 저장 버튼을 수정 버튼으로 변경
    updateCell.text("수정");
    updateCell.removeClass("saveEvent").addClass("updateEvent");
});

function viewMyClothes() {
    var userid = $("#userid").val()
    var allClothesField = $("#allClothesField")
    $.ajax({
        type: "post",
        url: "/selectAllClothes",
        data: {userid: userid},
        success: function (response) {
            var tableHtml = "<table>";
            tableHtml += "<tr><th>Category</th><th>Cloth</th><th>수정</th><th>삭제</th></tr>";
            response.forEach(function (cloth) {
                tableHtml += "<tr>";
                tableHtml += "<td class='category'>" + cloth.category + "</td>";
                tableHtml += "<td class='clothdata'>" + cloth.clothdata + "</td>";
                tableHtml += "<td class='updateEvent' data-id='" + cloth.id + "'>" + "수정" + "</td>>"
                tableHtml += "<td class='deleteEvent' data-id='" + cloth.id + "'>" + "x" + "</td>";
                tableHtml += "</tr>";
            });
            tableHtml += "</table>";

            // 생성된 표를 화면에 출력
            allClothesField.html(tableHtml);
        },
        error: function () {
            console.log("저장된 옷 불러오기 실패")
        }
    })
}

tableHtml += "<tr><th>Category</th><th>Cloth</th><th>수정</th><th>삭제</th></tr>";
response.forEach(function (cloth) {
    tableHtml += "<tr>";
    tableHtml += "<td class='category'>" + cloth.category + "</td>";
    tableHtml += "<td class='clothdata'>" + cloth.clothdata + "</td>";
    tableHtml += "<td class='updateEvent' data-id='" + cloth.id + "'>" + "수정" + "</td>>"
    tableHtml += "<td class='deleteEvent' data-id='" + cloth.id + "'>" + "x" + "</td>";
    tableHtml += "</tr>";
});
tableHtml += "</table>";

tableHtml 수정

- 헤더: 수정 파트 추가

- 바디: 각 컬럼 클래스 추가

var currentRow = $(this).closest("tr")                      //버튼이 소속된 행을 찾음
var categoryCell = currentRow.find(".category");            //categoryCell 찾기
var clothdataCell = currentRow.find(".clothdata");          //clothdataCell 찾기
var categoryText = categoryCell.text();                     //categoryText 찾기
var clothdataText = clothdataCell.text();                   //clothdataText 찾기
var updateCell = currentRow.find(".updateEvent")            //수정 버튼 찾기

- this와 closest를 사용하여 수정 버튼을 누른 행을 찾는다.

- 해당 행으로부터 각 컬럼의 셀과 데이터를 찾는다.

var selectHtml ='<select id="categoryForCloth" name="categoryForCloth">' +
                    '<option value="모자">모자</option>' +
                    '<option value="겉옷">겉옷</option>' +
                    '<option value="상의">상의</option>' +
                    '<option value="하의">하의</option>' +
                    '<option value="양말">양말</option>' +
                    '<option value="신발">신발</option>' +
                '</select>';
categoryCell.html(selectHtml);
categoryCell.find('select').val(categoryText);

clothdataCell.html("<input type='text' id='cloth' name='cloth' value='"+clothdataText+"'/>")

updateCell.text("저장");
updateCell.removeClass("updateEvent").addClass("saveEvent");

- html와 text메서드를 통해 각 컬럼의 셀에 데이터를 입력한다.

- 수정은 저장으로 바꾸고 class도 변경해준다.

var userid = $("#userid").val();
var currentRow = $(this).closest("tr");                   // 버튼이 소속된 행을 찾음
var categoryCell = currentRow.find(".category select");   // <select> 요소 찾기
var clothdataCell = currentRow.find(".clothdata input");  // <input> 요소 찾기
var updateCell = currentRow.find(".saveEvent");           // 저장 버튼 찾기

var categoryText = categoryCell.val(); // 선택된 카테고리 값
var clothdataText = clothdataCell.val(); // 입력된 옷 데이터 값

다시 저장 버튼을 누르면 작동되는 함수

- 마찬가지로 행의 정보를 찾는다.

- 여기에서 초기화하는 변수들은 DTO로 만들어 백엔드로 넘어갈 것이다.

//옷 추가 및 수정하기 메서드
@PostMapping("/updateCloth")
public void updateCloth(ClothDTO updatedCloth){
    clothService.updateClothes(updatedCloth);
}

- 백엔드의 url은 옷 추가 메서드와 동일하다

- save를 사용하는 jpa이기 때문에 가능하다.

// 선택된 값과 입력된 값으로 셀을 업데이트
categoryCell.closest(".category").text(categoryText);
clothdataCell.closest(".clothdata").text(clothdataText);

// 저장 버튼을 수정 버튼으로 변경
updateCell.text("수정");
updateCell.removeClass("saveEvent").addClass("updateEvent");

- ajax가 종료되면 현재 input과 select로 바뀌어 있는 셀을 text로 바꾼다.

- 저장 버튼도 원래대로 수정 버튼으로 변경하고, 클래스도 바꾸어준다.

20240523_메일 시스템(임시비밀번호 전송, 이메일 인증)

일일일코_장민기 — Thu, 23 May 2024 19:40:56 +0900

React 공부 및 모놀리틱 프로젝트 구현에 시간을 쓰다보니 오랜만에 기능을 추가했다.

전체코드

application.properties

spring.mail.host=smtp.gmail.com
spring.mail.port=587
spring.mail.username=이메일
spring.mail.password=이메일 코드
spring.mail.properties.mail.smtp.starttls.enable=true
spring.mail.properties.mail.smtp.starttls.required=true
spring.mail.properties.mail.smtp.auth=true

MailController

package org.member.mailController;

import jakarta.servlet.http.Cookie;
import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;
import java.time.Duration;
import java.time.LocalDateTime;
import java.util.HashMap;
import java.util.Map;

@RestController
@RequiredArgsConstructor
@Slf4j
public class MailController {

    @Value("${spring.mail.username}")
    private static String from;
    private final MailService mailService;

    private static final String from_email = from;
    private String expiredTime;
    private String authorizationCode;

    @PostMapping("/authorizationCode_Email")
    public void authorizationCode_Email(String to_email) throws IOException {

        Map<String,String> changeData = new HashMap<>();

        //******************복사 후 수정하는 부분******************
        String emailCode = "authorizationCode_Email";
        String email_title = "[회원가입인증] 회원가입 인증번호 전송";
        changeData.put("##인증번호##", authorizationCode);               
        changeData.put("##인증번호_유효기간##", expiredTime);        
        //******************복사 후 수정하는 부분******************

        String email_Form = "static/mailForm/"+emailCode+"_Form.html";
        String innerImageName = emailCode+"_Image";
        String innerImagePath = "/static/mailForm/image/"+innerImageName+".png";

        String email_body = mailService.emailBody(email_Form, changeData);
        mailService.sendEmail(from_email, to_email, email_title, email_body, innerImageName, innerImagePath);
    }


    public void temporaryPassword_Email(String to_email, String temporaryPassword, String username) throws IOException {

        Map<String,String> changeData = new HashMap<>();

        //******************복사 후 수정하는 부분******************
        String emailCode = "temporaryPassword_Email";
        String email_title = "[회원정보변경] 임시 비밀번호 발급";
        changeData.put("##유저_링크##", "www.naver.com");           //임시 링크
        changeData.put("##유저_아이디##", username);
        changeData.put("##유저_비밀번호##", temporaryPassword);
        //******************복사 후 수정하는 부분******************

        String email_Form = "static/mailForm/"+emailCode+"_Form.html";
        String innerImageName = emailCode+"_Image";
        String innerImagePath = "/static/mailForm/image/"+innerImageName+".png";

        String email_body = mailService.emailBody(email_Form, changeData);
        mailService.sendEmail(from_email, to_email, email_title, email_body, innerImageName, innerImagePath);

    }

    @PostMapping("/mailCookie")
    public void mailCookie(HttpServletResponse httpServletResponse){

        authorizationCode = "111111"; //임시 인증번호
        int authorialTime = 180;

        LocalDateTime now = LocalDateTime.now();
        expiredTime = now.plus(Duration.ofSeconds(authorialTime)).toString();

        Cookie cookie = new Cookie("authorizationCode", authorizationCode);
            cookie.setMaxAge(authorialTime);
            httpServletResponse.addCookie(cookie);
    }

    @PostMapping("/checkAuthorizationCode")
    public boolean checkAuthorizationCode(String enteredCode){
        return authorizationCode.equals(enteredCode);
    }

    @PostMapping("/deleteAuthorizataionCodeCookiee")
    public void deleteAuthorizataionCodeCookiee(HttpServletResponse httpServletResponse){
        Cookie cookie = new Cookie("authorizationCode", "");
        cookie.setMaxAge(0);
        httpServletResponse.addCookie(cookie);
    }
}

MailService

package org.member.mailController;

import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.core.io.ClassPathResource;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.stereotype.Service;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.Map;

@Service
@RequiredArgsConstructor
@Slf4j
public class MailService {

    private final JavaMailSender mailSender;

    public void sendEmail(String fromEmail, String toEmail, String emailTitle, String emailBody, String innerImageName, String innerImagePath) {
        mailSender.send(
                mimeMessage -> {
                    MimeMessageHelper messageHelper = new MimeMessageHelper(mimeMessage, true);                // true: 멀티파트 메세지를 사용
                    messageHelper.setFrom(fromEmail);
                    messageHelper.setTo(toEmail);
                    messageHelper.setSubject(emailTitle);
                    messageHelper.setText(emailBody, true);                                                        // true: html을 사용
                    messageHelper.addInline(innerImageName, new ClassPathResource(innerImagePath));
                });
    }

    public String emailBody(String emailForm, Map<String, String> changeData) throws IOException {
        ClassPathResource classPathResource = new ClassPathResource(emailForm);
        BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(classPathResource.getInputStream()));

        String line;
        StringBuilder email_body = new StringBuilder();
        while ((line = bufferedReader.readLine()) != null) {
            for (Map.Entry<String, String> entry : changeData.entrySet()) {
                line = line.replace(entry.getKey(), entry.getValue());
            }
            email_body.append(line);
            email_body.append("\n");
        }
        return email_body.toString();
    }

}

jsp

인증번호: <input type="text" id="authorizationCode"><br>
<input type="button" id="sendEmail" value="인증번호 보내기"><br>
<span id="checkAuthorizationCodeField"></span><br>

$(function() {

    //인증번호 쿠키 삭제
    deleteAuthorizataionCodeCookiee()
     $("#email").on("input", function () {
        $("#existEmail").html('')
    })
    //인증번호 칸 입력 시 경고창 삭제
    $("#authorizationCode").on("input", function () {
        $("#checkAuthorizationCodeField").html('')
    })
    //제출 시 재확인 및 경고창 확인
    $("#registerForm").on("submit", function (event) {
        checkUsername()
        checkEmail()
        checkAuthorizationCode()
        if ($("#existUsername").html().trim() !== ""
            || $("#existEmail").html().trim() !== ""
            || $("#checkAuthorizationCodeField").text().trim() !== "확인되었습니다.") {
            event.preventDefault();
        } else {
            $("#registerForm")[0].submit();
        }
    })
})

function send_authorizationCode() {
    const to_email = $("#email").val();
    let authorizationCode = "";
    $.ajax({
        type: "post",
        url: "/mailCookie",
        dataType: "text",
        error: function () {
            console.log("인증번호 발급 에러")
        }
    });
    $.ajax({
        type: "post",
        url: "/authorizationCode_Email",
        data: {
            to_email: to_email
        }
    });
}

function checkAuthorizationCode() {
    const authorizationCode = $("#authorizationCode").val()
    const checkAuthorizationCodeField = $("#checkAuthorizationCodeField")
    $.ajax({
        type: "post",
        url: "/checkAuthorizationCode",
        data: {
            enteredCode: authorizationCode
        },
        success: function (response) {
            if (response === true) {
                checkAuthorizationCodeField.html("확인되었습니다.").css("color", "black");
            } else {
                checkAuthorizationCodeField.html("인증번호가 다릅니다.").css("color", "red");
            }
        },
        error: function () {
            console.log("인증번호 미발송")
        }
    })
}

function deleteAuthorizataionCodeCookiee() {
    $.ajax({
        type: "post",
        url: "/deleteAuthorizataionCodeCookiee",
        success: function () {
            console.log("쿠키 삭제 성공")
        },
        error: function () {
            console.log("쿠키 삭제 실패")
        }
    })
}

MemberService

mailController.temporaryPassword_Email(memberVO.getEmail(), newPassword, memberVO.getUsername());

사실 팀프로젝트 때 쓰던 것과 별 다른게 없다...

https://minkee95.tistory.com/140

스프링 부트 팀플) 20240310_이메일 시스템 구축

자고 일어나자 마자 암호화/복호화 시스템 한번 보고 이메일 시스템 구축에 들어갔다. 암호화 자체는 잘 되지만, 어제랑 달리 암호가 어째서인지 바뀌진 않는다. 안 되는 건 아니지만, 뭔가 짜게

minkee95.tistory.com

https://minkee95.tistory.com/141

스프링 부트 팀플) 20240310_이메일 인증 구현

우선 컨트롤러에 다 때려박았던 코드를 서비스로 분산했다. 이메일 인증 시스템을 위해서는 크게 6가지 작업이 필요하다. 1. 6자리 랜덤 정수를 만드는 함수 2. 그 6자리 정수를 3분만 유효한 쿠키

minkee95.tistory.com

https://minkee95.tistory.com/163

스프링 부트 팀플) 20240312_Resource에 있는 이메일.html 사용하기

https://komas.tistory.com/142 [Spring] 스프링 Resources 파일 읽기, 복사 resoruces에 위치한 data.json을 읽어야 한다. { "hello": "123" } data.json의 내용은 다음과 같다. @SpringBootApplication public class RestApIsApplication { pub

minkee95.tistory.com

https://minkee95.tistory.com/175

스프링 부트 팀플) 20240313_이메일 시스템 완성

MailController 일부 //단순 메일 전송 @PostMapping("/joinEmail") public String joinEmail(String userEmail, String userName) throws Exception { String authNumber = makeRandomNumber(); Map changeData = new HashMap(); System.out.println(userEmail); Sys

minkee95.tistory.com

redux toolkit 기초

일일일코_장민기 — Thu, 23 May 2024 08:35:03 +0900

App.js

import React from "react";

import { Provider, useDispatch, useSelector } from "react-redux";

import counterSlice from "./counterSlice.js";

import store from "./store.js";

// const initialState = {value:0};

// const reducer = (state, action) =>{

// if(action.type==="up"){

// return{...state, value:state.value + action.step}

// }

// return state;

// }

// const store = createStore(reducer, initialState);

// createStore(reducer);

// export default function App(){

// return(

// <div>

// <Provider store={store}>

// <Counter></Counter>

// </Provider>

// </div>

// );

// }

// const Counter = () =>{

// const dispatch = useDispatch();

// const count = useSelector((state) => state.value)

// return(

// <div>

// <button onClick={() => {dispatch({type:'up', step:2})}}>+</button>{count}

// </div>

// );

// }

export default function App(){

return(

<div>

</div>

</Provider>

)

}

function Counter(){

const dispatch = useDispatch();

const count = useSelector((state) => {

console.log("state: ", state);

return state.counter.value}); //state 중 counter reducer의 state(store 기준)

//counter는 counterSlice.reducer이기 떄문에 counterSlice의 value 출력

return(

<div>

<button onClick={() => {

// dispatch({type: 'counterSlice/up', step: 2}) //type은 counterSlice라고 name이 붙은 slice

// //해당 slice의 reducers 중 up이라고 이름 붙은 함수

dispatch(counterSlice.actions.up(2)) //type은 counterSlice/up

//--> 자동으로 counterSlice라고 name이 붙은 slice의 up 함수 사용

//2는 payload라는 이름으로 전달

}}>+</button>{count}

</div>

)

}

store.js

import { configureStore } from "@reduxjs/toolkit";

import counterSlice from "./counterSlice";

const store = configureStore({

reducer:{

counter:counterSlice.reducer,

}

})

export default store;

counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({

name:'counterSlice',

initialState:{value:0}, //초기값은 0

reducers:{

up: (state, action) => {

console.log("action: ", action)

//state.value += action.step;

state.value += action.payload;

}

});

export default counterSlice;

1. redux toolkit
- 설정할 것을 줄여줌
- 반복적으로 작성하는 코드를 줄여줌
- 불변성 유지 용이

================================================================

2. 기존 redux
import React from "react";
import { Provider, useDispatch, useSelector } from "react-redux";
import { createStore } from "redux";

const initialState = {value:0};
const reducer = (state, action) =>{
    if(action.type==="up"){
        return{...state, value:state.value + action.step}
    }
    return state;
}
const store = createStore(reducer, initialState);
createStore(reducer);

export default function App(){
    return(
        <div>
            <Provider store={store}>
                <Counter></Counter>
            </Provider>
        </div>
    );
}

const Counter = () =>{
    const dispatch = useDispatch();
    const count = useSelector((state) => state.value)
    return(
        <div>
            <button onClick={() => {dispatch({type:'up', step:2})}}>+</button>{count}
        </div>
    );
}

####################################
const initialState = {value:0};
// 초기값 지정

const reducer = (state, action) =>{
    if(action.type==="up"){
        return{...state, value:state.value + action.step}
    }
    return state;
}
// useSelect와 useDispatch 사용 시 사용할 함수 설정

const store = createStore(reducer, initialState);
createStore(reducer);
// useSelect와 useDispatch 사용 시 사용할 함수와 초기값 지정

<Provider store={store}>
    <Counter></Counter>
</Provider>
//Provider 설정

####################################
const dispatch = useDispatch();
//useDispatch 설정

const count = useSelector((state) => state.value)
//useSelector 설정

<button onClick={() => {dispatch({type:'up', step:2})}}>+</button>{count}
//dispatch: 액션 설정

================================================================

2. 리덕스 툴킷 도입
npx create-react-app my-app --template redux
npm install @reduxjs/toolkit
slice: store 안의 store

import { createSlice } from "@reduxjs/toolkit";
const counterSlice = createSlice({
    name:'counterSlice',
    initialState:{value:0},
    reducers:{
        up: (state, action) => {
            state.value += action.step;
        }
    }
});
- counterSlice라는 이름의 small store 작성
- initialState로 초기값 지정
- reducers(복수형)을 통해 액션들 설정

================================================================

3. 리덕스 툴킷 효과

up: (state, action) => {}
==> const reducer = (state, action) =>{
        if(action.type==="up"){
        }
        return state;
    }
- 툴킷을 통해 같은 역할

state.value += action.step;
==> return{...state, value:state.value + action.step}
- 툴킷을 통해 같은 역할

================================================================

4. store 작성
- slice를 모아서 store로 작성
import { createSlice, configureStore } from "@reduxjs/toolkit";
const store = configureStore({
    reducer:{
        counter:counterSlice.reducer,
    }
})

<Provider store={store}>
    <div>
        <Counter></Counter>
    </div>
</Provider>

reducer: {
    슬라이스 이름:  슬라이스 상수.reducer
}

================================================================

5. Counter 작성
function Counter(){
    const dispatch = useDispatch();
    const count  = useSelector((state) => {
        console.log("state: ", state);
        return state.counter.value});                           //state 중 counter reducer의 state(store 기준)
                                                                //counter는 counterSlice.reducer이기 떄문에 counterSlice의 value 출력
    return(
        <div>
            <button onClick={() => {
                // dispatch({type: 'counterSlice/up', step: 2}) //type은 counterSlice라고 name이 붙은 slice
                //                                              //해당 slice의 reducers 중 up이라고 이름 붙은 함수
                dispatch(counterSlice.actions.up(2))            //type은 counterSlice/up
                                                                //--> 자동으로 counterSlice라고 name이 붙은 slice의 up 함수 사용
                                                                //2는 payload라는 이름으로 전달
            }}>+</button>{count}
        </div>
    )
}

================================================================

6. js 분할

//App.js    =====================================
import React from "react";
import { Provider, useDispatch, useSelector } from "react-redux";
import counterSlice from "./counterSlice.js";       //분할
import store from "./store.js";                     //분할

export default function App(){
    return(
        <Provider store={store}>
            <div>
                <Counter></Counter>
            </div>
        </Provider>

    )
}

function Counter(){
    const dispatch = useDispatch();
    const count  = useSelector((state) => {
        console.log("state: ", state);
        return state.counter.value});           //state 중 counter reducer의 state(store 기준)
                                                //counter는 counterSlice.reducer이기 떄문에 counterSlice의 value 출력
        return(
        <div>
            <button onClick={() => {
                // dispatch({type: 'counterSlice/up', step: 2}) //type은 counterSlice라고 name이 붙은 slice
                //                                              //해당 slice의 reducers 중 up이라고 이름 붙은 함수
                dispatch(counterSlice.actions.up(2))            //type은 counterSlice/up
                                                                //--> 자동으로 counterSlice라고 name이 붙은 slice의 up 함수 사용
                                                                //2는 payload라는 이름으로 전달
            }}>+</button>{count}
        </div>
    )
}

//Store.js  =====================================
import { configureStore } from "@reduxjs/toolkit";
import counterSlice from "./counterSlice";

const store = configureStore({
    reducer:{
        counter:counterSlice.reducer,
    }
})

export default store;

//CounterSlice.js =====================================
import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
    name:'counterSlice',
    initialState:{value:0},                 //초기값은 0
    reducers:{
        up: (state, action) => {
            console.log("action: ", action)
            //state.value += action.step;
            state.value += action.payload;
        }
    }
});

export default counterSlice;

redux 기초

일일일코_장민기 — Wed, 22 May 2024 23:16:51 +0900

전체 코드

import React, {useState} from "react";

import "./style.css";

import {createStore} from "redux";

import { Provider, useSelector, useDispatch, connect } from "react-redux";

const reducer = (currentState, action) => {

if(currentState === undefined){

return {

number: 1, // number의 기본값을 1로 지정

};

}

const newState = {...currentState};

if(action.type === "PLUS"){

newState.number++;

}

return newState;

}

const store = createStore(reducer);

export default function App(){

return(

</Provider>

</div>

)

}

const Right1 = (props) => {

return (

<div>

<h1>Right1</h1>

</div>

)

}

const Right2 = (props) => {

return (

<div>

<h1>Right2</h1>

</div>

)

}

const Right3 = (props) => {

const dispatch = useDispatch();

return (

<div>

<h1>Right3</h1>

<input type="button" value={"+"} onClick={() => {dispatch({type : "PLUS"})}}></input>

</div>

)

}

const Left1 = (props) => {

return(

<div>

</div>

)

}

const Left2 = (props) => {

return(

<div>

</div>

)

}

const Left3 = (props) => {

const number = useSelector((state) => state.number);

return(

<div>

<h1>Left3: {number}</h1>

</div>

)

}

1. Redux
- 원거리 state를 연결
ex) 말단 state와 root의 이벤트를 연결
- 이때 reducer를 통해 store에 있는 state를 어떻게 바꿀 것인지 결정하는 역할

redux를 쓰지 않고 연결할 경우
-> 컴포넌트마다 연결해주어야 함
import React, {useState} from "react";
import "./style.css";

export default function App(){

    const [number, setNubmer] = useState(1);

    return(
        <div id="container">
            <h1>Root: {number}</h1>
            <div id="grid">
                <Left1 number={number}></Left1>
                <Right1 onIncrease = {() => {setNubmer(number+1)}}></Right1>
            </div>
        </div>
    )
}
const Right1 = (props) => {
    return (
        <div>
            <h1>Right1</h1>
            <Right2 onIncrease={()=>{props.onIncrease()}}></Right2>
        </div>
    )
}
const Right2 = (props) => {
    return (
        <div>
            <h1>Right2</h1>
            <Right3 onIncrease={()=>{props.onIncrease()}}></Right3>
        </div>
    )
}
const Right3 = (props) => {
    return (
        <div>
            <h1>Right3</h1>
            <input type="button" value={"+"} onClick={() => {props.onIncrease()}}></input>
        </div>
    )
}
const Left1 = (props) => {
    return(
        <div>
            <h1>Left1: {props.number}</h1>
            <Left2 number={props.number}></Left2>
        </div>
    )
}

const Left2 = (props) => {
    return(
        <div>
            <h1>Left2: {props.number}</h1>
            <Left3 number={props.number}></Left3>
        </div>
    )
}

const Left3 = (props) => {
    return(
        <div>
            <h1>Left3: {props.number}</h1>
        </div>
    )
}

================================================================

2. Redux 설치
npm install redux react-redux

import {createStore} from "redux";
import { Provider, useSelector, useDispatch, connect } from "react-redux";

- 각각의 state의 변화를 불변하게 유지해야 함
--> 새로운 state를 만들 때 과거의 state를 복제하여 사용

- Provider:     state를 어떤 컴포넌트들에 제공할 지 가장 바깥쪽에 있는 울타리를 정하는 역할
                - props 중에 store을 반드시 정의해야 함
                --> Redux와 React를 연결하여 React 컴포넌트 트리에서 Redux 스토어를 사용할 수 있도록 하기 위함
- useSelector:  어떤 state 값을 쓰고 싶은지 선택
- useDispatch:  state 값을 변경할 때 사용

================================================================

3. Redux 사용

const reducer = (currentState, action) => {

    if(currentState === undefined){
        return {
            number: 1,                  // number의 기본값을 1로 지정
        };
    }
    const newState = {...currentState};
    if(action.type === "PLUS"){
        newState.number++;
    }
    return newState;
}
const store = createStore(reducer);

App()
<Provider store={store}>
    <Left1></Left1>
    <Right1></Right1>
</Provider>

Right3()
    const dispatch = useDispatch();

    return (
        <input type="button" value={"+"} onClick={() => {dispatch({type : "PLUS"})}}></input>
    )

Left3()
    const number = useSelector((state) => state.number);

    return(
        <h1>Left3: {number}</h1>
    )

    1. const reducer 및 const store 설정
    - const reducer: 현재 state 상태에 대한 설정
    - const store:  수정되면 안되는 store를 상수로 선언하고 reducer 주입
    2. state 갱신 설정
    - 리덕스는 각각의 state 변화를 불변하게 유지해야하기 때문에 기존 state를 복제해서 사용
    3. Provider store={store} 설정
    4. Left3의 useSelector 설정
    - reducer 설정할 때, state가 없는 상태일 때는 1이 부여되도록 기본값 설정됨
    --> state.number을 출력하는 함수를 통해서 상수 설정
    ==> 상수 출력
    5. action 설정
    - action.type이 plue면 신규 state 값 +1이 되도록 설정
    6. Right3의 useDispatch 설정
    - useDispatch()를 사용하는 상수 선언
    - 해당 상수에 값을 넣는 이벤트 선언

Context Api 기초

일일일코_장민기 — Wed, 22 May 2024 18:38:36 +0900

전체코드

import React, {createContext, useContext} from "react";
import './App.css';


const themeDefault = {border: '10px solid green'}
const themeContext = createContext(themeDefault)

export default function App(){
    const theme = useContext(themeContext)
    console.log("theme: ", theme)
    return(
        <themeContext.Provider value={theme}>
        <div className="root" style={{border: '10px solid purple'}}>
            <h1>Hello World!</h1>
            <Sub1></Sub1>
        </div>
        </themeContext.Provider>
    )
}

function Sub1(){
    const theme = useContext(themeContext)
    return(
        <themeContext.Provider value={{border: '10px solid red'}}>
        <div style={theme}>
            <h2>Sub1</h2>
            <Sub2></Sub2>
        </div>
        </themeContext.Provider>
    )
}

function Sub2() {
    const theme = useContext(themeContext);
    return (
      <div style={theme}>
        <h3>Sub2</h3>
        <Sub3></Sub3>
      </div>
    );
  }
  
  function Sub3() {
    const theme = useContext(themeContext);
    return (
      <div style={{border: '10px solid blue'}}>
        <h3>Sub3</h3>
      </div>
    );
  }

1. Context Api(createContext)
- 애플리케이션에서 전역적으로 디자인을 공유하는 테마 기능 구현
import React, {createContext} from "react";
const themeContext = createContext(themeDefault)
--> themeDefault가 새로 생성한 컨텍스트의 기본값이 됨

================================================================

2. 기본값 읽어오기(useContext)
import React, {createContext, useContext} from "react";
export default function App(){
    const theme = useContext(themeContext)
    출력 시:    theme = Object{border: "10px solid green}
    하나에만 사용:    <div className="root" style={theme}>

================================================================

3. 테마 전체 적용
function Sub1(){
    const theme = useContext(themeContext)
    return(
        <themeContext.Provider value={{border: '10px solid green'}}>
        <div style={theme}>
            <h2>Sub1</h2>
            <Sub2></Sub2>
        </div>
        </themeContext.Provider>
    )
}

function Sub2() {
    const theme = useContext(themeContext);
      <div style={theme}>

  function Sub3() {
    const theme = useContext(themeContext);
      <div style={theme}>

    1. <themeContext.Provider>를 return 최상단에 배치(전체를 감싸는 형태)
    2. <themeContext.Provider>에 value 속성 부여
    3. 하위 컴포넌트 각각 useContext와 style 부여

================================================================

4. 테마 적용 순서
    1. 스타일 속성으로 직접 부여
    <div className="root" style={{border: '10px solid purple'}}>
    <div style={{border: '10px solid blue'}}>
    2. 하위 컴포넌트의 경우, 상위 컴포넌트의 themeContext.Provider에서 부여한 value
     <themeContext.Provider value={{border: '10px solid red'}}>
     3. 하위 컴포넌트의 경우, 최상위 컴포넌트의 themeContext.Provider에서 부여한 value
     <themeContext.Provider value={theme}>

Styled Components 기초

일일일코_장민기 — Wed, 22 May 2024 04:54:30 +0900

전체코드

import React from "react";

import "./style.css";

import styled from 'styled-components';

const SimpleButton = styled.button`

color: white;

background-color: green;

const LargeButton = styled(SimpleButton)`

font-size: 50px;

const ReactButton = (props) => {

console.log("props: ", props)

return <button className={props.className}>{props.children}</button>

};

const ReactLargeButton = styled(ReactButton)`

font-size: 50px;

const PrimaryButton = styled.button`

color: ${function(props){

console.log('props: ', props)

if(props.primary){

return 'white'

}

return 'blue';

}};

background-color: ${(props) => props.primary ? 'blue' : 'gray'}

export default function App(){

return(

<div>

<SimpleButton>Simple</SimpleButton>

<LargeButton>Large</LargeButton>

<ReactButton>React</ReactButton>

<ReactLargeButton>ReactLarge</ReactLargeButton>

<PrimaryButton>Normal</PrimaryButton>

<PrimaryButton primary>PrimaryButton</PrimaryButton>

</div>

)

}

1. Styled Component
- css 코드를 그대로 작성할 수 있는 컴포넌트를 만드는 기술
- 기존에는 style 속성에 {style} 객체를 주입함
--> css를 자바스크립트화 해서 사용하다 보니 기존의 css와 다르게 사용해야 한다는 불편함이 발생
--> stytled.태그명``을 사용하여 ``안에 css 코드를 그대로 사용하면서 객체화한 css를 주입하는 것과 같은 효과를 냄

================================================================

2. Styled Components 설치
npm install styled-components
import styled from 'styled-components';

================================================================

3. Styled Components 사용
3.1 기본적인 사용
const SimpleButton = styled.button`
    color: white;
    background-color: green;
`;
<SimpleButton>Simple</SimpleButton>
- 녹색 배경의 흰 글씨를 가진 버튼 생성

================================================================

3.2 Styled Components 중첩 사용
const LargeButton = styled(SimpleButton)`
    font-size: 50px;
`;
<LargeButton>Large</LargeButton>
- <SimpleButton>에 추가로 폰트 사이즈 50px

================================================================

3.3 기존 컴포넌트에 Styled Components 추가
const ReactButton = (props) => {
    console.log("props: ", props)
    return <button className={props.className}>{props.children}</button>
};
const ReactLargeButton = styled(ReactButton)`
    font-size: 50px;
`;
<ReactButton>React</ReactButton>
<ReactLargeButton>ReactLarge</ReactLargeButton>
- className={props.className}를 부여하여, className이 있으면 적용되도록 함
- Styled Components를 사용하면 임의의 클래스가 부여됨
--> 그냥 컴포넌트인 <ReactButton>에는 css가 적용되지 않음
--> Styled Components가 추가로 부여된 <ReactLargeButton>에는 css가 적용됨

================================================================

3.4 props에 따른 Styled Components 별개 적용
const PrimaryButton = styled.button`
    color: ${function(props){
        console.log('props: ', props)
        if(props.primary){
            return 'white'
        }
        return 'blue';
    }};
    background-color: ${(props) => props.primary ? 'blue' : 'gray'}
`;
<PrimaryButton>Normal</PrimaryButton>
<PrimaryButton primary>PrimaryButton</PrimaryButton>

- Styled Component인 <PrimaryButton>에 기본적으로 글씨색은 파랑, 배경색은 회색을 부여
- prop으로 primary를 갖고 있을 경우에는 글씨색이 흰색, 배경색은 파랑을 부여

================================================================

+++

index.js, app.js 역할, 분리 이유
index.js와 app.js 분리하는 주 이유는 프로젝트의 구조를 명확하게 하고 코드의 관리를 용이하게 하기 위해서다.

index.js
index.js는 애플리케이션의 진입점 역할을 하며 애플리케이션을 시작하는 곳
--> 애플리케이션의 전체적인 중요한 설정들을 포함하고 있다. 이는 해당 애플리케이션의 로직이 아니라 로직에 필요한 설정들을 담고 있다.

app.js
app.js는 애플리케이션의 주요 로직을 담고 있는 핵심 컴포넌트

--> 애플리케이션의 라우팅, 상태 관리 등의 주요 기능을 구현한다.

분리하는 이유
index.js와 app.js를 분리함으로써, 애플리케이션의 설정과 주요 로직을 명확하게 구분할 수 있다.
만약 app.js에서 주요 설정과 로직을 모두 담당하면 app.js의 역할이 너무 커지면서 유지보수에도 좋지 않다.

이렇게 분리하게 되면 각 파일의 역할이 명확해져 코드를 이해하고 유지보수하는데 효율적이다.

또한 나중에 app.js의 로직을 다른 프로젝트에서 재사용하거나, 교체하는 작업이 필요할 때 분리된 app.js의 로직을 다른 프로젝트의 index.js 설정에 붙여 넣기만 하면 되기에 매우 편리하다.