dev_h_o.log

서브라임(Sublime) InsertNums과 Increment Selection 자동으로 숫자 넣기

Sun, 15 Oct 2023 06:35:50 GMT

InsertNums과 IncrementSelection는 서브라임 텍스트 에디터를 사용할 때 숫자를 유용하게 다룰 수 있는 패키지

✔️ InsertNums

깃헙 주소 : github

숫자를 자동으로 삽입해주는 패키지로 주로 반복되는 행 드래스해서 숫자 일렬로 쫙 넣을 때 자주 사용하는 패키지

1부터 1씩 증가해서 넣을 수도 있고 1부터 원하는 숫자만큼 증가시킬 수도 있다.

단축키

윈도우 와 리눅스 : Ctrl+Alt+N
OSX : ⌘+⎇+N

사용 방법

서브라임에서 Package Control:install Package 접속 단축키 : Ctrl+Shift+P /⌘+⇧+P
InsertNums 검색 후 다운로드
입력을 원하는 줄 커서를 활성화 시킨 뒤 단축키로 InsertNums 호출

1부터 증가
3부터 2씩 증가

이런식으로 숫자에 규칙을 부여해서 원하는 줄에 원하는대로 숫자를 입력할 수 있는 게 편해서 자주 사용한다.

✔️ Increment Selection

깃헙 주소 : github

InsertNums과 비슷하지만 이 녀석은 좀 더 단순하다. 활용 방법이 더 있을 수도 있지만.. 나는 그냥 1부터 숫자 증가시킬 때만 사용하는 편

단축키

윈도우 와 리눅스 : Ctrl+Alt+I
OSX : ⌘+⌃+I

사용 방법

Package Control:install Package에 접속 후 Increment Selection 다운로드

입력을 원하는 줄 커서를 활성화 시킨 뒤 단축키로 Increment Selection 호출

1부터 10까지 단축키 한번으로 입력되었다.

📅 DATE

2023.10.15 작성

[파이썬] 엑셀 파일형식 가져와서 적용하기(openpyxl 패키지 활용)

Mon, 18 Sep 2023 12:51:20 GMT

1. 문제

pandas를 활용해서 엑셀의 숫자 데이터를 읽어 데이터베이스에 업로드하는데 표시형식이 적용 안되는 문제가 발생했다. 함수를 적용하거나 셀 서식에서 소수점을 적용한 게 반영이 안 돼서 openpyxl로 패키지를 바꿔서 적용하였다.

2. 해결

openpyxl 라이브러리를 활용해서 엑셀파일-시트 읽기
표시형식을 적용하여 리스트에 저장한다. (for문)
- 연번이 있는 행만 가져온다.
- 표시형식과 값 가져온다.
- 표시형식 적용해서 리스트에 넣는다.
```
workbook = load_workbook(filename=path, data_only=True) #data_only=True 셀 값 가져오기
sheet = workbook[xl.sheet_names[sheet_i]]
```

11행부터 데이터와 표시 형식 가져오기

행:row_index, 열:col_index, 데이터:cell_value, 표시형식:cell_format

11행부터 데이터와 표시 형식 가져오기

res_cnt = 0 y = 0 for row_index, row in enumerate(sheet.iter_rows(min_row=11, values_only=True), start=11): xls_raw_data = [] if row[0] is not None: # 데이터가 있는 경우에만 가져오기 for col_index, cell_value in enumerate(row, start=1): if 4 <= col_index <= 13: res_cnt += 1 cell = sheet.cell(row=row_index, column=col_index) cell_format = cell.number_format

            #표시형식 조건
            if '0.0_' in cell_format :
                cell_value = format(cell_value, ".1f")

            if '0.00' in cell_format :
                cell_value = format(cell_value, ".2f")

            xls_raw_data.append(cell_value)

            # 가져온 데이터와 표시 형식 출력
            print(f"행 {row_index}, 열 {col_index}: 데이터: {cell_value}, 표시 형식: {cell_format}")


    xls_data = "||".join(map(str,xls_raw_data))


데이터를 제대로 출력하는지 확인하기 위해 표시형식 조건을 if문으로 설정하였다. 현재 코드에서는 소수점 1자리~2자리까지만 캐치하는데 이후 수정본에서는 모든 표시형식을 다 반영하게끔 수정하였다.

```python
cell = sheet.cell(row=row_index, column=col_index)
cell_format = cell.number_format

# print(cell_format)

#표시형식 전부 적용
if (cell_format!="General"):
    tmp1 = cell_format.split(')')
    tmp2 = tmp1[0].split('.')

    if (len(tmp2)>1):
        tmp3 = tmp2[1]
        cell_value = format(cell_value, "." + str(len(tmp3) -1) + "f")

[Spring] 마이페이지 결제내역 불러오기 #ajax

Mon, 14 Aug 2023 16:38:24 GMT

🫥 마이페이지에서 결제내역 불러오기

사용자가 결제를 하면 결제 정보가 데이터베이스mpay테이블에 저장된다.
사용자가 마이페이지-결제내역 페이지에 들어가면 세션을 활용하여 사용자의 회원번호로 데이터를 가져온다. (내역이 없을 경우 데이터가 없다는 내용 출력)
전체, 회원권, 일일권, PT 메뉴 선택에 따라 다른 결과를 보여준다.
결제내역이 많아질 경우 페이지가 넘어가도록 페이징 처리

마이페이지의 결제내역 섹션은 위와 같은 프로세스로 작동하도록 설계하였다.

💡 1. 페이지 세팅

결제내역 메뉴 선택

이런식으로..! selected에 따라 다른 페이지로 이동이 돼서 케이스별로 메뉴를 전부 다 적어줘야했다..ㅠ

결제내역


  
    
        
          

        

      
      

      
        결제일
        헬스장
        트레이너
        이용기간
        가격
        후기
      
      
      
      
            
            
            
            
            
          
        
      
      결제 내역이 없습니다.

결제내역은 테이블 형식으로 불러온다. 원래는 후기를 등록하거나 삭제하는 후기관련 코드도 있는데 너무 길어져서..생략!

controller로 전송(ajax)

여기에도 후기등록 및 삭제 관련 이벤트가 포함되어 있는데 생략했다.

결제내역(전체, 회원권, 일일권, PT) 선택값 전달mpayType
페이지 넘버 전달
사용자 회원 번호 전달

자바스크립트는 위와 같은 이벤트를 처리하고 ajax로 컨트롤러에 값을 넘겨준다.

그럼 이제 컨트롤러에서는 이 값들을 어떻게 처리할까? 컨트롤러 속으로~ 고고! 고고!

(추억의 개콘 고고 예술속으로...)

💡 2. 컨트롤러

결제내역 가져오기

//결제 내역 가져오기
@GetMapping("myPayList")
public ModelAndView mPay(SearchDto search, HttpSession session){
    log.info("myPayList()");

    mv = mServ.mPay(search,session);
    return mv;
}

마이페이지에서 결제내역 메뉴를 눌렀을 때 회원정보를 기준으로 전체 결제내역을 보여주는 메소드

메뉴 선택에 맞춰 결제내역 보여주기

//결제내역 조회(회원권, 일일권, PT)
@PostMapping("myPayList")
@ResponseBody
public Map selectedMpay(@RequestBody SearchDto search){
    log.info("selectedMpay()");

    Map rmap = mServ.selectedMpay(search);

    return rmap;
}

회원권, 일일권 등 메뉴를 선택했을 때 정보를 필터링하여 내보내는 메소드

💡 3. 서비스

전체 결제내역 가져오기

public ModelAndView mPay(SearchDto search, HttpSession session) {
    log.info("GetMypayList()");
    mv = new ModelAndView();

    int num = search.getPageNum();
    // limit 0, 5 - 1페이지

    //출력할 게시물 수가 설정되지 않으면 기본값(5)로 설정
    if (search.getListCnt() == 0) {
        search.setListCnt(listCnt);
    }
    if(num == 0) num = 1;
    search.setPageNum((num - 1) * search.getListCnt()); // 보여질 게시글 목록의 수

    //결제내역 가져오기
    List mPList = mDao.GetMypayList(search);

    //회원정보 가져오기
    MemberDto member = mDao.selectMemberSearch(search);

    mv.addObject("mPList", mPList);
    mv.addObject("member", member);

    //페이징 처리
    search.setPageNum(num);
    String pageHtml = null;
    String payKind = null;
    if(search.getMpayType() == null || search.getMpayType().equals("")){
        pageHtml = getPaging(search);
    }else {
        pageHtml = getMpayPaging(search);
        payKind = search.getMpayType();
    }

    mv.addObject("paging", pageHtml);
    mv.addObject("payType", payKind);

    //세션에 필요 정보 저장(pageNum)
    session.setAttribute("pageNum", num);


    mv.setViewName("myPayList");
    return mv;
}

전체 결제내역만 가져오는 건 비교적 간단하다. 페이징 처리하고, 결제내역 가져오고, 회원정보 가져오고... 필요한 것들 다 가져왔으면 ModelAndView에 담고.. 세션에 페이징 넘버 저장하고.. 뷰 설정하고 리턴!

그럼 이제 선택 옵션을 추가하면 어떻게 될까?

메뉴 선택에 맞춰 결제내역 보여주기(회원권, 일일권 ..)

//결제내역 조회(회원권, 일일권, PT)
public Map selectedMpay(SearchDto search) {
    log.info("selectedMpay()");

    List mPList = null;
    Map rmap = new HashMap<>();

    int num = search.getPageNum();

    //출력할 게시물 수가 설정되지 않으면 기본값(5)로 설정
    if (search.getListCnt() == 0) {
        search.setListCnt(listCnt);
    }
    if(num == 0) num = 1;
    search.setPageNum((num - 1) * search.getListCnt());

    try{
        mPList = mDao.selectedMpay(search);
        rmap.put("mPList", mPList);
        //페이징
        search.setPageNum(num);
        String pageHtml = getMpayPaging(search);
        rmap.put("paging", pageHtml);

        }

    } catch (Exception e){
        e.printStackTrace();
    }
    return rmap;

메뉴에 맞게 결제내역을 가져오는 건 살짝 더 복잡하다. 필요한 것들 가져오고 리턴시켜주는 건 동일한데, Map으로 받아서 그 안에 결제내역, 페이징 넘버, 리뷰를 담아 리턴한다.

비동기방식 ajax로 데이터를 넘기기 때문에 셀렉트박스에서 메뉴를 선택하면 화면전환없이 실시간으로 메뉴에 맞게 결과가 바뀐다.

결제한 적 없는 일일권을 선택했더니 정상적으로 결제 내역이 없다고 뜬다.

💡 4. DAO(데이터베이스)

//회원 결제내역 가져오기


//회원 정보 가져오기


//메뉴 선택에 따라 결제내역 가져오기

결제번호인 mpaynum은 운동권 종류에 따라 형식이 달라져서 운동권을 기준으로 mpayType을 설정해주었다.

페이징과 리뷰 메소드 처리한 것도 포함되어야 하는데 여기에서는 결제내역 위주의 메소드를 보여주고, 다음 포스팅에서는 페이징과 리뷰 관련 메소드를 다루겠습니다.😊~

📅 DATE

2023.08.14 작성

[Spring] 포트원(아임포트)결제api 사용하기 #ajax

Fri, 11 Aug 2023 08:17:54 GMT

✏️ 결제api 프로세스

사용자가 상품을 선택하고 결제하기 버튼을 누른다.
결제창 팝업창 작동
결제 처리
데이터베이스에 데이터 저장
사용자는 결제완료 페이지로 이동

✏️ 사전준비

1. 포트원(아임포트) 회원가입

결제api 활용 포스팅을 찾아보면 대부분 아임포트 결제api를 사용하는데 아임포트가 포트원으로 바뀌면서 사용방법도 조금 달라졌다. 가이드를 보면서 진행하면 훨 수월하니 링크 첨부!

◼︎ 포트원 결제연동 가이드 https://developers.portone.io/docs/ko/ready/readme

◼︎ 아임포트 결제연동 가이드 https://github.com/iamport/iamport-manual/tree/master

◼︎ 포트원 로그인 페이지 https://admin.portone.io/auth/signin 회원가입은 위 링크에서 메일주소로 처리할 수 있다.

2. 결제 api 발급받기

사이드바의 결제 연동 메뉴에서 식별코드, REST API KEY를 확인할 수 있고 결제대행사를 추가할 수 있다.

카카오페이랑 KG이니시스를 테스트모드로 추가했다.

✏️ 스프링에서 데이터 처리하기

💻 html 작성 (ajax로 넘겨주기)

html 상단에 iamport 스크립트 추가

kg 이니시스 버튼과 카카오페이 버튼 각각 하나씩 생성 후 클릭 이벤트를 걸어주었다.

결제 성공 여부에 따라 사용자에게 결제 성공/실패로 메세지를 띄우고, 결제 정보는 ajax를 활용하여 컨트롤러에 전달한다. 너무 길어져서 카카오페이는 결제 넘기는 건 생략했는데 똑같은 방식으로 데이터를 넘기면 된다.

헬스장 상품 클릭(회원권 or 일일권) ► 운동 시작날짜 선택 ► 결제하기 or 카카오페이 선택 ► 결제

kg 이니시스 결제창

카카오페이 결제창

💻 controller

public class MPayController {
    @Autowired
    private MPayService mPServ;

    private ModelAndView mv;

    @PostMapping("insertMPay")
    @ResponseBody
    public String insertMPay(@RequestBody MPayDto mpay, HttpSession session, RedirectAttributes rttr){
        log.info("insertMPay()");

        String view = mPServ.insertMPay(mpay, session, rttr);
        return view;
    }

        @GetMapping("payment")
    public ModelAndView paymentContents(String mpaynum, HttpSession session){
        log.info("paymentContents()");

        mv = mPServ.paymentContents(mpaynum, session);
        return mv;
    }
}

결제정보를 데이터베이스에 저장하기 위해 서비스로 mpy 정보와 session, rttr을 넘긴다. 결제가 완료되면 결제완료 페이지로 넘어가기 때문에 payment 페이지를 생성하여 결제완료 데이터를 갖고 넘어가도록 처리하였다.

💻 service

//결제정보 데이터베이스로 넘기기
public String insertMPay(MPayDto mpay, HttpSession session, RedirectAttributes rttr) {
    log.info("insertMPay()");
    String view = null;
    String msg = null;

    try {
        mPDao.insertMPay(mpay);

        view = "payment?mpaynum=" + mpay.getMpaynum();
        log.info(view);
    } catch (Exception e){
        e.printStackTrace();
    }
    return view;

}

Dao로 mpay 데이터를 넘겨주고, 결제완료 페이지에 결제 정보가 노출되도록 view를 설정한 뒤 return.

//결제완료 페이지 컨트롤
public ModelAndView paymentContents(String mpaynum, HttpSession session) {
  log.info("paymentContents()");
  mv = new ModelAndView();

  //주문정보 가져오기
  MPayDto mpay = mPDao.selectPayment(mpaynum);
  mv.addObject("mpay", mpay);
  int gymnum = mpay.getGymnum();
  int tgoodsint = mpay.getTgoodsint();

  //헬스장 정보 가져오기
  GymDto gym = GGDao.selectGym(gymnum);
  mv.addObject("gym", gym);
  //view 설정
  mv.setViewName("payment");

  return mv;
}

결제완료 페이지에서는 주문번호에 맞는 결제정보와 헬스장 정보를 가져오고 payment 페이지에 나타낸다.

💻 dao

@Mapper
public interface MPayDao {
    //헬스장 결제 정보를 저장하는 메소드
    void insertMPay(MPayDto mpay);

    //사용자의 결제 정보를 가져오는 메소드
    MPayDto selectPayment(String mpaynum);
}

💻 dao.xml

//데이터베이스에 결제정보 넣기

    insert into mpay
    values (#{mpaynum},#{membernum}, #{mpaymethod}, #{mpayproduct}, #{mpayprice}, #{mpaydate},
            #{mpaygym}, #{mpayperiod}, #{mpaytime},#{trainername}, #{ggoodsnum}, null, #{gymnum}, 0)


//데이터베이스에서 해당 결제정보 가져오기

✏️ 결제 완료

결제가 정상적으로 처리되면 메세지와 함께 결제완료 페이지로 이동한다.

결제완료 페이지에는 헬스장의 기본 정보와 위치, 결제 정보 등이 노출된다.

마이페이지 결제내역에서도 결제내역을 확인할 수 있다.

📅 DATE

2023.08.11 작성

[Spring] 카카오 로그인 api 사용하기(REST API)

Wed, 02 Aug 2023 14:34:43 GMT

📌 사전작업

카카오 로그인 api REST API 키 발급받기

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api
Redirect URI 등록 (내 어플리케이션 > 앱 설정 > 플랫폼)

동의 항목 체크 (내 어플리케이션 > 제품 설정 > 카카오 로그인 > 동의항목)

pom.xml에 라이브러리 추가



 com.google.code.gson
 gson
 2.8.6


 com.googlecode.json-simple
 json-simple
 1.1.1

📌 카카오 api 로그인 기능 구현

1. 카카오 로그인 서비스 과정 파악하기

☞ 카카오 로그인 서비스 과정

카카오 로그인 과정은 위 링크를 타고 들어가서 찬찬히 살펴보면 이해가 좀 되는 것 같기도 하고 안 되는 것 같기도 하다.^^

2. 로그인 페이지에 카카오 로그인 버튼 만들기

👀 화면

💻 memberLoginForm.html




...

    카카오톡으로 간편로그인

...

memberLoginForm페이지에서 카카오 로그인 기능을 호출하므로 ajax url에 /memberLoginForm/getKakaoAuthUrl로 적는다. (getKakaoAuthUrl이 부분은 공통)

3. Controller에서 메소드 만들기

💻 LoginController.java

//카카오 로그인 기능이 처리되는 페이지
@RequestMapping(value = "/memberLoginForm/getKakaoAuthUrl")
public @ResponseBody String getKakaoAuthUrl(HttpServletRequest request) throws Exception {

    String reqUrl =
            "https://kauth.kakao.com/oauth/authorize?client_id=발급받은 REST API 키&redirect_uri=redirect_uri설정한 주소&response_type=code";

    return reqUrl;
}

reqUrl에 발급받은 api키와 대표 redirct_uri를 넣는다.

@RequestMapping(value = "/auth_kakao")
public String oauthKakao(
        @RequestParam(value = "code",required = false) String code
        , HttpSession session, RedirectAttributes rttr) throws Exception {

    log.info("#######" + code);
    String access_Token = loginServ.getAccessToken(code);
    String view = loginServ.getuserinfo(access_Token, session, rttr);


    return view;
}

access_Token을 보내 인가 코드를 받고 getuserinfo 메소드로 사용자 정보를 가져와서 리턴한다.

4. Service에서 데이터 처리하기

💻 LoginService.java

public String getAccessToken(String authorize_code) {
    String access_Token = "";
    String refresh_Token = "";
    String reqURL = "https://kauth.kakao.com/oauth/token";

    try {
        URL url = new URL(reqURL);

        HttpURLConnection conn = (HttpURLConnection) url.openConnection();

        //    POST 요청을 위해 기본값이 false인 setDoOutput을 true로 변경을 해주세요

        conn.setRequestMethod("POST");
        conn.setDoOutput(true);

        //    POST 요청에 필요로 요구하는 파라미터 스트림을 통해 전송
        // BufferedWriter 간단하게 파일을 끊어서 보내기로 토큰값을 받아오기위해 전송

        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(conn.getOutputStream()));
        StringBuilder sb = new StringBuilder();
        sb.append("grant_type=authorization_code");
        sb.append("&client_id=");  //발급받은 key
        sb.append("&redirect_uri=");     // 본인이 설정해 놓은 redirect_uri 주소
        sb.append("&code=" + authorize_code);
        bw.write(sb.toString());
        bw.flush();

        //    결과 코드가 200이라면 성공
        // 여기서 안되는경우가 많이 있어서 필수 확인 !! **
        int responseCode = conn.getResponseCode();
        System.out.println("responseCode : " + responseCode + "확인");

        //    요청을 통해 얻은 JSON타입의 Response 메세지 읽어오기
        BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));
        String line = "";
        String result = "";

        while ((line = br.readLine()) != null) {
            result += line;
        }
        System.out.println("response body : " + result + "결과");

        //    Gson 라이브러리에 포함된 클래스로 JSON파싱 객체 생성
        JsonParser parser = new JsonParser();
        JsonElement element = parser.parse(result);

        access_Token = element.getAsJsonObject().get("access_token").getAsString();
        refresh_Token = element.getAsJsonObject().get("refresh_token").getAsString();

        System.out.println("access_token : " + access_Token);
        System.out.println("refresh_token : " + refresh_Token);

        br.close();
        bw.close();
    } catch (IOException e) {

        e.printStackTrace();
    }
    return access_Token;
}

access_Token을 컨트롤러로 리턴하고 이 access_Token으로 사용자 정보를 처리한다.

 public String getuserinfo(String access_Token, HttpSession session, RedirectAttributes rttr) {
    HashMap userInfo = new HashMap<>();
    log.info("getuserinfo()");

    String requestURL = "https://kapi.kakao.com/v2/user/me";
    String view = null;
    String msg = null;

    try {
        URL url = new URL(requestURL); //1.url 객체만들기
        HttpURLConnection conn = (HttpURLConnection) url.openConnection();
        //2.url 에서 url connection 만들기
        conn.setRequestMethod("GET"); // 3.URL 연결구성
        conn.setRequestProperty("Authorization", "Bearer " + access_Token);

        //키 값, 속성 적용
        int responseCode = conn.getResponseCode(); //서버에서 보낸 http 상태코드 반환
        System.out.println("responseCode :" + responseCode + "여긴가");
        BufferedReader buffer = new BufferedReader(new InputStreamReader(conn.getInputStream()));
        // 버퍼를 사용하여 읽은 것
        String line = "";
        String result = "";
        while ((line = buffer.readLine()) != null) {
            result += line;
        }
        //readLine()) ==> 입력 String 값으로 리턴값 고정

        System.out.println("response body :" + result);

        // 읽었으니깐 데이터꺼내오기
        JsonParser parser = new JsonParser();
        JsonElement element = parser.parse(result); //Json element 문자열변경
        JsonObject properties = element.getAsJsonObject().get("properties").getAsJsonObject();
        JsonObject kakao_account = element.getAsJsonObject().get("kakao_account").getAsJsonObject();

        String mnickname = properties.getAsJsonObject().get("nickname").getAsString();
        String mmail = kakao_account.getAsJsonObject().get("email").getAsString();

        //userInfo에 사용자 정보 저장
        userInfo.put("mid", mmail);
        userInfo.put("mnickname", mnickname);
        userInfo.put("mmail", mmail);

        log.info(String.valueOf(userInfo));

    } catch (Exception e) {
        e.printStackTrace();
    }

    MemberDto member = memberDao.findkakao(userInfo);
    // 저장되어있는지 확인
    log.info("S :" + member);

    if (member == null) {
        //member null 이면 정보가 저장 안되어있는거라서 정보를 저장.
        memberDao.kakaoinsert(userInfo);
        //저장한 member 정보 다시 가져오기 HashMap이라 형변환 시켜줌
        member = loginnDao.selectMember((String)userInfo.get("mid"));
        session.setAttribute("member", member);

        //로그인 처리 후 메인 페이지로 이동
        view = "redirect:/";
        msg = "로그인 성공";
    } else {
        session.setAttribute("member", member);
        view = "redirect:/";
        msg = "로그인 성공";

    }
    rttr.addFlashAttribute("msg", msg);
    return view;
}
}

userInfo를 HashMap으로 초기화했는데, member 정보를 다시 반환시켜주기 위해 select로 검색할 때는 (String)으로 변환시켜서 데이터를 가져온다.

userInfo데이터로 조회해서 이미 데이터베이스에 등록된 회원일 경우 회원정보 저장없이 세션에 담아 로그인 처리한다.
회원 테이블에 없는 userInfo일 경우 insert 처리

5. 데이터베이스에 저장하기

💻 MemberDao.java

@Mapper
public interface MemberDao {

    //이미 가입된 회원인지 확인하는 메소드
    MemberDto findkakao(HashMap userInfo);

    //카카오 로그인 회원정보 저장
    void kakaoinsert(HashMap userInfo);

    }

💻 MemberDao.xml



    

    
    insert into member
    values (null, #{mid}, null, #{mmail}, null, null, null, null, #{mnickname},
            null, null, null, null, null, null, null, null, null, null)

6. 테스트

카카오 로그인하기 버튼 클릭 > 동의하고 계속하기

로그인 성공 후 홈으로 이동

로그인 성공 메세지를 alert으로 띄우고 메인 페이지로 이동

헤더 변경

사용자 정보가 세션에 저장됨에 따라 헤더 정보도 바뀐다. 로그인 버튼은 로그아웃 버튼으로 바뀌고, 사용자 아이디와 마이페이지 버튼이 노출된다.

데이터베이스 확인

카카오 로그인 버튼으로 로그인한 데이터가 데이터베이스에 정상적으로 저장되었다.

📅 DATE

2023.08.02 작성

[스프링 타임리프] 영화 정보 기록 페이지 만들기 3 (영화 등록)

Mon, 26 Jun 2023 09:08:26 GMT

영화를 등록해보자!

영화 등록 페이지를 생성하고 쓰기, 초기화, 뒤로가기 버튼 기능을 구현한다.

🎈 영화 정보 등록하기

컨트롤러에서는 영화 정보 등록 폼 이동, 등록 처리 맵핑처리를 한다. 영화 정보에 들어갈 컨텐츠 : 영화 포스터, 제목, 감독, 국가, 장르, 주연배우, 개봉일, 영화 줄거리 버튼 : W - 쓰기 , R - 초기화 , B - 뒤로가기

💻 MovieController 소스

@GetMapping("writeForm")
public String writeForm(){
    log.info("writeForm()");
    return "writeForm";
}

@PostMapping("writeProc")
public String writeProc(@RequestPart List files, Movie movie, HttpSession session, RedirectAttributes rttr){
    log.info("writeProc()");
    String view = mServ.insertMovie(files, movie, session, rttr);
    return view;
}

** ⭐⭐ 헷갈릴 때 읽어보기 : RequestBody vs RequestPart vs RequestParam vs ModelAttribute**

💻 writeForm.html 소스



  영화 등록
  
    포스터

writeForm.html에서 입력받은 input값은 Movie entity에서 설정한 컬럼명과 동일하게 입력한다. 예) mname, mdirector, mnation ...

💻 MovieService.java 소스

public String insertMovie(List files, Movie movie, HttpSession session, RedirectAttributes rttr) {
    log.info("insertMovie()");
    String view = null;
    String msg = null;
    //업로드하는 파일의 이름을 먼저 꺼낸다.
    String upFile = files.get(0).getOriginalFilename();

    try{
        //파일 업로드 처리
        if(!upFile.equals("")) {
            fileUpload(files, session, movie);
        }
        //DB에 영화정보 저장
        mRepo.save(movie);
        //insert, update 모두 save 메소드로 처리
        view = "redirect:/";
        msg = "등록 성공";
    } catch (Exception e){
        e.printStackTrace();
        view = "redirect:writeForm";
        msg = "등록 실패";
    }
    rttr.addFlashAttribute("msg", msg);
    return view;
}

아래는 영화 등록할 때 사용되는 파일 업로드 처리 메소드 (insertMovie메소드에서 사용)

💻 MovieService.java 소스 (fileUpload)

private void fileUpload(List files, HttpSession session, Movie movie) throws IOException {
    log.info("fileUpload()");
    String sysname = null;
    String oriname = null;

    String realPath = session.getServletContext().getRealPath("/");
    realPath += "upload/";
    File folder = new File(realPath);
    if(folder.isDirectory() == false){
        folder.mkdir();
    }

    MultipartFile mf = files.get(0);
    oriname = mf.getOriginalFilename();

    sysname = System.currentTimeMillis()
            + oriname.substring(oriname.lastIndexOf("."));

    File file = new File(realPath + sysname);
    mf.transferTo(file);

    movie.setMoriname(oriname);
    movie.setMsysname(sysname);
}

🎈 등록한 영화 정보 리스트로 출력하기

💻 MovieController 소스

@GetMapping("/")
public ModelAndView home(Integer pageNum, HttpSession session){
    log.info("home()");

    //서비스 만들면 수정할 것
    //mv = new ModelAndView();
    mv = mServ.getMovieList(pageNum, session);
    mv.setViewName("home");

    return mv;
}

영화 정보 목록은 메인 페이지에서 보여주므로 메인페이지 /에서 getMovieList 서비스 메소드로 처리한다.

💻 MovieService 소스

public ModelAndView getMovieList(Integer pageNum, HttpSession session){
    log.info("getMovieList()");

    if(pageNum == null){
        pageNum = 1;
    }
    int listCnt = 5; //한페이지 당 5개씩 목록 출력

    //페이징 조건 생성(Pageable)
    Pageable pb = PageRequest.of((pageNum -1), listCnt, Sort.Direction.DESC, "mcode");
    //of(시작번호, 목록개수, 정렬방식, 키필드명)

    Page result = mRepo.findByMcodeGreaterThan(0L, pb); //Long 타입이라 0L입력

    //페이지 형태의 결과를 목록형태로 변환
    List mList = result.getContent();

    //전체 페이지
    int totalPage = result.getTotalPages();

    //페이징용 html 작성
    String paging = getPaging(pageNum, totalPage);

    //세션에 페이지 번호 저장
    session.setAttribute("pageNum", pageNum);

    mv = new ModelAndView();
    mv.addObject("mList", mList);

    //페이징용 html 추가
    mv.addObject("paging", paging);

    //뷰네임 지정
    mv.setViewName("home");

    return mv;
}

영화 정보 리스트 불러온 모습

📅 DATE

2023.06.26 작성

파이썬 모듈을 알아보자!

Wed, 14 Jun 2023 02:44:15 GMT

모듈이란 함수나 변수 또는 클래스를 모아 놓은 파이썬 파일이다. 모듈은 다른 파이썬 프로그램에서 불러와 사용할 수 있게끔 만든 파이썬 파일이라고도 할 수 있다.

모듈은 다른 사람들이 이미 만들어 놓은 것을 사용할 수도 있고 우리가 직접 만들어서 사용할 수도 있다.

모듈 만들기

# mod1.py
def add(a, b):
    return a + b

def sub(a, b): 
    return a-b

add와 sub 함수가 들어있는 파이썬 파일을 mod1.py로 저장하고 디렉토리에 저장한다. (기억하기 쉬운 경로에 저장하기)

파이썬 확장자 .py로 만든 파이썬 파일은 모두 모듈이다

모듈 불러오기

mod1.py를 저장한 디렉토리로 이동 후 인터프리터에서 mod1.py을 꺼내온다.

import mod1

print(mod1.add(3,4))

print(mod1.sub(4,2))

import 명령어로 mod1 파일을 불러오고 함수를 사용하기 위해 mod1.add 명령어를 사용하였다.

import는 현재 디렉터리에 있는 파일이나 파이썬 라이브러리가 저장된 디렉터리에 있는 모듈만 불러올 수 있다. 파이썬 라이브러리는 파이썬을 설치할 때 자동으로 설치되는 파이썬 모듈을 말한다.

import 사용방법

import 모듈이름

# 함수 1개 불러오기
from 모듈이름 import 모듈함수

# 함수 여러 개 불러오기
from 모듈이름 import 모듈함수1, 모듈함수2, ...

# 함수 전부 불러오기
from mod1 import *

from ~ import를 사용하면 모듈 이름을 붙이지 않고 바로 해당 모듈의 함수를 사용할 수 있다.

from mod1 import add
add(3,4)
# 결과 7

클래스나 변수 등을 포함한 모듈

# mod2.py
PI = 3.141592

class Math:
    def solv(self, r):
        return PI * (r ** 2)

def add(a, b):
    return a + b

mod2.py파일은 원의 넓이를 계산하는 Math 클래스와 두 값을 더하는 add 함수, 원주율 값에 해당되는 PI 변수처럼 클래스, 함수, 변수 등을 모두 포함하고 있다.

mod2.py 사용하기

import mod2
print(mod2.PI)
# 결과 : 3.141592

mod2.PI를 입력해서 mod2.py파일에 있는 PI 변수 값을 사용할 수 있다.

a = mod2.Math()
print(a.solv(2))
# 12.566368

모듈 안에 있는 클래스를 사용하려면 . 도트 연산자로 클래스 이름 앞에 모듈 이름을 먼저 입력하면 된다.

다른 디렉터리에서 모듈 불러오기

1. sys.path.append 사용하기

# sys 모듈을 불러온다.
import sys

# sys.path로 디렉터리를 확인한다.

# 원하는 파일이 들어있는 디렉터리를 추가한다.(append)
sys.path.appen("C:/doit/mymod")

# sys.path로 추가되었는지 확인
sys.path

sys 모듈을 사용하면 다른 디렉터리에 있는 모듈도 불러와서 사용할 수 있다.

2. PYTHONPATH 환경 변수 사용하기

C:\doit>set PYTHONPATH=C:\doit\mymod
C:\doit>python
>>> import mod2
>>> print(mod2.add(3,4))
7

set 명령어를 사용해 PYTHONPATH 환경 변수에 mod2.py 파일이 있는 C:\doit\mymod 디렉터리를 설정한다.

그러면 디렉터리 이동이나 별도의 모듈 추가 작업 없이 mod2 모듈을 불러와서 사용할 수 있다.

맥이나 유닉스 환경에서는 set 대신 export 명령을 사용

참고 https://wikidocs.net/29

📅 DATE

2023.06.14 작성

파이썬 클래스(class)를 알아보자!

Tue, 13 Jun 2023 06:30:38 GMT

클래스는 왜 필요한가?

파이썬은 객체지향 언어이므로 클래스를 잘만 활용하면 여기저기 조립하듯이 편리하게 활용할 수 있다.

✔ 입력 값을 이전에 계산한 결과에 더한 후 돌려주는 `add` 함수

result = 0

def add(num):
    global result
    result += num
    return result

print(add(3)) #출력 : 3
print(add(4)) #출력 : 7

이러한 add함수를 이용해서 각각 여러 개의 값을 출력하고 싶을 때 클래스를 활용할 수 있다.

✔ 클래스 활용

class Calculator:
    def __init__(self):
        self.result = 0

    def add(self, num):
        self.result += num
        return self.result

cal1 = Calculator() # 객체
cal2 = Calculator() # 객체

print(cal1.add(3))
print(cal1.add(4))
print(cal2.add(3))
print(cal2.add(7))

✔ 실행 결과

cal1과 cal2가 각각 Calculator의 클래스를 참조하여 add함수를 독립적으로 사용하고 있다.

클래스와 객체

클래스와 객체의 관계를 나타내주는 그림

쿠키를 만드는 과자 틀과 쿠키들

쿠키 틀 → 클래스(class)
쿠키 틀로 만든 쿠키 → 객체(object)

클래스는 무엇인가를 계속해서 만들어낼 수 있은 설계 도면이고, 객체는 클래스로 만든 결과물로 볼 수 있다.

✔ 클래스의 중요한 특징

객체마다 고유한 성격을 가지므로 객체를 변형하더라도 다른 객체에는 영향을 주지 않는다.
메소드(Method) : 클래스 안에 구현된 함수

파이썬 메서드의 첫 번째 매개변수 이름은 관례적으로 self를 사용한다. (객체를 호출할 때 호출한 객체 자신이 전달되기 때문에)

💥 객체와 인스턴스의 차이

인스턴스 : 클래스로 만든 객체

인스턴스라는 말은 특정 객체가 어떤 클래스의 객체인지를 관계 위주로 설명할 때 사용한다. 보통 a 자체만을 설명할 때는 "a는 객체이다." a와 클래스와의 관계를 설명할 때는 "a는 Cookie의 인스턴스이다."라고 표현한다.

생성자(Constructor)

생성자(Constructor)란 객체가 생성될 때 자동으로 호출되는 메서드를 의미한다.

파이썬 메소드 이름으로 __init__를 사용하면 이 메서드는 생성자가 된다.(초기화 메소드)

def __init__(self, first, second):
    self.first = first
    self.second = second

이 __init__ 메소드는 이름을 __init__으로 했기 때문에 생성자로 인식되어 객체가 생성되는 시점에 자동으로 호출이 된다.

계산기 클래스에서의 활용(FourCal)

class FourCal:
    def __init__(self, first, second):
        self.first = first
        self.second = second
    def setdata(self, first, second):
        self.first = first
        self.second = second
    def add(self):
        result = self.first + self.second
        return result
    def mul(self):
        result = self.first * self.second
        return result
    def sub(self):
        result = self.first - self.second
        return result
    def div(self):
        result = self.first / self.second
        return result

__init__ 메소드로 생성자를 구현함으로써 초깃값을 사용할 수 있게 된다.

초깃값 사용 예

# 초깃값 설정
a = FourCal(4, 2)
a.first # 4
a.second # 2

# 더하기, 빼기
a.add() # 6
a.sub() # 2

클래스의 상속

~~드라마 상속자들이 생각나는 클래스의 상속...~~

상속(Inheritance)이란 "물려받다"라는 뜻으로, "재산을 상속받다"라고 할 때의 상속과 같은 의미로 클래스에도 이 개념을 적용할 수 있다.

클래스를 상속하기 위해서는 다음처럼 클래스 이름 뒤 괄호 안에 상속할 클래스 이름을 넣어주면 된다.

class 클래스 이름(상속할 클래스 이름)

✔ 클래스 상속 예시

class MoreFourCal(FourCal):
    pass

pass : 함수, 클래스에 내용을 작성하지 않는 빈 함수, 빈 클래스를 만들 때 사용하는 키워드

MoreFourCal 클래스는 FourCal 클래스를 상속했으므로 FourCal 클래스의 모든 기능을 사용할 수 있다.

✔ 상속받은 클래스 사용하기

a = MoreFourCal(4, 2)

a.add()
a.mul()
a.sub()
a.div()

상속을 사용하는 이유

보통 상속은 기존 클래스를 변경하지 않고 기능을 추가하거나 기존 기능을 변경하려고 할 때 사용한다.

기존 클래스가 라이브러리 형태로 제공되거나 수정이 허용되지 않는 상황이라면 상속을 사용해야 한다.

메소드 오버라이딩

부모 클래스(상속한 클래스)에 있는 메서드를 동일한 이름으로 다시 만드는 것 = 덮어쓰기

메소드 오버라이딩을 하면 부모 클래스의 메소드 대신 오버라이딩한 메소드가 호출된다.

특정 메소드만 가져와서 코드를 다르게 요리해서 활용하고 싶을 때 유용할 듯!

✔ 메소드 오버라이딩 예시

class SafeFourCal(FourCal):
 def div(self):
     if self.second == 0:  # 나누는 값이 0인 경우 0을 리턴하도록 수정
         return 0
     else:
         return self.first / self.second

클래스 변수

객체 변수는 다른 객체들의 영향을 받지 않고 독립적으로 그 값을 유지한다.

반면 클래스 변수는 클래스로 만든 모든 객체에 값이 공유된다는 특징이 있다.

사용 예 : 클래스이름.클래스변수

✔ 클래스 변수

# 클래스 변수선언
class Family:
    lastname = "박"

#클래스 변수 사용
Family.lastname
# 실행결과 : 박

참고 https://wikidocs.net/28

📅 DATE

2023.06.13 작성

파이썬 자료형에 대해서 알아보자!

Thu, 08 Jun 2023 07:52:20 GMT

자료형?

숫자, 문자열 등 자료 형태로 사용하는 모든 것을 뜻하며 프로그래밍의 가장 기초단계에서 배우는 단위라고 볼 수 있다. 그만큼 만만하면서도 중요하다는 뜻!

파이썬(Python) 1991년에 발표된 인터프리터 방식의 프로그래밍 언어로 창시자는 귀도 반 로섬(Guido van Rossum)씨다.

파이썬의 기본 문법

1. 세미콜론(;) - 문장의 끝을 나타내는 기호로 프로그래밍에서 자주 쓰이는 단골 기호지만, 울 파이썬은 이런 거 필요없다. 쓰고 싶음 써도 된다.

car_company_1 = 'Ferrari'
car_detail_1 = [
    {'color' : 'White'}, 
    {'horsepower': 400},
    {'price': 8000}
]

2. 주석 - # (한줄, 블록 주석 구분 없음)

# 파이썬 주석 style~~~~

### 이렇게도 쓰고

# 요렇게도
# 씁니다.

*3. 들여쓰기(파이썬의 핵심) * 제어문 블록이나 함수의 문장을 작성할 때 반드시 들여쓰기를 해야 한다.

** 자바** (들여쓰기를 안해도 상관없음.)

for(int i = 0; i < 10; i++){
println(i);
println("hello");
}

** 파이썬**

for i in range(10):
    print(i)
    print("hello")

파이썬에서 들여쓰기 방법은 공백(스페이스) 2칸, 4칸, 탭(tab - 8칸) 등 여러가지가 있지만 파이썬 코딩 스타일 가이드(PEP 8)에서는 4칸을 기본으로 규정하고 있다.

숫자형

주로 사용하는 정수(int)와 실수(float)

# 정수형
a = 123
a = -178

# 실수형
a = 1.2
a = -3.45

문자열

여러 줄인 문자열을 변수에 대입하고 싶을 때 사용하는 방법

Life is too short
You need python

#이스케이프 코드 삽입하기(\n)
multiline = "Life is too short\nYou need python"

# 연속된 작은따옴표 3개(''') 또는 큰따옴표 3개(""") 사용하기
multiline='''
    Life is too short
    You need python
    '''

자주 사용하는 이스케이프 코드

\n : 문자열 안에서 줄을 바꿀 때 사용 \t : 문자열 사이에 탭 간격을 줄 때 사용 \ : 문자 \를 그대로 표현할 때 사용

참고 https://wikidocs.net/14

📅 DATE

2023.06.08 작성

[스프링 타임리프] 영화 정보 기록 페이지 만들기 2 (페이징)

Wed, 07 Jun 2023 03:34:23 GMT

페이징 처리를 해보자!

데이터가 많다면 일정한 간격으로 쪼개서 페이징 처리를 해주는 것이 사용자에게 편리하다. 그동안 웹서핑을 하면서 편하게 버튼 눌러가면서 읽기만 했지.....페이징 처리가 이렇게 복잡미묘할 줄이야...

✅ 페이징 처리를 위한 준비

💻 Entity 소스

엔티티 : 데이터베이스 테이블과 매핑되는 자바 클래스

@Entity
@Table(name="movietbl")
@Data
public class Movie {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long mcode;

    @Column(nullable = false, length = 100 )
    private String mname;

    @Column(nullable = false, length = 50)
    private String mdirector;

    @Column(nullable = false, length = 50)
    private String mnation;

    @Column(nullable = false, length = 100)
    private String mgenre;

    @Column(nullable = false, length = 100)
    private String mactor;

    @Column(nullable = false, length = 10)
    private String mopen;

    @Column(length = 2000)
    private String msynopsis;

    @Column(length = 50)
    private String moriname;

    @Column(length = 50)
    private String msysname;
}

영화 정보를 기록하는 엔티티 클래스를 만든다. 엔티티의 속성값을 html 페이지에서 사용한다.

💻 Repository 소스

public interface MovieRepository extends JpaRepository {
    //DB CRUD(insert, update, delete, select 용 인터페이스)
    //기본으로 전체 내용 삽입, 전체 내용 수정, 행 삭제
    //전체 내용 검색 및 키 검색용 메소드를 제공.

    //페이지 처리
    Page findByMcodeGreaterThan(Long mcode, Pageable pb);
}

엔티티만으로는 데이터베이스에 데이터를 저장하거나 조회 할 수 없으므로 데이터 처리를 위해서는 실제 데이터베이스와 연동하는 JPA 리포지터리를 생성한다.

✅ 페이징 서비스 처리

💻 PagingUtil 소스

@AllArgsConstructor
public class PagingUtil {
    private int totalPage; //전체 페이지 개수
    private int pageNum; //현재 보이는 페이지 번호
    private int pageCnt; //페이지당 보여질 번호 개수
    private String urlStr; //링크 url

    public String makePaging(){
        String pageHtml = null;
        StringBuffer sb = new StringBuffer();

        //현재 그룹
        int curGroup = (pageNum % pageCnt) > 0?
                pageNum/pageCnt +1 :
                pageNum/pageCnt;

        //그룹의 시작번호
        int start = (curGroup * pageCnt) - (pageCnt -1);
        //그룹의 끝번호
        int end = (curGroup * pageCnt) >= totalPage ?
                totalPage : curGroup * pageCnt;

        //page html 작성
        if(start != 1){
            sb.append("◀");
        }

        for(int i = start; i <= end; i++){
            if(pageNum == i){
                sb.append("" + i + "");
            }
            else{
                sb.append("" + i +" ");
            }
        }

        if(end != totalPage){
            sb.append("▶");
        }//영화 등록
            
            
                
                    등록된 영화가 없습니다.

영화등록 버튼을 누르면 writeForm 페이지로 이동하게끔 이벤트를 걸어준다.
등록된 영화 정보가 없을 때는 등록된 영화가 없다는 문구가 출력된다.

💻 javascript 소스

alert 로 메세지를 띄워주는 스크립트를 작성한다.

🌱 메인페이지 만들기(알맹이)

💻 Controller 소스

@GetMapping("/")
public ModelAndView home(Integer pageNum, HttpSession session){
    log.info("home()");

    //서비스 만들면 수정할 것
    //mv = new ModelAndView();
    mv = mServ.getMovieList(pageNum, session);
    mv.setViewName("home");

    return mv;
}

페이징 처리를 위해 페이지번호와 세션을 가져와서 서비스에 넘긴다.

💻 Service 소스

 @Autowired
//리포지토리 가져오기
private MovieRepository mRepo;

public ModelAndView getMovieList(Integer pageNum, HttpSession session){
    log.info("getMovieList()");

    if(pageNum == null){
        pageNum = 1;
    }
    int listCnt = 5; //한페이지 당 5개씩 목록 출력

    //페이징 조건 생성(Pageable)
    Pageable pb = PageRequest.of((pageNum -1), listCnt, Sort.Direction.DESC, "mcode");
    //of(시작번호, 목록개수, 정렬방식, 키필드명)

    Page result = mRepo.findByMcodeGreaterThan(0L, pb); //Long 타입이라 0L입력

    //페이지 형태의 결과를 목록형태로 변환
    List mList = result.getContent();

    //전체 페이지
    int totalPage = result.getTotalPages();

    //페이징용 html 작성
    String paging = getPaging(pageNum, totalPage);

    //세션에 페이지 번호 저장
    session.setAttribute("pageNum", pageNum);

    mv = new ModelAndView();
    mv.addObject("mList", mList);

    //페이징용 html 추가
    mv.addObject("paging", paging);

    //뷰네임 지정
    mv.setViewName("home");

    return mv;
}

GreaterThan : Repository 메소드 중 범위에 따라 데이터를 가져오도록 처리하는 메소드 작명법

이 영화 정보가 저장된 리스트를 가져오는 getMovieList 서비스는 다음 항목을 처리한다.

페이징 처리 (데이터 개수가 많으면 5개씩 쪼개서 페이지를 분할 처리)
페이징에 필요한 html 요소 메소드를 가져온다.
- 페이징 유틸
저장된 영화 정보 데이터를 mList로 반환한다.

이러한 것들을 처리하기 위해서는 ...또 필요한 것이 있다. 테이블을 생성하는 엔티티와 DB CRUD(insert, update, delete, select 용 인터페이스)에 필요한 리포지토리...!

그것은 다음 포스팅ㅇㅔ....

📅 DATE

2023.06.05 작성

JAVA 맵에 대해서 알아보자! (개념, 데이터 사용)

Sat, 03 Jun 2023 05:06:13 GMT

Map이란?

Map은 리스트나 배열처럼 순차적으로 해당 요소 값을 구하지 않고 key를 통해 value를 얻는다.

Map의 특징

키는 중복될 수 없고 값은 중복을 허용한다.
특정 키를 사용하여 값을 검색하거나, 새로운 키-값 쌍을 추가하고, 기존의 값을 업데이트하거나 제거할 수 있다.
데이터의 검색 속도가 중요한 경우나, 고유한 키를 사용하여 데이터를 저장하고자 할 때 유용하다.
{이름:홍길동}, {고양이:cat} 과 같이 대응 관계를 쉽게 표현할 수 있는 자료형

Map에서 데이터 추가하기

put 메소드를 이용하여 맵에 원하는 값을 매칭시켜서 추가할 수 있다.

HashMap

HashMap은 자바에서 제공하는 맵(Map) 인터페이스를 구현한 클래스 중 하나로 해시 테이블(hash table)을 기반으로한 맵이다. 키(key)와 값(value)의 쌍을 저장하고 검색하는 데 사용된다.

import java.util.HashMap;

public class MapExample {
    public static void main(String[] args) {
        Map dictionary = new HashMap<>();
        dictionary.put("chicken", "닭");
        dictionary.put("hippo", "하마");
        }
}

chicken:닭 , hippo:하마 값을 dictionary에 넣어주었다.

Map에서 데이터 가져오기

get : key에 해당하는 value값을 얻기 위해서 사용하는 메소드

System.out.println(dictionary.get("chicken"));

해석 : dictionary에서 chicken에 해당하는 value 가져오렴

닭

Map에서 데이터 제거하기

데이터를 제거할 때도 put 메소드를 사용할 수 있다.

dictionary.put("chicken", null);

해석 : dictionary에 있는 chicken 키에 해당하는 값 null로 매칭하렴

이렇게 하면 chicken에 해당하는 값이 null값으로 변경되지만 데이터는 아직 남아있는 상태라서 size 명령어로 사이즈 크기를 확인하면 데이터가 그대로 남아있는 것으로 인식된다.

그래서 깔끔하게 지워버릴 때는 remove를 사용하면 된다.

dictionary.remove("chicken");
dictionary.remove("hippo");

키값에 해당되는 데이터(key, value)를 삭제 후 그 value값을 리턴하는 명령어

System.out.println(dictionary.remove("chicken")); //"닭" 출력

Map의 크기 확인하기

size : Map의 개수를 리턴하는 메소드

if (dictionary.isEmpty()) {
    System.out.println("단어가 하나도 없습니다.");
    System.exit(0);
} else {
    System.out.println(dictionary.size() + " 개의 단어가 있습니다.");
}
System.out.println(dictionary.size() + "개의 단어가 있습니다.");

dictionary가 비어 있는 상태인지 isEmpty()로 확인하고 맞다면 "단어가 하나도 없습니다."를 출력한다. 아니라면 size로 dictionary의 개수를 확인해서 출력한다.

반복문에서 Map 이용하기

keySet()메서드는 맵의 모든 키를 모아서 Set 자료형으로 리턴한다.

import java.util.HashMap;

public class Practice {
    public static void main(String[] args) {
        HashMap map = new HashMap<>();
        map.put("people", "사람");
        map.put("soccer", "축구");
        System.out.println(map.keySet()); // [people, soccer] 출력
    }
}

반복문으로 표현하기(for)

public class Practice {
    public static void main(String[] args) {
        HashMap map = new HashMap<>();
        map.put("people", "사람");
        map.put("soccer", "축구");

        Collection keys = map.keySet();
        for (String abc : keys) {
            System.out.println(abc);// [people, soccer] 출력
        }
    }
}

키랑 값을 동시에 보려면 어떻게 해야할까?

entryset : 맵에 저장된 키-값 데이터를 표현하는 entry 객체의 집합(Set)을 반환한다.

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;

public class Practice {
    public static void main(String[] args) {
        HashMap map = new HashMap<>();
        map.put("people", "사람");
        map.put("soccer", "축구");

        Set> entries = map.entrySet();

        for (Map.Entry entry : entries) {
            String abc = entry.getKey();
            String korean = entry.getValue();

            System.out.println(abc + ": " + korean);
        }
    }
}

출력 결과

soccer: 축구
people: 사람

entrySet()메소드를 사용하여 Map.Entry 객체들의 Set을 얻은 후 반복문을 통해 각 Map.Entry 객체에서 키와 값을 추출하여 출력한다.

📅 DATE

2023.06.03 작성

Java Spring JSP웹페이지 만들기9 (뒤로 가기, 게시글 수정 기능)

Fri, 02 Jun 2023 07:20:42 GMT

이제 거의 다 만들어진건가...? 하면 계속 늘어나는 것들..

그동안 생각없이 사용해왔던 모든 웹 서비스에게 무한히 감사드립니다... 지금 사용하고 있는 벨로그 서비스도 넘 감사해요..

💞 게시글 기능 추가하기 (수정, 뒤로가기)

U 버튼 : 게시글 수정하기 B 버튼 : 뒤로가기(글 목록 페이지로 이동)

//버튼 영역

버튼 영역에서 #upbtn과 backbtn() 처리!

✏ 작업 순서

backbtn()이 간단하니까 먼저 처리 ( boardContents , SearchDto )
U 버튼을 누르면 수정용 updateForm 페이지를 불러와서 수정할 내용을 작성하게끔 만들어준다. ( boardContents , boardController , updateForm )
글 내용 영역 수정 및 데이터베이스 업로드 ( updateForm , boardController , BoardService , BoardDao )
파일을 추가하거나 삭제도 가능하게끔 파일 수정 기능 만들기 ( updateForm , boardController , BoardService , BoardDao )

🔻 뒤로가기 기능

💻 BoardContents 소스

function backbtn(){
let urlstr = "/list?";
let col = "${sdto.colname}";
let keyw = "${sdto.keyword}";

if(col == null || col == ''){//검색을 수행하지 않은 경우
  urlstr += "pageNum=${pageNum}";
} else{//검색을 한 경우
  urlstr += "colname=${sdto.colname}&keyword=${sdto.keyword}&pageNum=${sdto.pageNum}";
}
console.log(urlstr);
location.href = urlstr;
}

list urlstr에서 참조하는 sdto.colname과 sdto.keyword를 확인하고 검색 여부에 따라 이동하는 페이지가 달라진다.

💻 BoardController 소스

@GetMapping("list")
public ModelAndView boardList(SearchDto sdto, HttpSession session){
    log.info("boardList()");
    mv = bServ.getBoardList(sdto,session); //서비스에서 데이터 삽입 및 목적페이지 지정
    return mv;
}

💻 SearchDto 소스

@Data
public class SearchDto {
    private String colname;
    private String keyword;
    private int pageNum;//보여질 페이지 번호
    private int listCnt;//페이지 당 출력할 게시글 개수
}

검색을 하지 않은 상태에서 게시글 상세보기 페이지의 B 버튼을 누르면 원래 사용자가 원래 있던 페이지로 이동한다.

만약 이런식으로 검색창에 검색을 한 뒤 게시글을 클릭했다가 B 버튼을 누른다면 urlstr 가 http://localhost/list?colname=b_title&keyword=페이지&pageNum=1 로 저장되어 해당 페이지로 그대로 돌아오게 된다.

🔻 게시글 수정하기 (JSP 만들기)

게시글 수정용 updateForm jsp 페이지를 만든다.

💻 BoardContents 소스

  function upboard(bnum) {
    location.href ="/updateForm?b_num=" +bnum;
  }

BoardContents에서 수정 버튼을 누르면 해당 글 번호의 updateForm으로 이동한다.

💻 updateForm 소스 (글쓰기 영역)

글수정




${board.b_contents}

글쓰기 페이지인 writeForm과 비슷하지만 updateForm은 사용자가 기존에 입력했었던 데이터들이 페이지에 미리 입력되어 있다. (수정하기 위한 페이지이므로)

💻 BoardController 소스

@GetMapping("updateForm")
public ModelAndView updateForm(Integer b_num){
    log.info("updateForm()");
    mv = bServ.updateForm(b_num);
    return mv;
}

💻 BoardService 소스

public ModelAndView updateForm(Integer b_num){
    log.info("updateForm()");
    //게시글 내용 가져오기
    BoardDto board = bDao.selectBoard(b_num);

    //파일 목록 가져오기
    List fList = bDao.selectFiles(b_num);

    //mv에 추가.
    mv = new ModelAndView();
    mv.addObject("board", board);
    mv.addObject("fList", fList);

    //view 지정
    mv.setViewName("updateForm");
    return mv;
}

💻 BoardDao.java 소스

@Mapper
public interface BoardDao {
    //게시글 1개 가져오는 메소드 선언
    BoardDto selectBoard(Integer b_num);
}

💻 BoardDao.xml 소스

수정할 게시글 데이터를 가져오는 쿼리문

🔻 파일 수정

💻 updateForm 소스 (파일처리 영역)


    
    
        
            첨부파일 없음
        
        
            
                
                    ${f.bf_oriname}
                
            
        
    
    
    파일 추가

💻 updateForm 소스 (script 소스)

//파일 제목 처리용 함수
$("#file").on("change",function(){
    //파일 선택 창에서 업로드할 파일을 선택한 후 '열기' 버튼을 누르면 change 이벤트가 발생.
    console.log($("#file"));

    let files = $("#file")[0].files;
    console.log(files);

    let fileName = "";
    if(files.length > 1){
        fileName = files[0].name + " 외 " + (files.length -1) + "개";
    } else if(files.length == 1){
        fileName = files[0].name;
    } else {
        fileName = "파일선택";
    }
    $(".upload-name").val(fileName);
});

💻 BoardController 소스

@PostMapping("updateProc")
public String updateProc(@RequestPart List files
                         , BoardDto board
                         , HttpSession session
                         , RedirectAttributes rttr){
    log.info("updateProc()");
    String view = bServ.updateBoard(files, board, session, rttr);
    return view;
}

파일 제목 처리용 함수로 파일 추가를 하면 fileName 영역에 추가한 파일 이름이 노출된다.

글 수정 페이지

123.jpg 파일을 추가한 모습

🔻 수정 처리가 다 되었다면 데이터베이스에 수정한 게시글 저장까지 하자!

💻 BoardController 소스

@PostMapping("updateProc")
public String updateProc(@RequestPart List files
                         , BoardDto board
                         , HttpSession session
                         , RedirectAttributes rttr){
    log.info("updateProc()");
    String view = bServ.updateBoard(files, board, session, rttr);
    return view;
}

💻 BoardDao.java 소스

 //게시글 수정 메소드 선언
void updateBoard(BoardDto board);

💻 BoardDao.xml 소스


    update board set b_title=#{b_title}, b_contents=#{b_contents}
    where b_num=#{b_num}

🔻 파일 삭제

💻 updateForm 소스 (script 소스)

//파일 삭제 처리 함수
function del(sysname) {
    //alert(sysname);
    let con = confirm("파일을 삭제할까요?");

    if(con == true){
        //삭제할 파일명
        let objdata = {"sysname":sysname};
        //파일 목록을 다시 불러오기 위해 게시글 번호 추가
        objdata.bnum = ${board.b_num};
        console.log(objdata);

        $.ajax({
            url:"delFile",
            type: "post",
            data: objdata,
            success: function (res) {
                console.log(res);
                console.log(res.length);

                let flist = "";
                if(res.length == 0){
                    flist += '첨부파일 없음';
                }
                else {
                    for(let f of res){
                        flist += ''
                                 + f.bf_oriname + '';
                    }
                }
                $("#bfile").html(flist);
            },
            error: function (err) {
                console.log(err);
                alert("삭제 실패");
            }
        });
    }
}

기존에 업로드 해뒀던 파일을 삭제하는 함수로 파일을 클릭하면 삭제 확인용 알림창이 뜨면서 삭제 처리를 할 수 있다.

💻 BoardController 소스

@PostMapping("delFile")
@ResponseBody
public List delFile(String sysname, Integer bnum, HttpSession session){

    log.info("delFile()");
    List fList = bServ.fileDelete(sysname, bnum, session);

    return fList;
}

💻 BoardService 소스

public List fileDelete(String sysname, Integer bnum, HttpSession session){
    log.info("fileDelete()");
    List fList = null;

    //파일 삭제를 위한 실제 경로 구하기
    String realpath = session.getServletContext().getRealPath("/");
    realpath += "upload/" + sysname;

    try{
        //파일 삭제
        File file = new File(realpath);
        if(file.exists()){
            if(file.delete()){
                //파일 정보 삭제(파일 삭제 성공 시)
                bDao.deleteSingleFile(sysname);
                //나머지 파일 목록 다시 가져오기
                fList = bDao.selectFiles(bnum);
            }
        }
    } catch (Exception e){
        e.printStackTrace();
    }
    return fList;
}

💻 BoardDao.java 소스

//파일 삭제 메소드 선언(개별 파일)
void deleteSingleFile(String sysname);
//파일 목록 가져오는 메소드 선언
List selectFiles(Integer b_num);

선택한 파일을 삭제 후 삭제한 파일 목록을 다시 가져온다.

💻 BoardDao.xml 소스


    delete from boardfile where bf_sysname=#{sysname}

📅 DATE

2023.06.02 작성

spring 타임리프와 JPA 사용해서 데이터 입력 페이지 만들기

Thu, 01 Jun 2023 07:42:32 GMT

타임리프와 JPA를 활용해서 데이터를 입력하고 검색하는 페이지를 만든다.

Point

데이터입력 링크를 누르면 데이터 입력 페이지로 넘어간다.
데이터 목록 섹션에서 데이터 목록을 출력한다.
문자열을 검색하면 해당 컬럼을 보여준다.

🔰 JPA란?

자바 어플리케이션에서 관계형 데이터베이스를 사용하는
방식을 정의한 인터페이스 관련 API.

관계형 데이터베이스(RDB)

테이블(엔티티)과 테이블 간의 관계로
데이터를 저장하는 방식의 데이터베이스
    - MySQL, 오라클, 마리아DB 등.

Hibernate : JPA의 구현체 (JPA는 인터페이스, Hibernate는 구현 클래스)

Spring Data JPA : JPA와 Hibernate를 사용하기 쉽게 만든 Spring 라이브러리.

Entity 클래스(DTO)를 구현하면 해당 클래스에서 지정한 테이블 이름 및 컬럼 이름으로 DB 테이블을 자동으로 생성하며, DB CRUD에 대한 메소드도 제공. 메소드 이름으로 SQL 쿼리문을 생성하는 방식을 사용한다.

🔰 application.properties 세팅

JPA 초기화 전략 설정(a.k.a JPA 설정)

spring.jpa.generate-ddl : true로 설정하면 해당 데이터를 근거로 서버 시작 시에 DDL문을 생성하여 DB에 적용. DDL 생성 시 데이터베이스 고유의 기능을 사용하는지에 대한 유무 체크. → false로 설정.

spring.jpa.hibernate.ddl-auto : 'create table' 관련 설정.

none : 아무런 작업도 하지 않음.(DB에 테이블을 따로 생성)
create : 서버가 시작할 때 기본 테이블을 DROP(제거)하고 새 DDL을 실행(테이블 재생성)
create-drop : 서버가 시작할 때 DROP 및 CREATE하고, 서버가 종료될 때 DROP 실행.
update : 기존 테이블에 해당하는 Entity 클래스가 변경되면 기존 테이블을 DROP하고,새 클래스에 맞게 테이블 생성. 변경된 내용이 없으면 테이블 유지.
validate : Entity와 테이블이 잘 맵핑되어 있는지 확인하여, 맞지 않을 경우 프로그램을 종료시킨다.

spring.jpa.database-platform : 각 DBMS에 맞게 SQL을 생성하도록 도와주는 dialect(방언) 객체를 지정한다.

tyhmeleaf 설정

# DevTools setting
spring.devtools.livereload.enabled=true
spring.devtools.restart.enabled=true
spring.thymeleaf.cache=false

# static resource
spring.web.resources.static-locations=classpath:static/

DB 설정

# datasource setting
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/berrydb?serverTimezone=Asia/Seoul
#DB유저 id, 비밀번호
spring.datasource.username=buser
spring.datasource.password=12341234

JPA 설정

# JPA setting
spring.jpa.database=mysql
spring.jpa.database-platform=org.hibernate.dialect.MySQL8Dialect
spring.jpa.generate-ddl=false

spring.jpa.hibernate.ddl-auto=update

# JPA log setting
spring.jpa.properties.hibernate.show_sql=true
spring.jpa.properties.hibernate.format_sql=true
spring.jpa.properties.hibernate.use_sql_comments=true
logging.level.org.hibernate.type.descriptor.sql=trace

🔰 entity, repository 생성

Entity class

DB 테이블과 연계하기 위한 클래스.
DTO의 역할도 함께 처리할 수 있음.(따로 작성하는 경우가 일반적임)

Repository 인터페이스

DAO 역할을 하는 인터페이스.
이 인터페이스 내부에 다양한 작업을 위한 메소드를 작명 규칙에 맞게 작성한다.

💻 JpaData 소스 (Entity class)

@Entity //entity임을 선언하는 어노테이션(DB DDL 생성 시 활요)
@Table(name="jpatbl") //DB 테이블의 이름을 지정하는 어노테이션. 생략 시 클래스 이름으로 테이블 생성.
@Data //Lombok 어노테이션
public class JpaData {
    @Id //필드를 테이블의 기본키로 설정하는 어노테이션
    @GeneratedValue(strategy = GenerationType.IDENTITY) //자동으로 생성되는 키값에 대한 설정
    private Long code;

    @Column(name = "str_data", nullable = false, length = 50) //nullable=false : null을 허용하지 않는다.
    private String strdata;

    @Column(name = "int_data")
    private int intdata;

    @Column(name = "reg_date")
    @CreationTimestamp //작성일 기준으로 db에 저장한다.
    private Timestamp regdate;
}

jpatbl 테이블을 만들어주는 entity class

💻 JpaDataRepository 소스

public interface JpaDataRepository extends JpaRepository {
    //DB CRUD(insert, update, delete, select 용 인터페이스)
    //기본으로 전체 내용 삽입, 전체 내용 수정, 행 삭제
    //전체 내용 검색 및 키 검색용 메소드를 제공.
    List findByStrdata(String strdata);
    //SELECT * FROM jpatbl WHERE str_data = 'abcd'
}

인터페이스로 작성하며 메소드를 이용해서 데이터를 조작한다.

🔰 데이터 입력

💻 home.html 소스



첫 페이지
[데이터입력]

home페이지에서는 데이터 입력 클릭창만 보여주고 [데이터입력] 버튼 클릭스 writeForm 페이지로 이동한다.

💻 writeForm.html 소스



데이터 입력

writeForm 페이지에서는 데이터 입력 창을 보여주고 해당 데이터는 dataProc를 통해서 처리하도록 th:action 태그를 걸어준다.

💻 HomeController 소스

//writeForm.html로 보내주는 컨트롤러 동작
@GetMapping("writeForm")
public String writeForm(){
    log.info("writeForm()");
    return "writeForm";
}

//서비스의 insertData 작업을 받아서 view로 결과를 내보낸다.
@PostMapping("dataProc")
public String dataProc(JpaData data){
    log.info("dataProc()");
    String view = jServ.insertData(data);

    return view;
}

💻 JpaDataService 소스

@Autowired
private JpaDataRepository jRepo;

public String insertData(JpaData data){
    log.info("insertData()");
    String view = null;

    try{
        jRepo.save(data);//insert/update
        view = "redirect:/";
    } catch (Exception e){
        e.printStackTrace();
        view = "redirect:writeForm";
    }
    return view;
}

JpaData를 data로 받아서 리포지토리로 넘겨 사용자가 입력한 데이터를 DB에 저장한다. 저장에 성공하면 redirect를 이용해서 메인 페이지로 이동하고, 실패 시에는 writeForm 화면을 유지한다.

input 입력창에 데이터를 입력 후 Send로 데이터를 전송하면

첫페이지로 이동하면서 데이터 목록에 방금 입력한 데이터와 함께 데이터 목록이 출력된다.

🔰 데이터 목록

💻 home.html 소스



데이터 목록

        
        
            
    
    
        번호
        문자열
        숫자
        날짜와 시간
    
    
    
    데이터가 없습니다.

번호	문자열	숫자	날짜와 시간
데이터가 없습니다.

DB에 저장된 데이터 목록을 가져오는 html소스 타임리프로 jList를 불러온다.

💻 HomeController 소스

@GetMapping("/")
public ModelAndView home(){
    log.info("home()");
    mv = jServ.getList();
    return mv;
}

서비스에서 getList 메소드 작업해서 ModelAndView로 가져오는 역할

💻 JpaDataService 소스

@Autowired
private JpaDataRepository jRepo;

private ModelAndView mv;

public ModelAndView getList(){
    log.info("getList()");
    mv = new ModelAndView();
    mv.setViewName("home");
    //목록 추가 작업
    List jList = jRepo.findAll();
    //findAll() -> SELECT * FROM table
    mv.addObject("jList", jList);

    return mv;
}

데이터를 home.html로 반환하기 위해서 ModelAndView로 getList 메소드를 생성하고 리포지토리를 사용해서 JpaData 데이터를 jList로 반환한다.

만약 리스트가 없다면 데이터가 없습니다. 문자열을 내보낸다.

🔰 데이터 검색

검색할 문자열을 input 창에 넣고 검색을 누르면

데이터 목록에서 검색한 결과값만 나타나는 것을 확인할 수 있다.

💻 home.html 소스

💻 HomeController 소스

@GetMapping("search")
public ModelAndView search(String keyword){
    log.info("search()");
    mv = jServ.getData(keyword);

    return mv;
}

컨트롤러는 search action태그를 받고 getData 서비스 처리로 넘겨주는 역할을 한다.

💻 JpaDataService 소스

public ModelAndView getData(String keyword) {
    log.info("getData()");
    mv = new ModelAndView();
    mv.setViewName("home");
    List jList = jRepo.findByStrdata(keyword);
    mv.addObject("jList", jList);
    return mv;
}

검색 문자열을 keyword로 보내서 해당 문자열의 데이터만 보여지도록 한다.

📅 DATE

2023.06.01 작성

spring 타임리프와 jsp 같은 페이지 다른 코드 비교

Wed, 31 May 2023 07:43:42 GMT

jsp로 만들었던 웹 페이지를 타임리프로 재구성 했을 때(회원가입 페이지) 타임리프에서 다르게 사용하는 태그들을 비교해본다.

1. jsp 웹 페이지 만들기(회원가입)

2. 파일 링크

🔻 메인 페이지

메인페이지에서 크게 달라진 부분은 없다. 메세지를 내보내는 자바스크립트에서 타임리프를 사용하는 방식만 다름!

💻 thymeleaf (home.html)

💻 jsp (home.jsp)

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

타임리프에서는 msg 변수를 [[${msg}]] 대괄호로 감싸서 태그하는데 jsp에서는 간단하게 EL로 표현한다. ${msg}

💻 thymeleaf


테스트님
Logout
Login
Join

💻 jsp


  테스트님
  Logout
  Login
  Join

타임리프에서는 링크를 연결할 때 @를 붙여서 연결해주기 때문에 th:href="@{logout}" 이런 형식으로 링크 태그를 만들어준다.

💻 thymeleaf

💻 jsp

세션으로 보낸 값을 받아올 때 타임리프에서는 session.을 붙여서 데이터를 꺼내올 수 있다. 이때 서비스에서 받아온 mb 변수의 id값을 한번에 session.mb.id 이런식으로 불러올 수는 없어서

    let mb = [[${session.mb}]];
    if(mb != null){
      id = mb.m_id;
    }

mb 먼저 가져오고 id 변수로 다시 m_id값을 받아오게끔 처리하였다.

session.setAttribute("식별자", data); → th:text="${session.식별자}"

타임리프로 회원가입 페이지 만들기 완성!

📅 DATE

2023.05.31 작성

Spring Thymeleaf 타임리프 2 : 데이터 처리, 제어용 태그, 연산식 활용

Tue, 30 May 2023 07:36:32 GMT

✅ 타임리프의 데이터 처리 방법을 알아보자!

Dto 데이터 처리

//컨트롤러
    model.addObject("식별자", dto);
//html에서 사용할 때
    → th:text="${식별자.필드명}"
    → th:text="${식별자['필드명']}"
    → th:text="${식별자.get필드()}"

💻 Dto 소스

@Data
public class PersonDto {
    private String pname;
    private int age;
    private String phone;
}

💻 Controller 소스

@GetMapping("/")
public String home(Model model) {
    log.info("home()");
    //Dto 활용
    PersonDto person = new PersonDto();
    person.setPname("홍길동");
    person.setAge(20);
    person.setPhone("010-1234-5678");
    //person을 "pe"로 호출한다.
    model.addAttribute("pe", person);

    return "home";
}

💻 Html 소스

연락처
이름 : 
이름 : [[${pe.pname}]]

나이 : [[${pe['age']}]]
연락처 : [[${pe.getPhone()}]]

👍 결과

Session에 저장한 데이터 꺼내기

식별자 앞에 session.을 붙인다.

session.setAttribute("식별자", data); → th:text="${session.식별자}"

💻 Controller 소스

@GetMapping("second")
public ModelAndView second(HttpSession session){
    log.info("second()");
    ModelAndView mv = new ModelAndView();
    mv.setViewName("second");

    //로그인을 성공했다면(가정)
    session.setAttribute("id", "user01");

    return mv;
}

💻 Html 소스

Session에서 데이터 꺼내기

Hello world
[로그아웃]

👍 결과

${session.id}으로 가져온 아이디 user01이 호출되었다.

참고) 자바스크립트에서 꺼낼 때 : let val = [[${session.식별자}]]

RedirectAttribute에 저장한 데이터 꺼내기

주로 javascript에서 사용한다.

rttr.addFlashAttribute("식별자", data);
→ let 변수 = [[${식별자}]];
값이 없으면 null.
if(변수 != null) ← 조건식 작성시 활용

로그아웃 처리 프로세스에 활용! 페이지에서 로그아웃 버튼을 누르면 home페이지로 리다이렉트하면서 메세지를 전달하고 로그아웃처리하는 방식으로 샘플링하였다.

두번째 페이지에서 로그아웃 버튼을 누르면 home페이지로 설정한 메인 페이지로 redirect 되면서 알림창이 뜬다.

💻 Controller 소스

@GetMapping("logout")
public String logout(RedirectAttributes rttr){
    log.info("logout()");
    String view = "redirect:/";
    String msg = "로그아웃";
    rttr.addFlashAttribute("msg", msg);
    return view;
}

💻 Html 소스(javascript)

msg를 식별자로 불러오고 alert 명령어로 알림창을 띄운다.

✅ 타임리프의 제어용 태그를 알아보자!

th:block

- 제어문 및 객체 설정에 사용하는 태그.
- 일반적으로는 조건식, 반복식 등에 활용한다.
- 상위 요소가 지정되지 않은 객체의 출력에도 활용.

th:block을 활용한 제어 속성

1) th:if - if문에 해당하는 속성.
   th:unless - if문의 else에 해당.
2) th:switch, th:case - switch, case에 해당하는 속성.
3) th:each - for문에 해당하는 속성.
    
    status 항목을 사용하면 반복 상태의 정보를 구할 수 있음.
    - index : 반복 순번(0부터 시작)
    - count : 반복 횟수(1부터 시작)
    - odd : 홀수 행인지 확인(홀수행이면 true)
    - even : 짝수 행인지 확인(짝수행이면 true)
    - first : 첫번째 행인지 확인(첫 행이면 true)
    - last : 마지막 행인지 확인(마지막 행이면 true)
    - size : 총 반복수(요소 수)
    - current : 현재 반복이 수행되는 요소

참고) List(목록)의 null 체크 : ${#lists.isEmpty(목록)}
    객체(DTO)의 null 체크 : ${#object.isNull(dto)}

💻 Controller 소스

@GetMapping("fourth")
public ModelAndView fourth(){
    log.info("fourth()");
    ModelAndView mv = new ModelAndView();
    mv.setViewName("fourth");
    mv.addObject("id", "hong01");
    mv.addObject("age", 25);

    List pList = new ArrayList<>();
    for(int i = 0; i<5; i++){
        PersonDto per = new PersonDto();
        per.setPname("사람" + i);
        per.setAge(20 + i);
        per.setPhone("010-1234-567" + i);
        pList.add(per);
    }
    mv.addObject("pList", pList);
    return mv;
}

ModelAndView로 사용자의 id와 age를 각각 hong01, 25로 넘겨주었다. 그리고 리스트를 만들어 setPname, setAge, setPhone의 값을 1씩 증가하게끔 for문으로 감싸주었다.

💻 Html 소스

th:if와 th:switch 활용



  th:if
  //id변수가 null이 아니라면 id값과 p태그의 내용을 출력한다.
  
    
  
  
    안녕하세요.
  
  
  th:switch
  //age값을 10으로 나눠 case에 해당하는 값의 p태그를 출력한다.
  
    당신은 20대 입니다.
    당신은 30대 입니다.
    당신은 40대 입니다.

👍 결과

💻 Html 소스

th:each 를 활용한 반복문

th:each

  //만약 리스트가 비어있을 경우
  
    출력할 목록이 없습니다.
  
  //else
  
    //반복문 th:block th:each="변수,status:${목록}"
    
      
        //캡션 제목 count 증가
        
        //이름, 나이, 연락처 count 증가

👍 결과

✅ 타임리프의 연산식을 알아보자!

Thymeleaf 내에서의 연산식 활용

1) 산술 연산 : +, -, *, /, % 2) 비교 연산 : ==, !=, >, >=, <, <= 3) 논리 연산 : &&, ||, ! 4) 조건 연산 : (조건식) ? A : B 5) 기본 표현식(Default Expression. 또는 Elvis Operator) th:text="${data}?:값1" ➡ data가 null이 아니면 data, null이면 '값1'을 출력

📅 DATE

2023.05.30 작성

Spring Thymeleaf 타임리프 1 : 세팅하기, 활용법

Tue, 30 May 2023 03:54:38 GMT

🧐 Thymeleaf란?

Spring boot에서 view(HTML)를 처리하는 기본 방식 중 하나.

resources/template에 페이지의 틀을 저장하는 방식.
jsp처럼 prefix와 suffix를 설정할 필요가 없으며,
webapp/WEB-INF/views 폴더를 만들 필요도 없음.
Controller에서 데이터를 전송하는 방식은 동일함.
HTML 태그의 형식을 그대로 사용.
서버 재시작 없이 view 자동 업데이트 처리 view에만 해당됨.(java 코드의 수정 반영은 서버 재시작 필요)

Thymeleaf 세팅하기

인텔리제이 프로젝트 생성 화면

Spring Boot DevTools 포함(프로젝트 생성 시)

application.properties에 devtools 설정

#devTools setting
spring.devtools.livereload.enabled=true
spring.devtools.restart.enabled=true
spring.thymeleaf.cache=false

File > Setting...
- Build, Execution, Deployment > Compiler
- Build project automatically 체크
  - Advanced Setting
- Allow auto-make to start even if developed application is currently running 체크

Thymeleaf 활용법

1) templates 폴더에 HTML 문서로 작성.
2)  태그에 xmlns:th="http://www.thymeleaf.org"속성 포함.

html 페이지에서 thymeleaf 속성 포함시키기

Thymeleaf의 데이터 출력 방식

1) 기본적인 데이터 출력은 EL 형식을 사용 : ${...} 2) 링크(url) :@{link} (a 태그나 form 태그의 action 등) 3) 객체의 필드(멤버변수) : *{field}

💻 Controller 소스

@Controller
@Slf4j
public class HomeController {
    @GetMapping("/")
    public String home(Model model) {
        log.info("home()");
        //문자열 전송
        model.addAttribute("d1", "서버로부터 전송");
        String str = "결과 메시지";
        int num = 300;
        model.addAttribute("d2", str);
        model.addAttribute("d3", num);

        PersonDto person = new PersonDto();
        person.setPname("홍길동");
        person.setAge(20);
        person.setPhone("010-1234-5678");
        model.addAttribute("pe", person);

        return "home";
    }

컨트롤러 소스에서 home.html로 @Getmapping을 걸어주고 해당 페이지에서 사용할 속성을 입력한다.

💻 home.html 소스


//타임리프 사용


    
    Thymeleaf Home
    


Thymeleaf 첫 페이지

[[${d2}]]

[(${d1})]


연락처
이름 : 
이름 : [[${pe.pname}]]

나이 : [[${pe['age']}]]
연락처 : [[${pe.getPhone()}]]

[두번째]

😎 출력 화면

텍스트 형태로 출력하는 형식

1. th:text, th:utext 요소의 내용으로 출력할 때 사용하는 속성.

➡ innerText 형식 2) [[${...}]] ➡ innerText 형식 3) ➡ innerHTML 형식 4) [(${...})] ➡ innerHTML 형식 (innerHTML과 innerText 형식의 차이는 문장 내의 태그 표현)

2. th:value input 태그의 초기값으로 출력할 때 사용하는 속성.

3. th:inline 자바스크립트 태그에 사용하는 속성.

4. th:href 링크 연결 속성( 태그에서 사용)

일반 html 전달
Thymeleaf 전달

5. th:action form 태그의 action 속성과 동일.

spring 회원 관리 예제 실습 : 서비스 테스트 케이스

Mon, 29 May 2023 10:49:27 GMT

✌️ 회원관리 프로젝트

작성한 회원 서비스가 정상적으로 작동하는지 확인하기 위해 테스트 케이스를 작성한다.

클래스에서 바로 테스트 케이스 만드는 방법! 단축키 : control + Shift + T

테스트할 메소드를 선택하고 OK 버튼을 누른다.

테스트 케이스 만들어진 모습

테스트 할 때는 직관적으로 확인하기 위해서 한글로 클래스를 작성해도 상관없다. (빌드할 때 테스트는 포함되지 않으므로!)

💻 MemberServiceTest 소스

class MemberServiceTest {
    MemberService memberService;
    MemoryMemberRepository memberRepository;

    @BeforeEach
    public void beforeEach() {
        memberRepository = new MemoryMemberRepository();
        memberService = new MemberService(memberRepository);
    }

    //테스트가 끝난 다음에는 저장소 안의 데이터를 지워줘야 한다.
    @AfterEach
    public void afterEach(){
        memberRepository.clearStore();
    }

    @Test
    void 회원가입() {
        //given
        Member member = new Member();
        member.setName("hello");

        //when
        Long saveId = memberService.join(member);

        //then
        Member findMember = memberService.findOne(saveId).get();
        assertThat(member.getName()).isEqualTo(findMember.getName());
    }

    @Test
    public void 중복_회원_예외() {
        //given
        Member member1 = new Member();
        member1.setName("spring");

        Member member2 = new Member();
        member2.setName("spring");

        //when
        memberService.join(member1);
        IllegalStateException e = assertThrows(IllegalStateException.class, () -> memberService.join(member2));

        assertThat(e.getMessage()).isEqualTo("이미 존재하는 회원입니다.");
}

이때, 테스트 클래스에서 멤버 리포지토리를 다시 생성하게 되면 멤버 서비스에서 사용하는 리포지토리와 서로 다른 인스턴스가 된다.

그래서 테스트 클래스에서는 멤버 리포지토리를 따로 호출하지 않고 서비스에서 상속자로 Generate한다.

💻 MemberService 소스

private final MemberRepository memberRepository;

public MemberService(MemoryMemberRepository memberRepository) {
    this.memberRepository = memberRepository;
}

MemberServiceTest 에서 활용하는 부분

@BeforeEach
public void beforeEach() {
    memberRepository = new MemoryMemberRepository();
    MemberService memberService1 = memberService;
    memberService1 = new MemberService(memberRepository);
}

활용한 단축키

변수 추출하기 단축키 : cmd + option + v 같은 단어끼리 묶어서 리팩토링 : shift + f6 Generate : control + enter

📅 DATE

2023.05.29 작성

spring 회원 관리 예제 실습 : 회원 서비스 개발

Sun, 28 May 2023 12:42:59 GMT

✌️ 회원관리 프로젝트

회원 관리에 필요한 멤버 저장소를 만들었다면 이번엔 작동할 수 있는 회원 서비스 처리를 작성한다.

회원관리 서비스 개발

service 패키지를 만들고 그 안에 MemberService 클래스를 생성한다.

private final MemberRepository memberRepository = new MemoryMemberRepository();

리포지토리 불러오기

💻 MemberService 소스

//회원가입
public Long join(Member member){
    //같은 이름이 있는 중복 회원은 거부
    //command+option+v 단축키로 옵셔널 변환해줌..
    Optional result = memberRepository.findByName(member.getName());
    result.ifPresent(m -> {
        throw new IllegalStateException("이미 존재하는 회원입니다.");
    });
    memberRepository.save(member);
    return member.getId();

중복 이름은 회원가입이 불가능하다는 전제로 이미 존재하는 이름이 있을 경우엔 이미 존재하는 회원입니다. 메세지를 출력한다.

memberRepository.findByName(member.getName())
        .ifPresent(m -> {
            throw new IllegalStateException("이미 존재하는 회원입니다.");
        });

memberRepository.save(member);
return member.getId();

지금의 내가 봤을 땐 Optional이 붙어있어도 충분히 멋있어보이는데 강의에서는 Optional을 생략하고 코드를 좀 더 깔끔하게 다듬는다.

덕분에 나에겐 약간의 어려움이 더해졌다.

그리고 이렇게 정리가 중복이름 검증용 코드를 메소드로 묶어서 한번 더 코드 정리를...!!

코드 블럭 메소드로 만들기

코드 묶어서 드래그 후 control + T 누른 뒤 Extract Method 선택

메소드 이름 지정을 위해 More options에서 이름을 설정해준다.

강의 따라서 똑같이 validateDuplicateMember로 메소드 이름을 바꿔주었다.

//회원가입
public Long join(Member member){
    //같은 이름이 있는 중복 회원은 거부
    validateDuplicateMember(member); //중복회원 검증용 메소드
    //중복회원 검증 통과하면 회원 정보를 저장한다.
    memberRepository.save(member);
    return member.getId();
}

private void validateDuplicateMember(Member member) {
    memberRepository.findByName(member.getName())
            .ifPresent(m -> {
                throw new IllegalStateException("이미 존재하는 회원입니다.");
            });
}

그리하여 이렇게 제법 깔끔한 회원가입 서비스 코드가 작성되었다. 중복회원 검증용 메소드를 통과하면 회원 가입이 되는 흐름

💻 MemberService 소스

//전체 회원 조회
public List findMembers(){
    return memberRepository.findAll();
}

public Optional findOne(Long memberId){
    return memberRepository.findById(memberId);
}

전체 회원 목록을 조회하는 메소드도 작성한다.

📅 DATE

2023.05.28 작성

spring 회원 관리 예제 실습 : 회원 도메인과 리포지토리 만들기, 테스트 케이스 작성

Sat, 27 May 2023 12:56:40 GMT

✌️ 회원관리 프로젝트

비즈니스 요구사항

데이터 : 회원ID, 이름
기능 : 회원 등록, 조회
아직 데이터 저장소가 선저오디지 않음(가상의 시나리오)
일반적인 웹 애플리케이션 계층 구조
서비스 : 핵심 비즈니스 로직 구현
리포지토리 : 데이터베이스에 접근, 도메인 객체를 DB에 저장하고 관리
도메인 : 비즈니스 도메인 객체, 예) 회원, 주문, 쿠폰 등등 주로 데이터베이스에 저장하고 관리됨
아직 데이터 저장소가 선정되지 않아서, 우선 인터페이스로 구현 클래스를 변경할 수 있도록 설계
데이터 저장소는 RDB, NoSQL 등등 다양한 저장소를 고민중인 상황으로 가정
개발을 진행하기 위해서 초기 개발 단계에서는 구현체로 가벼운 메모리 기반의 데이터 저장소 사용

처음엔 객체 지향이 너무 어색하고 헷갈렸으나 이것도 익숙해져서인지 이제는 좀 반갑고..친숙해지기 시작했다.

회원관리 도메인과 리포지토리 만들기

💻 Member 소스

public class Member {
    private Long id;
    private String name;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

id와 name 선언 후 control + Enter키로 Getter and Setter를 세팅한다.

멤버의 정보를 작성한 뒤 이 녀석들을 저장할 저장소를 만들어준다.

💻 MemberRepository 소스 (Interface)

public interface MemberRepository {
    Member save(Member member); //저장소에 회원 저장
    Optional findById(Long id); //id를 찾는 기능
    Optional findByName(String name); //이름을 찾는 기능
    List findAll(); //전체 정보를 찾는 기능
}

💻 MemoryMemberRepository 소스

MemberRepository 인터페이스에서 선언한 기능의 세부 코드를 작성한다.

//회원 정보 저장 메소드 불러오기(implements)
public class MemoryMemberRepository implements MemberRepository{

    private static Map store = new HashMap<>();
    private static long sequence = 0L;

    @Override
    public Member save(Member member) {
        member.setId(++sequence);
        store.put(member.getId(), member);
        return member;
    }

    @Override
    public Optional findById(Long id) {
        //null값이 나올 것을 위한 Optional 처리
        return Optional.ofNullable(store.get(id));
    }

    @Override
    public Optional findByName(String name) {
        //루프를 돌면서 이름을 찾는다.
        return store.values().stream()
                .filter(member -> member.getName().equals(name))
                .findAny();
    }

    @Override
    public List findAll() {
        return new ArrayList<>(store.values());
    }
}

회원 이름과 이름을 등록하고 검색해서 가져올 수 있는 처리 코드를 작성했으면 제대로 돌아가는지 테스트가 필요하다.

회원 리포지토리 테스트 케이스 작성

test 디렉토리에 테스트용 클래스를 생성하고 테스트용 코드를 작성한다.

테스트를 해야하는 이유? 개발한 기능을 실행해서 테스트 할 때 자바의 main 메서드를 통해서 실행하거나, 웹 애플리케이션의 컨트롤러를 통해서 해당 기능을 실행한다. 이러한 방법은 준비하고 실행하는데 오래 걸리고, 반복 실행하기 어렵고 여러 테스트를 한번에 실행하기 어렵다는 단점이 있다. 자바는 JUnit이라는 프레임워크로 테스트를 실행해서 이러한 문제를 해결한다.

💻 MemoryMemberRepository 소스

@Test
public void save(){
    Member member = new Member();
    member.setName("spring");

    repository.save(member);
    //id를 가지고 와서 같은지 비교하는 테스트
    Member result = repository.findById(member.getId()).get();
    System.out.println("result = "+ (result == member));

    //검증
    //Assertions.assertEquals(member, result);
    assertThat(member).isEqualTo(result);
}

@Test 를 어노테이션하고 저장된 id가 회원정보와 일치하는지 assertThat(member).isEqualTo(result); 명령어로 확인한다.

테스트 하려면 해당 메소드 왼쪽의 테스트 run() 버튼을 눌러서 결과값을 확인할 수 있다.

전체 메소드를 동시에 테스트 하려면 클래스 시작점에서 테스 버튼을 누르면 된다.

테스트에서 주의해야 할 점!

테스트는 메소드가 작성된 순서대로 진행되지 않으므로 저장된 데이터끼리 엉켜서 정상 작동하는 코드임에도 오류가 발생할 수 있다.

findByName()에서 에러가 발생한 모습

그래서 각 테스트마다 테스트 완료 후 저장소 안의 데이터를 지워주는 작업을 해줘야 한다.

💻 MemoryMemberRepository 소스

public void clearStore() {
    store.clear();
}

💻 test/MemoryMemberRepository 소스

//테스트가 끝난 다음에는 저장소 안의 데이터를 지워줘야 한다.
@AfterEach
public void afterEach(){
    repository.clearStore();
}

저장소 안의 데이터를 지우기 위해 MemoryMemberRepository 클래스에 clearStore()를 만들어주고 테스트 클래스에서 @AfterEach로 하나의 테스트가 끝날 때마다 clearStore() 명령어가 작동하게끔 설정해주었다.

3개의 테스트 모두 정상작동되는 것 확인!

📅 DATE

2023.05.27 작성