javascript
[JavaScript] 클로저(Closure)
[JavaScript] 클로저(Closure)
2019.11.24정의 함수와 그 함수가 정의된 렉시컬 환경의 조합이다. 렉시컬 환경? 렉시컬 환경의 의미는 어휘적 범위를 정해주는 렉시컬 스코프를 통해 지정된 사용 가능한 변수들을 포함한 환경을 의미한다. 즉 렉시컬 스코프 안에 있는 변수들을 접근할 수 있는 환경이다. 사용 예시 예시 1 일반적으로 클로져는 함수안의 함수 형태로 정의된다. let obj = function(){ let i = 0; return { setI(k){ i = k; }, getI(){ return i; } } // 호출시 얻는 함수들이 외부 함수의 변수인 i에 대한 메모리를 가지고 있는다. } let x = obj(); x.setI(2); console.log(x.getI()); // 2 x.setI(4); console.log(x.getI()..
[Vue.js] 🖖 Vue.js 기초 지식
[Vue.js] 🖖 Vue.js 기초 지식
2019.08.22[Vue.JS 2.0] 소개 및 시작하기 Vue는 다른 프레임워크나 라이브러리에 비해 신생언어 가볍고, 복잡도가 낮아서 사용이 편하고 시작하기 쉽다. 이름처럼 View에만 초점을 두었기 때문에 다른 라이브러리나 프레임워크와 혼용하기 쉽다. 처음 시작하는 단계의 과정이 복잡하다. 한글화가 잘 되어있다. React보다 성능이 뛰어나다. React에서 JSX를 사용하는 것처럼 Vue도 비슷한 템플릿을 사용한다.(원한다면 JSX도 사용 가능하다.) 템플릿의 장점은 HTML파일에서 바로 사용할 수 있다는 점이다. SSR이 지원된다. HTML Hello, {{ name }} JS var app = new Vue({ el: '#app', data: { name: "geon" }, }); [Vue.JS 2.0] Dir..
[JavaScript] JavaScript와 Functional Programming 그리고 Closure
[JavaScript] JavaScript와 Functional Programming 그리고 Closure
2019.08.10Frontend Master의 'JavaScript: The Hard Parts'를 보고 정리한 글의 일부입니다. Functional Programming 이전까지 가장 유명한 코딩 패러다임은 OOP(Object Oriented Programming)이었다. JavaScript에서 Function의 종류는 다음과 같다. Pure Functions 전역 변수를 건드리지 말아야한다, parameter는 reference로 넘어가기 때문에 mutate되지 않는다. High Order Functions reusability를 위해 쓰이는 함수로, 내가 parameter를 집어 넣었을 때 비로소 완성되는 함수이다. Callbacks and Higher Order Functions Higher-order funct..
[JavaScript] JavaScript의 기본 원리
[JavaScript] JavaScript의 기본 원리
2019.08.01Frontend Master의 'JavaScript: The Hard Parts'를 보고 정리한 글의 일부입니다. Principles of JavaScript Global Execution Context ( 전역 실행 환경 ) const num = 3; function multiplyBy2 (inputNumber) { const result = inputNumber*2; return result; } const name = "Will" 해당 코드를 실행하면 어떤 일이 일어나는가? num이라는 변수 3을 저장한다. multiplyBy2라는 함수를 생성한다. ( 함수 안으로는 절대 들어가지 않는다 호출하지 않는 이상 ) name이라는 변수에 "Will"을 저장한다. JavaScript의 Thread Sing..
[JavaScript] Arrow Functions
[JavaScript] Arrow Functions
2019.06.01Arrow Functions Arrow Function은 짧은 함수와 바인딩하지 않은 this라는 두 요구에 따라 ES6(ES2015)에 처음 등장한 함수 표현 방식입니다. 짧은 함수 기존의 함수 표현 방식은 다음과 같았습니다. var names = [ 'minsu', 'suji', 'younghe', 'jiho' ]; materials.map(function(names) { return material.length; }); // [5, 4, 7, 4] 같은 함수를 Arrow Function으로 표현하면 다음과 같습니다. var names = [ 'minsu', 'suji', 'younghe', '..
[JavaScript] var, const, let JavaScript 변수 키워드
[JavaScript] var, const, let JavaScript 변수 키워드
2019.05.30Dynamic Typed Language C언어와 JAVA와 같은 Static Typed Language에서는 변수를 선언할 때, int나 char같은 자료형과 함께 선언합니다. 하지만 Python이나 JavaScript는 Dynamic Typed Language로 선언시 타입을 명시하지 않습니다. 파이썬의 경우에는 변수명만 선언하는 매우 간단한 식으로 만들어졌지만, JavaScript는 변수명 앞에 변수임을 알려주는 var를 붙여서 표현했습니다. 변수의 범위 (Variable Scope) 변수는 선언과 함께 해당 변수를 참조할 수 있는 공간적 영역을 가지게 됩니다. JavaScript에서 변수는 함수 범위(function-scoped)와 전역 범위(global-scoped), 블록 범위(block-sc..
[JavaScript] ES6, ES8, ES2017, ECMAScript 이게 다 뭐시여...?
[JavaScript] ES6, ES8, ES2017, ECMAScript 이게 다 뭐시여...?
2019.05.30JavaScript와 ECMAScript의 역사와 명명 규칙을 빠르게 알아봅시다. 이 글은 "JavaScript — WTF is ES6, ES8, ES 2017, ECMAScript… ?"를 번역한 글입니다. 잘못된 부분이 있다면 댓글 달아주세요. 몇몇 이유로 JavaScirpt를 배우는 것은 혼란스러울 수 있습니다. 이러한 머리글자가 더이상 당신을 혼란스럽게 만들지 마세요. JavaScript 빠르게 박살내기에서 ES 약어에 대해 하나하나 알아봅시다. ECMAScript는 뭐여? 여기 아주 옛날에 벌어진 일이 있습니다. JavaScript는 원래 JAVA의 성공에 물타기하기 위해 명명된 이름이었습니다. 넷스케이프가 그 후 표준화를 위해 JavaScript를 ECMA 국제화기구에 제안했습니다. 그 결과로..
[Node.js] 🤷♂️ npm(Node Package Manager)이 뭐길래?
[Node.js] 🤷♂️ npm(Node Package Manager)이 뭐길래?
2019.02.14🤷♂️ npm? npm은 Node Package Manager의 약어로 JavaScript를 위한 패키지 관리자입니다. JavaScript Runtime 환경의 Node.js의 그 Node입니다. 세계 최대의 소프트웨어 창고 npm은 세계 최대의 소프트웨어 창고로 80만개가 넘는 코드 패키지를 가지고 있습니다. 오픈소스 개발자들은 npm을 이용하여 그들의 소프트웨어를 공유합니다. 많은 회사들도 npm을 이용하여 사적인 개발을 진행하곤 합니다. SO EAAAAAASY npm은 자유롭게 사용 가능합니다. 퍼블릭한 소프트웨어 패키지들을 어떠한 가입이나 로그인 없이 모두 다운로드할 수 있습니다 CLI 이용 npm은 소프트웨어를 다운로드하거나 설치하기 위해 사용되곤하는 CLI(Command Line Client..
[JavaScript] 변수의 범위(variable scope)
[JavaScript] 변수의 범위(variable scope)
2019.02.11변수 범위(Variable Scope) 변수 범위는 특정 변수가 존재하는 영역입니다. 이를 통해 어디서 변수를 접근할 수 있는 지 알 수 있습니다. 변수(variable)은 지역 범위(local scope)와 전역 범위(global scope)를 둘 중 하나를 갖게 됩니다. 지역 범위(local scope, function-level) C 혹은 C++이나 JAVA같은 프로그래밍 언어와는 달리, JavaScript는 블록 수준(block-level)의 범위를 가지고 있지 않습니다. 대신 JavaScript는 함수 수준(function-level)의 범위를 가집니다. 함수 안에서 정의된 변수는 지역 범위(local scope)를 가지며, 해당 함수와 그 내부 함수에서만 접근 가능합니다. 내부 함수에서의 외부..
[Node.js] 🤷♂️ Node.js란 무엇인가?
[Node.js] 🤷♂️ Node.js란 무엇인가?
2019.02.10Node.js란 무엇인가? Node.js는 구글 크롬의 자바 크롬의 JavaScript 엔진(V8 Engine)으로 빌드 된 JavaScript 런타임입니다. 👉 JavaScript 엔진과 JavaScript 런타임의 차이? JavaScript는 일반적으로 크롬(Chrome)과 같은 브라우저에 내장되어있습니다. 그래서 그 동안 JavaScript는 브라우저에 종속되어 있었습니다. 이는 콘솔에서 JavaScript 명령어를 쳐보시면 확인 할 수 있습니다. JavaScript를 크롬(Chrome)같은 브라우저에서만 쓰는 것이 아닌 브라우저 밖. 즉, 내 컴퓨터에서 다양한 용도로 확장하기 위해 만들어진 것이 바로 Node.js입니다. Node.js를 이용하면 Python과 같이 내 컴퓨터에서 File Syst..
자바스크립트 엔진(JavaScript Engine)과 자바스크립트 런타임(Javascript Runtime)의 차이
자바스크립트 엔진(JavaScript Engine)과 자바스크립트 런타임(Javascript Runtime)의 차이
2019.02.10⚙ 자바스크립트 엔진(JavaScript Engine)자바스크립트 엔진은 파싱과 JIT 컴파일을 하는 머신을 제공해야합니다.자바스크립트로 쓰여진 스크립트로 기계가 실행가능한 과정을 만들어내는 과정을 할 수 있어야합니다. 대표적인 예시는 Google V8 엔진이 있습니다. 🗜 자바스크립트 런타임(JavaScript Runtime)자바스크립트 런타임환경은 프로그램에 실행동안 사용 가능한 내장된 라이브러리를 제공합니다. 따라서 만약 당신이 브라우저 안에서 윈도우 오브젝트나 DOM API를 사용하고자한다면, 이 과정에 브라우저의 JavaScript 런타임 환경(Runtime Environment)이 포함될 것입니다. Node.js 런타임(runtime)은 Cluster와 FileSystem API들 같은 다른 ..
[JavaScript] 🤳 JavaScript로 정규표현식을 이용한 검색창 구현하기
[JavaScript] 🤳 JavaScript로 정규표현식을 이용한 검색창 구현하기
2019.02.10🤳 Day6 - JavaScript로 정규표현식을 이용한 검색창 구현하기JavaScript 30의 여섯 번째 프로젝트는 정규표현식을 이용하여 검색창을 구현하는 프로젝트입니다.😃 HTML 코드12345678910111213141516171819 Type Ahead 👀 Filter for a city or a state Colored by Color Scriptercs 😃 CSS 코드1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677html { box-sizing: border-box; backgrou..