-
[패스트캠퍼스] 프론트엔드 강의 5주 차 후기코딩/JS 2023. 4. 13. 14:41
-
드디어 이번 국비지원교육을 지원한 계기인 자바스크립트 파트를 제대로(?) 배워 볼 단계에 들어섰다. 이제부터는 복습 개념이 아니기에 두려움반 설렘반을 안고서 강의에 임했다. 학원시절, 단순 복붙을 하기만 했던 함수와 메소드들을 이번 강의를 통해 정확한 의미를 알게 됐을 때는 나름 뿌듯한 마음이 들기도 했지만, 기초 개념에서부터 도통 이해가 되지 않는 부분에선 많이 버벅거리기도 했다. 그러나 첫술에 배부를 수 없는 법... 새로운 내용을 한 번에 이해하는 것은 욕심이라고 생각했기에 일단, 꾸역꾸역 진도를 따라가는 데에 집중했다.-
그중에서 기억에 남는 수업 내용은 예전 포폴작업이나 클론코딩 때 실제로 적용해 본 적이 있었던 타이머 함수. 적용 당시 정확한 의미는 잘 모른 채 복붙 해서 사용했었기에 이번에 좀 더 집중을 해서 수업을 들었던 것 같다. 타이머 함수의 형식(?)은 꽤나 직관적으로 심플하지만, 그 안에 함수 세부 내용이 들어가면 복잡해 보인다. 실제로 처음 접했을 때에도 너무나 생소해서 어디를 만져야 될지 암담했었다. 하지만, 정말 함수의 형식과 구조를 제대로 이해하게 되면 반대로 쉽게 해석될 수 있음을 이번에 깨달았다.// 타이머 함수 // setTimeout(함수, 시간): 일정 시간 후 함수 실행 // setInterval(함수, 시간): 시간 간격마다 함수 실행 // clearTimeout(): 설정된 Timeout 함수를 종료 // clearInterval(): 설정된 Interval 함수를 종료 const timer = setTimeout(function() { console.log('heropy') }, 3000) // 클릭이벤트를 통해 타임아웃 함수를 종료할 수 있다. const h1El = document.querySelector('h1') h1El.addEventListener('click', function() { clearTimeout(timer) })
-
자바스크립트 내에서의 세미클론 생략.
원래 실행문(명령문)이 끝나면 세미클론을 통해서 명령이 끝났다는 것을 명시해줘야 하지만 아래의 내용들을 통해서- 코드 가독성을 위해 기본적으로 하나의 명령은 한 줄에 하나만 올 수 있게 작성하는 코드 컨벤션이 존재 (코드 관습이라고 한다...)
- 이런 코드 컨벤션은 한 줄에 하나만 명령이 들어가는 것이기 때문에, 명령이 끝났다는 표시 즉 세미클론을 붙이지 않더라도 한 줄에 하나의 명령어만 있다는 것이 전제되기 때문에 충분히 문제없이 동작할 수 있다. (굉장히 많은 경우, 자바스크립트를 해석하는 자바스크립트 엔진에서는 기본적으로 세미클론을 붙어있는 형태로 해석을 해서 동작을 시켜준다.)
- 또한, 자바스크립트를 파슬 번들러와 같이 기본적인 번들러를 통해서 압축과정을 거치면 또 자동으로 세미클론이 붙어서 결과가 나온다.
자바스크립트 작성 시 세미클론을 붙이지 않아도 충분히 동작할 수 있다는 것을 알 수 있다.
결론적으로 자바스크립트 내에서의 세미클론 생략은 정석은 아니지만 퍼포먼스 면에서 조금 더 편한 방법이고 대부분의 경우에 문제없이 잘 동작한다. 하지만, 특수한 경우에는 문제가 있을 수도 있기에 그런 경우에는 세미클론을 붙여준다고 한다.-
아쉬운 점
강사님께선, 프론트엔드 개발을 본격적으로 하게 될 때 하루종일 자바스크립트를 가지고 코딩을 하게 되면 몇십 줄에서 몇만 줄까지 매일같이 작성을 하게 될 때 매번 명령을 종료한다는 세미클론을 입력하는 것은 생각보다 고된 일이기 때문에 개인의 퍼포먼스 향상을 위해서라도 세미클론 작성을 권장하지 않는다고 하셨다. 물론, 이것도 실전 팁이라면 팁일 수 있겠지만... 나 같은 경우는 아직 자바스크립트의 언어와 방식이 익숙하지 않은 상황이라서 수업 내의 세미클론 생략은 좀 아쉬웠다. '실제는 이러하지만 지금은 배우는 단계이니 생략하지 않고 정석대로 진행하겠다' 해주셨으면 더 좋지 않았을까 하는 아쉬움이 남았다.-
'코딩 > JS' 카테고리의 다른 글
[패스트캠퍼스] 프론트엔드 강의 8주 차 후기 (0) 2023.05.02 [패스트캠퍼스] 프론트엔드 강의 7주 차 후기 (0) 2023.04.28 [패스트캠퍼스] 프론트엔드 강의 6주 차 후기 (0) 2023.04.21 [패스트캠퍼스] 프론트엔드 강의 4주 차 후기 (0) 2023.04.06 [패스트캠퍼스] 프론트엔드 강의 3주 차 후기 (0) 2023.03.29