✨입사 후 첫번째 테스크, 관리자페이지1

입사 후 나의 첫번째 태스크는 관리자 페이지였다.

유저가 우리들인만큼 ui는 크게 신경쓰지않아도 되었고 사용감에대한 피드백도 바로바로 들을 수 있어 비교적 쉬운 업무이다.

클래스형 컴포넌트로 개발된 기존 사이트에서 페이지 몇개를 추가하는 작업이어서 이번 기회에 나도 클래스형과 친해질 수 있었다.

사실 기본적인 crud업무라 크게 어려운 점 없이(훅을 사용하지않는 점, 타입스크립트를 사용 한점에서 적응하느라 초반 조금 어려움이있었음) 그 외엔 모두 괜찮았지만, 그 중에서도 몇 부분들을 기록해볼까한다.

 

 

1. 배열 복사, splice사용해 x버튼 누르면 데이터 삭제해주기

유저가 입력한 차량 코드와 연식을 서버로 보내주어야한다. 이때 입력된 차량코드에 해당하는 연식을 뱉어주는 api를 연식조회 버튼에 붙여주었다. 입력되는 데이터 배열을 map돌려 화면에 뿌려주고있다. 

{this.state.carCodeYear.map((item , index) => {
  return (
    <Grid.Column>
    {this.state.editPost && item.modelCode == undefined 
    	&& 
     <li>{item.modelCode} {item.releasedYear}</li>}
    {item.modelCode != undefined 
    	&& 
     <li>{item.modelCode} {item.releasedYear}</li>}

      <button
        onClick = {
          (e) => {
            this.setState({indexCodeYear: this.state.carCodeYear.indexOf(item)}, 
            () => this.removeCodeYear());
          }}> 
          x 
       </button>
    </Grid.Column>
	)
})
}

유저가 원하지않는 데이터를 삭제할 수 있도록 x버튼도 만들어두었다. x를 눌렀을때 이상한 데이터가 계속 삭제되어서 잠시 애를 먹었었다. 

removeCodeYear() {
    this.setState({})
    let array = [...this.state.carCodeYear];
    array.splice(this.state.indexCodeYear, 1); // array의 indexCodeYear번째 인덱스에서부터 하나를 없애라
    this.setState({carCodeYear: array});
}

삭제할 동일한 배열을 복사해 만들어주었고, 그 복사된 배열을 splice를 이용해 삭제할 데이터의 인덱스번호부터 하나를 잘라 사용한다. 

그렇게 새로운 배열을 다시 넣어주고 화면에 띄워준다. 이상한 부분이 삭제되어 애먹었떤 부분은 인덱스번호가 이상한줄알았지만 알고보니,

onClick = {
	(e) => {
	this.setState({indexCodeYear: this.state.carCodeYear.indexOf(item)}, 
	() => this.removeCodeYear());
}}>

버튼 onClick에서 화살표함수를 사용안해 콜백이 제대로 안되어 setState보다 removeCodeYear함수가 먼저 실행되었던 문제였다. 클래스형 컴포넌트에선 useEffect를 사용안하고도 이렇게 쉽게 콜백할수있다는 점은 아주 편한것같다.(이 외엔 장점 모르겠음ㅎㅎ!;;)

 

 

2. 유효성 검사

등록버튼을 눌렀을때 공백 검사를 하여 빈값이 보내지는 에러를 막아주고있다. (참고로 ui는 모두 Semantic UI를 사용하였다.)

<Input
  className={'form-input ' + (this.state.inputError && !this.state.inputManufacture && 'error')}
  name="manufacturer"
  value={this.state.inputManufacture}
  onChange={(e) => {
  this.setState({inputManufacture: e.target.value});
  }}
  placeholder={'제조사를 입력해 주세요.'}
/>
{this.state.inputError && !this.state.inputManufacture && 
<span style={{fontSize:'10px', color:'#8B0000'}}>*필수 입력 값입니다.</span>}

semantic UI

Semantic 자체 API를 사용해  className을 form-input error로 해주면 input박스의 색을 저절로 바꿔준다. 사실 클래스네임안에서 저렇게 조건을 걸어줄 수 있는지 몰랐던 나.. 게다가 예시에는 ui input error로 되어있는데 내 코드에선 form-input error로 해주어도 잘 알아듣는다..? 이런거 아직도 응용 못하는 사람 나야나.. 

showConfirm(event:SyntheticEvent, data:ButtonProps){
        const { partNumber, numOfKeyBtn, carCodeYear, inputManufacture,inputCarType } = this.state; 
        confirmType.event = data.id;
        confirmType.message = data.children;
        if (data.children == '삭제') {
            this.setState({open:true});
            this.setState({del: true});
        } else {
            if (partNumber.length==[] || !numOfKeyBtn || carCodeYear.length==[] || !inputManufacture || !inputCarType) {
                this.setState({inputError:true})
            } else {
                this.setState({open:true});
            }
        }
        
    }

inputError는 등록 버튼을 눌렀을때 confirm message에서 true로 바꿔주도록 해주었다.

그럼 이렇게 완성된다!:dD:D:D:DD:D!!

 

서버쪽에서 작업이 완료되기까지 기다리는 동안 또 다른 페이지를 수정해야하는 테스크를 하나 더 받았다. 차량 코드 검색하기(위의 사진에서 파란색 버튼) 페이지인데, 이부분은 현재 마무리 작업 중인데 주말동안 ui만 마무리해주면 끝!이라고 생각했지만.. 예상치못한 버그를 발견해 오늘 하루종일 붙잡고있었다. (아직 완전히 해결 못함ㅠ) 이 부분 해결 후 다음 TIL로 가져와야겠다.