귀하의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!