Frontend Developer Frontend Developer

전체 글

• 엔트리/아웃풋 - 웹팩(Webpack) 기본편 | 김정환

  Front-end/개발환경 2020. 6. 2. 22:06

  # 웹팩의 역할 : 모듈로 연결된 여러 개의 자바스크립트 파일을 하나로 합쳐준다. - 하나로 합쳐진 파일을 번들이라고 하며, 웹팩은 번들을 만드는 번들러 역할을 한다. > npm install -D webpack webpack-cli webpack과 webpack-cli 설치 * -D : npm의 devDependencies(개발용 패키지)에 설치한다. # 웹팩 실행할 때 필수 옵션 * --mode : development(개발용), production(운영에 배포하기 위한 최적화) * --entry : 모듈의 시작점 * --output : 엔트리를 통해서 웹팩의 모든 모듈을 하나로 합치고 저장하는 경로를 설정 node_modules/.bin>webpack-cli --mode development --e..

  Read More
• 1-1. 기본 사용 - Canvas API | MDN

  DOM/Canvas 2020. 5. 6. 19:12

  [출처 : https://developer.mozilla.org] 요소 태그 는 src 및 alt 속성이 없다는 점만 제외하면 요소와 비슷합니다. width와 height 두 속성만 있습니다. 이 속성은 선택사항이며 DOM 프로퍼티를 사용하여 설정 가능합니다. width와 height을 지정하지 않으면 기본 크기는 가로 300px, 세로 150px. CSS에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다. CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다. ※ 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 속성에서 width 및 height 속성을 명시적으로 지정 실제 캔버스 위에 그리는 것에는 영향을 끼치..

  Read More
• CSS 변환과 애니메이션 - 인터랙티브 웹 개발 | 1분코딩

  DOM/CSS3 2020. 4. 20. 20:56

  1. Transform # CSS Transform은 하드웨어 가속을 이용해서 성능이 좋다 : 어떤 태그를 absolute 후 left로 이동하는 것 보다 translateX()를 이용하는 것이 훨씬 부드럽게 움직인다. * 하드웨어 가속을 이용한다는 것은 GPU를 사용한다. # CSS Transform은 브라우저가 지오메트릭을 다시 편성하는 과정(Reflow)에서 CSS 대상만 크기나 위치를 계산해서 렌더링하기 때문에 연산할 것도 적고 성능도 더 좋다. 2. Transition : 값이 수치로 표현되는 속성이 값의 변화(수치로)가 있을 때 변화과정을 애니메이션으로 만들어준다. # transition-property : 속성 # transition-duration : 재생시간 # transition-del..

  Read More
• 제너레이터와 async/awit - 문법 | Poiemaweb

  Javascript/ECMAScript 2015 (ES6) 2020. 3. 26. 19:11

  [출처 : https://poiemaweb.com] 1. 제너레이터란? ES6에서 도입된 제너레이터(Generator) 함수는 이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 이터러블을 구현할 수 있다. 또한 제너레이터 함수는 비동기 처리에 유용하게 사용된다. // 이터레이션 프로토콜을 구현하여 무한 이터러블을 생성하는 함수 const createInfinityByIteration = function () { let i = 0; // 자유 변수 return { [Symbol.iterator]() { return this; }, next() { return { value: ++i }; } }; }; for (const in crea..

  Read More
• 웹팩이 필요한 이유와 기본 동작 - 웹팩(Webpack) 기본편 | 김정환

  Front-end/개발환경 2020. 3. 19. 20:24

  [출처 : https://www.inflearn.com] 1. 배경 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터이다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는 데 수월하다. math.js : function sum(a, b){ return a+b } app.js : console.log(sum(1,2)); index.html : => index.html을 실행하면 console 창에 3이 찍힌다. 위와 같이 하면 전역 스코프가 오염되는 문제가 있다. math.js의 sum 함수는 어플리케이션이 돌아가는 어느 곳에서나 sum 함수에 접근할 수 있게 된다. 예를 들어 자바스크립트는 함수에도 할당할 수 있기에 전역 스코프가 오염되면 어플리..

  Read More
• 이터레이션과 for...of 문 - 문법 | Poiemaweb

  Javascript/ECMAScript 2015 (ES6) 2020. 3. 18. 19:11

  [출처 : https://poiemaweb.com] 1. 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜(iteration protocol)은 데이터 컬렉션을 순회하기 위한 프로토콜이다. 이터레이션 프로토콜을 준수한 객체는 for…of 문으로 순회할 수 있고 Spread 문법의 피연산자가 될 수 있다. 이터레이션 프로토콜에는 이터러블 프로토콜(iterable protocol)과 이터레이터 프로토콜(iterator protocol)이 있다. *프로토콜 : 컴퓨터나 통신장비들이 메시지를 주고받을 때 지켜야 하는 규칙들의 체계적인 집합, 미리 약속된 규칙 1-1. 이터러블 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. 이터러블은 Symbol.iterator 메소드를 구현하거나 프로토타입 체인에..

  Read More
• 함수 - Javascript 핵심 개념 | 정재남

  Javascript/ECMAScript 2009 (ES5) 2020. 3. 17. 23:23

  [출처 : https://www.inflearn.com] 1. 호이스팅 ※ Hoist : (사전적 의미) 끌어 올리다. ⇒ 변수 '선언'과 함수 '선언'을 끌어 올린다. # 호이스팅 (Hoisting) : 호이스팅은 선언과 밀접한 관계가 있다. 자바스크립트 엔진은 코드를 실행하기 전 단계로 코드 전반에 걸쳐서 선언된 내용이 있는 지 훑어 보고 발견하는 족족 위로 끌어 올린다. # 왼쪽에 작성한 코드는 변수와 함수의 선언이 위로 올라가면서 자바스크립트 엔진이 실제로 실행할 코드는 오른쪽이 된다. console.log(a()); function a() { console.log(b()); return "a"; console.log(c()); } function a() { var b; return "a"; va..

  Read More
• 7번째 타입 심볼(Symbol) - 문법 | Poiemaweb

  Javascript/ECMAScript 2015 (ES6) 2020. 3. 17. 18:48

  [출처 : https://poiemaweb.com] 1. Symbol이란? 1997년 자바스크립트가 ECMAScript로 처음 표준화된 이래로 자바스크립트는 6개의 타입을 가지고 있었다. # 원시 타입 (primitive data type) ㆍBoolean ㆍnull ㆍnudefined ㆍNumber ㆍString # 객체 타입 (Object type) ㆍObject 심볼(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. 2. Symbol의 생성 # Symbol은 Symbol() 함수로 생성한다. Symbol() 함수는 호출될 때마다 Symbol 값..

  Read More