가운데 정렬 || css border-radius , display || js onclick 과 React onClick

이미지 가운데 정렬 3대장
display: block;
margin-left: auto;
margin-right: auto;

border-radius: 20px; // 박스의 꼭짓점을 완만하게
display: block; // 박스 보이기
display: none; // 박스 숨기기

---

<buttonlanguage-null"><button

정답

<button onclick="document.getElementById('alert').style.display='block';">버튼</button>

---

왜 js는 onclick 이고
React는 onClick 일까?

->
이런 차이는 React가 브라우저간 일관성을 유지하고, 성능을 향상시키기 위한 자체 이벤트 핸들링 시스템을 가지고 있기 때문입니다. 이 시스템은 모든 이벤트를 문서 레벨에서 리스닝하고 해당 리액트 컴포넌트에 분배합니다. 이는 이벤트 위임으로 알려져 있으며, 이를 통해 개별 DOM 노드에 이벤트 리스너를 붙이는 것보다 메모리를 절약하고 이벤트 핸들링에 대한 성능을 향상시킵니다.

---

<자주 겪는 에러들 >

1. JS 코드는 밑에 짜야합니다

자바스크립트는 html 조작하는 언어라고 했습니다.

근데 조작할 html이 위쪽에 있어야 조작이 잘 됩니다.

자바스크립트를 조작할 html 위에 작성하면 안됩니다.

왜냐면 컴퓨터가 html 파일을 읽을 때 위에서 부터 한줄한줄 읽는데

미리 html을 읽어놔야 조작이 가능하기 때문입니다.

2. 오타주의

에러메세지는 브라우저 개발자도구 Console 탭에 들어가면 나옵니다.