console.log가 자신의 코드를 저장하는 방법

내 부트캠프를 시작하면서 자바스크립트에 대해 내가 아는 두 가지가 있었습니다.

1. ";"사용 코드 줄을 구분하는 것은 선택 사항이지만 코드에 도움이 됩니다.
2.Console.log 모든 것.

대단한 지식인으로서 나는 두 가지 규칙을 모두 따르기를 거부했습니다. 이로 인해 여러 가지 상황에 갇히게 되었지만 console.log의 중요성에 대해 실제로 눈을 뜨게 된 것은 첫 번째 코드 도전에 실패했기 때문입니다.

그리고 같은 실수로부터 당신을 구하는 방법은 다음과 같습니다.

console.log()는 무엇입니까?

간단히 말해서 console.log()는 요청한 대로 콘솔에 출력합니다. Python과 같은 다른 언어에 익숙하다면 아마도 print()로 알고 있을 것입니다.

어떤 매개 변수를 사용합니까?

console.log()는 모든 매개변수를 사용합니다. 문자열, 배열, 객체에 사용할 수 있으며 JavaScript로 HTML 콘텐츠에 액세스할 수 있습니다. 참고로 console.log()는 콘솔을 여는 순간에 대해 찾고 있는 값을 출력합니다.

왜 사용해야 합니까?

간단한 예부터 시작하겠습니다. json 파일의 첫 번째 개체를 표시하도록 웹 사이트를 업데이트하려고 합니다. 우리는 제품의 이미지, 이름 및 설명을 표시하기를 원합니다.

이를 위해 다음과 같이 json 파일의 값을 html 콘텐츠에 할당하는 함수를 만듭니다.

//setting the element information 
function setElementInfo (element){

    //display the element name 
    const elementName = document.getElementById("detail-title");

    //display the element image
    const elementImage = document.getElementById("detail-image");


    elementName.textContent = element.name;
    elementImage.src = element.image;
}

좋아요, 멋져요! 가져오기 요청에서 얻은 데이터로 이 함수를 호출해 봅시다.

//requesting the information from the json file
fetch("http://localhost:3000/data")
//returning the response from the file and reading it to javascript
.then(response => response.json())
.then(data => {

    setElementInfo(data)

이제 HTML 페이지를 업데이트하고 이것이 어떻게 작동하는지 봅시다!



안 돼. 오류가 발생했고 데이터를 찾을 수 없다고 합니다. 이상 하네. 이것은 매우 개방적인 오류이며 우리가 실수한 줄이나 코드의 문제가 정확히 무엇인지 표시하지 않습니다. 그것에 대해 어떻게 더 알아볼 수 있습니까?

console.log() 입력

상태 사용자의 경우 반환 데이터를 로깅하여 올바른지 확인하십시오.

//requesting the information from the json file
fetch("http://localhost:3000/data")
//returning the response from the file and reading it to javascript
.then(response => response.json())
.then(data => {
    console.log(data)
}

이제 HTML 브라우저를 다시 로드하고 콘솔에 표시되는 내용을 살펴보겠습니다.



좋아, 우리는 데이터를 나간다! 하지만 잠깐만요. 모두 배열로 제공됩니다. 배열의 첫 번째 요소만 표시되도록 설정하면 됩니다. 어떻게 해야 할까요? 인덱스로 호출해 봅시다.

//requesting the information from the json file
fetch("http://localhost:3000/data")
//returning the response from the file and reading it to javascript
.then(response => response.json())
.then(data => {

    setElementInfo(data[0])

이제 HTML 페이지를 다시 로드합니다.

엄청난! 페이지가 로드될 때 표시할 첫 번째 요소가 있습니다. 감사합니다, console.log()!

이것에서 무엇을 가져갈까요?

너무 많은 요소와 기능으로 작업할 때, 특히 웹사이트를 구축할 때 데이터를 혼동하기 쉽습니다. 우리가 문자열이라고 생각했던 것이 배열로 판명되거나 html 함수에 대한 호출이 때때로 해당 객체 내부의 단순한 값 대신 전체 html 객체를 반환합니다.

console.log()는 데이터에 액세스하고 코드에 빌드하는 내용에 액세스하여 큰 프로그램에서 작업하는 동안 오류를 줄이고 좌절감을 줄이는 데 도움이 됩니다. 코드를 실행하는 동안 오류가 발생하고 처음부터 모든 것을 확인해야 하는 것보다 설정된 모든 데이터와 변수를 console.log()하는 것이 더 쉽습니다.

이 게시물이 코드를 작성하는 동안 console.log()의 중요성을 이해하고 프로그래밍을 개선하는 데 어떻게 도움이 되었기를 바랍니다.

출처:

console.log() - Web APIs - MDN