본문 바로가기

Language36

undefined 제대로 알기 (2) null의 등장 1편 👉🏻 undefined 제대로 알기 (1) undefined? empty? 🧐 1편의 첫 부분에서, Javascript에서 undefined 값이 반환되는 경우는 크게 두 가지가 있다고 언급했었다. 1. 사용자가 '명시적'으로 지정하는 경우 말 그대로 사용자가 '여기에는 값을 넣지 않을거야'하고 undefined를 통해 알리는 경우이다. 2. Javascript 엔진이 반환하는 경우 Javascript 엔진은 사용자가 어떤 값을 지정할 거라고 예상했는데 하지 않은 경우에 undefined를 반환한다. 이 두 가지 경우에서 undefined는 다른 의미로 정의되기도 하고, 동작하는 방식 또한 다르다. 어떻게 다르다는 건지 하나씩 살펴보자. 1편에서 empty와 비교했던 경우처럼, 먼저 1. 사용자가 .. 2021. 1. 10.
undefined 제대로 알기 (1) undefined? empty? 🧐 undefined? null? empty? 모두 '없다'는 뜻인 것 같기는 한데.. 뭐가 다른 건지, 어떤 상황에서 뭘 써야하는지 누군가 물어보면 명쾌하게 대답해주지는 못할 것 같았다. 배웠던 개념들을 복습하던 중에 이런 생각이 들어서 그냥 한 번 제대로 알고 넘어가자! 하고 자료들을 찾아봤다. 찾아보고 정리한 결과, 이 중 undefined가 가장 중요한 개념이라는 생각이 들어서 undefined를 위주로 empty나 null과 어떤 점에서 다른지 이야기해보려고 한다. 이 글은 기본적인 의미에 대한 설명은 생략하기 때문에 읽기 전에 이 문서를 먼저 한 번 보고오는걸 추천한다. undefined Javascript에서 undefined 값이 반환되는 경우는 크게 두 가지가 있다. 1. 사용자가 '명시적'.. 2021. 1. 10.
ES6 주요 문법 정리 (2) let/const, Iterators, Generators, Unicode, Modules 지난번 글에서는 ES6문법이 무엇이고 왜 사용하는지에 대해 간략히 소개하고 문법 중 일부인 Arrows, Classes, Enhanced Object Literals, Template Strings, Destructuring, Default Parameter, Rest, Spread 에 대해 살펴봤다. 이어서 이번에는 아래 표시한 부분들을 소개해보려 한다. ES6의 주요 문법을 정리하는 글은 이 글을 마지막으로 하고 여기서 소개하지 못한 나머지 개념들은 중요하거나 필요하다고 생각되면 하나씩 따로 블로깅할 예정이다. let, const 변수 선언 키워드인 let, const도 ES6 문법 중 하나이다. ES5까지는 오직 var을 통해서만 변수를 선언할 수 있었다고 한다..🙉 새삼 이 시대에 자바스크립트를 .. 2021. 1. 8.
ES6 주요 문법 정리 (1) Arrows, Classes, Enhanced Object Literals, Template Strings, Destructuring, Default Parameter, Rest, Spread ES6? 일단 ES6이 뭔지부터 살펴보자! ES6은 JavaScript 언어의 표준으로, ECMAScript 6의 줄임말이다. Javascript는 브라우저에서 간단히 사용할 목적으로 2주만에 설계되었는데 역시 짧은 시간에 설계된만큼 허술한 점이 많았다. 개발자들이 점점 개선을 요구한 덕분에(?) 2015년 ECMA2015버전(ES6)이 출시되었고, 기존보다 훨씬 간결하게 코드를 작성할 수 있게 되었다. (혹시 Javascript의 역사가 더 궁금하다면 이 영상에 잘 나와있으니 심심할 때 한번 보는걸 추천한다) 그래서 왜 사용한다고..? 🧐 기존 Javascript는 명확하지 않은 문법, 함수, 개념들이 난무했는데 ES6은 이를 보다 명확하게 바꿔서 개발의 생산성을 높였다. 그리고 진입장벽이 낮아져 다른.. 2021. 1. 7.
AJAX, 비동기, XMLHttpRequest AJAX AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다. MDN 문서에 나와있는 AJAX에 대한 설명이다. 간단히 말하면.. 이라고 하지만 간단하지 않은 것 같아서(ㅠㅠ) 다시 정리해봤다. AJAX는 일단 JavaScript의 라이브러리중.. 2021. 1. 6.
Javascript 소수점 오류 원인, 해결방안 자바스크립트에서 소수점 숫자 연산을 하면, 생각지도 못한 오류가 발생한다. 아래처럼 콘솔창에 0.1 + 0.2를 입력하면, 0.3이 아니라 0.30000000000000004 가 나오는 걸 확인해볼 수 있다. 이렇게 소수점 계산 오류가 발생하는 이유와 어떤 방법으로 해결할 수 있는지에 대해 알아보려고 한다. Javascript를 다루다보면 한번쯤은 마주칠 수 있는 오류이기 때문에 나중에 또 당황하지 않도록 기억하고 넘어가자! (Javascript에서만 있는 오류는 아님) 원인 왜 이런 오류가 생기는걸까? 우리는 보통 계산을 할 때 '10진법'을 사용하지만, 우리와 다르게 컴퓨터는 계산을 할 때 0과 1만 사용하는 '2진법'을 사용한다. 그래서 10진법을 2진법으로 바꾸는 변환과정이 필요한데, 소수 중 일.. 2021. 1. 3.
Iteration (2) for in문, for of문의 차이점 for ...in문과 for ...of 문은 언뜻 보면 둘다 객체 길이만큼 순회를 반복하기 때문에 비슷해보인다. 그래서 자꾸 사용할 때마다 헷갈리기도 해서 다시 한번 제대로 정리를 해두려고 한다. for …in 문 ✔️ 객체의 열거 가능한 '속성들'을 순회할 수 있도록 해줌 ✔️ 객체의 key값에 접근 가능, value값에는 직접 접근 불가 ✔️ 모든 객체에서 사용 가능 for ...in문은 객체의 모든 '열거할 수 있는 속성들'을 순회할 수 있도록 해준다. (keys는 열거 가능한 속성, valueOf는 열거 불가능한 속성 - 링크 참고) 그렇기 때문에 for ...in 문은 객체의 key 값에는 접근 가능하지만, value 값에 직접적으로 접근하는 방법은 제공하지 않는다. for ...in 문을 사용.. 2021. 1. 3.
Iteration (1) Iteration 프로토콜, Iterable / Iterater Iteration Iteration는 사전 뜻 그대로 '되풀이'를 의미한다. 익숙하게 사용하는 for문, while문 같은 반복문이 모두 Iteration이라고 볼 수 있다. 보통은 아래와 같은 방식으로 배열의 요소를 확인하곤 한다. Javascript에서는 Array, String, Map, Set 등의 객체들에 이런 반복문을 적용할 수 있는데 그 이유가 바로 'Iteration'에 있다. let arr = [1,2,3]; for(let i = 0; i < arr.length; i++){ console.log(arr[i]); } // 1, 2, 3 Iteration 프로토콜(미리 정해둔 규칙)에는 Iterable과 Iterator가 있는데, 이 두 프로토콜을 모두 지켜야 비로소 Iteration을 수행.. 2021. 1. 3.
비동기 호출 (3) Timer API 비동기 호출 (1) callback 함수 비동기 호출 (2) 동기(sync) vs 비동기(async) 비동기 호출 (3) Timer API 비동기 방식에 대해 배웠으니, 이제 비동기 호출 함수를 이용하는 Timer API에 대해 알아보도록 하자. 여기서 Timer란 일정한 주기마다 특정 함수를 실행시키는 함수를 의미한다. Timer API의 세 가지 대표적인 메서드(setTimeout, setInterval, clearInterval )는 어떤 식으로 사용할 수 있는지 간단히 소개하려고 한다. setTimeout(callback, millisecond) setTimeout은 일정 시간 후에 함수를 한번 실행하는 메서드이다. 타이머가 만료된 뒤, 함수나 지정된 코드를 실행하게 만들어준다. clearTime.. 2020. 12. 30.
비동기 호출 (2) 동기(sync) vs 비동기(async) 비동기 호출 (1) callback 함수 비동기 호출 (2) 동기(sync) vs 비동기(async) 비동기 호출 (3) Timer API Blocking vs Non-Blocking ✔️ Blocking 다른 작업을 하려면, 하던 작업을 멈춰야 함 요청에 대한 결과들이 동시에 일어남 ✔️ Non-Blocking 다른 작업을 확인만 하고, 미룰 수 있음 요청에 대한 결과들이 동시에 일어나지 않음 Blocking을 전화, Non-Blocking을 문자에 비유해서 생각하면 좀 더 이해하기 쉽다. 전화는 하던 작업을 멈추고 받아야하지만, 문자는 확인만 한 후 답장을 미룰 수 있다. 이제 이 두 가지 개념을 바탕으로 동기적 처리, 비동기적 처리에 대해 알아보려고 한다. (블럭&논블럭는 함수호출과 관련된 개념이고.. 2020. 12. 30.
비동기 호출 (1) callback 함수 비동기 호출 (1) callback 함수 비동기 호출 (2) 동기(sync) vs 비동기(async) 비동기 호출 (3) Timer API Callback 함수 callback함수는 '다른함수의 전달인자(argument)로 넘겨주는 함수'이다. parameter를 넘겨받는 함수는 callback함수를 필요에 따라 즉시 실행할 수도 있고, 나중에 실행할 수도 있다. 아래 예시에서는 B가 parameter로 쓰이는 'callback함수'이고, A는 B를 parameter로 쓰는 함수이다. ✔️ 즉시 실행 = synchronously (동기) ✔️ 나중에 실행 = asynchronously (비동기) function B(){ console.log('나중'); } function A(callback){ call.. 2020. 12. 30.
로컬 스토리지 (localStorage), JSON 브라우저 상에 데이터를 저장하지 않는 경우, 새로고침 버튼을 누르면 버튼을 누르기 전까지 입력했던 데이터가 초기화되어버린다. 데이터가 중요하거나, 브라우저를 껐다가 켜도 유지되도록 만들고 싶다면 '로컬 스토리지' 기술을 사용해야한다. 웹 스토리지 좀 더 큰 범주인 '웹 스토리지(web storage)'에 대해 먼저 알아보자. 웹 스토리지에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있다. 둘은 데이터가 '어떤 범위에서, 얼마나 보존되는지'에 차이가 있다. 간단히 말하면, 로컬 스토리지는 웹페이지 세션이 끝나도 데이터가 지워지지 않지만, 세션 스토리지는 웹페이지의 세션이 끝나면 데이터가 지워진다고 생각하면 된다. 세션 : 방문자가 웹 브라우저를 통해 웹 서버에 .. 2020. 12. 28.
반응형