수민정의 기술블로그

의존 : 파일, 코드가 다른 파일이나 코드를 필요로 하는 것. 스프링의 그 의존이다. 자바스크립트는 라이브러리, 모듈을 관리하는 방법이 굉장히 불편했다고 한다. // 선언 순서로 인해 app.js 에서 jquery를 사용할 수 있게 됨. 단순히 statement 선언 순서 문제이다. 이것을 ES6에서는 import 구문으로 해결한다. import MyModule from './MyModule.js'// 기본으로 공유하는 모듈을 부릅니다. import { ModuleName } from './MyModule.js' // 모듈안의 특정 함수, 변수를 참조합니다. import { ModuleName as RenameModuleName } from '.MyModule.js' // 이름 충돌 이슈가 있을경우 다른..

클래스 기본의 JavaScript 는 클래스 표현식이 없어 prototype 을 사용했다. 상속 관계에서 사용되어 해당 타입의 객체들이 공유하도록 하게 끔 사용한다. new 연산자로 생성자 함수를 호출하면 , this 는 prototype 객체의 함수와 변수를 함께 참조한다. //생성자 함수 function Shape(x,y) { this.name = 'Shape', this.move(x,y) } //static 함수 Shape.create = function (x,y) {return new Shape(x,y)}; ƒ (x,y) {return new Shape(x,y)} //인스턴스 함수 Shape.prototype.move = function(x,y) { this.x = x; this.y = y; } ..

템플릿 문자열 ` (백틱) 안에 변수와 연산식, 문자열을 혼용한다. var string1 = '안녕하세요'; var string2 = '반갑습니다.'; var greeting = string1 + ' ' + string2; greeting "안녕하세요 반갑습니다." var product = {name : '도서', price:'4200'}; var message = '제품'+ product.name + ' 의 가격은 ' + product.price +' 입니다.'; message "제품도서 의 가격은 4200 입니다." var multiLine = '문자열1\n문자열2'; multiLine "문자열1 문자열2" var value = 1; var value1 = 2; var bool = false; var..

App.css 를 수정한다. .title { font-style: italic; } 이후 App.js 에서 사용할때에는 클래스를 임포트하듯 import '파일경로' 해당 스타일 적용시킬 수 있다. import React, { Component } from 'react'; import './App.css'; //

리엑트는 화면 출력에 특화되었다. 컴포넌트 구성의 프레임 워크로 여러 컴포넌트를 조합해 화면을 구성한다. 제이쿼리는 부모노드가 수정시 자식노드 까지 새로 그리지만, 리엑트는 다음에 나타날 화면의 노드를 미리 그려놓고 변경된 화면의 노드만 수정하는 가상 돔 기술을 사용한다. NPM(노드 패키지 매니저) http://www.npmjs.com 에서 필요한 자바스크립트 라이브러리를 받아 설치하고 삭제하는 중앙 저장소이다. node_modules 폴더에 라이브러리를 저장하고 , package.json 파일에 의존 파일을 설정한다. yarn 은 npm의 단점을 보완해 속도와 성능을 개선한 중앙저장소이다. WebPack (번들러) 사용된 파일을 분석, 웹 문서파일로 변환하는 도구이다. 프레임 워크가 .js .css ..

JavaScript 의 This 에 대한 개인적 상상들은. 어디선가 JavaScript 의 this 는 굉장히 오묘하다고 들었다. 그래서인지 내장함수에 bind() 가 있었던 걸 기억하는데, 이를 보면 this를 binding 해줘야할 만큼 다양한 의미로 쓰이지 않을까..하는 생각을 해보았더랬다. JavaScript의 this 는 실무자 분은 당연시 사용하는 기능이며 자바스크립트의 결함또한 포함하는 폭 넒은 기능이라고 한다. binding? 이를 이해하기 위해서는 binding의 개념을 알아야한다. 함수, 메서드를 호출한 대상에게 실제 함수를 연결해주는 것을 binding 이라고 한다. 함수를 호출한 대상에게 실제 함수가 존재하는 memory 주소를 연결해 주는 것이다. 코드, 코드로 이해하라고 하신다...

자바스크립트 흐름을 이해하는데 유용하다. 즉 유효범위를 뜻한다. 자바의 지역 멤버, 전역 멤버 처럼. 전역 Scope : 전역 변수 지역 Scope : 지역 변수 지역 변수의 생존 범위 일반적으로는 블록 Scope : {} 범위 안에 선언된 변수는 안에서만 생존한다. 함수 Scope : 함수 안에 선언된 변수는 함수 안에서만 생존한다. 이 중 Block Scope 는 ES6에서 사용이 가능해졌다. < let , const 로 인한 변화 그럼 자바스크립트의 전역 Scope 는 무엇인가 어떤 것으로도 둘러싸여있지 않다. let ,const가 쓰이지 않은 블록스코프다. 2번이 참 신기한데, 이 이야기를 거꾸로 틀어보면 , JavaScript 는 Block Scope 를 지원하지 않았다는 것이다. var num..

함수도 객체의 한 종류로 판단하는 것이 자바스크립트이다. 즉 객체의 특징을 전부 갖는다. 변수에 대입 가능 인자, 리턴 값으로 사용가능 배열, 객체의 자료구조에 대입가능 var add = function addSum(num1, num2){ return num1 + num2; } typeof add "function" add(5,1); 6 var add = function (num1, num2){//변수에 할당시 함수명은 생략가능 return num1 + num2; } add(1,2); 3 함수의 인지 값으로 함수객체가 들어간 모습, 자바에서 인자로 메서드를 주는 것과 굉장히 유사 console.log('두수의 합계는 '+add(5,7)); VM2073:1 두수의 합계는 12 자료 구조에 함수객체를 넣어 ..

생성자 함수 라고함. 대문자로 시작하며 , 자바의 생성자와 굉장히 유사한 형태를 가짐 생성자는 객체지향 프로그래밍의 특징 중 하나로 기억 중. 해당 함수로 객체를 만들겠다. 라는 의미를 가짐. 각 인자를 받아 객체의 프로퍼티에 받아내는 것도 동일. 생성자에서 메서드의 프로퍼티를 할당하여 정의하는 점이 특이. 함수도 객체로 취급되기 때문이라고 한다. function ComputerClass(name, professor, classno){ this.name = name; this.professor = professor; this.classno = classno; this.printInfo = function(){ console.log(this.name+'강의'+this.classno+' 분반 입니다. 교수는..

시그니쳐는 function 이름(인자) function 이름(인자, ...) { return ~ } function sayHello(name){ hi = "Hello" + name + "!"; return hi; } sayHello("soomin"); "Hellosoomin!" // function addNumber(num1, num2){ return num1 + num2; } addNumber(1,5); 6 // function printAdd(num1, num2){ console.log(num1+num2); } printAdd(5,2) VM615:2 7 익명함수 (Function)() (function (){ console.log("바로 실행되는 익명함수"); })(); VM817:2 바로 실행되는 ..