오늘 내가 공부 한 것.
- 오늘은 React 공부를 위해 노마드 코더 강의를 들었다. 스파르타 강의를 들으려고 했지만, 도저히 이해가 가지 않아서 과제는 어느정도로만 해놓고 React에 대해서 이해하는 방향으로 가려고 한다.
오늘 배운 내용 정리.
- 원하는 값을 가져오고 싶을 때 ${변수명}을 사용한다.
<!DOCTYPE html>
<html>
<body>
<span>Total clicks :0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span")
function handleClick() {
counter = counter +1;
span.innerText = `Total clicks :${counter}`
}
button.addEventListener("click",handleClick )
</script>
</html>- 백틱을 쓰면 중간에 +로 문자열을 만들지 않을 수 있다.
- React JS는 모든것이 Javascript로 시작해서 HTML이 된다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root")
const span = React.createElement(
"span",
{id: "sexy-span"},
"Hello I'm a SPAN"
);
ReactDOM.render(span, root )
</script>
</html>- 함수는 반드시 카멜케이스(CamelCase)를 지켜줄 것! 안그럼 작동을 안함. onMouseEnter, onClick.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root")
const h3 = React.createElement("h3",{
onMouseEnter : () => console.log("mouse entered"),
},"Hello I'm a SPAN" );
const btn = React.createElement(
"button",
{onClick: () => console.log("im clicked"),},
"Click Me");
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root )
</script>
</html>느낀점
- 강의를 보며 열심히 따라쳤다. 이해는 고사하고 강의에 있는 내용과 내가 쓰고 있는 코드가 어디가 다른지 거의 틀린 그림 찾기를 했다.
(이럴거면 속기사 자격증이나 따고올걸...) - 쓰면서도 이게 무슨 의미가 있는 과제 제출인가 했다. 이해하지 못하고 따라만 쓰는게 나한테 어떤 발전을 주는지 의심이 커져갔다.
- 다행인건, 다른 분들도 상황이 크게 다르지 않았다는 점이다. 물론 계중에는 뛰어난 실력으로 과제를 마무리한 분들도 있었지만, 그래도 다수의 분들은 상황이 비슷한듯 했다.
- 한줄을 짜더라도 왜 이걸 짰는지 말할수 있으려면 어쨋든 내가 그 코드를 이해해야 하는 것이 중요한 것 같다.
오늘의 한줄
조금 늦더라도 이해를 반드시 하고 가자.
나중에 모른다고 처음으로 돌아오면 그게 더 큰일이다.
아코 자네 개발이 하고 싶나