[TIL_개발일기_210312] react redux axios post / JavaScript insertion sort(삽입 정렬) / Javascript Array.slice()

*하루동안 새롭게 알게된 부분, 에러를 해결한 방법 등을 작성하는 개발일기입니다. 다른 사람에게도 설명해줄 수 있도록 제 머릿속에 넣기 위해 정리를 시작하게 되었습니다. 

react redux axios post 

회원가입 폼 제출 시, 해당 user가 넘긴 정보(nickname, phone, role)가 dispatch되고 axios post를 하는 코드를 작성했다.

 

여기서 잠깐 redux 개념을 정리하고 가자면,,, 

redux는 데이터의 중앙 저장소이다. 각 컴포넌트에서 필요로 할때 꺼내 쓸 수 있는 장소라고 생각하면 된다. 

 

redux에서 data를 바꾸기 위해서는 action이 필요하고, action을 dispatch하면 중앙 저장소의 data가 변경된다. 그런데 action을 dispatch한다고 data가 자동으로 바뀌는 것은 아니고, reducer에서 어떻게 바꿀지를 구현해주어야 한다.

 

회원가입 폼을 제출하면, registerUser 액션을 dispatch해 중앙저장소에 user data를 추가해준다.

 

// components > SignUpPage.js

const onSubmitForm = useCallback(
        async () => {
            const nickname = await makeNickname();
            await dispatch(registerUser({ role, phone, nickname }));
        },
        [role, phone],
);

 

registerUser 액션은 registerAction을 dispatch하고, axios post를 통해 해당 서버로 data를 넘겨준다.

 

// reducers > user.js

export const registerUser = async (data) => {
    return (dispatch) => {
        dispatch(registerAction(data));
        return axios.post('http://localhost:8080/users', data);
    };
};

export const registerAction = (data) => {
    return {
        type: REGISTER_USER,
        data,
    };
};

 

JavaScript insertion sort(삽입 정렬)

삽입 정렬은 array의 두번째 인덱스에서 시작해서 마지막 인덱스가 될때까지, 앞의 요소들과 비교해 작으면 삽입하는 정렬 방식이다. 

 

function solution(arr){
  const answer = arr;

  for(let i = 1; i < arr.length;  i++){
  	
    // tmp는 비교대상이 될 임시적 변수 
    const tmp = arr[i]; 
    
    // j는 tmp의 앞 인덱스
    let j = i - 1
    
    for(; j >= 0; j--){
      if(tmp < arr[j]){
        arr[j+1] = arr[j]; 
      } 
      
      else{
        // tmp가 더 크면 더 이상 비교할 필요 없다. 앞의 요소들은 이미 정렬된 상태이므로
        break; 
      }
    }
    
    // j가 -1이 된 경우, 즉 모든 요소가 tmp보다 컸다면 arr[0]에 tmp에 들어가야 하고
    /*
    	중간에 break된 경우, 
        예를 들면 j가 2일때 break 되었다면, 
        arr[2]보다는 tmp가 크고, arr[4]보다는 tmp가 작다는 뜻이므로
        j가 3인 자리에 tmp가 들어가야 한다. 
    */
    // 즉, 둘 중 어떤 경우라도 항상 인덱스가 (j + 1)인 자리에 tmp가 들어가야 한다.
    arr[j+1] = tmp; 
  }

  return answer; 
}

let arr = [11, 7, 5, 6, 10, 9]; 
console.log(solution(arr));

 

JavaScript Array.slice()

slice()는 배열에서 특정 인덱스부터 특정 인덱스까지의 복사가 필요할 때 주로 쓰인다. 즉, 원본 배열은 건드리지 않는 메소드이다. 

 

arr.slice(begin, end) 형태로 쓰이며, 'begin'번째 인덱스부터 'end - 1'번째 인덱스까지 복사된다. 즉, end 인덱스는 미포함이다.    

 

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2, 4));
// 결과: ["camel", "duck"]
// 2번째 인덱스부터 (4-1)번째 인덱스까지 복사, 즉, 4번째 인덱스는 미포함

// 배열 전체를 복사하고 싶을 때
console.log(animals.slice());

console.log(animals.slice(2));
// 결과: ["camel", "duck", "elephant"]
// 2번째 인덱스부터 끝 인덱스까지 복사됨