프로젝트 계획, 시스템 아키텍처, ERD, 기능정의서, API명세서 등등을 해봐야 하겠지만 실무에서 접해본 것이 아니라 너무 어렵다 ㅠㅠ 시작부터 힘들면 힘빠지니 일단 결과물 뽑아내는 걸로 하자 !

첫 프로젝트 목표

1. 프론트(React)+백(SpringBoot) 분리
2. 기본적인 CI/CD (git)
3. 기본적인 CRUD (jpa+mysql)

두번쨰 프로젝트 목표

1. 프로젝트 계획서 만들기
2. Figma로 화면 디자인
3. 외부 api연결
4. 내가 만들고 싶은 사이트 만들기

이직전까지 첫번쨰 완성, 두번쨰는 진행중으로 하는게 목표

점표기법은 간단하고 직관적이어서 많이 쓰임 대괄호 표기법은 속성이 동적으로 바뀌거나 문자열일때 사용

기능은 같음

svcAddObj = new Object();//[공통] 서비스 추가 파라메타 정보 Object svcAddObj.sDeleteSql = "mm:M_MM_3100_M_DL11";//삭제Sql

var objSvc = objEnv.services["svcUrl"]

Nexacro에서 svcUrl::과 같은 방식은 Service URL을 매핑(alias) 방식 ex) var svcUrl = "svcUrl::XExportImport"; //var svcUrl = "http://localhost.:8190/XExportImport";

• 저장 경로 : TypeDefinition>Services

공통으로 정해놓은 파일에 접근

ex) this.G_SV_RD;

• 저장 경로 : typeDefinition>ObjectsModuls에 .json추가>json파일 내의 scripts에 파일(.js파일) 경로 추가>파일에 공통값 정의

  공통으로 정해놓은 값에 접근

App.gvSystem // ERP --> gvSystem 이라는 id의 initval 값

• 저장 경로 : Application Variables>Variables ex)

웹컴포넌트 연결

ex) this.web_ContNm.set_url(this.gfn_GetServerUrl("View"));//윈도우 환경에서 웹에디터 Url 설정-View // this.gfn_GetServerUrl("View") : http://localhost:8190/ckeditor/webViewer.html --> 환경이 바뀌면 공통함수에 의해 경로 변경

this.web_ContNm.getProperty("window").callMethod("fn_updateSize", iHeight); webViewer.html에 iHeight 넘기면서 미리 정의된 메서드인 fn_updateSize를 호출

1. 오류 던짐

...
if (StringUtil.isNull(sInDataSet)) {
    //오류메세지 - [공통서비스] 입력 데이터셋 정보가 유효하지 않습니다.
    throw new BizException(-901, "err.admn.autosvc.indataset.invalid");
}
...

2. 오류 낚아챔 + MessageSource 주입

@ExceptionHandler(BizException.class)     
    public Object handleBizException(HttpServletRequest request, Exception e) throws Exception {    

    @Autowired
    private MessageSource messageSource;  

    ...
    strMsg = messageSource.getMessage(msgCode, args, Locale.getDefault());
    ...

3. Bean 등록 + MessageSource 구현

@Bean
    public ReloadableResourceBundleMessageSource messageSource() {
        ReloadableResourceBundleMessageSource reloadableResourceBundleMessageSource = new ReloadableResourceBundleMessageSource();
        String classpath = System.getProperty("java.class.path");
        reloadableResourceBundleMessageSource.setBasenames(
            "classpath:/egovframework/message/com/message-common",
            "classpath:/org/egovframe/rte/fdl/idgnr/messages/idgnr",
            "classpath:/org/egovframe/rte/fdl/property/messages/properties");
        reloadableResourceBundleMessageSource.setCacheSeconds(60);
        return reloadableResourceBundleMessageSource;
    }

설명

@ExceptionHandler 는 오류가 발생했을때 낚아챈다.

ReloadableResourceBundleMessageSource 라는 구현체를 @bean으로 등록해 놓고 MessageSource 에서 @autowired로 bean을 주입(의존성주입) 받는다.

결합도를 낮추고 유연하게 쓰자.

• 전역 객체
  JSON.stringify()/JSON.parse()
• 형태

  {
    "이름":"용용",
    "나이":"비밀"
  }

화면 구현은 다른 화면들과 별반 다르지 않으므로 생략

기능

일정등록 화면에서 일정등록시 메인 페이지의 일정관리 달력이 업데이트 되는 기능

코드

- 일정등록 화면
    case "SAVE":   //저장        
            this.fn_ComBtnSearch();//조회

            //일정등록 저장시 메인포탈 새로고침 및 포커스
            this.gfn_CallScrn("Form_Portal","fn_mainPotal_refresh",null,"",false);
            break;    

공통함수로 넘기는 파라미터 : (호출할 화면,화면에서 동작시킬 함수,같이 넘길 데이터,메뉴 닫을시 이동시킬 화면)

저장했을때 메인화면을 새로고침 한다.

공통함수를 살펴보자 !

- Bizutil.js
pForm.gfn_CallScrn = function(sPrgmId, sCallFunc, oParam, sMoveScrnId)
{
    var sMenuId = nApp.gds_Menu.lookup("PRGM_ID", sPrgmId, "MENU_ID");//메뉴ID
    var winId = nApp.gds_OpenMenu.lookup("MENU_ID", sMenuId, "WIN_ID");
    var oObj = {
            menuId : sMenuId,  // 메뉴ID
            scrnCallFunc : sCallFunc, //화면간 호출함수명
            scrnCallArgs  : oParam        //화면간 전달 argument
        };    

    //선택된 메뉴 호출
    this.gfn_CallMenu(oObj);        

    //Tab 메뉴 닫을시 이동할 화면 설정
    if (!this.gfn_IsNull(sMoveScrnId)) {
        this.gfn_MoveScrn(sMoveScrnId);
    }

    if (!this.gfn_IsNull(winId) && !this.gfn_IsNull(sCallFunc) ) {

        var framesInfo = nApp.gvWorkFrame.frames; //WorkFrame 정보
        var oCallScrn = framesInfo[winId];    
        oCallScrn.form.div_Work.form.lookupFunc(sCallFunc).call(oParam);//함수 호출    
    }

}

특이했던 점은 유사배열을 썻다는 건데 framesInfo[winId] 이건 index가 아닌 객체명으로 값에 접근할수 있다는 거였다.

lookupFunc는 넥사 내장함수로 함수 호출하는거고 oCallScrn.form.div_Work.form.lookupFunc(sCallFunc) 로 함수 호출 후 oParam 값을 넘겨 쓸수도 있다.

- 메인
//일정등록 저장시 메인포탈 일정관리 새로고침
this.fn_mainPotal_refresh = function()
{
    //this.gfn_Alert("SY134");    //저장되었습니다.

    //일정관리 일정 새로고침
    var fvDiv = this.tab_Portal.tpg_01.form.div_TopLeft.form;    
    var sDay = fvDiv.ds_Input.getColumn(0, "S_DAY");    
    fvDiv.fvReSeaarch = true;//재조회 여부

    fvDiv.fn_ComBtnSearch();                //달력 새로고침
    fvDiv.fn_SelectSchedule(sDay);        //일정 새로고침
};

fvDiv는 화면안에 화면으로 구성되어 있다. fn_SelectSchedule는 모든 화면에 있는 조회하는 함수다. 경로가 잘 맞는지 잘 확인 해야한다. 보통 경로에서 오류 나드라

• 회원가입 및 로그인 기능 구현
• 로그인 후 토큰 기반 세션 관리 - 새로고침 후에도 Redux-Persist로 상태 유지 (localStorage 사용)
• 제품 리스트 조회
• 제품 리스트에서 "주문하기" 클릭 시 장바구니(CART) 추가
• 장바구니 내 수량 증가/감소/삭제 기능
• 장바구니에서 행 추가 기능 구현
• 장바구니에서 검색 기능 구현
• 마이페이지(MyPage)에서 내 정보 확인 가능

✅ 작업 계획

• 백엔드 연결
• 깃 배포
• UX/UI 개선
• 추가 기능 구현 - 메일/세션관리/토큰/Spring Security/SLF4J/예외처리/파일다운로드/관리자/카카오로그인

처음에는 프로젝트가 조그맣고 귀여웠는데 점점 기능이 덕지덕지 붙으면서 무겁고 안귀여워짐....

사실 회원가입이야 로그인이랑 별반 다를바가 없어서 로그인만 정리함.

리덕스에 관리할게 많아지다 보니 slice들을 분리하기로함 store 폴더안에 authSlice.js/cartSlice.js/shoesSlice.js/store.js 로 분리 권한도 Redux로 영속성화 시켜서 관리함 -> 이거 때문에 어질어질

기능

1. 받은 아이디, 비밀번호 값을 밸리데이션 체크
2. 아이디, 비밀번호 백단으로 넘김 (백단에서 확인됬다고 가정하고)
3. 로그인시 토큰 발급 및 세션유지
4. 상단 네비바에 버튼을 Login->Logout으로 변경

이게 마지막인데 여기까지 오면서 모듈화하고 코드개선하고 폴더구조 정리하면서 이것저것 많이 바뀌었다. 밸로그 최신화가 필요하겠다. 앞단이든 백단이든 로그인 기능처리를 할수있다면 기본은 갖춘게 아닐까 챗지피티를 이용해서 개발하는데 너무 의존하고 있는건 아닌지 모르겠다. 하지만 챗지피티가 있으니 그나마 이정도 개발 할수 있는것도 맞다. 어찌됫든 백단 강의 빨리 시작해야겠다. 이직해야지

1. memo
2. 외부에서 정의한 컴퍼넌트 사용 및 외부 라이브러리 사용

import { PlusAgeButton } from "../components/button";
import { useState, memo, useEffect } from 'react';
import { Nav } from 'react-bootstrap'    // 리엑트 부트스트랩 라이브러리
import { useLike } from "../hooks/useLike.js";

function Func(){
    let [count, setCount] = useState(0)
    let [alert11, setAlert] = useState(true)
    let [탭, 탭변경] = useState(0)
    let [likeCount,likeCountFunc] = useLike()   // 외부에 정의해놓은 useLike.js 파일 임포트하고 내부함수 써먹기

    useEffect(()=>{
        let a = setTimeout(()=>{ setAlert(false) }, 2000)
        return ()=>{    // 이거 먼저 실행
            clearTimeout(a)
        }
    }, [])

    return (
        <div>
            <>
            {// 팝업 알림창
                alert11 == true 
                ?<div className="alert alert-warning">
                    2초이내 구매시 할인
                </div>
                : null
            }

            {/* 22살까지만 나이먹기 */}
            <PlusAgeButton/>

            <br></br>

            {/* 재랜더링 테스트 */}
            <Child/>
            <button onClick={ () => {setCount(count+1)} }>+1</button>
            </>

            {/* 탭변경 */}
            <Nav variant="tabs"  defaultActiveKey="link0">
                <Nav.Item>
                    <Nav.Link onClick={()=>{탭변경(0)}} eventKey="link0">버튼0</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link onClick={()=>{탭변경(1)}} eventKey="link1">버튼1</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link onClick={()=>{탭변경(2)}} eventKey="link2">버튼2</Nav.Link>
                </Nav.Item>
            </Nav>

            <TabContent 탭={탭}></TabContent>   

            <h4>{likeCount}</h4>
            <button onClick={()=>{likeCountFunc()}}>❤️</button>
        </div>
    )
}

//필요한 경우에만 재랜더링 - memo
let Child = memo( function(){ // 부모(App)가 랜더링 되도 자식이 랜더링 되지 않음 - 부모가 count 관리하고 있음 
    // memo가 없으면 count 증가시 버튼 Refresh
    console.log('memo 쓰니 재랜더링 안돼지? memo가 없었으면 +1 눌렀을떄 "재랜더링 테스트 - 자식임" 이거 계속 나와야함')
    return <div>재랜더링 테스트 - 자식임</div>
})

// let Child = ()=>{
//   console.log('기본적으로 count가 증가하며 재랜더링이 되고 말아')
// }

function TabContent({탭}){
    let[fade, setFade] = useState('')
    useEffect(()=>{
        setTimeout(() => {setFade('end')}, 100)
        return ()=>{    
            setFade('')
        }    
    }, [탭])

    return (
        <div className={'start '+fade}> {/* App.css에 정의한 클래스 */}
            { [<div>0번째내용</div>, <div>1번째내용</div>, <div>2번째내용</div>][탭] } 
        </div>
    )    
}

export default Func;

//나이먹기 버튼
export function PlusAgeButton(){

    let [count, setCount] = useState(0);
    let [age, setAge] = useState(20);

    useEffect(()=>{
        if(count<3 && count!=0){
        setAge(age+1)
        }  
    }, [count])    

    return(
        <div>
            <div>안녕하세요 전 {age} - 내 나이는 22에서 멈춤..  <br/>'count는 증가해도 나이는 22살까지만 표시'</div>
            <button onClick={()=>{
                setCount(count+1)
                console.log('1살+ '+count)
            }}>누르면한살+</button>
        </div>
    )
}

memo

부모 컴퍼넌트가 리렌더링 되도 자식 컴퍼넌트가 리렌더링 되지 않게 할수 있음 즉 최적화 가능 +1 버튼을 눌렀을때 memo가 없다면 console.log('memo 쓰니 재랜더링 안돼지? memo가 없었으면 +1 눌렀을떄 "재랜더링 테스트 - 자식임" 이거 계속 나와야함') 이 값이 콘솔창에 계속 나와야 되는데 한번만 나오고 그다음부턴 안나옴

memo가 필요한 상항 :

부모 컴포넌트가 자주 리렌더링될 때 부모의 state나 props가 변경되면 리렌더링되는데, memo를 사용하면 불필요한 자식 렌더링을 막을 수 있음

자식 컴포넌트가 무거운 연산을 수행할 때 예를 들어, API 요청을 하거나 무거운 계산을 수행하는 컴포넌트라면, 불필요한 렌더링을 막아 성능을 향상시킬 수 있음

나머진 노잼이라 걍 코드만 써놓음

사용기술

• memo
• 외부 라이브러리 및 외부 컴퍼넌트 import

기능

1. 비동기 사용(react-query)

• 수정 감지해서 실시간 데이터 업데이트

2. 비동기 랜더링시 로딩화면(Suspense)

• 비동기 화면에서 로딩중에 어떻게 보여줄지 만듬

import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; //실시간 데이터인 react-query
import { Provider } from 'react-redux';   //Redux
import { PersistGate } from 'redux-persist/integration/react';  //Redux 영속성
import { BrowserRouter } from 'react-router-dom'; //라우터
import store, { persistor } from './store'; // store.js에서 persistor import
import App from './App';

const queryClient = new QueryClient();
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <QueryClientProvider client={queryClient}>    
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </PersistGate>
    </Provider>
  </QueryClientProvider>
);

QueryClientProvider 요론걸 쓰겠다고 메인에 설정 먼저 하기

// 서버데이터 - 유저
import api from "./axios_setting.js";
import { useQuery } from '@tanstack/react-query';

const getUser = async () => {
    try {
        const response = await api.get('/userdata.json');
        return response.data;
    } catch (error) {
        console.error("Error fetching user:", error);
        throw error;
    }
};

export const User = () => {
    return useQuery({
        queryKey: ["useData"],        // 쿼리에 고유한 키 설정
        queryFn: getUser,             // 데이터 가져올 함수
        refetchOnWindowFocus: true,   // 창 활성화시 데이터 새로고침
        staleTime: 10000,             // 10초 동안 데이터 유지
        retry: 2,                     // 실패시 최대 2번 시도
        cacheTime: 10000,             // 케시된 데이터 10초 유지
    });
};

useQuery를 이용해서 가져온 데이터를 어떻게 쏘아줄지 디테일한 설정 가능

import { Table } from 'react-bootstrap';
import { User } from "../services/axios_user";

function MyPage(){

    //서버에 User 정보 값
    const { data: user, isLoading, error } = User();  //data 값을 user 라는 이름으로 사용

    if (isLoading) return '로딩중..';
    if (error) return '에러발생..';

    return (
      <div>
        <Table>
          <thead>
            <tr>
                <th>사용자 이름</th>
                <th>사용자 이메일</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>{user.name}</td>
              <td>{user.email}</td>
            </tr>
          </tbody>

        </Table>

      </div>
    )

}    
export default MyPage;

const { data: user, isLoading, error } = User(); User 받아온 값인 data를 user라는 이름으로 사용할수도 있음

{/* MyPage 이동 */}
            <Route path="/myPage" element={ 
                // 비동기작업 로딩중 보여주는 Suspense
                <Suspense fallback ={<div>로딩중....</div>}>    
                    <MyPage/> 
                </Suspense>
            } />

서스펜스는 간단함

라우트가 있는곳에 어떻게 보여줄지 만들주면 끝 ~

사용기술

• react-query
• Suspense

기능

1. Detail에 있는 상품에 주문하기 버튼을 누르면 Cart 화면에 가져와서 뿌려줌
2. Cart에 이미 상품이 있을 경우 count를 +1

그런데 URL 변경시 새로고침이 되면서 Redux에 state가 날라가는 이슈가 있었다. 그래서 redux-persist 기능으로 선택값을 Local Storage에 저장하여 관리하고 새로고침 버튼을 누르면 state값을 초기화 하는 기능을 구현했다.

Redux 이슈가 해결이 안되서 1주일 동안 고통받음..

Detail화면에 탭 변경,타이머,인풋 등의 useEffect를 사용해서 만드는 기능들도 만들었지만 이건 간단한 기능들이라 기록 안할래 (외부 라이브러리로 import해서 쓰거나 .css 에 클래스 만들어서 import해서 쓰거나 하면 되는듯)

Detail.jsx

import { useParams } from 'react-router-dom'; //라우터로 받은 데이터를 사용하기 위해 불러옴
import "../App.css";  // css 파일
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom'  // 화면전환할때 쓰는 라우터 라이브러리
import SearchInput from '../components/Input.jsx';
import { SearchList } from '../components/button.jsx';
import { DetailFind } from './DetailFind.jsx';
import { useState  } from 'react';

function DetailPage(){

    let {id} = useParams(); // url로 받은 데이터를 화면에 이동에 따라 동적으로 인식하기 위해 id값을 받아옴
    let shoes = useSelector((state) => state.shoes);    // shoes 값은 Redux로 관리되고 있음
    let 찾은상품 = shoes.find((x) => x.id == id);   // Redux의 id가 라우터로 받은 id와 같은 '찾은상품' 찾기 
    let navigate = useNavigate()  //navigate는 url 이동시 새로고침 안해 그래서 써
    let [value, setValue] = useState(''); //input에 들어갈 value값을 useState로 관리
    let [filteredShoes, setFilteredShoes] = useState(null); //input에 들어갈 value값을 useState로 관리

    return (
        <>
        { 찾은상품 ? 
            (
            // 특정상품 주문하기
            <DetailFind 찾은상품={찾은상품}/>
            ) : (
            <div className="container">
                <h1>* 상품 리스트 *</h1>
                <br></br>
                <SearchInput value={value} setValue={setValue} /> {/* input 밸리데이션 체크후 아래로 value값 리턴 */}
                <SearchList 
                    setFilteredShoes={setFilteredShoes}
                    value={value}
                    shoes={shoes}
                /> {/* 상품 찾기 버튼 */}
                <br/>
                <br/>
                <div className="row">
                    {(filteredShoes && filteredShoes.length === 0) ? (
                        <p>검색된 상품이 없습니다.</p>
                    ) : (
                        (filteredShoes ?? shoes).map((product) => (// ?? : filteredShoes가 null 또는 undefined일 경우 shoes로 대체
                            <div className="col-md-4" key={product.id}>
                                <h4>{product.title}</h4>
                                <p>{product.content}</p>
                                <p>{product.price}</p>
                                {/* <button className="btn btn-danger" onClick={()=>navigate('/detail/'+product.id)} >주문하기</button>  */}
                                <button className="btn btn-danger" onClick={()=>{
                                    navigate('/detail/'+product.id) 
                                }} >주문하기</button> 
                            </div>
                        ))
                    )}
                </div>
            </div>
            )
        }
        </>
    )
}

export default DetailPage

DeatailFind.jsx

// Detail 화면에서 상품을 찾았을 때 개별 상품을 보여주는 컴포넌트
import { MoveCart, MoveDetailPageButton, OrderToList } from "../components/button"

export function DetailFind({찾은상품}){ 

    return (
        <div className="container">
            <div className="row">

                <div className="col-md-6">
                    {/* <img src={'https://codingapple1.github.io/shop/shoes'+(찾은상품.id+1)+'.jpg'} width="100%" /> */}
                </div>

                <div className="col-md-6">
                    <h2>찾은 상품</h2>
                    <h4 className="pt-5">{찾은상품.title}</h4>
                    <p>{찾은상품.content}</p>
                    <p>{찾은상품.price}</p>
                    <OrderToList item={{ id: 찾은상품.id, name: 찾은상품.title }} />
                </div>

                {/* 디테일 All 페이지로 이동버튼 */}
                {<MoveDetailPageButton/>}
                <br/>

                {/* 장바구니로 이동버튼 */}
                {<MoveCart/>}

            </div>
        </div> 
    )
}

Cart.jsx

import { Table } from 'react-bootstrap';
import { useSelector, useDispatch } from 'react-redux'; //context api 보다 설정이 복잡하지만 성능 최적화 가능
import { addCount, addItem } from '../store.js';

function Cart() { 
  // Redux store에서 cart 상태를 가져옴
  let cartList = useSelector((state) => state.cart); // Redux store에서 cart 상태 가져오기
  let shoes = useSelector((state) => state.shoes); // Redux store에서 shoes 상태 가져오기
  let dispatch = useDispatch(); //전달함수

  //행추가
  const addNewItem = () => {
    const newItem = {id: Date.now(), name:'Song', count:1}
    console.log('행추가 == '+JSON.stringify(newItem))
    // const newItem = {id: state.cart.length, name:Name, count:1} --> 입력값 받아서 저장하는 걸로 구현해보기
    dispatch(addItem(newItem));
  }

  return (
    <div>
      <Table>
        <thead>
          <tr>
            <th>상품번호</th>
            <th>이름</th>
            <th>수량</th>
          </tr>
        </thead>

        <tbody>
        {
          !cartList.cart ? (
            <tr>
              <td colSpan="5">값없음</td>
            </tr>
          ) : (
            cartList.cart.map((a, i) => (
              <tr key={i}>
                <td>{a.id}</td>
                <td>{a.name}</td>
                <td>{a.count}</td>
                <td>
                  <button onClick={() => dispatch(addCount(a.id))}>+</button>
                </td>
              </tr>
            ))
          )
        }
        </tbody>
      </Table>

      <button onClick={addNewItem}>행추가</button>

    </div>
  )

}    
export default Cart;

Cart.jsx 에선 Detail.jsx에서 가져온 상품값을 map으로 뿌림

store.js

// Redux 라이브러리 사용 - state를 중앙에서 관리
import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist'; // redux-persist 관련 import
import { persistedCartReducer } from './cartSlice.js';
import shoesReducer from './shoesSlice.js'
import { persistedAuthReducer } from './authSlice.js';

// 🟢 Store 생성
const store = configureStore({
  reducer: {
    cart: persistedCartReducer, // cart는  default 가 아닌 이름으로 보냈기에 작명한 그대로 써야함
    shoes: shoesReducer,        // shoes는 default 로 보냈기에 {} 안에 쓰지않고 이름을 마음대로 지을수 있음  
    auth : persistedAuthReducer, 
  },
});

// 🟢 persistor 생성
export const persistor = persistStore(store);
export default store;

cartSlice.js

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist'; // redux-persist 관련 import
import storage from 'redux-persist/lib/storage'; // 로컬 스토리지 사용

// 🟢 Cart Slice
let cartSlice = createSlice({
    name: 'cart',
    initialState: {
      cart: []  // cart를 배열로 감싸서 초기화
    },
    reducers: {

      // cart에 수량 추가
      addCount(state, action) {
        let 번호 = state.cart.findIndex((a) => a.id === action.payload);
        if (번호 !== -1) {  //값이 없을시 index 값으로 -1 반환
          state.cart[번호].count++;
        }
      },

      // cart에 수량 감소
      deleteCount(state, action) {
        let 번호 = state.cart.findIndex((a) => a.id === action.payload);
        if (번호 !== -1) {  //값이 없을시 index 값으로 -1 반환
          state.cart[번호].count--;
        }
      },

      // 선택한 상품 Cart에 추가
      addItem(state, action) {
        let found = state.cart.find((item) => item.id === action.payload.id);
        if (found) {  // 같은 상품이 있을 경우 수량 증가
          found.count++; 
        } else {  // 같은 상품이 없을경우 상품 추가
          state.cart.push({ ...action.payload, count: 1 });
          console.log('추가')
        }
      },

      // 선택한 상품 Cart에서 삭제
      deleteItem(state, action) {
        let cartIndex = state.cart.findIndex((a) => a.id === action.payload);
        if (cartIndex !== -1) {
          state.cart.splice(cartIndex, 1);  // 해당 index의 요소 삭제
          console.log('삭제 완료');
        }
      },

      // cart 초기화
      clear(state){
        state.cart = []; // cart를 빈 배열로 초기화
      },
    },
  });

  // 🟢 persistConfig 설정
const persistConfig = {
    key: 'cart', // localStorage에서 저장할 key 값
    storage, // 로컬 스토리지 사용
    whitelist: ['cart'], // 영속화할 상태 목록 (cart만 저장)
  };

  export const persistedCartReducer = persistReducer(persistConfig, cartSlice.reducer);
  export const { addCount, deleteCount, addItem, deleteItem, clear } = cartSlice.actions;

main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; //실시간 데이터인 react-query
import { Provider } from 'react-redux';   //Redux
import { PersistGate } from 'redux-persist/integration/react';  //Redux 영속성
import { BrowserRouter } from 'react-router-dom'; //라우터
import store from './store/store';
import { persistor } from './store/store';
import App from './App';

const queryClient = new QueryClient();
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <QueryClientProvider client={queryClient}>    
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </PersistGate>
    </Provider>
  </QueryClientProvider>
);

크롬 확장 프로그램

우선 크롬 확장프로그램 Redux DevTools 이거 다운받기 https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko

F12>Redux>prefetch 에 state가 어떻게 관리되는지 나옴

Redux 이슈

shoes 값은 마운트 되면서 axios로 가지고 오기 때문에 언제나 redux 안에서 관리하지만 cart 값은 화면에서 내가 선택한 값이기에 따로 저장할 방식(redux-persist)과 공간(Local Storage)이 필요하다.

가장 시간을 많이 잡아먹은 이슈 내용은 store.js 로 넘어온 state.cart 값이 객체라는 것이다. map으로 뿌려줄 거기 때문에 배열로 바꿔야 한다.

etc

배열 구조 분해 할당

let [likeCount,likeCountFunc] = useLike()

요게 처음에 뭔가 싶었는데 '배열 구조 분해 할당' 라고 함 useLike() 함수의 return 값을 배열로 리턴함 그걸 배열로 받아서 선언하는것 이래 놓고 likeCount, likeCountFunc 그냥 쓰면 됨

널 병합 연산자

(filteredShoes ?? shoes).map((product) => (

요론 문법도 있다 ?? : filteredShoes가 null 또는 undefined일 경우 shoes로 대체

사용기술

• redux
• redux-persist
• Router

기능

메인페이지로 기능은 3가지

1. 가져온 데이터 뿌리기
2. 주문하기 버튼 클릭시 디테일 화면으로
3. 추가상품번호 클릭시 데이터 추가

Home.jsx

import { useSelector } from 'react-redux';
import Card from '../components/Card.jsx';
import { AddShoesList } from '../components/button.jsx';

function Home(){

    const shoes = useSelector((state) => state.shoes); // Redux에서 shoes 가져오기

    return(
        <div className="container">
            <div className="row">
            {shoes.map((a, i)=>{ // map으로 반복문 돌리기~
                return <Card shoes={a} i={i} key={a.id} ></Card>  // 만들어둔 Card 컴포넌트 사용하기
            })}
            {/* 추가상품버튼 */}
            <AddShoesList shoes={shoes} />
            </div>
        </div>
    )
}

export default Home

Home에선 호출만 한다.

< Card > 로 자식 컴포넌트를 만들고 props 형태로 shoes를 전달하여 실제로는 Card.jsx에 구현했다.

map은 그냥 반복문으로 뿌려주는 역할

Card.jsx

import { useNavigate } from 'react-router-dom'  // 화면전환할때 쓰는 라우터 라이브러리

// 컴포넌트 만들기
function Card(props) {  //위에서 쓸 컴포넌트 미리 만들어두기 
  let navigate = useNavigate()

  return (
    <div className="col-md-4">
      {/* <img src={'https://codingapple1.github.io/shop/shoes' + (props.i+1) + '.jpg'} width="80%" /> */}
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.price}</p>
      <button className="btn btn-danger" onClick={()=>navigate('/detail/'+props.shoes.id)} >주문하기</button> 
    </div>
  )
}

export default Card

navigate()

useNavigate 훅을 통해 사용했고 컴퍼넌트 내부에서만 사용 가능하며 전체 페이지 새로고침 없이 동적이 Url 이동이 가능하게 함

App.jsx

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import styled from 'styled-components';  // 스타일드 컴포넌트 라이브러리- 컴포넌트 만들시 스타일 미리 주입 - 편하나 관리가 어려움
import { HomeNavbar } from './components/Navbar.jsx'; //네비
import MyRoutes from './routes/Routes.jsx';
import useReload from './hooks/useReload.js';

function App() {

  // 화면 새로고침시 cart에 담아놓은 값 초기화 
  useReload();

  return (
    <div>
      {/* 홈 - 네비바 */}
      <HomeNavbar/>

      {/* 메인페이지 - 라우터 */}
      <MyRoutes/>

    </div>
  )
}

export default App

임포트는 여러군데에서 했지만 메인화면 코드는 이게 끝임

여기에는 context api, useState 기능이 사용됨

useState를 이용해 json형태로 가지고온 shoes를 라우터에 보낸 후 화면으로 보냄

useState

useState는 리엑트에서 제공하는 hook 방법 예를 들어

let [shoes, setShoes] = useState(data);

값의 상태를 관리하기 위함

shoes는 데이터가 담긴 변수명 setShoes는 데이터를 수정할 함수명 data는 초기값 data에 값을 shoes에 넣고 이 값을 수정할땐 setShoes를 사용한다.

예를 들면 AddShoesList 버튼

button.jsx

import { getList } from '../services/axios_list';

//상품추가 버튼
export function AddShoesList({shoes, setShoes}){ //객체 구조 분해 할당 사용 ({}) 활용
//서버에서 데이터 가지고오기 - axios 라이브러리 사용 JQuery 같은거 
    const fetchShoes = async () => {
        try {
            const data = await getList();
            // 기존 shoes와 서버에서 가져온 데이터를 합침
            const updatedShoes = [...shoes, ...data];
            setShoes(updatedShoes);
        } catch (error) {
            console.error("상품 데이터를 불러오는 중 오류 발생:", error);
        }
    };

    //services에 구현하자
    return(
        <button onClick={fetchShoes}>추가상품 버튼</button>    
    )
}

getList 같은 경우는 axios로 값을 들고왔는데 이것도 한번 알아보자

axios_list

// 서버데이터 - 리스트
import api from "./axios_setting.js";

export const getList = async ()=>{
    try {
        const response = await api.get('/shop/data2.json');
        return response.data;
    } catch (error) {
        console.error("Error fetching user:",error);
        throw error;
    }
}

간단하다 그럼 axios 공통세팅도 알아볼까

axios_user.js

import axios from "axios";

const api = axios.create({
    baseURL: "https://codingapple1.github.io",   //기본url
    // timeout: 5000,  //시간제한
    // headers: {
    //     "Content-Type":"application.json"    
    // },
});

// 요청 인터셉터(토큰추가)
// api.interceptors.request.use(
//     (config)=>{
//         const token = localStorage.getItem("token"); //토큰가져오기
//         if(token){
//             config.headers.Authorization = 'Bearer ${token}';
//         }
//         return config;
//     },
//     (error)=>Promise.reject(error)
// );

//응답 인터셉터(에러처리)
api.interceptors.response.use(
    (response)=>response,
    (error) => {
        console.error("API Error:",error);
        return Promise.reject(error);
    }
);

export default api;

여기서 이것저것 환경설정 해주면 되겠다.

나중에 마이페이지 에서 axios + react-query 로 실시간 데이터 불러오는것도 정리할 예정

props VS Context api VS Redux

props : 부모 -> 자식 컴포넌트로 데이터 전달 Context api : 간단한 전역 상태 관리 Redux : 복잡한 전역 상태 관리

사용기술

• props
• Context Api
• useState
• navigate
• Component

네비는 맨위에 위치하고 각 화면으로 이동시킴 디자인 : react-bootstrap 이동 : 라우팅

컴퍼넌트화를 통해 각 화면은 각 화면용으로 따로 구현

Navbar.jsx

import { Navbar, Container, Nav} from 'react-bootstrap'    // 리엑트 부트스트랩 라이브러리

export function HomeNavbar(){
    return(
        <div>
            <Navbar bg="dark" variant="dark"> 
            <Container>
            <Navbar.Brand href="/home">ShoesShop</Navbar.Brand>
            <Nav className="me-auto">
                <Nav.Link href="/home">Home</Nav.Link>
                <Nav.Link href="./detail">Detail</Nav.Link>
                <Nav.Link href="./cart">Cart</Nav.Link>
                <Nav.Link href="./myPage">MyPage</Nav.Link>
                <Nav.Link href="./func">Func</Nav.Link>
            </Nav>
            </Container>
            </Navbar>
        </div> 
    ) 
}

Routes.jsx

import { Routes, Route, Navigate } from 'react-router-dom'  // 화면전환할때 쓰는 라우터 라이브러리
import Home from '../views/Home.jsx';
import DetailPage from '../views/Detail.jsx'
import Cart from '../views/Cart.jsx'
import MyPage from '../views/MyPage.jsx';
import Func from '../views/Func.jsx';

const MyRoutes = ({shoes, setShoes}) => {
    return (
        <Routes>
            {/* <Suspense fallback={ <div>로딩중임</div> }></Suspense> // 로딩중일시 보여줄 값 . 라우트를 감싸면 됨 */} 

            {/* 홈 이동 */}
            <Route path="/" element={ <Navigate replace to="/home"/> } />  
            <Route path="/home" element={ <Home shoes={shoes} setShoes={setShoes}/> } />  

            {/* 상세 이동 - 전체 */}
            <Route path="/detail" element={ <DetailPage shoes={shoes} /> } />  

            {/* 상세 이동 - 각각 */}
            <Route path="/detail/:id" element={ <DetailPage shoes={shoes} /> } />  
            {/* shoes={shoes} : 자식 컴포넌트로 데이터 전달 */}
            {/* :id : url로 받은 데이터를 사용할 수 있게 해줌 */}

            {/* 카트 이동 */}
            <Route path="/cart" element={ <Cart/> } />

            {/* MyPage 이동 */}
            <Route path="/myPage" element={ <MyPage/> } />

            {/* Func 이동 */}
            <Route path="/func" element={ <Func/> } />

             {/* 404 이동 */}     
             <Route path="*" element={ <div>없는페이지누</div> } />  

        </Routes>
    )
}

export default MyRoutes

라우터는 URL이 변경될 때마다 전체 페이지를 새로 고침하지 않고, 해당 URL에 맞는 컴포넌트를 동적으로 렌더링한다.

메인페이지, 상세페이지에선 데이터를 뿌려주기 위해서 shoes, setShoes 값들을 받아온다.

• 동작순서 네비버튼 클릭 > url 변경 > 라우터가 url 감지 및 동작

요로콤 간단하다.

다음 게시글은 메인페이지인데 할게 많네 1,2 정도로 나눠야 할듯

contexp api button useState, props context api react-query

├── public/ # 정적 파일들 │ └── assets/ # 이미지, 폰트 등 ├── dist/ # 배포 코드 ├── node_modules/ # 설치된 외부 패키지 ├── src/ # 소스 코드 │ ├── components/ # 재사용 가능한 컴포넌트 │ ├── styles/ # 스타일 파일 │ ├── assets/ # 이미지, 폰트 등 │ ├── services/ # API 호출 및 비즈니스 로직 │ ├── utils/ # 유틸리티 함수 │ ├── hooks/ # 커스텀 후크 관 │ ├── views/ # 렌더링할 페이지나 템플릿리 │ ├── store/ # 상태 관리 │ ├── App.css/ # css │ ├── main.jsx # 애플리케이션의 진입점 │ └── App.jsx # 루트 컴포넌트 ├── index.html # 메인 HTML 파일 (루트 디렉토리에 있어야 함) ├── .gitignore # Git에 포함되지 말아야 할 파일 ├── package.json # 프로젝트 설정 ├── package-lock.json # 의존성 트리 고정 파일 ├── vite.comfig.js # vite 설정 ├── eslint.comfig.js # eslint 설정 └── README.md # 프로젝트 설명서

실행 흐름

index.html > vite.config.js > main.jsx > App.jsx

어우 복잡 이거 이곳저곳에서 Import 해서 쓰는 경우가 많아서 구조를 확실히 정리해서 어디서 가져올지 확실히 정의 해야겠다 생각함 --

+++ 수정 예정임 많이 바귐

검색해서 받으셈

React.js : 프론트 UI 개발 node.js : db, 서버 연결

2. 작업폴더 만들기

폴더 마우스 우클릭 후 powershell 연다음에 npm create vite@latest

이거하고 cmd가 하라는대로 이어서 하면 되는데 아마 처음 세팅하면 온갖 경로오류, 보안오류 등등이 나옴

피곤함

3. VSCode 다운로드 후 실행

여기서 실행

내가 오픈한 폴더에 따라 터미널 경로가 고정되기 때문에 너무 바깥쪽 폴더를 열면 터미널 열때마다 cd로 경로 바꿔야 되서 귀찮음

vscode는 이것저것 신기하고 편리한 확장 프로그램이 엄청 많음. 나중에 필요한거 하나씩 추가해서 쓰면 좋을듯 난 IntelliCode 요게 젤 신기함

현재 애플코딩 강의 완독이 완료됬고 React 학습 한 내용을 정리하려 한다. 강의마다 정리하는것 보다 기능별로 뭉텅이로 정리할 예정

막 만들긴 했는데 이거 시간내서 다시 정래해야 할듯 처음 만들면서 정리했는데 이제와선 많이 달라져서

1. cmd창에 npm run build

2. 우측상단 new repository 에 들어간 후 Repository name에 깃허브아이디.github.io

3. dist에 있는 파일 올리기

음 쌤이 알려준 방법은 배포파일을 직접 올리는 형태이고 이러면 바로바로 수정한걸 배포하기 어렵다. 깃의 기능을 사용하지 않는 그저 사이트만 띄우기 위한 방법인듯 싶음 보통 깃에는 코드를 올리고 브랜치로 배포를 따로 파는 방법을 씀 수정사항 있을때마다 Repository 만들건 아니잖아

깃연결 및 배포

1. 프로젝트에 깃 연결 sh에 git init > git remote add origin https://github.com/사용자이름/저장소이름.git

   git add . //내 프로젝트 전부 깃에 올림 > git commit -m "첫 커밋" > git push -u origin main

2. 배포 branch 파기 npm install --save-dev gh-pages //branch 패키지 설치> 깃허브에 Settings > Pages > Build and deployment > Branch > branch를 gh-pages로 저장

3. package.json에 스크립트 추가

   "scripts": {
   "predeploy": "npm run build",    //npm run deploy 하기전에 dist로 빌드 먼저 자동으로 해줌
   "deploy": "gh-pages -d dist"    //branch에 배포파일 보내겠다.
   }

4. 배포 npm run deploy

생각보다 깃에 반영되는데 시간걸림 하다보면 병합,충돌 문제 발생할수 있음. 알아서 하시고

그 이후부턴 저장 > git add . > git commit -m "수정comment" > git push -u origin main > npm run deploy 순서대로 하면 됨

아니면 진짜 극도의 귀차니즘을 갖고있다면 package.json에

"predeploy": "git add . && git commit -m 'Deploy updated site' && git push origin main",  
"deploy": "npm run build && gh-pages -d dist" 

이런식으로 할수도 있다. npm run deploy만 누르면 전부 자동으로 되서 진짜 편하다 내가 한것만 배포하고 싶으면 이렇게 하면 안되겠지

프로그램 흐름

화면에서 프로그램ID와 기준일을 파라미터로 넘기면서 공통함수(this.gfn_GetTbnmNo) 호출 -> 정의된 공통함수에서 받아온 파라미터를 InData에, 자바 경로를 strSvcUrl에 넣고 넥사 트랜잭션 호출 -> 트랜잭션을 통해 자바에 controller/service/implement 호출 -> implement에 있는 insert 쿼리로 채번값을 채번관리 테이블에 넣고 select 쿼리로 채번 return

쿼리

insert 쿼리는 MERGE..USING..WHEN MATCHED문과 CASE문을 썻다. MERGE문은 문제있을때 처리할려고 쓴거고 CASE문은 프로그램 ID로 확인하여 채번을 어떤 방식으로 처리 할건지 확인한다. 공통환경설정에는 프로그램마다 어떤 채번을 사용할지 정해서 저장 되어있다.

자바

화면에서는 프로그램id, 기준일자를 공통함수로 넘김
공통함수에서는 넘겨받은 값과 자바경로, in 데이터셋명(gds_Input), out 데이터셋명을 지정해서 트랜잭션 호출

/// Controller.java
@Controller
public class Controller {

    @Resource(name = "Service")
    private Service sService;    

    @RequestMapping(value = "/sy/Numbering.do")
    public NexacroResult Numbering(PlatformData platformData) throws Exception {    
        NexacroResult result = new NexacroResult();
        return Service.processPgNumbering(platformData);
    }       
}

/// Service.java
public interface Service {
    NexacroResult processPgNumbering(PlatformData platformData) throws Exception;    
}

/// ServiceImpl.java
@Service("Service")
public class ServiceImpl implements Service {

    @Resource(name="cmmDao")
    private CmmDao cmmDao;        

    @Override
    public NexacroResult processPgNumbering(PlatformData platformData) throws Exception {
        NexacroResult result = new NexacroResult();

        try {
            DataSet numberingData = platformData.getDataSet("gds_Input"); // 데이터셋 정보 읽기

            if (numberingData == null) {
                throw new Exception("입력 데이터셋이 없습니다.");
            }

            Map<String, Object> saveMap = new HashMap<>(); // 저장처리 Map
            DatasetUtil.convertDsToMap(numberingData, saveMap, 0); // 데이터셋을 Map으로 변경

            // 채번정보 저장
            cmmDao.insert("Dao.insertDao002", saveMap);

            // 채번정보 조회
            List<Map<String, Object>> pgNumberingList = cmmDao.selectList("Dao.selectDao001", saveMap);

            if (pgNumberingList.isEmpty()) {
                throw new Exception("채번정보 조회 결과가 없습니다.");
            }

            result.addDataSet("gds_PgNumbering", pgNumberingList);
        } catch (Exception e) {
            // 예외 발생 시 로그 출력 및 예외를 다시 던짐
            e.printStackTrace();
            throw new Exception("Numbering 처리 중 오류가 발생했습니다.");
        }
        return result;
    }
}

/// CmmDao.java
@Repository("cmmDao")
public class CmmDao extends CmmAbstractMapper {

    @Resource(name = "sqlSession")
    @Override
    public void setSqlSessionFactory(SqlSessionFactory sqlSessionFactory) {
        super.setSqlSessionFactory(sqlSessionFactory);
    }
}

넥사크로 환경에서는 화면에서 자바로 값을 넘길 때 넥사크로 방식대로 처리하고, 자바에서는 넥사크로 함수 사용 리액트라면 화면에서 자바로 값을 넘길 때 Axios나 Fetch 쓰고, 자바에서는 넥사크로 함수 대신 setSqlSessionFactory 같은 방식으로 데이터를 처리

1. 객체생성을 @Autowired를 통해 자동 관리(의존성 주입)
2. ResponseEntity 사용으로 JSON 응답
3. @RequestBody 사용하여 JSON 데이터 자동 변환

context.xml에 안쓰고 application.yml에 쓰겠지아마?

하지만 회사에서 스프링을 안쓰고 JSP/서블릿 타입의 레거시한 자바 스타일을 갖고 있을수 있다.

public class HrMakeFileAction extends AbstractAction {
    public void makeTaxFile(BusinessContext ctx) throws Exception {
        HrMakeFileInf hrMakeFileService = (HrMakeFileInf) ServiceManagerFactory.getService("HrMakeFileService");
        DataSet dsInput = (DataSet) ctx.getInputObject("ds_FileInput");

        // 서비스 호출하여 파일 생성 및 결과 받기
        DataSet dsResult = hrMakeFileService.makeTaxFile(dsInput);
        ctx.addOutput("ds_Result", dsResult);

        // dsResult에서 dsDetail20을 추출하여 사용할 수 있음
        DataSet dsDetail20 = dsResult.getDataSet("dsDetail20");
        ctx.addOutput("dsDetail20", dsDetail20);
    }
}

이런식으로 컨트롤 만들어놓고 구현체를 만듬

...
DataSet dsDetail20 = new DataSet();
...
 con = getConnection();
                SqlExecutor db = SqlMapFactoryHelper.makeSqlExecutor(con,SqlMapFactoryHelper.NEXACRO17);      
                SqlRequest sql = SqlMapFactoryHelper.makeSqlRequest(strSqlId, SqlMapFactoryHelper.NEXACRO17);
                sql.addParamObject("ds_Input", dsInput);             
                dsDetail20 = (DataSet) db.query(sql).getResultObject();//조회프로시저 호출 메소드
...

구현체에는 이런식으로 넥사 내장 함수에 도움을 받아 Db에 연결함

넥사크로를 안쓴다면 JDBC에 DriverManager를 이용해 dB경로, ID, PW, 쿼리 등등을 넘겨서 받아야함

  con = DriverManager.getConnection("jdbc:mysql://localhost:3306/your_database", "username", "password");

                // 쿼리 실행
                String sql = "SELECT * FROM your_table WHERE condition = ?";
                pstmt = con.prepareStatement(sql);
                pstmt.setString(1, dsInput.getString(0, "your_condition_value")); // dsInput에서 값을 가져와 쿼리 파라미터 설정

                // 실행 후 결과 받기
                rs = pstmt.executeQuery();

                // 결과를 DataSet에 담기
                while (rs.next()) {
                    String columnValue = rs.getString("column_name");
                    // DataSet에 행 추가
                    dsDetail20.addRow();
                    dsDetail20.set(0, "column_name", columnValue);
                }

직관적이지 않아서 너무 불편.. spring이 좋아