1% 미만의 프로그래머만이 이 버그를 발견할 수 있습니다…
좋아요, 무슨 생각을 하는지 압니다. “이건 너무 인위적인 도전이야. 코드를 실행하지 않고 디버깅해야 하는 이유는 무엇입니까?” 🤔
글쎄, Waldo는 어디에 있습니까? 코드를 반복적으로 실행하지 않고도 버그를 발견할 수 있으면 많은 시간을 절약할 수 있습니다.
...특히 버그가 명백한 오류 메시지를 생성하지 않는 경우. (로직 버그를 디버깅하느라 몇 시간을 허비해야 했던 적이 있다면 무슨 말인지 알 것입니다!)
규칙
빠른 고지 사항
버그를 발견할 수 없다고 해서 당신이 나쁜 프로그래머라는 뜻은 아닙니다!
버그를 발견하는 눈을 갖는 것은 경험과 함께 제공됩니다. 점점 더 많은 코드로 작업할수록 더 모호한 버그를 포함하여 점점 더 많은 버그를 만나고 익숙해질 것입니다.
이 블로그 게시물 시리즈는 주로 교육용 리소스로, 일반 프로그래밍 언어의 좀 더 미묘하고 눈에 띄지 않는 동작에 대해 배울 수 있는 리소스입니다.
그렇게 말하면서 생각의 모자를 쓰고 다음 숨겨진 버그를 찾아보십시오! 🧢
텍스트 번역
이것은 JavaScript를 배우는 여정의 시작 부분에서 몇 년 전에 만난 버그입니다. 일부 텍스트를 번역하려고 시도하는 일부 HTML 및 일부 JavaScript를 포함하는 자체 포함 HTML 파일입니다.
<!DOCTYPE html>
<html>
<body>
<div id='text'>Hello, world!</div>
<select name="languages">
<option value="english">English</option>
<option value="french">French</option>
<option value="spanish">Spanish</option>
<option value="python">Python</option>
</select>
<button onclick='translate()'>Translate Text</button>
<script>
function translate() {
const selectedOption = document.querySelector('select[name="languages"]').value
text.innerText = {
english: 'Hello, world!',
french: 'Bonjour, monde!',
spanish: '¡Hola, mundo!',
python: 'print("Hello, world!")'
}[selectedOption]
}
</script>
</body>
</html>
이 코드는 div 요소의 일부 텍스트를 렌더링합니다. 그 아래에는 영어, 프랑스어, 스페인어 및 Python의 네 가지 언어 중에서 언어를 선택할 수 있는 드롭다운이 있습니다.
Yes, Python is a language; I didn’t specify they had to be spoken languages 😛
드롭다운 아래에는 클릭하면 14행에 정의된 translate() 함수를 호출하는 텍스트 번역 버튼이 있습니다. translate() 함수는 div의 텍스트를 "Hello, world!"라는 번역으로 바꿉니다. 드롭다운에서 선택한 언어로.
그러나 브라우저에서 이 코드를 실행하고 드롭다운에서 언어(영어 이외)를 선택하면 텍스트 번역 버튼을 클릭해도 아무 작업도 수행되지 않는 것 같습니다.
이 코드에는 버그가 있습니다. 그것이 어디에 있을 수 있다고 생각합니까? 🧐
몇 가지 힌트와 전체 솔루션은 https://dialect.so/blog/can-you-spot-the-bug-1에서 전체 블로그 게시물을 확인하십시오.
Reference
이 문제에 관하여(1% 미만의 프로그래머만이 이 버그를 발견할 수 있습니다…), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/leondreamed/less-than-1-of-programmers-can-spot-this-bug-1a6d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<body>
<div id='text'>Hello, world!</div>
<select name="languages">
<option value="english">English</option>
<option value="french">French</option>
<option value="spanish">Spanish</option>
<option value="python">Python</option>
</select>
<button onclick='translate()'>Translate Text</button>
<script>
function translate() {
const selectedOption = document.querySelector('select[name="languages"]').value
text.innerText = {
english: 'Hello, world!',
french: 'Bonjour, monde!',
spanish: '¡Hola, mundo!',
python: 'print("Hello, world!")'
}[selectedOption]
}
</script>
</body>
</html>
Yes, Python is a language; I didn’t specify they had to be spoken languages 😛
Reference
이 문제에 관하여(1% 미만의 프로그래머만이 이 버그를 발견할 수 있습니다…), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/leondreamed/less-than-1-of-programmers-can-spot-this-bug-1a6d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
