귀하의 JavaScript 코드가 형편없나요?

웹사이트를 작동시키는 언어인 JavaScript는 1995년 Brendan Eich에 의해 단 10일 만에 만들어졌습니다. 많은 사람들이 그 이상한 특징을 비난했음에도 불구하고 그것은 빠르게 인기를 얻었습니다. 시간이 지나면서 JavaScript는 현대 웹 개발에 필수적인 강력하고 유연한 언어로 성장했습니다. 그러나 많은 프로그래머들은 여전히 ​​느리고 위험하며 제대로 설계되지 않은 JavaScript 코드를 작성하고 있습니다.

프로그래머가 JavaScript 코드를 작성할 때 저지를 수 있는 몇 가지 일반적인 실수를 살펴보겠습니다. 또한 코드를 더욱 안전하고 이해하기 쉽게 만들기 위해 이러한 실수를 수정하는 방법도 보여줍니다.

1. 전역 변수와 오염된 네임스페이스

JavaScript는 매우 유연하므로 때로는 문제가 발생할 수 있습니다. 프로그래머는 실수로 코드의 어느 위치에서나 사용할 수 있는 변수를 생성할 수 있으며, 이로 인해 특히 대규모 프로젝트에서 예상치 못한 오류가 발생할 수 있습니다.

var user = "Admin"; // Declared in the global scope
function setUser() {
    user = "Guest"; // Accidentally overwrites the global variable
}
setUser();
console.log(user); // "Guest" - Unintended behavior

IIFE(즉시 호출 함수 표현식)를 사용하면 변수가 코드의 특정 부분 내에 숨겨져 코드의 다른 부분을 방해하는 것을 방지할 수 있습니다. 이렇게 하면 코드가 더 안전하고 관리하기 쉬워집니다.

(() => {
    let user = "Admin"; // Scoped to this block
    function setUser() {
        user = "Guest";
    }
    setUser();
    console.log(user); // "Guest" - Intended behavior
})();

2. 안전하지 않은 데이터 처리

잘못 작성된 JavaScript 코드는 때때로 비밀 정보를 노출하거나 사용자 입력을 적절하게 정리하지 못하여 XSS(교차 사이트 스크립팅) 공격과 같은 보안 문제로 이어질 수 있습니다.

const userInput = "<script>alert('Hacked!')</script>";
document.getElementById("output").innerHTML = userInput; // Wrong!

textContent를 사용하거나 입력을 적절하게 삭제하면 악성 스크립트가 실행되는 것을 방지할 수 있습니다.

const userInput = "<script>alert('Hacked!')</script>";
const sanitizedInput = userInput.replace(/</g, "<").replace(/>/g, ">");
document.getElementById("output").textContent = sanitizedInput;

3. eval()에 대한 과도한 의존

eval() 함수는 문자열에서 코드를 실행할 수 있기 때문에 위험합니다. 이는 해커가 악성 코드를 몰래 삽입하는 데 사용될 수 있습니다.

const userCode = "alert('Hacked!')";
eval(userCode); // Wrong!

eval()을 완전히 사용하지 말고 엄격한 제어 기능을 갖춘 함수와 같은 보다 안전한 대안을 사용하세요.

const userCode = "alert('Hacked!')";
// Avoid eval(); implement safer alternatives
try {
    const safeFunction = new Function(userCode); // Limited scope execution
    safeFunction();
} catch (e) {
    console.error("Execution failed:", e);
}

4. 약한 오류 처리

오류를 무시하거나 잘못 처리하면 앱이 다운되거나 개인 정보가 유출될 수도 있습니다.

const fetchData = async () => {
    const response = await fetch("https://api.example.com/data");
    return response.json(); // Assuming API always returns valid JSON
};

항상 응답을 검증하고 구조화된 오류 처리를 구현하세요.

const fetchData = async () => {
    try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) throw new Error("Network response was not ok");
        return await response.json();
    } catch (error) {
        console.error("Fetch failed:", error.message);
        return null; // Graceful degradation
    }
};

5. 하드코딩된 비밀

여기서 많은 초보 개발자가 실수를 합니다. API 키나 비밀번호와 같은 비밀 정보를 JavaScript 파일에 직접 저장하는 것은 코드를 보는 사람이라면 누구나 쉽게 접근할 수 있기 때문에 좋지 않은 생각입니다.

const API_KEY = "12345-SECRET";
fetch(`https://api.example.com/data?key=${API_KEY}`);

환경 변수(.env 또는 .env.local) 또는 보안 스토리지 솔루션을 활용하여 코드베이스에 비밀을 유지하세요.

var user = "Admin"; // Declared in the global scope
function setUser() {
    user = "Guest"; // Accidentally overwrites the global variable
}
setUser();
console.log(user); // "Guest" - Unintended behavior

---

좋은 JavaScript 코드를 작성하는 것은 단지 코드를 작동시키는 것만이 아닙니다. 안전하고 빠르며 이해하고 변경하기 쉬운지 확인하는 것도 중요합니다. 일반적인 실수를 수정하고 모범 사례를 따르면 지저분한 JavaScript를 깔끔하고 전문적인 코드로 바꿀 수 있습니다.

다음번에 JavaScript를 작성할 때 "내 코드가 형편없나요?"라고 자문해 보세요. 대답이 "예"라면 이제 개선할 시간입니다!

위 내용은 귀하의 JavaScript 코드가 형편없나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!