본문 바로가기

분류 전체보기

 (93)
[리액트] 커링 Currying 커링은 쉽게 말하자면 함수를 반환하는 함수 커링을 사용해야 하는 이유는 함수의 재활용 때문 function multiply(a, b) { return a * b; } function multiplyTwo(a) { return multiply(a, 2); // 함수 재활용 } 이를 응용해 n배 함수를 생성해주는 커링 함수를 만들 수 있다. function multiplyX(x) { return function(a) { return multiply(a, x); } } 화살표 함수로 표현하면, const multiplyX = x => a => multiply(a, x); 커링 함수의 사용 const multiplyThree = multiplyX(3); const multiplyFour = multplyX(4)..
[리액트] 함수형 컴포넌트에서 ref를 사용할 때에는 useRef라는 Hook함수를 사용. / 클래스형 컴포넌트에서는 콜백함수 of React.createRef라는 함수를 사용. // JavaScript 를 사용 할 때에는, // 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. // 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다. // 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 // 추가적으로 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해..
[ES6] 객체 확장 표현식과 구조 분해 할당 var obj = {}; // 객체 선언 var ram = 'other'; obj.a = 1; // a라는 키값에 1이라는 값을 선언 obj['a' + ram] = 1; // 키 값을 연산을 통해 사용하기 위해 [ ]를 사용해 문자값을 연산. 오브젝트에 연산된 키값에 1을 선언 obj[`a${ram}`] =1; // `백틱을 사용한 위와 동일한 표현 console.log(obj); -> {a: 1, aother: 1} 오브젝트 변수 선언하는 다른 방식 var obj = { a: 1, }; 방식으로 선언할 때는 바로 키를 조합해 사용하는 방식이 불가능 했음. var ram = 'other'; obj[`a${ram}`] = 1; 이렇게 꼭 따로 선언해서 조합해야 했음. 그런데 확장표현식에서는 오브젝트 안에서..
[ES6] 화살표함수 => 모양 사용. 기존 함수 표현 법 function 함수이름 (인자) { 연산식 } ex) function add(first, second) { // typeof add === 'function' return first + second; } 자바스크립트는 함수형 언어로 익명함수라고 하는 함수의 이름을 포함하지 않는 함수 선언식 표현이 존재. var add = funcntion(first, second) { // typeof add = 'function' return first + second; } 선언식 자체가 함수를 반환하게 되고, add라는 변수가 이 함수를 할당. 위 두 식은 이름을 함수 안에 포함하느냐, 반환이 된 값을 할당하느냐의 차이. 화살표 함수는 익명함수 방식을 따라 표현됨. functi..
[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...

티스토리툴바