본문 바로가기

이론/Frontend74

JavaScript의 네이티브 (Natives of JavaScript) 지난 타입과 값 포스트에서 소개했던 자바스크립트에는 네이티브(Natives)라고 하는 몇 가지 내장 타입이 있었습니다. 이번에는 네이티브들에 대해서 간단히 알아보겠습니다. 자주 사용되는 네이티브들을 보면 다음과 같은 모양입니다. String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() 이 중 Symbol()은 ES6부터 추가되었습니다. 형태를 보면 아시겠지만, 네이티브들은 내장 함수입니다. String("test"); 의 형태로 생성자처럼 사용할 수도 있습니다. 다만 실제 생성자처럼 사용했을때는 원시값을 감싼 객체 래퍼의 형태로 생성됩니다. 생성된 객체 래퍼의 구조를 살펴보겠습니다. String { "문.. 2021. 2. 21.
JavaScript의 값 - 2 (Value of JavaScript) 특수 값 다음은 특수한 값에 대해 알아보겠습니다. 타입에 따라 주의해서 사용해야 할 값들입니다. 우선 타입과 값이 같은 경우입니다. undefined와 null은 타입이자 값 그 자체입니다. 여기서 null은 식별자가 아닌 키워드이므로 어떤 의미로 정의하여 사용하는지는 개발자의 마음이지만, null 이외의 값을 할당할 수는 없습니다. 그러나 undefined는 식별자이므로 임의의 값을 할당할 수 있습니다. undefined는 지역 변수의 이름으로도 사용할 수 있습니다. 그러나 가능하다고 해서 무조건 하는건 좋은 선택이 아닐 것 같습니다... 다음으로 살펴볼 것은 void입니다. 표현식 void는 모든 값을 undefined로 만들어버립니다. 기존 값에 영향을 미치지 않고 undefined를 출력시키고, .. 2021. 2. 19.
JavaScript의 값 - 1 (Value of JavaScript) 자바스크립트에는 여느 언어들처럼 배열과 문자열, 숫자 등을 값으로 가집니다. 그러나 일반 언어와는 다른 특성이 있어 이러한 값들을 사용할때 혼동을 줄 수 있기 때문에 정확하게 알고 사용하는 것이 중요합니다. 이번 시간에는 이런 독특한 특성을 가진 자바스크립트의 값에 대한 내용을 정리합니다. 배열 자바스크립트의 배열이 가진 특징 중 하나를 꼽으라면 무엇이든 값으로 들어갈 수 있다는 점을 꼽을 수 있습니다. 정수면 정수, 문자면 문자 등 한 배열에 들어가야 할 형식이 정해진 다른 언어와는 달리 숫자가 들어간 배열에 문자열을 추가하고, 심지어 객체나 다른 배열까지 집어넣을 수 있습니다. 특히 배열에 다른 배열을 집어넣는 방법은 자바스크립트에서 다차원 배열을 만드는 방법이기 때문에 잘 기억해두시는게 좋습니다. .. 2021. 2. 17.
JavaScript의 타입 (Type of JavaScript) 자바스크립트는 타입에 있어 굉장히 유연하게 동작하는 언어입니다. 변수에 들어있는 값이 숫자이든, 문자열이든 쓰임에 따라서 자동으로 변환되고 맞춰지기 때문에 상대적으로 다른 강타입, 정적 언어들에 비해 크게 문제를 느끼지 않는 경우가 일반적입니다. 하지만 그런 자바스크립트에도 타입은 분명히 존재합니다. 이번 포스팅에서는 자바스크립트의 타입에 대해 조금 더 자세히 알아보겠습니다. 타입의 종류 자바스크립트의 내장 타입은 7가지가 있습니다. null undefined boolean number string object symbol object를 제외한 나머지 여섯 개의 타입들을 원시 타입(primitives) 이라고 부릅니다. 값이 어떤 타입을 갖고 있는지 확인하려면 typeof 연산자를 사용하면 됩니다. 그러.. 2021. 2. 15.
동기와 비동기 (Synchronous & Asynchronous) 대학교 1학년 때의 일입니다. 가끔씩 졸업하신 선배님들이 학교에 방문하시는 일이 몇 번 있었는데, 오실때마다 동아리 부원들에게 밥과 간식거리를 사주시곤 하셨었습니다. 같이 이야기도 하고 함께 스터디를 진행할 사람을 찾기도 하시고 공부중 모르는 내용이 있으면 알려주시기도 하셨는데 그 날은 발표 자료를 꺼내시며 다른 쪽 스터디를 위해 준비했었던 자료지만 학부생들도 들으면 도움이 될 내용이니 한 번 구경이라도 해보길 권하셨습니다. 한창 전공 내용에 대해 호기심이 있었던터라 감사한 마음으로 수강신청(?)을 했고, 그 자리에서 비어있던 강의실 하나를 빌려 즉석에서 발표회가 열리게 되었습니다. 그 때 발표하셨던 내용이 바로 비동기에 대한 간단한 소개였는데, 사실 작동만 하는 프로그램 하나마저 제대로 짤 줄 몰랐던 .. 2020. 9. 18.
자바스크립트의 이벤트 버블링 (JS eventBubbling) 자바스크립트에 대해서 아무것도 모르고 코딩을 할때 (물론 지금도 전혀 모르지만), 한 요소에 이벤트를 주기만 하면 원인 모를 오작동이 있었습니다. 분명히 특정한 요소 하나에 클릭 이벤트를 주었는데 그 요소를 누르면 요소를 감싸고 있던 상위 요소의 이벤트까지 같이 발생해버리는 현상이었습니다. 그땐 보면서도 이게 왜 이러나... 싶었지만 이제서야 그 이유를 알게되어서 정리해봅니다. 먼저 상황을 되짚어 보기 위해 문제가 되었던 구조를 간단히 재현해보겠습니다. 이벤트 작동 test라는 id를 가진 div 아래에 btn 이라는 id를 가진 버튼이 있는 구조입니다. 요소를 클릭하게 되면 그 요소의 id값을 콘솔로 출력해주어 어떤 이벤트가 실행되었는지 확인할 수 있습니다. 버튼을 클릭해보니 btn의 이벤트가 먼저 실.. 2020. 9. 17.