엥

리액트 useContext

에어팟맥스 — Tue, 9 May 2023 09:00:47 +0900

App.tsx 파일

import "./App.css";
import { Header_X1 } from "./x1_header/Header";
import { NavMenu } from "./x1_header/NavMenu";
import { Login } from "./main/login/Login";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { HomeBody } from "./main/home/HomeBody";
import { Register } from "./main/register/Register";
import { MyPage } from "./myPage/myPage";
import { MyPoint } from "./myPage/MyPoint";
import { UserInfo } from "./myPage/UserInfo";
import { DeleteAccount } from "./myPage/DeleteAccount";

function App() {
  return (
    <BrowserRouter>
      <Header_X1 />
      <NavMenu />
      <Routes>
        <Route path="/" element={<HomeBody />} />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/myPage" element={<MyPage />}>
          <Route path="point" element={<MyPoint />} />
          <Route path="userInfo" element={<UserInfo />} />
          <Route path="deleteAccount" element={<DeleteAccount />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

페이지 구성은 위처럼 헤더, 메인메뉴가 공통으로 들어가있고 하단에 홈화면, 회원가입 화면, 로그인 화면, 마이페이지가 있다. 마이페이지에서는 포인트, 회원정보, 회원탈퇴 하위페이지가 있는 마이페이지 메뉴가 있다.

기능을 구현하면서 가장 고민을 했던 부분이 로그인 한 회원의 정보를 어떻게 저장하고 어디서부터 보내줘야(?) 할지 였는데
먼저 데이터베이스를 사용하지 않았기 때문에 전체 회원의 정보는 로컬스토리지에 userList 라는 키값으로 배열 형태로 저장이 되어있고, 로그인을 하면 로그인한 해당 회원의 고유 id 값을 세션스토리지에 저장을 해주도록 만들었다.

이때 세션에 저장된 id와 일치하는 회원을 로컬스토리지에서 찾아서 그 회원의 정보를 기억해두도록 하고싶었는데
처음에는 아래처럼 헤더에서 로그인한 사용자의 회원정보를 loginUserData에 담아서 Link의 state 에 담아서 하위 컴포넌트로 전달을 해주는 방법을 사용했다.

<Link to="/myPage" state={{ userData: loginUserData }}>

Link의 state를 사용하여 데이터를 전달하는 방식은 브라우저의 주소 창에 데이터를 노출시키지 않고 컴포넌트 간에 데이터를 전달할 수 있는 방법 중 하나이다. Link 컴포넌트를 사용하므로, 페이지 이동을 쉽게 구현할 수 있고, 전역 상태를 관리하는 Context API나 Redux를 사용하지 않고도 컴포넌트 간 데이터 전달이 가능하다.

그런데 이 방법을 사용하면 데이터를 전역적으로 관리할 수 없기 때문에 해당 데이터를 전달받은 컴포넌트에서만 사용할 수 있고, URL이 변경되지 않기 때문에 브라우저의 앞뒤 버튼으로 페이지 이동이 불가능하기도 하고 브라우저의 주소창에는 정보가 노출되지 않아서, 북마크나 공유 기능이 제한된다는 단점이 있기 때문에 컴포넌트 간 데이터 전달은 단방향적으로만 이루어지므로, 복잡한 구조의 애플리케이션에서는 전역 상태를 관리하는 Context API나 Redux를 사용하는 것이 더 효율적일 수 있다.

현재 내가 만들고 있는 페이지는 복잡하지는 않지만 다른 기능들을 만들면서 여러가지 오류를 발견하기도 했고 다른 방법을 사용해보고 싶었다.

useContext는 React에서 제공하는 Hook 중 하나로, Context API를 사용하여 컴포넌트 간에 데이터를 공유할 수 있게 해준다. useContext 는 데이터를 전역적으로 관리하고 필요한 컴포넌트에서 가져와 사용하는 방식이다.
useContext를 사용하면 중간에 있는 부모 컴포넌트를 거치지 않고도 하위 컴포넌트끼리 데이터를 전달할 수 있기 때문에 데이터 전달이 간편하고 코드를 간결하게 작성할 수 있고, 중복되는 코드를 줄일 수 있다. 이는 특히 데이터를 다수의 컴포넌트에서 사용해야 할 때 유용하게 사용될 수 있다. 그리고 useContext를 사용하면 애플리케이션 전체에서 사용하는 데이터를 한 곳에서 중앙 집중적으로 관리할 수 있기 때문에 이를 통해 데이터를 쉽게 관리하고 유지보수할 수 있다는 장점이 있다.

그러나, useContext를 사용하여 전역적으로 데이터를 관리하면 해당 데이터를 관리하는 Context 객체를 생성해야 하므로 초기 설정과 추가 작업이 필요하다.
그러나 useContext를 사용하면 데이터를 가져오기 위해 매번 컴포넌트 트리를 순회해야 하기 때문에 컴포넌트 트리가 깊고 데이터를 자주 사용하는 경우에는 성능 이슈가 발생할 수 있다. 그리고 Context는 여러 컴포넌트에서 사용되기 때문에 데이터 변경이 예기치 않게 일어날 수 있고 예측하지 못한 오류를 발생시킬 수 있으며 데이터가 어디서 온 것인지를 파악하기가 어려워 질 수 있기 때문에 디버깅을 어렵게 만들 수 있다는 단점이 있다.

아직 리액트에 대해서 잘 이해하고 있지 못하기 때문에 어떤 방법을 사용하는게 좋을지 판단하기는 힘들지만 리액트의 여러가지 기능들을 사용해보고 싶어서 Link의 state를 사용해서 데이터를 넘겨주는 방식에서 useContext를 사용해서 헤더부터 데이터를 넘겨주는 방법으로 바꿔보았다.

const loginUser =
  sessionStorageController.getSessionStorage<FormDataType>("loginUser");

export const UserContext = createContext<FormDataType>(loginUser);

헤더에서 위처럼 UserContext 라는 context를 생성을 해 주었고,

로그인 페이지에서

const userContext = useContext<FormDataType>(UserContext);

useEffect(() => {
    if (userContext.id) {
      navigate("/");
    }
  }, []);

이렇게 UserContext를 불러오니까 데이터가 잘 받아와졌다.

원래 context 를 사용할때는

return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );

이런식으로 Provider에서 생성한 context 값을 value로 전달해 주는 것이 일반적인 것 같은데 value 를 사용하지 않고도 context의 값을 참조할 수 있었다.
이유를 찾아보니까 value를 사용하지 않을 경우에는 Provider에서 생성한 context 값을 직접 참조하는데, 이때는 값을 변경할 수 없고, 단순히 읽기만 가능하다. 이런 방식은 단순한 상태를 전역적으로 사용할 때 유용하게 사용될 수 있다고 한다.
value를 사용할 경우에는 Provider에서 생성한 context 값을 value로 전달하고, value를 사용해 값을 변경할 수 있으며 보다 복잡한 상태를 전역적으로 사용할 때 유용하다고 한다.

일단은 시간이 부족해서 value를 사용하지 않고 데이터를 전달받기까지만 했지만 나중에 회원정보를 수정하는 기능을 구현하려면 value를 사용하고 데이터를 전달하도록 만들어야 할 것 같다.

리액트로 회원가입 구현하기 - useRef vs useState

에어팟맥스 — Mon, 8 May 2023 14:37:41 +0900

전체 코드

import { Box, Button, Checkbox, CssBaseline, FormControlLabel, Grid, TextField, Typography, } from "@mui/material";
import { Link, useNavigate } from "react-router-dom";
import Container from "@mui/material/Container";
import { useRef } from "react";
import { LocalStorageController } from "../../util/LocalStorageController";
import { FormDataType } from "./type/FormDataType.type";
import React from "react";

export const Register = () => {
  const navigate = useNavigate();

// is~~~Valid : input 값의 유효성을 검사하는 상태값. 
// 현재는 ""(빈칸)이 아니어야 통과를 할 수 있게 만들었지만 나중에 정규식을 넣어서 검사하도록 하려고 한다.
// 값이 false 이면 html 코드에서 error={!isUserNameValid}, helperText={isUserNameValid ? "" : "필수 입력 항목입니다."}
// 로 경고창이 뜨게 된다.
  const isUserNameValid = useRef(false);
  const isUserIdValid = useRef(false);
  const isPasswordValid = useRef(false);
  const isPasswordCheckValid = useRef(false);

// input 의 value 값
  const userName = useRef("");
  const userId = useRef("");
  const password = useRef("");
  const passwordCheck = useRef("");

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  // input이 변할때마다 input의 name별로 value와 유효성 검사상태를 업데이트 해줌.
  
    const { name, value } = event.target;
    switch (name) { 
      case "userName":
        userName.current = value;
        isUserNameValid.current = Boolean(value);
        break;
      case "userId":
        userId.current = value;
        isUserIdValid.current = Boolean(value);
        break;
      case "password":
        password.current = value;
        isPasswordValid.current = Boolean(value);
        break;
      case "passwordCheck":
        passwordCheck.current = value;
        break;
      default:
        break;
    }

// 비밀번호 input 입력창과 비밀번호 확인의 input 입력창의 value 가 같다면 true 반환
    if (passwordCheck === password) {
      isPasswordCheckValid.current = true;
    } else {
      isPasswordCheckValid.current = false;
    }
  };

// 확인 버튼을 누르면 유효성을 체크하고 input의 입력값들(사용자 정보)을 로컬스토리지에 저장해주고
// 로그인 화면으로 이동시켜줌
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (
      isUserNameValid &&
      isUserIdValid &&
      isPasswordValid &&
      isPasswordCheckValid
    ) {
      let n_id: number = 0;
      let point: string = "50000";

      let userData: FormDataType = {
        id: n_id.toString(),
        userName: userName.current,
        userId: userId.current,
        password: password.current,
        userPoint: point,
      };

      let userList: FormDataType[] =
        LocalStorageController.getLocalStorageList<FormDataType[]>(
          "userList"
        ) ?? [];

      if (userList.length > 0) {
        n_id = parseInt(userList[userList.length - 1].id) + 1;
        userData.id = n_id.toString();
      }

      userList.push(userData);
      LocalStorageController.saveLocalStorage<FormDataType[]>(
        "userList",
        userList
      );
      alert("회원가입이 완료되었습니다.");
      navigate("/login");
    }
  };

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <Box
        sx={{
          marginTop: 22,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <Typography component="h1" variant="h5">
          회원가입
        </Typography>
        <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <TextField
                name="userName"
                required
                fullWidth
                id="userName"
                label="성명"
                autoFocus
                onChange={handleInputChange}
                error={!isUserNameValid}
                helperText={isUserNameValid ? "" : "필수 입력 항목입니다."}
              />
            </Grid>
            <Grid item xs={12} container spacing={2} alignItems="center">
              <Grid item xs={9}>
                <TextField
                  required
                  fullWidth
                  id="userId"
                  label="아이디"
                  name="userId"
                  onChange={handleInputChange}
                  error={!isUserIdValid}
                  helperText={isUserIdValid ? "" : "필수 입력 항목입니다."}
                />
              </Grid>
              <Grid item xs={3}>
                <Button variant="contained">중복확인</Button>
              </Grid>
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                fullWidth
                name="password"
                label="비밀번호"
                type="password"
                id="password"
                onChange={handleInputChange}
                error={!isPasswordValid}
                helperText={isPasswordValid ? "" : "필수 입력 항목입니다."}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                fullWidth
                name="passwordCheck"
                label="비밀번호 확인"
                type="password"
                id="passwordCheck"
                onChange={handleInputChange}
                error={!isPasswordCheckValid}
                helperText={isPasswordCheckValid ? "" : "필수 입력 항목입니다."}
              />
            </Grid>
            <Grid item xs={12}>
              <FormControlLabel
                control={<Checkbox value="allowExtraEmails" color="primary" />}
                label="약관 동의"
              />
            </Grid>
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            sx={{ mt: 3, mb: 2 }}
          >
            확인
          </Button>
          <Grid container justifyContent="flex-end">
            <Grid item>
              {<Link to="/login">이미 계정이 있다면?! 로그인 하러 가기</Link>}
            </Grid>
          </Grid>
        </Box>
      </Box>
    </Container>
  );
};

html 코드는 Material UI 에서 제공하는 free template - sign up 사용(https://mui.com/material-ui/getting-started/templates/)

useState와 useRef 는 모두 리액트에서 상태를 관리하는데 사용되는 Hook이다. 하지만 둘은 목적과 사용 방법에서 차이가 있다.

useState()

- useState는 컴포넌트 내부에서 변화하는 값을 저장하고, 이 값을 변경할 때마다 컴포넌트를 리렌더링한다.
- 상태를 변경할 때는 setState() 함수를 사용하며, 상태를 변경하면 해당 컴포넌트와 하위 컴포넌트가 모두 리렌더링된다. - 상태는 컴포넌트에서 변경되는 값이며, 다른 컴포넌트와 공유되지 않는다.

useRef()

- useRef는 DOM 요소에 직접 접근하거나, 특정 값을 기억하고 싶을 때 사용된다.
- useRef로 생성된 객체는 컴포넌트가 리렌더링되어도 계속 유지된다.
- useRef는 일반적으로 상태 변경에 따른 리렌더링과는 상관없이 동작하는 로직을 구현할 때 사용된다.

useState와 useRef 의 차이점

- useState는 상태를 변경할 때마다 리렌더링이 발생하며, useRef는 상태 변경과 관계없이 계속 유지된다.
- useState는 상태 값을 변경할 때마다 새로운 상태를 생성하는 반면 useRef는 기존에 생성된 객체를 계속 사용한다.
- useState는 상태 값이 변경될 때마다 컴포넌트와 하위 컴포넌트가 모두 리렌더링되지만 useRef는 상태 변경과 관계없이 컴포넌트가 리렌더링되어도 기존 값을 유지한다.
- useState는 컴포넌트 내에서 값을 저장하는 용도로 주로 사용되는 반면 useRef는 DOM 요소에 직접 접근하거나, 이전 값을 기억해야 하는 경우에 주로 사용된다.

이 회원가입 기능을 구현하면서 처음에는 useState 로 아래처럼 초기값을 설정하고 사용했는데, 이렇게 하면 input 값이 바뀔 때마다 컴포넌트가 리렌더링이 된다.

  const [isUserNameValid, setIsUserNameValid] = useState(false);
  const [isUserIdValid, setIsUserIdValid] = useState(false);
  const [isPasswordValid, setIsPasswordValid] = useState(false);
  const [isPasswordCheckValid, setIsPasswordCheckValid] = useState(false);

  const [userName, setUserName] = useState("");
  const [userId, setUserId] = useState("");
  const [password, setPassword] = useState("");
  const [passwordCheck, setPasswordCheck] = useState("");

export const Register = () => {
	console.log("rerendering");

이렇게 콘솔로 찍어보면 useState를 사용했을 때는 input 값이 바뀔 때마다 콘솔창에 아래처럼 rerendering 이 계속 찍히는데( = 컴포넌트가 리렌더링 되고 있다는 것)

useRef 로 바꾸면 아래처럼 처음 렌더링 되었을 때만 콘솔창에 찍히고 input 에 값을 입력해도 아무것도 뜨지 않게 된다.

따라서 지금같은 회원가입창의 경우 input 값이 바뀔 때마다 리렌더링이 되는 것은 불필요하기 때문에 useState를 사용하지 않고 useRef 로 바꾸어 주었다.

지금처럼 작은 규모에서는 상관이 없겠지만 사이트의 규모가 커지게 되고, 컴포넌트 트리가 깊거나 복잡해지는 경우에는 불필요한 리렌더링이 발생하여 성능 저하의 원인이 될 수도 있다.
또한, 상태 값이 변경되어도 렌더링이 필요 없는 경우에도 리렌더링이 발생하여 낭비가 될 수 있다.
결론적으로 useState를 사용할 때에는 상태 값이 변경될 때 컴포넌트를 리렌더링해야 하는지에 대해 신중하게 고려해야 한다.

도커와 가상머신

에어팟맥스 — Sun, 12 Mar 2023 17:33:31 +0900

- 도커란?

도커란 어플리케이션을 패키징 할 수 있는 툴이다.

컨테이너라고 불리는 소프트웨어 유닛 안에 어플리케이션과 그에 필요한 시스템툴, 리소스들, 환경설정, 환경변수 등 모든 디펜던시를 하나로 묶어서 다른 서버, 다른 pc 등 어떤 곳에도 쉽게 배포하고 안정적으로 구동할 수 있게 도와주는 툴이다.

한마디로 어플리케이션을 구동하는 데에 필요한 런타임 환경에 필요한 모든 것들을 어떤 pc 에서도 동일하게 구동할 수 있도록 도커 컨테이너 안에 담을 수 있다.

도커 - 컨테이너를 만들고, 배포하고, 구동한다.

컨테이너를 만들기 위해서는 세가지가 필요하다.

먼저 도커파일을 만들어야 한다.

어플리케이션을 구동하기 위해 꼭 필요한 파일들, 어떤 프레임워크나 라이브러리를 설치해야 하는지, 외부 디펜던시에 대해서 명시할 수 있고, 필요한 환경변수를 설정할 수 있고, 어떻게 구동해야 하는지 스크립트도 포함할 수 있다.

이렇게 작성한 도커파일을 이용해서 이미지를 만든다.

이미지 안에는 어플리케이션을 실행하는 데에 필요한 코드, 런타임환경, 시스템 툴, 시스템 라이브러리, 모든 세팅들이 포함되어 있다.

이렇게 만들어진 이미지는 변경이 불가능한 불변의 상태이다.

객체지향에서 클래스의 개념과 비슷하다.

마지막 단계인 컨테이너는 이미지를 고립된 환경에서 개별적인 파일 시스템 안에서 실행할 수 있는 것을 말한다.

컨테이너 안에서 어플리케이션이 동작한다고 보면 된다.

컨테이너에서 각각 동작하는 어플리케이션은 파일 생성, 수정 등 각각의 설정이 가능하다.

각각의 컨테이너에서 수정된 파일들이 있어도 이미지에는 영향을 끼치지 않는다.

컨테이너는 객체지향에서 인스턴스의 개념과 비슷하다.

배포하기 - 로컬 머신(pc)에서 이미지를 생성해서 컨테이너 레지스트리(깃허브같은 개념)에 내가 만든 이미지를 푸시하고 필요한 서버나 다른 개발자 pc 에서 내가 만든 이미지를 가지고 와서 실행하면 된다.

정상적으로 실행하기 위해서는 그 pc 에 도커와 같은 컨테이너 엔진을 설치해두어야 한다.

- 가상머신(vm)과 도커의 차이?

가상머신은 하드웨이 인프라스트럭쳐 위에 vm웨어나 버츄얼박스같은 hyperviser 소프트웨어를 사용하여 각각의 가상머신을 만들 수 있다.

한 운영체제 위에서 어플리케이션을 각각의 고립된 다른 환경에서 구동하기 위해서 가상머신을 이용하여 구동해야 했다.

가상머신은 각각의 운영체제를 포함하고 있기 때문에 맥에서 vm 을 이용하면 윈도우와 리눅스를 동시에 구동할 수 있다.

이렇게 vm 을 사용하면 운영체제를 포함하고 있기 때문에 굉장히 무겁고 시작하는데도 오래걸리고 운영체제의 인프라스트럭쳐 리소스를 많이 잡아먹는다.

때문에 이 vm 에서 조금 경량화 된 컨셉이 container 이다.

컨테이너는 하드웨어에 설치된 운영체제(호스트 os) 에서 컨테이너 엔진이라는 소프트웨어를 설치만 하면 개별적인 컨테이너를 만들어서 각각의 어플리케이션을 고립된 환경에서 구동할 수 있다.

컨테이너는 운영체제를 포함하지 않고 컨테이너 엔진이 설치된 host os 를 공유하기 때문에 가볍다.

컨테이너가 구동되기 위해서는 컨테이너 엔진이 필요하고 엔진이 호스트os 에 접근해서 필요한 것들을 처리해준다.

이 컨테이너 엔진중에 가장 많이 이용되는 것이 도커이다.

객체와 클래스, 쿠키와 세션, 오버로딩과 오버라이딩, 싱글톤패턴, 접근제어자

에어팟맥스 — Sun, 12 Mar 2023 17:30:12 +0900

- 객체와 클래스의 차이

객체와 클래스는 객체 지향 프로그래밍(OOP)에서 중요한 개념이다.

클래스는 객체를 만들기 위한 청사진(blueprint)이라고 볼 수 있다. 즉, 객체를 만들기 위한 필드와 메서드를 정의하는 일종의 틀이라고 생각할 수 있다.

예를 들어, 자동차 클래스는 자동차 객체를 만들기 위한 필드와 메서드를 가지고 있다.

객체는 클래스의 인스턴스(instance)라고 볼 수 있다. 클래스를 바탕으로 실제로 만들어진 것이 객체이다.

예를 들어, 자동차 클래스에서 만들어진 객체는 실제 자동차이다.

객체는 클래스에서 정의한 필드와 메서드를 가지고 있으며, 필드는 객체의 상태(state)를 나타내고, 메서드는 객체의 동작(behavior)을 나타낸다.

따라서, 클래스는 객체를 만들기 위한 틀이고, 객체는 클래스를 바탕으로 실제로 만들어진 것입니다. 클래스는 여러 개의 객체를 만들기 위해 사용되며, 객체는 클래스에서 정의한 필드와 메서드를 가지고 있습니다.

- 쿠키와 세션의 차이

쿠키와 세션은 웹 개발에서 사용되는 기술로서, 사용자의 정보를 저장하고 유지하는 역할을 한다. 하지만 두 기술은 목적이나 사용 방법, 저장 위치 등에서 차이가 있다.

쿠키(Cookie)는 서버에서 생성하여 사용자의 웹 브라우저에 저장되는 작은 데이터 파일이다.

쿠키를 사용하면 클라이언트에서 서버로 요청을 보낼 때, 해당 쿠키가 함께 전송된다. 즉, 쿠키는 클라이언트 측에서 저장되기 때문에 브라우저를 종료하고 다시 접속해도 유지된다.

주로 로그인 상태 유지, 사용자 선호 설정 등을 저장하는 용도로 사용된다.

세션(Session)은 서버에서 생성되는 정보 저장 공간으로, 세션은 서버에서 생성되어 클라이언트에게 고유한 세션 ID를 부여하며, 이 ID를 쿠키에 저장하여 브라우저에서 서버로 요청을 보낼 때 세션 ID를 전달한다.

이러한 방식으로 세션은 클라이언트 측에 저장되는 쿠키와는 달리 서버 측에서 관리된다.

세션은 클라이언트가 브라우저를 종료하면 소멸되므로 보안이 중요한 정보를 저장하는 용도로 사용된다.

요약하면, 쿠키는 클라이언트 측에서 저장되고, 브라우저를 종료하더라도 지속적으로 사용할 수 있지만 보안에 취약하다.

세션은 서버 측에서 관리되고, 브라우저를 종료하면 삭제되지만 보안에 강력하다. 쿠키는 데이터 용량이 작고, 캐시와 같은 용도로 사용될 수도 있다. 세션은 데이터 용량이 크고, 로그인과 같은 인증과정에 사용될 수 있다.

- 오버로딩 오버라이딩 차이점

오버로딩(Overloading)과 오버라이딩(Overriding)은 객체지향 프로그래밍에서 다형성을 구현하는 방법 중 두 가지이다.

오버로딩(Overloading)

같은 이름의 메서드를 중복 정의하는 것을 의미한다.
메서드 이름은 같지만 매개변수의 개수나 타입이 다르면 서로 다른 메서드로 인식한다.
오버로딩된 메서드들은 컴파일러가 인자를 보고 어떤 메서드를 호출할지 결정한다.

오버라이딩(Overriding)

부모 클래스에 있는 메서드를 자식 클래스에서 재정의하는 것을 의미한다.
메서드 이름, 매개변수의 개수, 타입, 반환 타입이 같아야한다.
자식 클래스에서 오버라이딩된 메서드가 호출되면, 자식 클래스에서 재정의된 메서드가 호출된다.

즉, 오버로딩은 메서드 이름이 같지만 매개변수가 다른 경우에 사용하며, 오버라이딩은 상속 받은 메서드를 자식 클래스에서 재정의하여 사용하는 경우에 사용한다.

- 싱글톤 패턴

싱글톤 패턴(Singleton Pattern)은 클래스의 인스턴스를 하나만 생성하고, 그 인스턴스에 대한 전역적인 접근을 제공하는 패턴이다.

즉, 어떤 클래스의 객체를 단 한 개만 만들고 그 객체를 어디에서든지 참조할 수 있도록 하는 것이다.

싱글톤 패턴을 구현하기 위해서는 해당 클래스의 생성자를 private으로 선언하고, 해당 클래스 내부에 유일한 인스턴스를 생성하고 외부에서는 그 인스턴스에 접근할 수 있는 public static 메서드를 제공하는 것이 일반적이다.

싱글톤 패턴은 하나의 객체만을 사용하기 때문에 메모리 관리 측면에서 이점을 가질 수 있다.

또한, 전역 상태를 유지할 필요가 있는 경우나, 자원의 공유가 필요한 경우에 유용하게 사용될 수 있다.

그러나, 싱글톤 패턴이 과도하게 사용될 경우, 의존성이 높아져 코드를 유지보수하기 어려워질 수 있다.

- 접근제어자(private, default, protected, public)

접근제어자(access modifier)는 클래스, 변수, 메소드 등의 멤버들에 대한 접근 권한을 설정하는 키워드이다.

private: 해당 멤버는 같은 클래스 내에서만 접근 가능하다.
default(접근 제어자 생략 가능): 해당 멤버는 같은 패키지 내에서만 접근 가능하다.
protected: 해당 멤버는 같은 패키지 내에서 뿐만 아니라 상속받은 클래스에서도 접근 가능하다.
public: 해당 멤버는 어디서든 접근 가능하다.

각각의 접근 제어자는 다음과 같은 특징을 가지고 있다.

private: 클래스의 정보 은닉(캡슐화)을 위해 사용되며, 외부에서 함부로 접근하지 못하도록 한다.
default: 패키지 내에서만 접근 가능하므로, 같은 패키지에 속한 다른 클래스에서는 접근할 수 있지만, 다른 패키지에 속한 클래스에서는 접근할 수 없다.
protected: 상속과 관련하여 사용되며, 같은 패키지 내에서는 default와 동일하게 동작하지만, 다른 패키지에 속한 클래스에서도 상속받은 경우에는 접근할 수 있다.
public: 어디서든 접근 가능하므로, 모든 클래스에서 해당 멤버에 접근할 수 있다.

접근 제어자를 적절히 활용하여 정보 은닉과 데이터의 보안성을 높이고, 다른 클래스와의 상호작용을 제한하거나 허용할 수 있다.

데이터베이스 개념

에어팟맥스 — Sun, 12 Mar 2023 17:21:51 +0900

- 데이터베이스 정규화란?

데이터베이스의 정규화는 중복을 최소화하도록 설계하는 것이고, 비정규화는 읽는 시간을 최적화 하도록 설계하는 것이다.

데이터베이스를 설계할 때 최소한의 데이터 중복, 최대한의 데이터 유연성을 위해 불필요한 데이터를 제거하고 중복을 최소화하여 데이터를 구조화하는 프로세스를 정규화라고 한다.

정규화는 저장공간을 최소화 하고 데이터 구조의 안정성 및 무결성을 유지할 수 있지만, Relation의 분해로 인해 Relation 간의 연산(JOIN 연산)이 많아져서 질의에 대한 응답 시간이 느려질 수 있다는 단점이 있다.

이를 극복하기 위해 부분적으로 비정규화를 사용하기도 한다.

- 비정규화는?

정규화된 엔티티, 속성, 관계를 시스템의 성능 향상 및 개발과 운영의 단순화를 위해 중복 통합, 분리 등을 수행하는 데이터 모델링 기법 중 하나이다.

일반적으로 조회에 대한 처리 성능이 중요하다고 판단될 때 부분적으로 반정규화를 고려하게 된다. 디스크 I/O 량이 많거나, 테이블끼리의 경로가 너무 멀거나, 칼럼을 계산하여 조회할 때 성능의 저하가 우려될 때 반정규화를 고려하게 된다.

항상 일정한 범위만을 조회하거나, 성능 상 이슈가 있거나, 테이블에 지나치게 조인을 많이 사용하게 되어 데이터를 조회하는 것이 기술적으로 어려울 경우 등이 반정규화의 고려 대상이 된다.

단점은 반정규화를 과도하게 적용하다 보면 데이터의 무결성이 깨질 수 있고, 입력, 수정, 삭제의 질의문에 대한 응답 시간이 늦어질 수 있다.

데이터베이스의 정규화와 비정규화는 데이터베이스 설계에서 중요한 개념이다.

정규화는 데이터베이스의 테이블을 나누고 중복을 제거하여 데이터의 일관성과 무결성을 유지하는 과정이다. 일반적으로 정규화는 제1정규형, 제2정규형, 제3정규형 등 다양한 단계로 나뉘어 적용된다. 정규화를 통해 데이터 중복이 줄어들어 데이터 저장 공간을 절약하고, 데이터의 일관성과 무결성을 보장할 수 있다.

반면 비정규화는 정규화된 테이블을 다시 하나의 테이블로 합치는 과정을 말한다. 이렇게 하면 데이터 조회 시에 조인 연산을 줄일 수 있기 때문에 성능 향상을 기대할 수 있다. 하지만 이렇게 데이터를 비정규화할 경우, 데이터 중복과 일관성 문제가 발생할 수 있으므로 신중하게 적용해야 한다.

요약하자면, 정규화는 데이터의 일관성과 무결성을 유지하고 중복을 제거하여 저장 공간을 절약하는 반면, 비정규화는 성능 향상을 위해 중복을 허용하는 과정이다.

- Database 인덱스란?

데이터베이스의 인덱스(Index)는 테이블에서 자주 검색되는 컬럼들의 값을 미리 정렬하여 검색 속도를 높이는 자료구조이다. 쉽게 말해, 인덱스는 데이터베이스에서 원하는 데이터를 빠르게 찾을 수 있도록 해주는 것이다.

인덱스를 사용하면 검색 속도가 빨라지지만, 인덱스 자체도 데이터베이스의 용량을 차지하므로 인덱스를 사용할 컬럼을 선택하는 것이 중요하다. 또한, 인덱스를 사용하면 데이터의 삽입, 수정, 삭제 시에도 추가 작업이 필요하므로 인덱스를 너무 많이 사용하면 성능 저하가 발생할 수 있습니다. 따라서, 적절한 인덱스 설계가 필요하다.

데이터베이스를 사용할 때 데이터의 양(row)에 따라 실행 결과의 속도가 차이가 나게 된다.

특히 데이터의 양이 증가할수록 실행 속도는 느려지고, JOIN이나 서브 쿼리 사용 시 곱 연산이 일어나 데이터 양이 증가하기 때문에 WHERE 조건에서 필요한 데이터만 추출 후 사용하는 것이 좋다고 알고 있는데, 보다 쿼리의 성능을 높이는 데 중요한 것은 인덱스를 적재적소로 활용하는 것이다.

특정 컬럼에 인덱스를 생성하면, 해당 컬럼의 데이터들을 정렬하여 별도의 메모리 공간에 데이터의 물리적 주소와 함께 저장한다. 만약 인덱스를 타게 되면 먼저 인덱스에 저장되어 있는 데이터의 물리적 주소로 가서 데이터를 가져오는 식으로 동작을 하여 검색 속도의 향상을 가져올 수 있다.

인덱스의 가장 큰 특징은 데이터들이 정렬이 되어있다는 점이다. 일반적으로 테이블을 만들고 안에 데이터가 쌓이게 되면 테이블의 행은 내부적으로 순서가 없이 뒤죽박죽으로 저장이 된다. 이렇게 되면 WHERE절에 특정 조건에 맞는 데이터들을 찾아낼 때도 레코드의 처음부터 끝까지 다 읽어서 검색 조건과 맞는지 비교하는 풀 스캔을 해야한다. 반면 인덱스 테이블을 스캔할 때는 데이터들이 정렬되어 저장되어 있기 때문에 해당 조건(WHERE)에 맞는 데이터들을 빠르게 찾아낼 수 있다.

단점은 인덱스를 관리하기 위해 추가 작업이 필요하다는 것이다. 항상 최신의 데이터를 정렬된 상태로 유지해야 원하는 값을 빠르게 탐색할 수 있는데, 데이터가 추가되거나 값이 변경되는 경우 인덱스 테이블 내에 있는 값들을 다시 정렬을 해야 한다. 인덱스 테이블, 원본 테이블 이렇게 두 군데의 데이터 수정 작업을 해줘야 한다. 따라서 INSERT, UPDATE, DELETE 의 DML 이 빈번하게 일어나는 테이블보다는 검색을 위주로 하는 테이블에 인덱스를 생성하는 것이 좋다.

또, 인덱스를 관리하기 위해서는 데이터베이스의 약 10%에 해당하는 저장공간이 추가로 필요하다.

인덱스가 쌓여가면서 전체적인 데이터베이스의 성능 저하를 초래할 수도 있기 때문에 인덱스는 최소한으로 사용하고 전체적인 sql 문을 효율적으로 짜는 방향으로 나아가야 한다.

- 트랜잭션?

데이터베이스의 트랜잭션(Transaction)은 데이터베이스에서 수행하는 작업의 단위를 의미한다. 하나의 트랜잭션은 하나 이상의 데이터베이스 작업들로 구성되며, 모든 작업이 성공적으로 수행되거나, 하나라도 실패할 경우 롤백(rollback)하여 이전 상태로 되돌리는 것을 보장한다. 이렇게 함으로써 데이터베이스의 일관성을 유지할 수 있다.

트랜잭션은 "원자성(Atomicity)", "일관성(Consistency)", "격리성(Isolation)", "지속성(Durability)"이라는 네 가지 속성을 가지고 있다. 즉, 하나의 트랜잭션은 완전한 하나의 작업으로 간주되며, 모든 작업이 성공적으로 수행되거나, 실패할 경우 이전 상태로 롤백된다. 이렇게 함으로써 데이터베이스의 일관성을 유지할 수 있다. 또한, 여러 개의 트랜잭션이 동시에 수행될 경우에도 각각 독립적으로 실행되는 것을 보장합니다. 마지막으로, 모든 성공적인 트랜잭션은 영구적으로 데이터베이스에 적용되는 것을 보장한다.

- 조인?

데이터베이스에서의 조인(join)은 두 개 이상의 테이블에서 가져온 데이터를 결합하여 하나의 결과 집합으로 반환하는 방법이다. 조인은 테이블 간에 연관된 데이터를 검색하는 데 사용된다.

예를 들어, 고객 정보와 주문 정보가 있는 두 개의 테이블이 있다고 가정해보자. 고객 정보 테이블에는 고객의 이름, 주소, 전화번호 등이 포함되어 있고, 주문 정보 테이블에는 주문 번호, 주문 일자, 주문 수량 등이 포함되어 있다. 이 두 개의 테이블을 조인하면 고객이 어떤 주문을 했는지를 파악할 수 있다.

조인의 종류에는 내부 조인(inner join), 외부 조인(outer join), 자연 조인(natural join) 등이 있으며, 각각의 조인은 다양한 상황에 따라 사용된다.

- 참조무결성

데이터베이스의 참조 무결성은 데이터베이스에서 관계형 데이터베이스를 구축할 때, 관계를 맺고 있는 두 테이블 사이에서 무결성을 보장하기 위한 것이다. 이를 위해 외래키(Foreign Key) 제약 조건을 사용한다. 외래키 제약 조건은 부모 테이블의 기본키(Primary Key)와 자식 테이블의 외래키(Foreign Key) 간의 관계를 정의하는 제약 조건이다.

외래키 제약 조건은 부모 테이블의 기본키를 참조하여 자식 테이블의 데이터를 제어한다. 즉, 부모 테이블의 기본키에 있는 값이 변경되거나 삭제되면, 해당 값을 참조하고 있는 자식 테이블의 데이터도 함께 변경이나 삭제되어야 한다. 이렇게 함으로써 데이터베이스의 데이터 일관성과 무결성을 유지할 수 있다.

문제 해결 - 부트스트랩 모달 안보임

에어팟맥스 — Mon, 14 Nov 2022 15:37:02 +0900

예전에 쓰던 모달양식을 그대로 가져온건데 모달이 안보임

모달창 띄우기 전 화면

모달 버튼을 클릭하면 화면에 스크롤이 없어지고 다른 곳이 클릭이 되지 않는 상태여서 부트스트랩이 적용이 되긴 한 것 같은데 화면은 그대로이고 모달창이 보이지 않았다.

모달 html

모달 버튼 html

모달 css ( 오타 -> .Modal 은 원래 .modal 임)

잘 되던 모달을 그대로 복붙해온거라 코드에는 이상이 없는 것 같음

모달의 fade 는 모달을 감추었다가 보이게 할 때 사용하는 것으로 알고있는데 지금 내 경우에는 모달이 아예 감춰진 상태라 fade 부분에서 이상해졌나? 싶어서

해결 1단계 - 모달 클래스에서 fade 를 삭제해봤다.

모달창이 뜨긴 떴다.! 근데 좀 이상하긴 함

검색을 해 보니까 이상태에서 모달을 보이게 한 방법이 있어서 그대로 따라해봤다.

(출처: https://m.blog.naver.com/10hsb04/221672350510)

해결 2단계 - 모달 클래스 css에 z-index: 1050 를 줘봤다.

모달 뜸 ! 문제 해결 완.

(z-index 의 1050 이라는 숫자는 의미가 있는 것 같다. 1050 이하의 숫자를 넣어보니 1단계 화면이랑 똑같이 안뜸)

java.lang.ClassNotFoundException / 이클립스 clean 기능

에어팟맥스 — Tue, 20 Sep 2022 00:26:59 +0900

웹사이트 홈화면도 원래 잘 동작했었고, 홈화면 소스를 건드린 곳이 없는데 갑자기 안돌아가고

코드를 자세히 뜯어봐도 틀린게 없어보이는데

아니 무엇보다 클래스가 떡하니 있는데 왜 매핑된 클래스가 없다고 뜨는거임..????? 왜?????

java.lang.ClassNotFoundException 에러가 뜨면서 작동이 안되는게 이상해서 구글링을 해보다가

java.lang.ClassNotFoundException 에러가 나타날 때는

상단바에 project 메뉴에 있는 clean 을 해보면 작동이 될 수도 있다고 해서 해보았다.

그리고 다시 코드를 실행시켜보니까 ....!

잘 돌아간다. 어이없음. 역시 내가 틀린게 아니었어

project 의 clean 기능은

있는 파일들을 지우는게 아니라

이클립스가 사용하고 있던 (기억하고 있는?) 정보나 클래스 등의 파일들을 깔끔하게 정리하고

다시 만드는 개념이라고 한다.

주로 빌드가 꼬였을 때 다시 정리하는 용도로 사용된다.

+++++ 추가 +++++

그 뒤로도 계속 clean 을 눌러줘야 변경사항이 인식되는 문제로 너무 귀찮았는데,

알고보니 저 Build Automatically 가 체크가 안되어있어서 그랬던 거였다.

내가 실수로 체크해제를 했었나보다.

다시 체크해주니까 변경사항도 자동으로 인식이 잘 됨 ㅎ

HTTP 요청 헤더를 파싱하는 중 오류 발생 / java.lang.IllegalArgumentException / HTTP 상태 400 - 잘못된 요청

에어팟맥스 — Fri, 16 Sep 2022 15:10:57 +0900

<목표>

웹페이지에서 비밀번호 찾기를 누르면 나오는 모달창에서

1. 아이디와 이메일을 입력받고,

2. 입력받은 이메일로 인증코드를 보낸 다음,

3. 전송받은 인증코드를 입력하면

4. 새 비밀번호를 입력받아서

5. 비밀번호를 새로 만든다.

이때, 인증코드를 잘못 입력하면 아이디와 이메일을 입력받는 초기창으로 돌아감.

<문제 발생>

인증코드 전송까지는 잘 되는데 올바른 인증코드를 입력하면 아래 사진처럼 오류가 발생한다.

(틀린 인증코드를 입력하면 정상작동됨.)

웹페이지 에러창

콘솔창 에러메시지

F12 콘솔창 에러메시지

<오류 해결 과정>

콘솔창 에러메시지 마지막 줄인

1. pwdUpdateEnd.up:1(pwdUpdateEnd.up 의 첫번째 줄에서부터 오류가 난 것)

이 부분과,

2. 인증코드를 잘못 작성했을 때는 정상작동되고, 인증코드를 올바르게 입력했을 때만 오류가 발생한다는 점

을 고려하면

인증코드를 올바르게 입력했을 때 페이지를 넘겨주는 부분에서 문제가 발생했을 것으로 추측해볼 수 있다.

인증코드를 올바르게 입력했을 때 페이지를 넘겨주는 부분( 사진상의 if문)

if문의 loc 부분 코드에서 문제가 생긴 것으로 추측 가능

loc = request.getContextPath()+"/login/pwdUpdateEnd.up?userid="+userid;

이 부분에서 문제가 발생했다면 userid 부분에서 오류가 있었을 가능성이 가장 높기 때문에

수정 - 1

loc = request.getContextPath()+"/login/pwdUpdateEnd.up";

이렇게 userid 부분을 제외하고 실행시켜 보니까

수정 - 1 실행

페이지가 넘어갔다.!!!

그러면 userid 부분에서 오류가 발생한 것이 확실하기 때문에

그 부분의 코드로 넘어가서 userid 를 확인해본다.

System.out.println("===userid :" + userid);

위의 코드를 넣어봐서 넘어온 userid 가 어떤 값을 가지는지 확인해본다.

userid 값 확인해보기

userid 값 확인 결과

=== userid : [object:Object]

userid 가 안넘어왔다,,,,,

그러면 userid 를 넘겨주는 부분으로 가보면

userid 값을 넘겨주는 부분

!!!! 오류 발견 !!!!

frm.userid.value = $("input#userid");
frm.userCertificationCode.value = $("input#input_confirmCode").val();

여기서 userid 부분에 .val() 이 빠져있어서 값이 안넘어갔던 것이다,,,,,,

<문제 해결>

userid 부분 수정하기

frm.userid.value = $("input#userid").val();
frm.userCertificationCode.value = $("input#input_confirmCode").val();

올바르게 수정을 하고 프로그램을 작동해보면,

userid 값 받기 성공

=== userid: kimhw

값이 잘 넘어왔고,

(마지막줄의 ~~~~~~~~~~~~~~~userid : null 은 무시해도 됨)

오류 해결!

값이 잘 넘어오는 것을 볼 수 있다.

문제 해결!

JSTL(JSP Standard Tag Library) - 7. 포맷(fmt) 태그

에어팟맥스 — Thu, 1 Sep 2022 23:22:41 +0900

fmt 태그는 Formatting 태그로 포맷에 관련된 태그입니다.

실행 파일

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    
<%
   String[] pointArr1 = {"10","20.4","30.5","46"};
   request.setAttribute("pointArr1", pointArr1);
   
   String[] pointArr2 = null;
   request.setAttribute("pointArr2", pointArr2);
   
   int[] priceArr = {50000, 100000, 250000, 150000, 2000000};
   request.setAttribute("priceArr", priceArr);   
   
   RequestDispatcher dispatcher = request.getRequestDispatcher("08_fmt_view_02.jsp"); 
    dispatcher.forward(request, response);
%>

view 파일

문자열로 되어진 숫자를 누적한 결과값(자동형변환, 형변환) 나타내기 및 정수로 되어진 데이터를 세자리마다 콤마를 찍어서 나타내어주기

<fmt:parseNumber var="pointInt" value="${point}" integerOnly="true" />

fmt:parseNumber 은 문자열을 숫자형식으로 형변환 시킨다.
integerOnly="true" 은 소수점은 절삭해버리고 정수만 취해온다.
정수만 취해온 값을 변수 pointInt 에 넣어줌.

<fmt:formatNumber value="${price}" pattern="#,###" />

pattern="#,###": 숫자가 #,### 형식으로 출력됨

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


<%-- ==== JSTL(JSP Standard Tag Library) 사용하기 ==== --%>     
<%@ taglib prefix="c"   uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 

<%--
     fmt 태그는 Formatting 태그로 포맷에 관련된 태그입니다.
         참조사이트  https://sinna94.tistory.com/11
--%>
   
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문자열로 되어진 숫자를 누적한 결과값(자동형변환, 형변환) 나타내기 및 정수로 되어진 데이터를 세자리마다 콤마를 찍어서 나타내어주기</title> 
</head>
<body>
   <h2>문자열로 되어진 숫자를 누적한 결과값(자동형변환) 나타내기(JSTL을 사용한것)</h2>
   
   <c:set var="sum" value="0" /> <%-- value="0" 초기치는 항상 "0"(문자열) 이어야 함. 0이면 안됨 --%>
   <c:if test="${ not empty pointArr1 }"> <!-- requestScope. 생략  -->
      <ul>
         <c:forEach var="point" items="${pointArr1}">
            <li>${point}</li>
            <c:set var="sum" value="${sum + point}" />
         </c:forEach> 
      </ul>
      pointArr1 누적의 합계 : ${sum}
   </c:if>
   
   <br>
   <hr style="border: solid 1px orange;" />
   <br>
   
   <h2>문자열로 되어진 숫자를 정수로 형변환하여 누적한 결과값 나타내기(JSTL을 사용한것)</h2>
   
   <c:set var="sum" value="0" />
   <c:if test="${ not empty pointArr1 }">
      <ul style="list-style-type: circle;">
         <c:forEach var="point" items="${pointArr1}">
            <li>
               <fmt:parseNumber var="pointInt" value="${point}" integerOnly="true" />
               <%-- fmt:parseNumber 은 문자열을 숫자형식으로 형변환 시키는 것이다.
                    integerOnly="true" 은 소수점은 절삭해버리고 정수만 취해오는 것이다.
                         정수만 취해온 값을 변수 pointInt 에 넣어줌.
               --%>
               ${pointInt}
            </li>
            <c:set var="sum" value="${sum + pointInt}" />
         </c:forEach>
      </ul>
      pointArr1 을 정수만 취해온 누적의 합계 : ${sum}
   </c:if>
   
   <br>
   <hr style="border: solid 1px orange;" />
   <br>
   
   <h2>forEach 를 사용하면서 index번호를 나타내기</h2>
   
   <c:if test="${ not empty pointArr1 }">
      <ul>
         <c:forEach var="point" items="${pointArr1}" varStatus="status"> <%-- varStatus="이름은맘대로"  --%>
            <li>${point}&nbsp;(인덱스번호 &nbsp; ${status.index})</li>
            <%-- ${status.index} 은 0 부터 시작한다. --%>
         </c:forEach>
      </ul>
   </c:if>

   <br>
   <hr style="border: solid 1px orange;" />
   <br>
   
   <h2>forEach 를 사용하면서 순서번호를 나타내기</h2>
   
   <c:if test="${ not empty pointArr1 }">
      <ul>
         <c:forEach var="point" items="${pointArr1}" varStatus="status">
            <li>${point}&nbsp;(순서번호 &nbsp; ${status.count})</li>
            <%-- ${status.count} 은 1 부터 시작한다. --%>
         </c:forEach>
      </ul>
   </c:if>
   
   <br>
   <hr style="border: solid 1px blue;" />
   <br>
   
   <h2>정수로 되어진 데이터를 세자리 마다 콤마를 찍어서 나타내어 주기(JSTL을 사용한것)</h2>
   
   <c:set var="sum" value="0" />
   <c:if test="${ not empty priceArr }">
      <ul>
         <c:forEach var="price" items="${priceArr}">
            <li>${price}</li>
            <c:set var="sum" value="${sum + price}" />
         </c:forEach>
      </ul>
      priceArr 누적의 합계 : ${sum}
   </c:if>
   
   <br><br>
   
   <c:set var="sum" value="0" />
   <c:if test="${ not empty priceArr }">
      <ul>
         <c:forEach var="price" items="${priceArr}">
            <li><fmt:formatNumber value="${price}" pattern="#,###" /></li> <%-- pattern="#,###": 숫자가 #,### 형식으로 출력됨 --%>
            <c:set var="sum" value="${sum + price}" />
         </c:forEach>
      </ul>
      priceArr 누적의 합계 : <fmt:formatNumber value="${sum}" pattern="#,###" />
   </c:if>
   
</body>
</html>

JSTL(JSP Standard Tag Library) - 6. 함수 태그(functions)

에어팟맥스 — Wed, 31 Aug 2022 23:38:25 +0900

        === 함수 태그(functions) ===
  
  JSTL은 EL에서 사용할 수 있는 함수 태그를 제공한다.
 
 -------------------------------------------------------------------------------------   
     함수                                                   설명
 -------------------------------------------------------------------------------------   
  length(obj)                      obj가 Conllection인 경우 저장된 항목의 개수를, 문자인 경우 문자열의 길이를 반환
  toUpperCase(str)                 str을 대문자로 변환
  toLowerCase(str)                 str을 소문자로 변환
  substring(str, idx1, idx2)       str.substring(idx1, idx2)의 결과를 반환, idx2가 -1일 경우 str.substring(idx1)과 동일
  substringAfter(str1, str2)       str1에서 str1에 포함되어 있는 str2 이후의 문자열을 구함
  substringBefore(str1, str2)      str1에서 str1에 포함되어 있는 str2 이전의 문자열을 구함
  trim(str)                        str 좌우의 공백 문자를 제거 
  replace(str, src, dest)          str에 있는 src를 dest로 변환
  indexOf(str1, str2)              str1에서 str2가 위치한 인덱스를 구함
  startsWith(str1, str2)           str1이 str2로 시작할 경우 true, 그렇지 않을 경우 false를 반환
  endsWith(str1, str2)             str1이 str2로 끝나는 경우 true, 그렇지 안을 경우 false를 반환
  contains(str1, str2)             st1이 str2를 포함하고 있을 경우 true를 반환
  containsIgnoreCase(str1, str2)   대소문자 구분없이 str1이 str2를 포함하고 있을 경우 true를 반환
  split(str1, str2)                str2로 명시한 글자를 기준으로 str1을 분리해서 배열로 반환 
  join(array, str2)                array에 저장된 문자열을 합침, 각 문자열의 사이에는 str2가 붙음