오늘의 JS 공부 기록
1. defer 의 중요성
아주 단순하게 <p> 태그 하나만 있는 HTML인데도, head 부분에 defer 없이 스크립트를 넣으니 “환영합니다”가 뜨지 않았다.
수업에서 “브라우저 로딩 전에 JS가 실행되면 오류가 발생할 수 있다” 라고 배운 덕분에 쉽게 원인을 찾았지만,
이렇게 간단한 구조에서도 defer 하나 때문에 오류가 나는 걸 직접 겪으니 웃기면서도 신기했다.
참고: 콘솔창에 뜨는
favicon관련 에러는 단순히 아이콘 파일을 못 찾아서 나는 거라 무시해도 된다. 나중에 당황하지 않게 기억해두자.
혼자 복습할 땐 이런 소소한 에러 메시지도 심장을 벌렁거리게 한다ㅋㅋ
2. 지금은 잘 쓰지 않는 코딩 문법
프론트엔드를 공부하면서 크게 느낀 점은, 최신 문법을 배우는 게 의외로 어렵다는 것.
(최신판)교재나 인터넷강의(심지어 유료강의도)에서 아직 쓰지 않는 옛날의 방식이나 문법을 다루고 있어서.. 종종 GPT에 교차검증을 하면서 공부해야 하는 재미와 어려움이 공존한다.
- 브라우저 벤더 프리픽스(prefix)
지금은 잘 쓰이지 않는 브라우저 벤더 프리픽스(prefix) 코드..
옛날 강의라서 그런가보다~ 하면서 그냥 알면 좋은 지식이니 하고 넘어갔다 (인터넷 강의에서는 이건 쓰는게 권장된다고 써야하는 것처럼 말씀하셨당..)
document.write()
교재에서는 document.write() 함수 예제가 있었으나 VScode상에서 가로줄이 쳐지길래 GPT에 물어봤더니
이런식으로 write()를 대체할 수 있는 함수를 두가지나 알려줬다. 이러면 또 그 두가지가 뭐가 다른지, 언제 어떻게 쓰는게 좋은지 물어봐야하고... 하하 ;ㅇ;
3. innerHTML vs textContent
- 단순 텍스트 출력 →
textContent(안전, 빠름)- HTML 태그도 적용해야 함 →
innerHTML
✅ innerHTML
- HTML 태그까지 해석해서 반영
- 문자열 안에
<b>,<span>같은 태그가 있으면 실제 HTML 요소로 렌더링됨 - 보안적으로는 XSS(스크립트 삽입 공격) 위험이 있음으로 사용자 입력값을 그대로
innerHTML에 넣는 건 위험함!
document.getElementById("msg").innerHTML = "<b>환영합니다</b>";
// 화면에는 굵은 글씨 "환영합니다" 가 출력됨
✅ textContent
- 태그를 그냥 텍스트로 취급.
- HTML 태그가 있어도 해석하지 않고, 문자 그대로 보여줌.
- 안전하게 순수 텍스트만 넣고 싶을 때 사용.
document.getElementById("msg").textContent = "<b>환영합니다</b>";
// 화면에는 <b>환영합니다</b> 라는 글자가 그대로 보임4. JS 문법 기초(작성 시 유의점!)
작성 기본
- JS는 대소문자 구분 엄격
- 가독성을 위해 한 줄에 한 문장 작성, 끝에는 세미콜론 권장
- 위 이유로 코드를 한 줄 작성한 후에는 세미콜론(;) 권장
- 따옴표(", ') 겹침 주의
- 괄호·중괄호 짝 맞춤 필수
변수 형별 유의
- 문자형 데이터에 HTML 태그를 포함하여 출력하면 태그로 인식함
- 변수 초기값은 값이 등록되지 않은 상태(undefined)
- Boolean() 매서드는 숫자 0과 null, undefined, 빈 문자("")를 제외한 모든 데이터에 true값 반환
공부 방법에 대한 생각
코딩 공부 툴 (VScode vs CodePen)
만약 세팅이 되어 있고 어느 정도 VScode에 익숙해진 상태라면, 코드펜보다는 VScode가 더... 좋은 것 같다!
JS를 공부할 때 유튜버 코딩앙마님께서는 코드펜을 이용해서 강의를 하시길래 나도 똑같이 코드펜을 이용해서 오늘 공부를 진행했다.
하지만 VScode에 확장기능인 이멧(Emmet)기능이 코드펜에서는 적용되지 않아서.. 매우 불편했다
(내가 아직 코드펜에서 쓰는 방법을 잘 모르는 걸 수도 있다..)
또한 실제로 작업을 할 때의 감을 VScode에서 더 가깝게 체득할 수 있기 때문에
결론: 초기 세팅만 완료된다면 VScode를 이용해서 공부하는 게 더 좋은 것 같음.
학습계획 관련
chatGPT의 도움을 받는 게 확실히 도움이 된다.
코딩의 발전 속도를 교재가 못 따라가는 경우도 있고, 기존에 알고리즘으로 인해 노출되는 강의는 대부분 3년전, 5년전 강의이기 때문에..
(그리고 나처럼 국비지원으로 받는 학원의 인터넷 강의는 대부분 최신이 아니라 예전에 제작된 강의인 경우가 ㅠㅠ)
학원의 커리큘럼을 최대한.. 충실하게 이행하고
공부한 내용 중 내가 부족한 부분이나 빠지는 부분을 교재를 한 번 더 훑어 보면서 '복습'에 대한 보조로 교재를 활용하는 게 좋은 것 같다.
그리고 유튜브 강의는 정말 강의의 난이도나 적합도의 편차가 큰데, 좋은 강의 채널을 발견해서 저장해 놓고 틈틈이 라디오 듣듯이 보는 게 학원의 커리큘럼을 소화하는 데 큰 도움이 되었다.
개인적으로 불면증이 심할 때가 있는데 그 때 코딩앙마님의 강의를 자장가듣듯이 듣고 또 듣고를 반복하면 수면제보다 더 확실하게 잠들 수 있어서 좋았다.
코딩앙마님 감사합니다 (_ _) 목소리가 넘.. 좋으세요..
부담스럽지 않으면서, 담백한 스승님의 음성 덕분에 전 오늘도 꿀잠 예약 > , <
