본문 바로가기

복습

[vuejs] 뷰 라이프사이클 (Vue life-cycle) vue-lifecycle Vue.js 라이프사이클 이해하기 Vue.js 의 라이프사이클은 크게 4가지로 나뉜다. Creation Mounting Updating Destruction 위의 그림은 Vue.js 의 라이프사이클 다이어그램이다. 빨간색폰트가 컴포넌트에서 사용할 수 있는 함수들이다. Creation : 컴포넌트 초기화 컴포넌트들을 초기화하는 단계이며 서버렌더링에서 지원되는 단계이다. 클라이언트나 서버 렌더 단에서 처리해야 일이 있으면 이 단계에서 진행한다.아직 Component가 DOM 에 추가되기 전이므로 DOM에 접근할 수 없다. new Vue() Vue Instance 생성 Init(Events & Lifecycle) Event 와 Lifecycle 초기화 beforeCreate 가장 처음..
[Git] Git, Github about_github Git 에 대하여 Git 사용법을 알아야 한다. git은 필수다. 라는 말을 수도없이 들어왔고 나도 한번 써본 이후로 편리해 계속 쓰게되었다. 사용한지 얼마 되진않은 뉴비이기에 잘못된점은 말씀해주시면 감사하겠습니다. Git 탄생배경 리누스 토발즈가 리눅스 커널을 개발에 이용하려고 개발했다고 한다. 그래서 Git 이 뭐죠? Git 은 소스 코드 관리를 위한 분산버전관리 시스템 이다. Git 의 작업폴더는 소스코드 수정기록과 그 기록을 볼 수 있는 로컬저장소(Local Repository) 이다. 분산버전관리 시스템이란? 분산된 버전관리이다. 이는 각 개발자가 서버에 접속하지 않고도 각자 개발을 할 수 있는 것이다. 버전이란? 소스코드 하나 또는 여러 묶을 하나의 버전이라고 한다 왜 ..
[Javascript] Singleton Pattern 싱글톤 패턴 singleton Singleton Pattern 싱글톤패턴(singleton pattern) 이란? 싱글톤 패턴은 전체 시스템에서 하나의 인스턴스만 존재하도록 보장하는 객체 생성패턴이다. 동일 클래스로 new 를 해도 인스턴스 하나만 존재한다는 것이다. 특징 객체 자체에는 접근이 불가능해야함 객체에 대한 접근자(비공개 멤버: 클로저)를 사용해 실제 객체를 제어할 수 있다. 객체는 단 하나만 만들어지며, 해당 객체를 공유함 다음과 같은 객체 리터럴도 싱글톤 패턴이다. var obj = { a: 'foo', b: function(){}} 이렇게 하게되면 비공개상태 및 함수를 정의할 수 없다.그렇기 때문에 closure 를 통해 비공개로 만들어야한다. var Singleton = (function() { /..
[Javascript] bind, call, apply 그리고 this bind bind, call, apply bind() .bind(thisArg[, arg1[, arg2[,...]]]) bind() 의 역할은 새로운 함수를 만든다. 이 함수의 실행 문맥은 .bind()의 첫번째 인자로 받은게 된다. 바인딩함수는 미리 정의해둔 this 값으로 함수를 생성할 수 있기 때문에 매우 유용하다. call() .call(thisArg[,arg1[,arg2[,...]]]) call() 함수는 첫번째 인자로 함수 내부에서 사용할 this로 만들어준다 나머지 parameter 는 메서드에 전달한 인자 목록이다. apply() .apply(thisArg[,argsArray]) apply() 함수는 call() 함수와 동일하지만 배열로 메서드에 인자를 전달한다는것이 차이이다. 헷갈리는 부..
[Javascript] BOM 과 DOM 이란? BOM Javascript Javascript 는 4가지로 세분화할 수 있다 분류 설명 자바스크립트 Core문법 기본문법, 데이터타입, 조건문 등이 포함 자바스크립트 Core라이브러리 내장함수들이 포함되어있음, Date, Math 등 자바스크립트 DOM 노드(node), 스타일, 속성, 이벤트 등을 다룰 수 있는 다양한 기능 포함 자바스크립트 BOM 브라우저와 관련된 Window, Navigator, Location, History, Document, Screen 객체가 포함 BOM (Browser Object Model) BOM(브라우저 객체 모델) 은 브라우저와 컴퓨터 스크린에 접근 할 수 있는 객체의 모음. window 객체를 통해 접근 가능 window 객체모델 navigator : 브라우저명과 ..
[Webpack] 알아두면 쓸데있는 웹팩지식 CHECK 헷갈림 정리 헷갈릴 수 있는 개념들을 정리해 놓은 글 entry는 Array? Object? Loaders 와 Plugin의 차이 query 와 options 뭘 써야하지? loaders 와 rules 중 뭘 써야하지? use 를 써야하나 loader를 써야하나? __dirname 과 . 의 차이가 무엇인가? Development(개발모드) 와 Production(배포모드) entry는 Array? Object? entry 프로퍼티에는 Array 를 써야하나요 Object를 써야하나요? Array 를 쓰는 경우 서로 의존성 없는 여러파일을 사용한다면 Array형식으로 사용한다 module.exports = { entry: ['./js/index.js', './js/foo.js'], output..
[Webpack] css-loader & style-loader css-loader_style-loader css-loader webpack에서 .css 파일을 읽어들이기위해 사용하는 로더 설치 $ npm install --save-dev css-loaderstyle-loader 태그를 삽입하여 CSS에 DOM을 추가 설치 $ npm install --save-dev style-loader사용법 style-loader 와 css-loader 를 결합해서 쓰는것이 보통이다 번들링할 .js 파일의 상단에 css 파일을 import import '/* 경로 */' webpack.config.js 파일에서 설정 module.exports = { module: { rules: [ {...}, // 생략 { test: /\.css$/, use: ['style-loader', '..
[Webpack] extract-text-webpack-plugin extract-text-webpack-plugin extract-text-webpack-plugin 이 플러그인은 텍스트를 파일로 추출하는 플러그인이다 설치 $ npm install --save-dev extract-text-webpack-plugin사용법 css파일을 별도로 뽑아보겠다 // webpack.config.jsconst ExtractTextPlugin = require('extract-text-webpack-plugin'); webpack.config.js 파일의 가장 상단에 require 해줌 // webpack.config.jsconst ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module..

티스토리툴바