본문 바로가기

Frontend

(48)
[ES6] ES6 클래스 Class 가 존재하기 전 prototype 특수변수 사용 기존 자바스크립트 문법은 클래스가 없고 prototype이라는 특수변수를 통해 상속 기능을 사용했음. 함수를 사용해 클래스를 선언해 사용했음. 즉, 함수가 클래스의 생성자 같은 역할을 함. function Shape (x, y) { this.name = 'Shape'; this.move(x, y); } 프로토타입이라고 하는 특수변수를 사용해 각각의 메소드 이름에 함수를 정의하는 방식으로 사용했음. Shape.prototype.move = function(x, y) { this.x = x; this.y = y; }; Shape.prototype.area = fuction() { return 0; }; // new라는 생성자를 통해 선언 const s = new Shape(0, 0); console.log(..
[ES6] 배열 불변 내장 함수 const를 사용해도 배열 내장함수로 수정이 가능하다. 변경 가능한 함수들 push(...items), splice(s, c, ...items), pop(), shift() 대신 무결성 내장 함수를 사용하자. 기존 배열을 건드리지 않고 복사한 배열값을 준다. concat(...items), slice(0, s), .concat(...items. slice(s+c)), slice(0, len -1), slice(1) concat 추가해서 새 배열로 반환 const arr = []; const arr2 = arr.concat(1, 2, 3); const arr3 = arr2.concat(4) console.log(arr, arr2, arr3); -> [] [1, 2, 3] [1, 2, 3, 4] slice ..
[JavaScript] { JSON } -서버 통신의 시작 HTTP (Hypertext Transfer Protocal): 브라우저위에서 동작하고있는 웹사이트나 웹어플리케이션 같은 Client들이 Server와 통신하는 방법을 정의한 것. 하이퍼텍스트를 어떻게 서로 주고 받을 수 있는지를 규약한 프로토콜 중 하나. Client가 Server로 데이터를 Requst(요청)하면 서버는 그에 맞는 Response(응답)을 클라이언트로 보내주는 방식으로 진행됨. Hypertext는 하이퍼링크, 전반적으로 쓰이는 리소스들(문서, 이미지파일 등등)을 전부 포함. Http를 이용해서 서버에 데이터를 요청해 받아오는 방법으로 AJAX(Asynchronous JavaScript And XML)를 사용. AJAX는 웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술...
[자바스크립트] function 자바스크립트에 추가된 class는 자바처럼 pure한 objec가 아님. 가짜 object-oriented procedure language. input(parameter)를 받아 output하는 것이 함수 Function - fundamental building block in the program - subprogram can be used multiple times - performs a task or calculates a value 1. Function declaration funcion name(param1, param2) { body... return; } one function = one thing naming: doSomething, command, verb e.g. createCardA..
[자바스크립트] Class -객체지향언어 class ellie console.log(ellie.age); -> 20 ellie.speak(); -> ellie: hello! 2. Getter and Setter C언어는 procedure Language(절차지향언어) 함수를 호출해서 실행하는 프로그램. JAVA는 Object Oriented Language(객체지향언어) 오브젝트가 서로 interaction(상호작용)하면서 돌아가는 어플리케이션. encapsulation(캡슐화) 커피자판기 : class property : cup of coffee 동전넣고 putCoins , 커피만들고 makeCoffee : methods 2개 number of coffee는 integer이므로 마이너스 값을 가질 수 없으므로 Getter & Setter를 사..
[자바스크립트] Object 1. Literals and properies Primitive Type 변수 하나에 값 하나만 담을 수 있다. const name = 'David'; const age = 5; print(name, age); function print(name, age) { console.log(name); console.log(age); } 이렇게 하나하나씩 각각 적어야 하는데, 인자가 많아지게 되면 낱개로 추가해야 하는 것이 많아져 관리하기도 힘들고 로직을 정리하기도 힘듦. 그래서 const david = { name: 'David', age: 5 }; 이렇게 하나의 오브젝트로 관리하면 print(david); fuction print(person) { console.log(person.name); console...
COR와 Webpack DevServer Proxy Webpack Dev Server 웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구이다. 웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해준다. 매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여주기 때문에 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용된다. 웹팩 데브 서버의 특징 웹팩 데브 서버는 일반 웹팩 빌드와 다른점이 있다. "scripts": { "dev": "webpack serve", "build": "webpack" } 웹팩 데브 서버를 실행하여 웹팩 빌드를 하는 경우에는 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지..
[ES6] 전개 연산자 ...Array / [...배열이름] / ...Object ...array1 하면 array1배열 안의 모든 요소들을 나열하는 형태 var array1 = ['one', 'two']; var array2 = ['three', 'four']; var combined = array1.concat(array2); // concat으로 배열array 합치기 console.log(combined) -> ['one', 'two', 'three', 'four'] (합쳐진 새로운 배열 생김. 기존배열은 그대로 유지됨) 이걸 전개 연산자로 바꾸면 var combined = [array1, array2]; console.log(combined); ->[ ['one', 'two'], ['three', 'four'] ] 어레이 안에 어레이가 들어감 요소를 나열해서 하나의 배열로 합치..
Array의 push, concat 차이 const names = ['Andrew', 'Steve']; names.push('Jen') 하면 ['Andrew', 'Steve', 'Jen'] 기존 배열에 추가 됨 반면 여기에 names.concat('julie') 하면 ["Andrew", "Steve", "Jen", "Julie"] 추가된 새로운 배열이 생기고 기존 배열은 ["Andrew", "Steve", "Jen"] 유지됨
connect API connect( [mapStateToProps], [mapDispatchToProps], [mergeProps], [options] ) connect는 react-redux의 내장API. React Component를 Redux Store에 연결해 줌. 이 함수의 리턴값은 특정 컴포넌트 클래스의 props를 store의 데이터에 연결시켜주는 또 다른 함수를 리턴한다. 리턴된 함수에 컴포넌트를 인수로 넣어 실행하면, 기존 컴포넌트를 수정하는게 아니라 새로운 컴포넌트를 return한다. 인수: mapStateToProps(state, [ownProps]) (Function)store의 state를 컴포넌트의 props에 매핑시켜줌. ownProps인수가 명시될 경우, 이를 통해 함수 내부에서 컴포넌트의 pr..