반응형
회사에 들어와 처음 웹프로그래밍을 접하면서 자바스크립트에 대한 지식이 전무한 상태에서 무작정 남들이 작성한 코드를 토대로 감으로 프로그래밍을 했었다. 그 당시는 교육이수 중이라서 프로젝트 개발 시간도 부족한 나머지 따로 자바스크립트를 공부할 시간을 갖지 못했었다. 그래서였는지 조그마한 프론트 기능을 추가했을 때 사소한 문제들에 자주 부딪혔던 기억이 있다. 아직도 자바스크립트 공부가 많이 필요하지만 그 중 사소한 실수를 줄여 소중한 시간을 아낄 수 있는 기초 문법들에 대해 알고 넘어가 보려 한다.
자바스크립트??? 객체기반언어, 인터프린터 언어 자바스크립트는 브라우저 기반에서 실행되는 객체 기반 언어이다. 또한 인터프린터 언어로 컴파일 언어와는 반대로 컴파일 과정이 생략되고 실행 중에 바로 한줄 한줄 번역 해 가며 실행된다. 이렇듯 한줄 한줄 변환되기 때문에 컴파일 언어보다 실행 속도가 당연히 떨어지게 된다. 또한 디버깅 혹은 에러를 잡아 내기가 컴파일 언어보다 힘들다. 하지만 인터프리트 언어는 장점 또한 가지고 있는데 한줄 한줄 해석되는 언어이다보니 자신의 프로그램을 수정하거나 보완한 경우, 전체를 완선히 새로 'Recompile'할 필요가 없어 코드를 수정하고 실행해 즉각 테스트가 가능해진다. (작업중인 jsp파일의 소스코드를 수정하고 웹페이지를 통해 즉시 확인해 볼 수 있는 이유) 또한 웹 브라우저의 Script 엔진이 직접 코드를 해석하여 처리하므로 적은 시스템 부하와 환경에 독립적인 장점을 가지고 있다.
자바스크립트의 특징은???첫번 째, 자바스크립트는 객체 기반 언어로서 상속과 클래스가 존재하지 않는다.두번 째, 자바스크립트는 인터프리터 언어로서 클라이언트 웹 브라우저에 의해 해석되고 실행된다.세번 째, JavaScript는 HTML 문서 내에 기술되고 HTML 문서와 함께 수행된다.네번 쨰, JavaScript는 HTML에 연산, 제어 등 프로그래밍적인 요소를 추가하고, 클라이언트의 자원을 활용할 수 있게 한다.
HTML에서 자바스크립트의 위치는??? <head>??<body>??? 보통 JSP에서 스크립트의 파일을 <head>에 모아두는데 학습을 하다 보니 head에 모아두는 것이 좋지 않다는 걸 알게 되었다. 보통 브라우저는 HTML 태그를 위부터 아래로 순서대로 읽어가며 DOM Tree를 만들고 바로바로 화면에 렌더링을 한다. 그런데 도중에 <script>태그를 만나면 렌더링을 일단 중지하고 스크립트를 실행하고 나서 다시 렌더링을 시작하게 된다. 문제는 여기서 발생한다. 만약 선언되어 있는 스크립트 중에 실행하는데 오래걸리는 스크립트가 있을 경우 화면 렌더링은 그 시점에서 멈추게 되는데 이로인해 사용자는 제대로 로딩되지 않은 공백 화면을 오래 마주하게 되는 문제가 생길 수 있다. (이로인해 많은 사용자들이 뒤로가기 버튼을 누르거나 다른 페이지로 넘거가게 된다) 하지만 스크립트를 <body> 가 닫히기 전에 넣어주게 되면 이러한 문제를 해결할 수 있다.</body>바로 직전이나 </html>후에 스크립트를 넣어주게 되면 DOM이 다 로딩되고 수행되기 때문에 복잡한 로직 수행이 수반된 스크립트나 이벤트 처리들을 다수 포함하고 있는 스크립트는 <body>가 닫히기 전에 명시해 주는 것이 좋다. 하지만 <body>사이에서 <script>를 찾는 것이 번거롭거나 불편하다고 느낄경우 처음 head에 스크립트를 선언시 defer기능을 통해 문서가 다 로딩 된 후 스크립트를 읽도록 하는 기능도 지원하는 것으로 알고 있다.(추가적인 부분은 구굴에 찾아보길 바란다)
자바스크립트에서 기본 타입은??? 자바스크립트에서는 크게 Number, String, Boolean, Object, Null, Undefined의 타입이 존재한다. Object타입안에는 Function, Array, Date, RegExp(정규식)이 존재한다. 자바스크립트에서 사용되는 대부분의 데이터 타입은 객체로 존재하며 그에 따른 사용 또한 객체 기반이 될 수 밖에 없다.
자바스크립트에서 Nan은 무엇인가??? 자브스크립트를 짜다가 Nan이라는 단어를 접하고 이게 뭐지 했던 때가 있었다. Nan은 Not a Number의 약자로 말그대로 해당 하는 값이 숫자가 아니라는 뜻이다. 자바스크립트에서 해당 데이터가 NaN인지 검사해주는 isNaN()이라는 내장 객체가 존재하는데 isNaN()은 NaN인지 여부를 검사하는 함수임으로 NaN일 때 true를 반환한다.
자바스크립트에서 Null과 Undefined의 차이는???자바스크립트를 작성하다 보면 Undefined를 자주 접하게 될 것이다. 처음 Undefined를 접하게 되면 Null과 같은건가 하는 생각을 하게 되는데 둘은 다르다는 것을 알고 있어야 한다. 이 둘에 대한 차이를 정확히 이해하지 않고 스크립트를 작성하게 될 경우 사소한 부분에서 에러와 함께 시간을 많이 빼앗기게 될 것이다. 자바스크립트에서 null은 값이 없음을 나타내고 Undefined는 초기화(선언) 되지 않았거나 값이 할당되지 않았음을 나타낸다. Null은 개발자가 의도적으로 비어있는 값을 부여한 것이고 Undefined는 애당초 어떠한 값도 할당 되지 않은 것이다. 자바스크립트는 변수의 선언과 초기화를 동시에 하지 않아도 되는데 선언만 하고 초기화 되지 않은 변수는 초기화되지 않았거나 값이 할당되지 않았음을 표현하는 undefined라는 값을 할당받게 된다. 정리하자면 NULL은 변수가 참조하는 객체가 없음(null)을 나타내고 Undefined는 그 변수가 참조하는 객체를 아직 지정하지 않음(not Initialized)을 뜻하고 Undefined값을 가지는 변수는 할당을 통해 값을 가지고 이 값을 해제할 때 null타입이 되는 것이다.
자바스크립트에서 ===???프로그래밍을 하면서 '=='는 많이 접해보았을 것이다. 무엇을 비교할 때 많이 사용하는데 자바스크립트에서 멋도 모르고 '=='를 다른 언어에서 쓰던것 처럼 쓰게되면 큰코 다치는 날이 올 것이다.간단히 설명하자면 ==는 값만으로 체크를 하는 것이도 ===은 변수의 타입과 값을 모두 체크하여 비교하는 것이다.ex) x=3이라고 가정x==5 (false)x==3 (true)
x==="3" (false)x===3 true)가 되게 된다. 그럼 x=="3"을 하게 되면 결과는 어떻게 될까??? 상식대로라면 false를 뱉어야 하지만 true가 되게 되는데 자바스크립트의 ==는 형변환은 시도해 비교하게 되기 때문에 이와 같은 상황이 발생한다. 따라서 무작정 ==와 ===를 사용하게 되면 나중에 큰 문제에 직면하게 될 것이다. 반드시 차이를 정확히 이해하고 사용하기 바랍니다.
⊙ 자바크립트를 공부하는 입장으로서 가장 기본적인 내용에 대해 알아보았다. 다음 포스팅 '자바스크립트 이것만은 알고가자(Ver. 2)'에서는 자바스크립트에서의 Scope, Hoisting, Scope Chain, Closure에 대해서 알아보도록 하겠습니다.
반응형
'Programming > JavaScript' 카테고리의 다른 글
| vue js inside v-for pass data to modal component (0) | 2020.09.16 |
|---|---|
| [ Javascript ] 자바스크립트 ajax 크로스도메인 이슈(CORS) (0) | 2018.07.26 |
| [ jQquery ] jQuery플러그인으로 쿠키 다루기 (0) | 2018.07.23 |
| [JavaScript] 자바스크립트 이것만은 알고가자 Part.3 (0) | 2017.07.22 |
| [JavaScript] 자바스크립트 이것만은 알고가자 Part.2 (0) | 2017.07.22 |