10) 회사 프로젝트 중 발생한 문제 모음집

22.09.28

 - 딱 한달만에 포스팅을 다시 시작하게 됬다.

 - 입사하자마자 프로젝트 바로 투입되서 회원가입 및 수정 탈퇴 로직에 투입!

 - 방도 없고 집도 없어서 모텔생활 1주일에, 추석까지 겹쳐서 이사하는데 진짜 육체적 정신적으로 너무 지쳤었다.

 - 컴퓨터도 이제서야 구입하게 되어 늦게나마 다시 포스팅을 해보려고 한다.

 - 회사에서 작업하면서 적어줘야할 것 들을 체크해봤다

 - 기초적인 것이지만 그래도 적어두면 나중에 기억하기 편할것 같아서 작성!

  - 내가 만들었던 것과 비슷하지만, 좀 다른 형태여서 신기하기도 했고 어렵지만 그래도 재밌게 진행했던 프로젝트

 

---

1. String(문자열) 합치기

 - 특별한거 없이 그냥  + 로 합쳐주면 된다

 

2. Front page에서 Valdation 시 tag 속에 임의이 명령어를 만들 수 있음

<input type="text" id="userId" name="userId" check_result="fail" required="required">

 - 이런식으로 input tag안에 check_result라는 명령어를 만들어 fail 이라는 값을 주고, 만약 해당 항목의 검사를 진행하지 않으면 다음 페이지로 진행이 되지 않게 설정할 수 있다(중복 검사를 실행했을시 check_result의 값을 success로 바꿔줌!)

 

3. String 자르기

	//생일 자르기
        let birthday = $('#birthday').val();
		let birthday1 = birthday.substring(0,4);
		let birthday2 = birthday.substring(4,6);
		let birthday3 = birthday.substring(6,8);
        //연락처 자르기
        let phone = $('#phone').val();
		let [phone1, phone2, phone3] = phone.split('-');

 - subString(시작,끝) 메서드로 짤라주면 된다(8자리 숫자 생일 등을 분할 할때 사용)

 - split 로 - 부분을 잘라서 각각 phone1~3에 값들을 저장하는 식으로 사용!

 

4. 생년월일 option list

	//생년월일 option 리스트
	for (var i = 2022; i > 1930; i--) {
		$('#year').append('<option value="' + i +'">' + i + '</option>');
	}
	for (var i = 1; i < 13; i++) {
		var m = m >= 9 ? i : "0"+i ;
		$('#month').append('<option value="' + m +'">' + m + '</option>');
	}
	for (var i = 1; i < 32; i++) {
		var d  = d >= 9 ? i : "0" + i ;
		$('#day').append('<option value="' + d +'">' + d + '</option>');
	}

 - 이렇게 주면 select 태그의 option의 각 id에 해당하는곳에 년 월 일로 해당 기간동안 옵션을 줄 수 있다!

 

5. append()와 html() 차이

 - append()는 실행 될때마다 추가되는 방식이기 때문에 팝업창에는 어울리지 않고, 한번의 입력만 발생하는 구간에 사용함

 - html()은 ()속 내용을 연결해주는 역할이기에 무한으로 추가되지 않는다. 팝업창 등에 어울림

 

6. Ajax success data를 전역 변수에 저장하는 법

	var res = false;
    if(updt != null){
        $.ajax({
                url: checkUrl,
                method: "GET",
                dataType: "json",
                async: false,
                contentType: "application/json",
                data : checkDto,
                success : function(result){
                    if(result == 1){
                        res = true;
                         alert('재가입은 탈퇴 후 7일 이후부터 가능합니다.');
                    }
                }
                })
            }
        return res;

 -  async: false을 추가해준다. 비동기 ->. 동기 형태로 바꿔주기 때문에 전역 변수에 success의 data가 저장된다.

 

7. form 속 data를 json 형태로 변환하는 법 

$(function (){
    $.fn.serializeObject1 = function(){
        var obj = "";
        try{
            if(this[0].tagName && this[0].tagName.toUpperCase() == "FORM"){
                var arr = this.serializeArray();
                if(arr){
                    obj = {};
                    $.each(arr, function(){
                        obj[this.name] = this.value;
                    });
                };
            }
        } catch(e){
            alert(e.message);
        }
        return obj;
    }
    
     $.fn.serializeFormData1 = function () {
        var data = $('#joinForm').serializeObject1();
        var formData = new FormData();
        $.each(data, function(key, value) {
            formData.append(key, value);
        });
        this.find("input[type=file]").each(function(i, file) {
            var fileList = file.files;
            if (fileList.length) {
                formData.append(file.name, file.files[0]);
            }
        });
        return formData;
    };

})

 - $.fn.serializeObject1 메서드로 form 데이터를 json 형태로 변환하고, $.fn.serializeFormData1 메서드로 json을 FormData 형식으로 변환해주는 메서드

 - 거의 고정형식이니 참고해서 사용하자.

 

8. Controller에서 보낸 데이터가 아닌 url에서 data 가져오는 법

var query = window.location.search;
var param = new URLSearchParams(query);
var usernm = param.get('username');
var birth = param.get('birthday');
if(usernm.trim() == '' || usernm != null || birth.trim() == '' || birth != null){
    var birth1 = birth.substring(0,4);
    var birth2 = birth.substring(4,6);
    var birth3 = birth.substring(6,8);

 -  window.location.search로 url을 가져오고 / new URLSerchParms()로 url의 쿼리들을 가져온다.

 - 가져온 쿼리들을 각각 변수에 저정하고 이를 사용하면, URL의 쿼리문 DATA도 jquery로 사용가능해진다!

 

 

9. Date 타입과 LocalDateTime의 변환

@Override
public int getMemberDeleteCheck(MemberUserParam param) {
    LocalDateTime now = LocalDateTime.now();
    Date nowDate = Timestamp.valueOf(now);

    LocalDateTime updt = param.getUpdt().plusDays(7);
    Date date = Timestamp.valueOf(updt);
    param.setDateUpdt(date);
    param.setNow(nowDate);
    return sqlSession.getMapper(SignUpMapper.class).getMemberDeleteCheck(param);
}

 - Front 혹은 Db에서 Date 타입을 그대로 java로 가져와서 사용하면 인식을 못한다

 - 여기서는 탈퇴 후(이때 updt에 시간이 저장) 재가입까지 7일이 걸리는데, 이걸 비교하려하니 비교가 안됬다.

 - workbench에서는 가능했는데 xml에서는 인식을 못했기에, 위처럼 변환을 해줘야한다.

 - 먼저 LocalDateTime 타입을 선언해주고(비교를 위해 plusDays() 메서드 사용). 이를 Timestamp.valueOf()메서드로 Date 타입으로 변환해주는 것!

 - 이 값을 xml에서 DATE()메서드 안에 넣어 비교하면 정상적으로 2개의 날짜가 비교 가능하다!!

 

10. 연속된 페이지는 params로 구분지을 수 있다!

//회원가입 Step1
//면허정보 조회
@GetMapping(value = "/member/signup", params = "step=1")
    public ModelAndView signUpSetp1(ModelAndView mav) {
    log.trace("[PAGE][GET]/member/signup?step=1");
    mav.setViewName("/member/signup.step1");
    return mav;
}

 - 이런식으로 params를 사용해서 각각 페이지에 접속될때 step=1, 2, 3으로 구분지어서 연결가능하다

 

---

 - 이 것보다 더 많은데, 일단 힘들었던 것이 Js와 Jquery 부분이었다. 기초가 부족함을 뼈저리게 느껴서 책으로 계속 공부중인데, 다음 프로젝트는 vue.js 3 버젼으로 하게된다는데... 공부가 끝이없다.

 - 아마도 다음 포스팅은 vue와 spring boot 쪽 관련된 포스팅을 할 것 같다. 이상!