200924 TIL script element(= 훼이크)

journey·2020년 9월 24일
0

오늘은 script element에 대해 다시 한 번 배워서 적어보려고 한다. 사실 script element는 소재일 뿐이고 하고 싶은 이야기는 '쉽다고 중요하지 않은 것은 아니다.' 정도가 되겠다.

script element는 아래와 같이 쓰일 수 있다.

<script src='javascript.js'></script>
// or
<script>
	console.log('JS for JavaScript')
</script>

script tag 안에 들어가는 content는 주로 Javascript로 실행하고자 하는 코드나 실행하고자 하는 데이터, 즉 파일이 들어간다.
syntax를 보면 간단하다. 사용의 의미도 명확하다. 어떻게 틀릴려고 해도 틀리기 힘든 수준이다.

실수 그리고 반성

하지만 HTML 문서 상에서 나의 Javascript 파일이 실행되지 않았다. 월요일에 레이아웃을 마무리하고 바로 댓글 달기, 버튼 활성화 등등 필요한 기능을 Javascript로 만들었는 데, 계속해서 오류가 났다.

하하하...

화요일, 수요일 2일 정도 찬찬히 뜯어보며, 내가 만든 논리나 코드에 빠진 부분이 없나 다시 한 번 생각하고 구글 개발자 도구를 통해서 살펴보았는데 크게 잘못된 부분을 찾을 수 없었다. 최대한 단순하게 생각해서 명확하게 틀을 짜는 편인데 도저히 스스로 답을 찾을 수 없어서 멘토님에게 달려갔다.

2일 동안 내 스스로의 논리도 다시 살펴보고, 이런 저런 방향으로 시도해보고, Javascript에 대한 이해를 잘못하고 있는 것이 아닌가 생각해서 document도 보고, 기초부터 심화까지 살펴보아도 계속 오류가 나서 멘토님에게 달려갔다. JS의 DOM과 NODE 개념에 대해 다시 여쭤보고, 내가 생각한 논리도 확인 받고, 다시 처음부터 Javascript로 원하는 기능을 훨씬 더 단순하게 적어내었다. 그런데도 다시 오류가 나서 내가 원하는 기능이 제대로 작동하지 않았다.

감사해요 ES님!

너무 갑갑해서 옆에 계신 짝꿍분께 한 번 봐달라고 부탁을 드렸다. 스스로 개념 정리도 잘 하시고, 노트랑 펜으로 필기도 꼼꼼하게 잘 하시고, 직접 코드를 작성하며 경험치를 통해 배우셔서 정말 매일 실력이 느는 분이시다. 분명 내가 놓치는 것을 찾아주실 거라 믿음을 가지고 보여드렸더니, 변수값을 확인하시다가 나한테 바로 script의 위치가 어디에 있냐고 물어보셨다. 허헣... body opening tag 바로 밑에 있었다.

아! 그때 딱 기억이 났다. 예전에 codecademy에서 HTML, CSS, Javascript 코스에서 분명 script tag의 위치에 대해 간단하게 언급이 되어있었다. "script tag는 가급적이면 body closing tag의 바로 위에 위치 시키는 것이 좋다. 안 그러면 오류가 날 수 도 있다."
물론 논리나 알고리즘을 잘 파악하는 것도 중요하지만, 궁극적으로 그 논리를 구현해야 하는 웹 환경의 기본 중의 기본을 놓쳤다는 사실에 정신이 번쩍 들었다. 뒤이어 해결해야 했던 오류도 Javascript 파일의 문제가 아니라, button element 나 textarea element의 기본을 간과해서 생긴 거였다.

직접 해보며 개발을 배우자

웹이라는 환경은 신기하고 생소한 부분이 많다. 배울 수록 알쏭달쏭하다. 활용 범위도 넓고, 그에 따르는 기술도 정말 다양하다. 그냥 알고리즘 문제를 푸는 것과 다르게 실제로 웹 환경에서 서비스를 개발하는 것은 가만히 앉아서 생각만 정리한다고 되지 않는다. 직접 그 환경과 부딪혀보고 경험해야 더 나은 개발자가 될 수 있겠다는 생각을 했다. 최대한 많이 경험해보고 오류를 내며 배우자. 비록 오늘은 너무나도 사소하다고 여겨서 만든 실수에 다소 얼굴이 화끈거렸지만, 쉬운 것, 기초의 중요성을 무시하면 안 된다는 것을 깨달았다.

profile
J for Journey

1개의 댓글

comment-user-thumbnail
2020년 9월 24일

헤헤 좋아요👍☺️👍

답글 달기