Web/JavaScript
[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 국제화기구에 제안했습니다. 그 결과로..
[Web] 🍪 Cookie와 Web Storage
[Web] 🍪 Cookie와 Web Storage
2019.03.08웹페이지에서 클라이언트 측에서 중요한 데이터를 저장하는 방법은 크게 Cookie와 Web Storage 두 가지 방식이 있습니다. 모두 문자열(String)으로만 값을 저장할 수 있습니다. 🍪 Cookie Cookie는 정보를 HTML header를 통해 서버와 통신하고, 작은 데이터를 저장할 수 있습니다. Cookie는 주로 서버가 유저를 기억하기 위한 수단으로 사용됩니다. 예시 웹페이지에서 ID는 123이라고 Cookie를 저장해놓으면, 다음에 유저가 접속했을 때 서버가 ID에 해당하는 Cookie를 읽어 유저가 ID 123에 해당하는 유저라는 것을 확인하는 식입니다. 📦 웹 스토리지 / Web Storage HTML5에서 표준으로 지정되었으며, Local Storage와 Session Storage..
[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들 같은 다른 ..
웹 사이트(website)와 웹 애플리케이션(webapplication) 뭐가 다를까?
웹 사이트(website)와 웹 애플리케이션(webapplication) 뭐가 다를까?
2019.02.10웹 사이트(website)와 웹 애플리케이션(webapplication) 특별한 경계없이 마구잡이로 혼용돼서 쓰이는 느낌이 있는 두 용어의 차이는 무엇일까요? ❗ 주의용어의 정의라는 것이 그렇듯이 전적으로 주관의 영역에 해당됩니다. A에게는 웹 사이트라고 생각한 곳이 B에게는 웹 애플리케이션이 될 수도 있습니다. 여기서 설명드린 차이는 보편적인 경우에 대해서만 설명하고 있습니다. 웹 사이트는 정보제공적 성격이 강하다.웹 사이트는 해당 웹의 컨탠츠로 정의된다고 할 수 있습니다. 웹 사이트 안에 있는 컨탠츠들이 본질인 것이죠. 따라서 웹 사이트에서 사용자가 할 수 있는 것은 페이지를 돌면서 정보 및 컨탠츠를 일방적으로 얻어가는 것밖에 할 수 없습니다. 웹 사이트의 예시로는 정보제공적 성격을 띄는 뉴스 사이트..
[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..
[JavaScript] 🖼️ JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기
[JavaScript] 🖼️ JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기
2019.02.05🖼️ Day5 - JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기JavaScript 30의 다섯 번째 프로젝트는 Flexbox를 이용한 이미지 갤러리 만들기 프로젝트이다. 😊 HTML 코드123456789101112131415161718192021222324252627282930313233343536373839404142434445 Flex Panels 💪 Hey CAT Dance Give CAT Receive Experience CAT Today Give CAT You can Life CAT Motion Colored by Color Scriptercs🎨 CSS 코드1234567891011121314151617181920212223242526272829303132333435363738..
[JavaScript] 💪 Array관련 Method 완전정복 1탄
[JavaScript] 💪 Array관련 Method 완전정복 1탄
2019.02.05💪 Day4 - Array관련 Method 완전정복JavaScript 30의 네 번째 프로젝트는 프로젝트는 아니고, 잠시 공부시간이다. Array와 관련된 Method에는 무엇이 있는 지, 예제를 통하여 확인해보자 😃 HTML & JavaScript 코드 콘솔에 결과 값들이 출력 되어있다. 💁 💪 Array 관련 Method 1. filter()123const arr = [1,2,3,4,5]arr.filter( el => el el * 2 ) // [2,4,6]arr // [1,2,3] 원본이 바뀌지 않음csmap은 모든 요소를 특정 조작을 가한 데이터로 수정하여 새로운 배열을 만들어줍니다. 3. sort()123const arr = [3,20,12,1,4]arr.sort() // [1, 12, 20, ..