자바스크립트는 비동기 작업을 위해 Promise와 callback 함수를 사용하는 등 다양한 방법을 제공합니다. 그 중에서도 최근에는 async/await 구문을 활용한 비동기 코드 작성이 많이 사용되고 있습니다. 이 글에서는 자바스크립트의 async/await 패턴과 함께 코딩 컨벤션을 다룹니다.

async/await란?

async/await는 ES6에서 도입된 비동기 작업을 처리하는 방법 중 하나로, 비동기 함수를 동기적으로 작성할 수 있게 하는 문법입니다. async 함수 안에서 await 키워드를 사용하여 Promise가 반환하는 값을 반환받을 수 있습니다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

위의 예시에서 fetchData 함수 안에서는 fetch 함수를 비동기적으로 호출하고, 받아온 응답을 JSON으로 변환하여 반환합니다. 이때 await 키워드를 사용하여 비동기 작업이 완료될 때까지 다음 코드가 실행되지 않도록 합니다.

코딩 컨벤션

자바스크립트를 작성할 때 일관된 코딩 스타일과 컨벤션을 따르는 것은 코드의 가독성과 유지 보수성을 높여줍니다. 아래는 일반적으로 사용되는 자바스크립트 코딩 컨벤션 예시입니다.

• 들여쓰기: 들여쓰기에는 탭(\t)이 아닌 공백 스페이스를 사용합니다. 보통 2개나 4개의 공백을 사용하며, 얼마나 들여쓸지에 대한 규칙을 정하고 일관되게 사용합니다.

• 변수명: 변수명은 camelCase를 사용합니다. 의미를 명확하게 전달해야하며, 가능한 경우 약어를 피하고 명사로 지정합니다.

• 상수: 상수를 정의할 때에는 대문자와 스네이크 케이스를 사용합니다. 예를 들어, const MAX_COUNT = 10;와 같이 상수를 정의합니다.

• 클래스명: 클래스명은 PascalCase를 사용합니다. 클래스의 첫 글자를 대문자로 시작하고, 명사로 지정합니다.

• 줄바꿈: 코드가 너무 길어서 읽기 어렵거나 가독성이 떨어질 경우에는 적절한 위치에서 줄바꿈합니다. 임의의 위치에서 줄을 바꿀 때에는 연산자마다 서로 다른 줄에 위치시키는 대신, 연산자 뒤에 줄바꿈을 해야합니다.

const result = a + b + c +
  d + e + f;

• 주석: 코드의 이해를 돕기 위해 주석을 추가합니다. 코드의 의도나 작성자가 의도한 동작 방식을 설명할 수 있어야 합니다.

// 로그인 API 요청
const response = await fetch('https://api.example.com/login');
// 응답 데이터를 JSON으로 변환
const data = await response.json();

결론

자바스크립트의 async/await 구문은 비동기 작업을 보다 간편하게 처리할 수 있도록 도와줍니다. 이를 활용하면 코드의 가독성을 높이고 유지 보수성을 강화할 수 있습니다. 함께 코딩 컨벤션을 따르면 코드의 일관성을 유지할 수 있고 팀원들과 협업 시에도 원활한 소통이 가능합니다.