Front-End26 Node.js ✅ Node.js란? 간단히 말하자면, JavaScript 런타임이다. 런타임은 어떤 프로그래밍 언어가 동작할 수 있는 프로그램을 뜻한다. 즉, Node.js는 자바스크립트를 구동시킬 수 있는 프로그램이란 뜻이다. 평소에 아무 생각없이 쓰고 있던 웹 브라우저(크롬, 파이어폭스 등..)도 런타임이다! Node.js 공식 사이트에서 내린 Node.js의 정의는 다음과 같다. Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임입니다. Node.js는 이벤트 기반, 논 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생테계이기도 합니다. 그럼 왜 Node.js를 사용할까? 예전에는 자바.. 2021. 1. 11. ES6 문법 공부를 하면서 나도 모르게 편하게 사용되는 것들이, 알고보니 ES6이 도입되고나서부터 사용되는 것들이 정말 많았다. 아무 생각없이 사용하던 것들에 대해 복습 겸 공부 겸 개념정리 겸 es6 문법에 대해 정리를 해보려고 한다! ✅ ES6이란? ECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전이다. ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트라고 한다. 여기서 ECMAScript란? 자바스크립트 언어의 표준 규격을 의미 ES6은 새로운 기능들을 많이 추가했는데 이중에 자주 배웠던 것을 우선적으로 알아볼 것이다. ECMAScript 6 에 추가된 기능 let + cons.. 2021. 1. 9. 회원 가입 (feat. 유효성 검사) 유효성 검사(validation) 유효성 검사란, 간단히 말해 어떤 데이터의 값이 유효한지, 타당한지 확인하는 것을 의미한다. 평소에 아주 쉽게 접하는 회원 가입에서 유효성 검사를 이용한다고 한다. ID는 8 글자 이상(영문, 숫자만 포함) 비밀번호는 8 글자 이상(특수 문자, 영어, 숫자 3가지를 포함) 이메일은 꼭 이메일 형식(@를 꼭 입력!)과 같은 것들 등등.. 오늘은 지금까지 배웠던 HTML, CSS, JAVASCRIPT(+DOM)를 바탕으로 회원 가입 페이지를 만들면서 유효성 검사를 공부해보자. HTML, CSS로 UI구성(페이지 만들기) JAVASCRIPT로 유효성 함수 구현 UI 구성 요소에 함수 연결 조건을 만족하는 지 확인하는 피드백 추가 1. HTML,CSS로 UI구성(페이지 만들기).. 2021. 1. 9. 명령형 VS 선언형 프로그래밍 아직은 완벽한 개념을 이해하기 힘들어 간략하게만 정리해보려 한다. 이 사이트에서 설명을 잘해주는데 익숙하지가 않아 어렵게만 느껴진다 ㅠㅠ 이 사이트를 잘 번역해준 블로그를 많이 참고했다!(거의 복붙했다..) “You know, imperative programming is like how you do something, and declarative programming is more like what you do, or something.” 직역을 해보자면 명령형(imperative) 프로그래밍은 무엇을 어떻게 할 것인가에 가깝고, 선언형(declarative) 프로그래밍은 무엇을 할 것인가에 가깝다고 한다. 배우고 있는 자바스크립트 배열 예제를 통해 명령형 프로그래밍 방식과 선언형 프로그래밍 방식에 대.. 2021. 1. 8. 고차 함수_3 (feat. 추상화) ✅고차 함수란? 고차 함수(higher order function)는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말한다. 이 때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다. 그렇다면 우리는 왜 고차 함수를 사용해야 할까? ✅추상화(abstraction)란? 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것 즉, 요약 우리가 살면서 하는 지하철/버스 카드, 문자, 검색, 자동차 시동 걸기와 같은 모든 행동들은 단순해 보이지만 그 속에는 무수한 원인과 결과가 내포되어 있다. 하지만 우리는 신경쓸 필요가 없다. 왜냐하면 이러한 행동들은 전부 추상화의 결과이기 때문이다! 자바스크립트(외 많은 프로그래밍 언.. 2021. 1. 8. 고차 함수_2 (feat. 내장 고차 함수 filter, map) ✅고차 함수란? 고차 함수(higher order function)는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말한다. 이 때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다. 앞서 말했듯이 함수는 일급 객체라서 다음과 같은 특성을 갖는다. 변수에 할당(assignment)할 수 있다. 다른 함수의 인자(argument)로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 콜백 함수를 전달받은 함수는 이 콜백 함수를 호출(invoke)할 수 있다. caller는 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있고, 심지어 여러 번 실행할 수도 있다. 특히 콜백 함수는 어떤 작업이 완료되었을 때 호출되.. 2021. 1. 8. 고차 함수_1 (feat. 일급 객체, 호이스팅) ✅고차 함수란? 고차 함수(higher order function)는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말한다. 이 때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다. 우선 고차 함수에 대해 더 자세히 알아보기 전에 중요한 것이 있다. 어떻게 함수를 인자로 받거나 함수를 리턴할 수 있을까? 함수는 일급 객체(first-class citizen)다. 퍼스트 클래스 하면 보통 '특별한 대우를 받는다'라고 생각이 든다. 자바스크립트에도 특별한 대우를 받는 것들이 있는데, 이런 것들을 일급 객체라고 한다. 그 중 하나가 함수다! 함수가 자바스크립트에서 어떤 대우를 받느냐? 변수에 할당(assignment)할 .. 2021. 1. 8. Closure ✅클로저(Closure)란? 클로저는 자바스크립트 고유의 개념이 아니므로 ECMAScript 명세에 클로저의 정의가 등장하지 않는다. 클로저에 대해 MDN은 아래와 같이 정의하고 있다. “A closure is the combination of a function and the lexical environment within which that function was declared.” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 무슨 의미인지 잘 와 닿지 않는다. 위에서 중요한 키워드는 “함수가 선언됐을 때의 렉시컬 환경(Lexical environment)”이다. function outerFunc() { var x = 10; var inne.. 2021. 1. 8. Scope ✅ Scope란? 변수에 접근할 수 있는 범위 무슨말인고 하니, 우리가 아는 변수는 어떠한 환경 내에서만 사용가능하다고 한다. 이때, 변수가 어디서부터 어디까지 유효한지를 판단하는 범위를 뜻하는 것이 scope이다. 자바스크립트는 기본적으로, 함수가 선언되는 동시(lexcical)에 자신만의 범위(scope)를 가진다고 한다. 선언이다 선언! 호출이 아니다. 전역 범위(Global scope)와 지역 범위(Local scope) 전역 범위 코드 어디에서든지 접근할 수 있다. 지역 범위 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 접근할 수 있다. 모든 변수는 Scope를 갖는다. 변수의 관점에서 Scope를 구분한다면 다음과 같다. 전역 변수(Global variable) 전역에서 선언된.. 2021. 1. 8. 원시 타입 VS 참조 타입 자바스크립트 자료형(데이터)은 크게 원시 타입(Primitive Type)과 참조 타입(Reference Type)으로 나눌 수 있다고 했다. 둘 다 변수를 선언하고 데이터를 변수에 할당할 수 있는데 무엇이 다른 것일까? 각각 특징을 알아보면 다음과 같다. 원시 타입 - 값을 그대로 저장 참조 타입 - 값을 주소로 저장하고, 출력시 주소와 일치하는 값을 출력 보다시피, 값의 저장형태가 다른데, 이는 변수에 할당하는 과정에서 차이가 발생한다. 어떠한 차이가 있는지 알아보자. 🖋 원시 타입(Primitive Type) 선언(declaration) let a; let b; 핟당(assignment) a = 1; b = 1; 재할당 b = 2; console.log(b) // 2 처음 a, b에 1이라는 원시 .. 2021. 1. 7. 자료형(Data Type) 변수는 '데이터를 저장하고 읽고 쓰고 할 수 있는 공간' 이라고 했다. 그렇다면 이 데이터에는 어떤 종류가 있을까? ✅ 자료형(Data type) 이란? 프로그램에서 다룰 수 있는 값(데이터)의 종류 자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이를 기본 타입이라고 한다. 자바스크립트의 기본 타입은 크게 원시 타입(Primitive Type)과 객체 / 참조 타입(Object / Reference Type)로 구분할 수 있다. 🖋 원시 타입(Primitive Type) 원시 타입의 값은 변경 불가능한 값(immutable value)이며 값을 그대로 저장한다. 종류 boolean null undefined number string symbol (ECMAScript 6 에 추.. 2021. 1. 7. 변수(Variable) ✅ 변수(Variable)란? 데이터를 저장하고 읽고 쓰고 할 수 있는 공간 데이터는 프로그래밍에서 기본이라고 한다. 즉, 어떠한 정보든지 전부 데이터다. 이러한 데이터를 처리하기 위해서 데이터를 저장하는 공간이 있어야 하는데, 이때 저장하는 공간을 변수라고 한다. 변수를 사용하는 법은 다음과 같다. 선언(Declaration)과 할당(Assignment) var 변수명; // 선언(Declaration) 변수명 = 데이터; // 할당(Assignment) let 변수명 = 데이터; // 선언과 할당을 동시에 가능! const 변수명 = 데이터; 선언(Declaration)이란? 저장소를 확보 자바스크립트 엔진(자바스크립트 코드를 해석하는 도구)에게 '이름은 변수명이라고 하고, 데이터 저장공간을 만들어놔.. 2021. 1. 7. 이전 1 2 3 다음
