신입개발자_장민기

타입스크립트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(null); const navigate = useNavigate(); useEffect(() => { ..

전체 코드더보기Reactimport 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(""); ..

우선 알아야 할 것은 기존에 사용하던 SpringSecurity와의 차이이다.1. 팀프로젝트- 모놀리틱- 프론트엔드는 jsp, 백엔드는 java를 사용하며 port 번호가 동일 2. MSA(1차)- MSA- 프론트엔드는 jsp, 백엔드는 java--> SpringSecurity를 사용하는 모듈 자체가 동일 3. 프론트엔드와 백엔드의 분리- 프론트엔드는 React- 백엔드는 자바--> 포트번호가 다름--> SpringSecurity를 사용할 때 프론트엔드에서 인증요청이 백엔드로 넘어간 다음, 인증이 확인되면 프론트엔드로 다시 데이터를 브라우저에 뿌려줌 여기서 큰 차이가 발생하는 것은 1, 2번 vs 3번이다.기존의 SpringSecurity 사용은 동일 모듈에서 사용했기 때문에 쿠키가 저장되는 것은 같은 ..

옷 출력 화면에 간단한 필터 기능을 추가했다.1. 카테고리가 기입된 필터를 변경하면 출력되는 옷은 해당 카테고리만 출력된다.2. 옷 수정 화면에서 필터링이 된 상태로 옷을 추가할 경우, 추가한 옷의 카테고리로 자동 필터링 코드더보기jsp 필터: 기본 모자 겉옷 상의 하의 양말 신발 Category Cloth 수정 삭제  js$("#categoryFilte..

기존의 옷 출력 화면은 자바스크립트로 구현되었다. 그래서 옷 수정 버튼 및 수정 작업도 자바스크립트로 작동하는게 편하다...할 수 밖에 없다 인가? 아무 더보기//옷 수정 상태로 변경$(document).on("click", ".updateEvent", function () { var currentRow = $(this).closest("tr") //버튼이 소속된 행을 찾음 var categoryCell = currentRow.find(".category"); //categoryCell 찾기 var clothdataCell = currentRow.find(".clothdata"); //clothd..

React 공부 및 모놀리틱 프로젝트 구현에 시간을 쓰다보니 오랜만에 기능을 추가했다. 전체코드더보기application.propertiesspring.mail.host=smtp.gmail.comspring.mail.port=587spring.mail.username=이메일spring.mail.password=이메일 코드spring.mail.properties.mail.smtp.starttls.enable=truespring.mail.properties.mail.smtp.starttls.required=truespring.mail.properties.mail.smtp.auth=true MailControllerpackage org.member.mailController;import jakarta.serv..

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..

전체 코드더보기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(act..

전체코드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( Hello World! )}function Sub1(){ const theme =..

전체코드더보기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 =..