* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.

* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.

1. forEach / map / delete

• Javascript 배열 혹은 객체에서 사용할 수 있는 메서드들.

forEach

• 배열의 각 요소에 대해 한 번씩 제공된 콜백 함수를 실행하는 메서드.

array.forEach((element, index, array) => {
  // 실행할 작업
});

const numbers = [1, 2, 3];

numbers.forEach((num) => {
  console.log(num * 2); // 2, 4, 6 출력
});

• 반환값이 존재하지 않음.

• 배열의 모든 요소에 대해 반복하면서, 내부 요소를 변경하거나 하는 등의 동작을 수행하는 데 사용.

map

• 배열의 각 요소를 순회하며 콜백 함수를 실행한 결과로 새 배열을 생성하는 메서드.

const newArray = array.map((element, index, array) => {
  return // 반환할 값
});

const numbers = [1, 2, 3];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // [2, 4, 6]

• 원본 배열을 변경하지 않고 새로운 배열을 반환.

map과 React.js

• React.js에서 map은 단순히 배열을 바꾸는 용도가 아닌, UI 컴포넌트의 렌더링과 데이터 매핑을 자연스럽게 연결 매우 - 대단히 - 강력한 도구이기도 하다. React의 친구 같은 존재.

const items = ["React", "Vue", "Angular"];

const List = () => (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

• React의 핵심은 상태(state)와 UI를 동기화하는 것. 데이터가 변화했을 때, 화면을 동적으로 갱신해줄 수 있어야 한다.

• map은 데이터를 반복적으로 순회하면서 각 데이터 항목을 기반으로 컴포넌트를 생성할 수 있어, 이 역할을 가장 잘 수행할 수 있다.

• UI 컴포넌트를 매우 간편하게 동적으로 생성해준다.

delete

delete object.property;
delete array[index];

• 객체의 속성을 제거하거나 배열의 특정 요소를 삭제하는 데 사용.

• 다만 이걸로 배열 요소를 지워버리면, 배열의 전체 크기는 유지되고 삭제 지점만 undefined로 처리된다.

• 그래서 다른 기능과 연결되어있는 배열에 잘못 사용하면 undefined 형식으로 인해 에러가 발생할 위험성도 커지니 주의.

const obj = { name: "Alice", age: 25 };
delete obj.age;
console.log(obj); // { name: "Alice" }

• 객체는 깔끔하게 처리되지만..

const numbers = [1, 2, 3];
delete numbers[1];
console.log(numbers); // [1, undefined, 3]

• 배열은 멀쩡하던 데이터 사이에 undefined가 하나 박히는 셈이 되어버린다.

const numbers = [1, 2, 3];
numbers.splice(1, 1); // 1번 인덱스의 1개 요소 제거
console.log(numbers); // [1, 3]

• 배열의 요소를 삭제하고 싶다면, delete보다는 splice가 적합하다.

2. 예외처리

• 이미지 출처 - 점프 투 자바 07-04 예외 처리

• 예외(Exception). 프로그램 실행 중 예상치 못한 상황이나 오류가 발생했을 때 나타나는 문제.

• 예외 처리란, 심각하지 않은 문제 상황에서 프로그램이 강제중단되지 않고 안정적으로 동작을 계속하도록 처리해주는 과정을 뜻한다.

예외 처리를 왜 해주어야 하는가?

• 어떤 프로그램이 실행 중에 에러가 발생했다고 가정해보자, 에러의 종류는 다양하지만 개중에는 전혀 심각한 문제도 아니고, 하던 작업을 멈추고 뒤로 돌아가서 다시 시도하기만 해도 되는 것들이 있다.

• 그런데 프로그램에서는 기본적으로 사소한 에러라도 해도 일단 발생한 이상, 프로그램을 강제로 종료시키게 된다.

const api_test_04_Deletechannel = (req, res) => {
    const { id } = req.params;
    const index = parseInt(id);

    myMap.delete(index);
    res.json({ message: `${id}번 채널이 삭제되었습니다.`});
};

• 사용자에게 id값을 받아서 특정 채널 데이터를 삭제하는 함수.

• 만약에, 요청 데이터가 누락되었거나 존재하지 않는 id값 혹은 id가 아닌 문자열을 실수로 입력했다면?

• 이 경우에는 그저 후속 작업을 수행하지 않고, 사용자에게 입력을 다시 하라고 알려주기만 하면 된다.

const api_test_04_Deletechannel = (req, res) => {
    const { id } = req.params;
    const index = parseInt(id);

    // 요청 데이터가 존재하는지 확인
    if (!req) {
        res.json('요청 정보가 존재하지 않습니다.');
        return;
    }

    // 사용자가 입력한 id 값이 myMap의 key에 존재하는지 확인
    if (myMap.has(index)) {
        myMap.delete(index);
        res.json({ message: `${id}번 채널이 삭제되었습니다.`});
    } 
    else {
        res.status(404).json({ message: `${id}번 채널은 존재하지 않는 채널입니다.` });
    }

};

• 간단한 조건문을 사용하는 것만으로도 예외 처리는 완료된다.

• 요청 데이터가 누락되었다면 사용자에게 알리고 작업을 중단 / 올바른 id값이 입력되지 않았어도 사용자에게 알리고 작업을 중단하면 된다.

• 프로그램은 강제종료되지 않고, 사용자는 반환된 결과 메시지를 보고 실수를 바로잡기만 하면 된다.

예외 처리가 이루어지지 않는다면?

• 사소한 에러만 발생해도 매번 프로그램이 강제 종료되고, 매번 서버를 재가동시켜주어야 한다.

• 제대로 저장되지 않은 데이터는 소실되거나 손상될 확률이 높아진다.

• 실무에서 사용하는 복잡한 어플리케이션에 경우, 연계된 다른 프로그램 혹은 시스템에게까지 악영향을 미친다.

3. 리팩토링Refactoring

• 이미지 출처 및 참고 자료 - Refactoring이란?

• 코드의 동작(기능)은 유지하면서 구조를 개선하는 과정.

• 동작에는 영향을 주지 않고 내부 구조를 변경하여 가독성, 유지보수성, 성능 등을 향상시키는 작업.

리팩토링?

• 기존에 구현한 기능에 변화는 없다.

• 코드의 가독성 / 유지보수성 / 재사용성 등이 개선되고 성능이 최적화되도록 코드를 수정하는 과정을 뜻한다.

• 코드에서 중복된 부분을 별도의 함수나 모듈로 분리시킨다던가, 불필요한 조건문을 축소한다던가, 하나의 함수에서 여러 기능이 포함되었다면 각각의 개별 함수로 분리시킨다던가, 이해하기 어려운 변수/함수 이름을 명확하게 바꿔준다던가..

시작은 창대하지만..

• 이미지 출처 - Multiprocessing - Intermediate Python Programming p.10

• 처음부터 코드 구조를 완벽하게 설계하고 차근차근 구현했다면 상관 없겠지만.. 보통은 어렵다.

• 일단 동작하는 코드를 구현하는게 우선시되다보니, 시간이 지나면 코드가 복잡해지고 이해하거나 유지보수하는게 점점 어려워진다.

• 이렇게되면 심각한 에러가 발생하거나, 그렇지 않더라도 자잘한 버그나 시간지연 등이 흔해지기 시작한다.

• 이럴 때 수행해볼만한 작업이 리팩토링Refactoring.

• 복잡하거나 어려운 개념은 아니다. 코드가 어느 정도 완성되었을 때, 최적화가 필요하다거나 버그가 많다거나 유지보수성이 떨어진다싶으면 적당히 알아서 하면 된다.

4. http 응답코드

• 이전 포스팅 참조.