위상 로그

안녕하세요. 제 블로그에 오신 것을 환영합니다! 저는 풀 스택 소프트웨어 개발을 배우기 위해 Javascript, HTML 및 기타 기술을 배우고 있으며, 지금까지의 지식을 축적하고 그 과정에서 배운 몇 가지 교훈을 공유하기 위한 방법으로 여기에 제 경험 중 일부를 문서화할 것입니다. 다른 새로운 코더들과 함께.

이 게시물에서는 지금까지 Javascript를 배우면서, 특히 첫 번째 대규모 프로젝트를 수행하면서 범했던 몇 가지 오류에 대해 논의할 것입니다. 내 프로젝트는 API에서 메이크업 제품에 대한 정보를 가져와 체계적이고 시각적으로 보기 좋은 방식으로 웹페이지에 게시합니다.

실수 #1: 최대한 자동화하지 않음
내 프로젝트에서 정보를 얻는 API는 큰 배열이므로 결국 프로젝트를 구성하기로 결정한 방법은 API에서 반환된 배열에서 forEach 메서드를 사용하고 각 요소에 대해 새 div HTML 요소를 동적으로 생성하는 것이었습니다. 각 메이크업 제품의 배열입니다. 아래 스크린샷의 10번째 줄부터 이 구조를 볼 수 있습니다.

이미지 설명

그러나 처음에는 프로젝트의 HTML 파일에서 이미 생성한 div HTML 요소에 API 배열의 각 요소를 할당하려고 했습니다. API의 정보를 기반으로 새 HTML 요소를 생성하는 대신 API 배열 요소와 일치할 것으로 알고 있는 div를 수동으로 생성해야 했기 때문에 이 방법은 매우 어려웠습니다. 이 전략은 시간이 많이 걸리고 오류가 발생하기 쉽습니다. 또한 API 배열 요소가 변경된 경우 내 초기 아이디어는 작동하지 않았을 것이며, 이로 인해 내 프로젝트의 다양성이 훨씬 떨어졌을 것입니다. div HTML 요소를 생성하는 비동적 방법은 명시된 이유 때문에 내 프로젝트에 적합한 선택이 아니었지만, 이런 방식으로 프로젝트를 시도하면서 배운 귀중한 교훈이 여전히 있다고 생각하므로 다른 실수를 공유하겠습니다. 이 게시물은 해당 코드에서 나옵니다.

실수 #2: 잘못된 신원
무언가가 작동하지 않는 경우 확인해야 할 한 가지 좋은 점은 변경하려는 코드의 측면이 생각한 것과 같은지 여부입니다. 해당되지 않는 방법을 사용하려고 했기 때문에 오류가 발생할 수 있습니다. 이러한 유형의 문제 해결에 도움이 되는 두 가지 도구는 console.log() 및 typeOf()입니다.
내 프로젝트의 초기 코드가 계획대로 작동하지 않을 때 두 가지를 모두 사용했습니다. console.log()와 for 루프를 동시에 사용하는 경우 하나는 for 루프 내부에, 다른 하나는 for 루프 외부에 배치하면 코드 실행이 중지되는 위치를 정확히 확인할 수 있어 도움이 될 수 있습니다.
아래 스크린샷에서 제가 어떻게 이 작업을 수행했는지 확인할 수 있습니다.

이미지 설명

나중에 thisDiv가 객체인지 확인하기 위해 console.log(typeOf(thisDiv))도 수행했습니다. 돌이켜보면 바로 위의 스크린샷은 아마도 작동하지 않았을 것입니다. product.id는 숫자일 가능성이 가장 높지만 thisDiv는 실제로 객체였기 때문입니다. 하지만 이 오류에도 불구하고 console.log() 및 typeOf()는 자신을 기반으로 다음 단계를 파악하는 데 좋은 도구였습니다.

실수 #3: 무언가를 잊어버리는 것은 존재하지 않을 수도 있습니다
때로는 생각과 다른 것을 변경하려고 해서가 아니라 존재하지 않는 것을 변경하려고 했기 때문에 코드가 깨질 수 있습니다. 내 프로젝트의 초기 방법을 작업하는 동안 thisDiv가 객체라는 것을 확신하고 나면 thisDiv.id가 인식되지 않는 이유가 혼란스럽습니다. 왜냐하면 해당 구문은 W3schools에 따라 객체 값을 얻는 유효한 방법이기 때문입니다( https://www.w3schools.com/js/js_objects.asp). 나는 15번째 줄에서 시작하는 if 문을 수정하고 product.id에 대한 thisDiv의 ID 키입니다.

이미지 설명

변경으로 인해 다음 오류가 발생했습니다.

잡히지 않은(약속 중) TypeError: 정의되지 않음 또는 null을 객체로 변환할 수 없습니다
Function.keys에서 ()
index.js:14:32
Array.forEach에서 ()
displayProdName(index.js:11:10)
index.js:6:21
Python 작업에서 for 루프의 첫 번째 요소가 존재하지 않거나 for 루프의 명령문을 실행하는 데 필요한 특성이 없는 경우 코드가 중단되고 반복이 수행되지 않는 경우가 있음을 발견했습니다. for 루프가 발생합니다. 이 프로젝트의 Javascript for 루프에서 비슷한 문제가 발생할 수 있다고 생각했습니다. i=0의 경우 12행에 있는 for 루프의 첫 번째 반복인 document.getElementById(0)가 존재하지 않았기 때문에 thisDiv가 존재하지 않았기 때문입니다. i의 첫 번째 반복에는 존재하지 않습니다. 따라서 console.log(Object.keys(thisDiv))는 작동하지 않았습니다. thisDiv는 객체가 아니어서 키가 없었기 때문입니다. 따라서 때로는 코드의 일부가 존재하지 않을 수도 있다는 점을 기억하면 코딩하는 동안 많은 시간을 절약할 수 있습니다.

이 세 가지 교훈은 제가 Javascript를 시작하면서 배운 많은 교훈 중 하나입니다. 이 내용이 도움이 되었기를 바랍니다!

위 내용은 위상 로그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!