망가진 웹페이지를 고쳐보세요
프론트엔드 디버깅 스킬을 키울 수 있는 문제들
배열에 추가해도 화면이 안 바뀌어요
메모 앱을 만들고 있습니다. 새 메모를 추가하면 console.log로는 배열에 추가된 것이 확인되는데, 화면에는 반영되지 않습니다. 새로고침하면 그때서야 추가된 메모가 보입니다.
클릭되지 않는 버튼
쇼핑몰 상품 페이지입니다. 고객이 구매하기 버튼을 아무리 눌러도 반응이 없다고 합니다. 버튼이 보이긴 하지만 클릭이 되지 않습니다.
입력이 안 돼요
회원가입 폼을 만들었는데, 이메일 입력란에 타이핑을 해도 글자가 입력되지 않습니다. 커서는 깜빡이는데 아무리 키보드를 눌러도 빈 칸 그대로입니다.
사용자 목록이 표시되지 않는 문제
서버에서 사용자 목록을 불러와서 화면에 표시하려고 하는데, '[object Promise]'라는 이상한 텍스트만 표시됩니다. API는 정상적으로 작동하는데 무엇이 문제일까요?
페이지가 멈춰버렸어요
대시보드 페이지를 만들었는데, 페이지를 열면 브라우저가 멈추고 'Too many re-renders' 에러가 발생합니다. 사용자 정보를 불러와서 화면에 표시하려고 했을 뿐인데 무엇이 문제일까요?
삭제하면 엉뚱한 게 사라져요
장바구니 페이지를 만들었는데, 첫 번째 상품을 삭제하면 마지막 상품의 수량 입력값이 사라집니다. 분명 첫 번째 상품만 삭제했는데 왜 다른 상품의 입력값이 영향을 받을까요?
리스트가 비어있어요
상품 목록 페이지를 만들었습니다. console.log로 확인하면 데이터는 분명히 있는데, 화면에는 상품이 하나도 표시되지 않습니다. 에러도 없고 그냥 빈 화면만 나옵니다.
콘솔에 경고가 떠요
프로필 페이지에서 다른 페이지로 빠르게 이동하면 콘솔에 'Can't perform a React state update on an unmounted component' 경고가 뜹니다. API 호출이 완료되기 전에 페이지를 떠나면 발생하는 것 같은데, 어떻게 해결해야 할까요?
타이머가 이상해요
5초 카운트다운 타이머를 만들었습니다. 시작 버튼을 누르면 5에서 0까지 1초마다 줄어들어야 하는데, 5에서 4로 한 번 바뀌고 그 뒤로는 계속 4만 표시됩니다. 무엇이 문제일까요?
카운터가 1씩만 증가하는 문제
사용자가 '+3 증가' 버튼을 누르면 카운터가 3씩 증가해야 하는데, 실제로는 1씩만 증가합니다. setState를 3번 호출했는데 왜 1번만 적용될까요?
복잡한 Todo 앱의 여러 버그
Todo 앱을 만들었는데 여러 가지 문제가 있습니다. 1) 완료 버튼을 눌러도 상태가 바뀌지 않고, 2) 삭제 버튼을 누르면 엉뚱한 항목이 삭제되고, 3) 새 할일을 추가해도 목록이 업데이트되지 않습니다.
검색어가 업데이트되지 않는 문제
검색창에 입력한 키워드로 실시간 검색을 하려는데, 처음 입력한 검색어로만 검색되고 이후에 검색어를 바꿔도 결과가 업데이트되지 않습니다.