Every step counts

Node.js Node.js란? 자바스크립트는 브라우저를 조작하는 유일한 언어지만 브라우저 밖에서는 구동 불가 구동을 위한 런타임 환경인 Node.js로 인해 브라우저가 아닌 환경에서도 구동할 수 있게됨 Chrome V8엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경을 제공 Server-Side-Programming 또한 가능해짐 NPM(Node Package Manage) 자바스크립트 패키지 관리자 Python에 pip가 있다면 Node.js에는 npm pip와 마찬가지로 다양한 의존성 패키지를 관리 Node.js의 기본 패키지 관리자 Node.js 설치 시 함께 설치됨 Vue CLI Vue 개발을 위한 표준 도구 프로잭트의 구성을 도와주는 역할 확장 플러그인, GUI, Babel등 다양한 t..

computed Vue instance가 가진 options 중 하나 computed 객체에 정의한 함수를 페이지가 최초로 렌더링 될 때 호출하여 계산 계산 결과가 변하기 전까지 함수를 재호출하는 것이 아닌 계산된 값을 반환 10_computed.html에서 methods와의 차이 확인 methods VS computed methods 호출 될 때마다 함수를 실행 같은 결과여도 매번 새롭게 계산 computed 함수의 종속 대상의 변화에 따라 계산 여부가 결정됨 종속 대상이 변하지 않으면 항상 저장(캐싱)된 값을 반환 watch 특정 데이터의 변화를 감지하는 기능 watch 객체를 정의 감시할 대상 data를 지정 data가 변할 시 실행할 함수를 정의 첫번째 인자는 변동 후 data 두번째 인자는 변동..

Template Syntax 렌더링된 DOM을 기본 Vue instance의 data에 선언적으로 바인딩 할 수 있는 HTML 기반 template syntax를 사용 렌더링된 DOM: 브라우저에 의해 보기 좋게 그려질 HTML 코드 HTML 기반 template syntax: HTML 코드에 직접 작성할 수 있는 문법 제공 선언적으로 바인딩: Vue instance와 DOM을 연결 Text Interpolation 가장 기본적인 바인딩(연결) 방법 중괄호 2개로 표기 DTL과 동일한 형태로 작성 Text interpolation 방법은 모두 일반 텍스트로 표현 Raw HTML v-html directive를 사용하여 data와 바인딩 directive - HTML 기반 template syntax HT..

개요 Front-end 개발은 Web App 또는 Web Site의 UI/UX를 제작하고 관리하는 과정 Front-end 프레임워크와 라이브러리(React, Angular, Vue.js)를 사용하여 개발 효율성을 높잉고, Web App의 복잡성을 관리 Front-end 개발에 사용되는 주요 기술은 HTML, CSS, JavaScript Web App 이란? 웹 브라우저에서 구동되는 서비스 웹 페이지가 그대로 보이는 것이 아닌 디바이스에 설치된 App처럼 보이는 것 웹 페이지가 디바이스에 맞는 적절한 UX/UI로 표현되는 형태 SPA(Single Page Application) 이전까지는 사용자의 요청에 대해 적절한 페이지 별 template을 반환 SPA는 서버에서 최초 1장의 HTML만 전달받아 모든 ..

동기(Synchronous) 모든 일을 순서대로 하나씩 처리하는 것 순서대로 처리한다 = 이전 작업이 끝나면 다음작업을 시작 요청과 응답을 동기식으로 처리한다면 요청을 보내고 응답이 올 때까지 기다렸다가 다음 로직을 처리 비동기(Asynchronous) 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리하는 것(병렬적 수행) 시간이 필요한 작업들은 요청을 보낸 뒤 응답이 빨리 오는 작업부터 처리 예) Gmail에서 메일 전송을 누르면 목록화면으로 전환되지만 실제 메일 전송을 병렬적으로 뒤에서 처리됨 function slowRequest(callBack){ console.log('1. Initiating a process taking long time') setTimeout(function(){ ca..

Event 개요 Event란 HTML 요소에서 발생하는 모든 상황을 의미 예를 들어 사용자가 웹 페이지의 버튼을 클릭한다면 클릭에 대해 이벤트가 발생하고 우리는 이벤트를 통해 클릭이라는 사건에 대한 결과를 받거나, 조작을 할 수 있음 클릭 말고도 웹에서는 각양각색의 Event가 존재 키 입력, 브라우저 닫기, 데이터 제출, 텍스트 복사 등 Event object 네트워크 활동이나 사용자와의 상호작용 같은 사건의 발생을 알리기 위한 객체 이벤트가 발생했을 때 생성되는 객체 Event 발생 마우스를 클릭하거나 키보드를 누르는 등 사용자 행동으로 발생할 수도 있음 특정 메서드를 호출하여 프로그래밍 적으로도 만들어낼 수 있음 DOM 요소는 Event를 받고(”수신”) 받은 Event를 “처리”할 수 있음 Eve..

개요 “브라우저에서의 Javascript” JavaScript는 웹페이지에서의 다양한 기능을 구현하는 스크립트 언어 정적인 정보만 보여주던 웹 페이지를 데이터가 주기적으로 갱신되거나, 사용자와 상호 작용을 하거나, 애니메이션 등이 동작하게 하는 것을 가능하게 함 웹 페이지에서의 JavaScript 자바스크립트는 프로그래밍 언어로서의 역할도 가능하지만 클라이언트 사이드 자바스크립트 언어 위에 올라가있는 기능들은 더 다양 API라고 부르는 이 기능들은 자바스크립트 코드에서 사용할 수 있는 것들을 더 무궁무진하게 만들어줌 이 API는 일반적으로 2개의 범주로 분류할 수 있음 Browser APIs Third party APIs 브라우저에 탑재되지 않은 API 웹에서 직접 코드와 정보를 찾아야함 Google m..

배열(Array) 키와 속성들을 담고 있는 참조 타입의 객체 순서를 보장하는 특징이 있음 주로 대괄호를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능 배열의 길이는 array.length 형태로 접근 가능 배열 메서드 reverse : 원본 배열의 요소들의 순서를 반대로 정렬 push & pop : 배열의 가장 뒤에 요소를 추가 또는 제거 unshift & shift : 배열의 가장 앞에 요소를 추가 또는 제거 includes: 배열의 특정 값이 존재하는지 판별 후 참/거짓 반환 indexOf: 배열에 특정 값이 있으면 첫번째 인덱스 반환. 없으면 -1 const numbers = [1,2,3,4,5] numbers.reverse() numbers.push(100) let a ..

함수 선언식 일반적인 프로그래밍 언어의 함수 정의 방식 함수 표현식 함수 표현식은 함수의 이름을 생략한 익명 함수로 정의 가능 const sub = function(num1, num2){ return num1 - num2 } sub(7,2) // 표현식에서 함수 이름을 명시하는 것도 가능. 이 경우에는 호출에는 사용되지 못함 인자 작성 시 ‘=’ 문자 뒤 기본 인자 선언 가능 const greeting = function(name = 'Anonymous'){ return `Hi ${name}` } greeting() // Hi Anonymous Spread syntax 전개 구문 배열의 경우는 요소, 함수의 경우는 인자로 확장 가능 // 배열과의 사용 let parts = ['shoulder', 'leg..

들여쓰기와 코드 불럭 JS는 2칸 들여쓰기 사용 블럭은 if, for 함수에서 중괄호 내부를 말함 세미콜론 세미콜론을 선택적으로 사용 가능 없으면 ASI(Automatic Semicolon Insertion)에 의해 자동으로 삽입됨 주석 // comment /* multiple lines of comment like this */ 변수와 식별자 식별자 정의와 특징 Identifier는 변수를 구분할 수 있는 변수명을 말함 식별자는 반드시 문자, $ 또는 밑줄로 시작 대소문자를 구분하며, 클래스명 외에는 모두 소문자로 시작 예약어 사용 불가능(for, if, function 등) camelCase: 변수, 객체, 함수에 사용 PascalCase: 클래스, 생성자에 사용 SNAKE_CASE: 상수(const..