Javascript & Typescript

자바스크립트 개발자들이 자주 만나는 10가지 문제와 해결책

0

자바스크립트 개발자들은 매일 다양한 문제에 직면합니다. 이 글에서는 자주 발생하는 10가지 문제와 그 해결 방법을 간단히 소개합니다. 독자 여러분이 이러한 문제를 빠르고 효율적으로 해결할 수 있기를 바랍니다.

pixabay

1. 배열 다루기

자바스크립트에서 배열을 다루는 것은 기본적인 작업 중 하나입니다. 예를 들어, 다음과 같은 배열이 있다고 가정해 봅시다.

const products = [
  { id: 1, name: "Apple", price: 1.99, inStock: true },
  { id: 2, name: "Banana", price: 0.79, inStock: false },
  { id: 3, name: "Orange", price: 2.49, inStock: true },
];

이 배열에서 재고가 있는 제품만 필터링하고 가격을 기준으로 오름차순 정렬하려면 다음과 같은 코드를 사용할 수 있습니다.

const availableProducts = products.filter(product => product.inStock)
.sort((a, b) => a.price - b.price);

이렇게 하면 `availableProducts`에는 재고가 있는 제품만 포함되며, 가격순으로 정렬됩니다. 간단하면서도 매우 유용한 고차 함수인 `filter`와 `sort`를 사용했습니다.

2. DOM 조작

DOM(문서 객체 모델) 조작은 자바스크립트 개발자들이 자주 하는 작업입니다. 다음은 버튼 클릭 시 제목을 변경하는 간단한 예제입니다.

<!DOCTYPE html>
<html>
<body>
  <h1 id="heading">Welcome to our website!</h1>
  <button id="change-button">Change Heading</button>

  <script>
    const changeButton = document.getElementById("change-button"); 
    changeButton.addEventListener("click", function(event) { 
      const heading = document.getElementById("heading"); 
      heading.textContent = "This heading has been changed!";
    });
  </script>
</body>
</html>

이 예제에서는 버튼 클릭 시 `h1` 요소의 텍스트를 변경합니다.

3. 비동기 프로그래밍

비동기 프로그래밍은 현대 자바스크립트에서 매우 중요합니다. 다음은 `Promise`와 `async/await`를 사용한 비동기 프로그래밍 예제입니다.

function waitOneSecond() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("I was called after one second.");
    }, 1000);
  });
}

async function waitOneSecondAsync() {
  try {
    const message = await waitOneSecond();
    console.log(message);
  } catch (error) {
    console.error(error);
  }
}

waitOneSecondAsync();

이 코드는 1초 후에 메시지를 출력합니다.

4. 오류 처리

코드는 언제든 예외를 발생시킬 수 있습니다. 다음은 예외를 처리하는 간단한 예제입니다.

try {
  throw new Error("Something is not right here.");
} catch (e) {
  console.log("Got an error: " + e.message);
} finally {
  console.log("This always executes.");
}

이 코드는 예외 발생 시 오류 메시지를 출력하고, 항상 실행되는 `finally` 블록을 포함합니다.

5. 객체 시작하기

자바스크립트에서 객체는 매우 중요합니다. 다음은 객체를 생성하고 속성에 접근하는 예제입니다.

let campingSpot = {
  name: "Willow Creek",
  location: "Big Sur"
};

console.log("We’re going camping at " + campingSpot.name);

또한, 클래스 형태로 객체를 정의할 수도 있습니다.

class CampingSpot {
  constructor(name, location) {
    this.name = name;
    this.location = location;
  }
  
  describeWater() {
    console.log("The water at " + this.name + " is very cold.");
  }
}

let spot = new CampingSpot("Willow Creek", "Big Sur");
spot.describeWater();

6. 원격 API 사용

API는 외부 데이터를 가져오는 데 유용합니다. 다음은 Fetch API를 사용한 예제입니다.

async function getStarWarsFilms() {
  try {
    const response = await fetch('https://swapi.dev/api/films');
    if (!response.ok) {
      throw new Error(`Error fetching Star Wars films: ${response.status}`);
    }
    const data = await response.json();
    console.log(data.results);
  } catch (error) {
    console.error("Error:", error);
  }
}

getStarWarsFilms();

이 코드는 스타워즈 영화 목록을 가져옵니다.

7. 문자열 조작

문자열은 자바스크립트에서 자주 사용됩니다. 다음은 문자열을 조작하는 예제입니다.

const text = "The Tao that can be told is not the eternal Tao.";
const newText = text.replace(/told/g, "spoken");
console.log(newText);

이 코드는 “told”를 “spoken”으로 대체합니다.

8. JSON 객체를 문자열로 변환

JSON 객체를 문자열로 변환하거나 그 반대로 변환하는 것은 자주 필요한 작업입니다.

let website = {
  name: "InfoWorld",
  url: "www.infoworld.com"
};

let myString = JSON.stringify(website);
console.log(JSON.parse(myString));

9. 간단한 날짜 연산

자바스크립트의 `Date` 객체로 날짜를 쉽게 다룰 수 있습니다.

const today = new Date();
console.log(today.getFullYear());

10. 숫자 만들기, 찾기, 세기

자바스크립트는 숫자를 잘 다룹니다. 다음은 몇 가지 예제입니다.

let pi = 3.14159;
console.log(Math.ceil(pi)); // 4
console.log(Math.floor(pi)); // 3
console.log(Math.max(100, 5, 10, 73)); // 100

Leave a Reply