드리프트의 코-자-경

목차 1. 호이스팅이란 2. 함수 범위(function scope) 변수: var 2.1. 호이스팅과 var 3. 블록 범위(block scope) 변수: let 3.1. 호이스팅과 let 4. const 4.1. const 호이스팅 5. 함수 선언(function declarations) 6. 클래스 선언 안녕하세요? 우리가 자바스크립트나 다른 랭귀지로 코드를 짤 때 제일 중요한 것 중 하나가 바로 변수인데요. 변수란 서로 상호 작용하는 작은 데이터 또는 논리 조각이라고 볼 수 있습니다. 이러한 변수의 활동으로 프로그램(애플리케이션)이 작동되는 것이죠. JavaScript 변수의 중요한 측면은 바로 그 변수에 액세스 할 수 있는 시점을 정의하는 호이스팅(Hoisting)이라 할 수 있습니다. 이제 본격..

목차 1. this는 어려워요! 2. 함수 호출(Function Invocation) 2.1. this 키워드는 함수 호출이다. 2.2. 엄격 모드(strict mode)에서의 함수 호출과 this 2.3. 내부 함수에서의 this 3. 메서드 호출(method invocation) 3.1 메서드 호출에서의 this 3.2. 객체에서 메서드 분리 4. 생성자 호출(constructor invocation) 4.1. 생성자 호출에서의 this 4.2. new 키워드를 생략했을 때 발생하는 문제 5. 간접 호출(indirect invocation) 6. 바인딩 함수(Bound function) 6.1 바인딩 함수 안에서의 this 6.2 타이트 컨텍스트 바인딩(Tight context binding) 7. ..

자바스크립트 개발자는 매일 배열(Array)을 다룹니다. 자바스크립트 배열은 컬렉션이기 때문에 우리가 쿼리 할 중요한 속성 중 하나는 항목 수입니다. 즉, Array.prototype.length입니다. JavaScript에서 길이가 항상 기존 요소의 수를 나타내는 것은 아니며 (희소 배열의 경우)이 속성을 수정하면 요소가 제거 될 수 있습니다. 이 속성 뒤에 숨은 마법을 알아 보겠습니다. 자바스크립트에서 정의하는 배열의 길이는 배열에서 가장 높은 인덱스보다 더 큰 양수의 32 비트 정수값입니다. 이 속성은 특정 배열 유형에 대해 다르게 작동합니다. 배열은 요소의 인덱스가 0에서 시작하는 연속적인 인덱스를 가질 때 조밀하다고 합니다. 예를 들어 [1, 3, 4]는 인덱스가 연속적이기 때문에 조밀합니다. ..

평소 JavaScript 코딩 할때 특히 피연산자의 유형이 다른 경우, 동등 또는 일치 연산자가 어떻게 작동되는지 이해하기 어려울 때가 있습니다. 정말로 문제인 것은 조건식에서 이런 버그가 발생되고, 심지어는 알아채지 못할때가 더 심각합니다. 여기서 동등 연산자는 "==" 처럼 이퀄기호가 2개 있는 것으로 영어로는 equality operator 라고 합니다. 반면에 일치 연산자는 "==="처럼 이퀄기호가 3개 있는 것으로 영어로는 identity operator 라고 합니다. 이 글에서는 동등 연산자(==), 일치 연산자(===)라는 명칭을 사용할 예정이오니 혼동하지 마시기 바랍니다. 이제 본격적으로 자바스크립의 동등, 일치 연산자에 대해 알아 보겠습니다. 일단 이 글에서 사용하는 용어에 대해 짚고 넘..

안녕하세요? 최근에 nodejs + express + mongodb 를 이용해서 간단히 user 관리가 되는 백엔드(backend) 서버를 만들었었는데 공유하고자 블로그에 남깁니다. 일단 서버는 라즈베리파이 3로 만든 개인 NAS 서버에서 돌렸기 때문에 그 부분에 대해서도 알려드리도록 하겠습니다. 라즈베리파이로 개인 NAS 서버 만드는 방법은 제 예전 블로그 글이 있으니 링크 부분 참고하시기 바랍니다. 1편. 라즈베리파이로 NAS 서버 만들기 2편. 라즈베리파이로 NAS 서버 만들기- ftp 3편.라즈베리파이로 NAS 서버 만들기 - 토렌트 서버 (transmission) 일단, 기본적인 npm 세팅을 해야 겠죠? mkdir mern-auth cd mern-auth npm init 프로젝트 이름을 mer..

안녕하세요? 오늘은 CSS Grid 레이아웃에 대해 예제를 통해 알아보겠습니다. CSS 그리드 레이아웃은 사용자 인터페이스 디자인에 최적화 된 2D 그리드 기반 레이아웃 시스템을 정의하는 CSS 모듈입니다. 또한 미리 정의 된 레이아웃 그리드에 자식 요소를 배치 할 수 있어 유연합니다. 또한, CSS 그리드 레이아웃은 현재 대부분의 최신 브라우저에서 지원되고 있습니다. 그리드 레이아웃을 사용하면 해당 마크 업을 변경하지 않고도 시각적 레이아웃의 구조를 대폭 변경할 수 있습니다. 미디어 쿼리를 CSS 속성과 결합하면 HTML 코드를 유지하면서 모바일 반응형 형식을 쉽게 추가 할 수 있습니다. 6 개의 박스를 이용해서 예제를 통해 CSS 그리드 레이아웃을 살펴 보겠습니다. 일단 HTML 코드는 다음과 같습니..

JavaScript가 모든 시나리오에 대해 기본적으로 제공하는 많은 이벤트에도 불구하고 우리 자신의 특정 요구에 맞게 자체 이벤트를 발생시키고 싶을 때가 있습니다. 우리가 그렇게 하기를 원하는 데에는 여러 가지 이유가 있습니다. 이벤트는 이벤트를 발생시키는 사물과 해당 이벤트를 수신하는 사물 (또는 사물) 사이에 좋은 수준의 분리를 제공합니다. 우리가 살고있는 이벤트 중심 세계에서 DOM 요소는 코드의 내부 작동에 대해 잘 알 필요가 없습니다. 이벤트에 의존함으로써 우리는 UI 나 코드에서 일을 깨뜨리지 않고 나중에 많은 정리를 하지 않고 일을 변경할 수 있는 상당한 유연성을 갖게됩니다. 이것이 내장 이벤트를 매우 유용하게 만드는 것입니다. 이것이 바로 우리가 만들고 실행하는 커스텀 이벤트를 유용하게 만..

자바스크립트 키보드 이벤트 HTML 문서에서 키보드로 작업하려면 숙지해야 할 세 가지 이벤트가 있습니다. 그 세 가지 이벤트는 다음과 같습니다. keydown keypress keyup 위 이벤트의 이름을 얼핏 보면 각 이벤트가 수행하는 역할에 대한 모호한 아이디어가 이미 있을 것입니다. 키보드의 키를 누르면 keydown 이벤트가 시작됩니다. 방금 누른 키를 놓으면 keyup 이벤트가 시작됩니다. 이 두 이벤트는 상호 작용하는 모든 키에서 작동합니다. 그리고, keypress 이벤트는 특별한 이벤트입니다. 언뜻 보기에는 아무 키나 누르면 이 이벤트가 시작될 거 같습니다. keypress 이름에도 불구하고 keypress 이벤트는 문자 (문자, 숫자 등)를 표시하는 키를 누를 때만 발생합니다. 문자 y와..

가장 기본적인 경우 이벤트 리스너는 단일 요소에서 시작된 이벤트를 처리합니다. 이런 말을 처음 들었다면 잠시 시간 내어 JavaScript의 이벤트 튜토리얼을 먼저 읽으십시오. cpro95.tistory.com/154?category=912319 [JS-중급편-이벤트] 1. 자바스크립트 이벤트 눈치채지는 못했겠지만, 대부분의 애플리케이션과 웹사이트는 가만히 있으면 그냥 그 자체로 지루합니다. 애플리케이션과 웹사트가 엄청난 팡파르와 돌풍을 일으키며 시작했지만, 우리가 그 cpro95.tistory.com 더 복잡한 것을 빌드할 때 "하나의 요소에 대해 하나의 이벤트 핸들러" 맵핑이 한계를 나타내기 시작합니다. 가장 일반적인 이유는 JavaScript를 사용하여 동적으로 요소를 만드는 데 있습니다. 생성중인..

자바스크립트를 작성하다 보면 어떻게 하면 코드가 원하는 시간에 딱 맞게 실행되도록 하는 게 중요합니다. 페이지 하단에 코드를 배치하고 나서 페이지가 로드되면 모든 게 끝이 아닙니다. 때로는 페이지가 로드되기 전에 특정 코드가 실행되지 않도록 해야 될 때도 있고, 때로는 페이지 상단에 코드를 넣는 경우도 있습니다. 페이지 로드 중 발생하는 문제 링크를 클릭하거나 또는 브라우저에서 URL을 입력한 후 Enter 키를 누르면 이 때 페이지가 로드됩니다. 보통은 페이지 완료까지 걸리는 시간은 매우 짧습니다. 페이지 로드와 페이지 로드 사이의 짧은 시간 동안 우리가 모르는 컴퓨터 관련 작업이 많이 발생합니다. 여기서 중요하게 봐야할 점은 HTML 페이지에 있는 모든 자바스크립트 코드가 실행된다는 것입니다. 코드가..