FrontEnd/웹 지식
캐시교체 정책
캐시란 CPU 칩안에 들어가는 작고 빠른 메모리이다. 프로세서가 매번 메인 모메리에 접근하는것은 시간도 오래걸리고 물리적으로도 거리가 멀다. 하지만 캐시를 이용하면 가깝기 때문에 시간도 매우 절약할 수 있다. =⇒ 결국 캐시메모리도 유한하기때문에 캐시에 어떤 정보를 담아두는지가 매우 중요하다. 그렇다면 이 자주 사용하는 데이터에 관한 판단은 어떻게 정할 수 있을까? 데이터에 관한 판단은 지역성의 원리를 따르며 이는 시간지역성과 공간 지역성으로 구분할 수 있다. 공간지역성 : 최근 접근한 데이터의 주변 공간에 다시 접근하는 경향 시간지역성 : 최근 접근한 데이터에 다시 접근하는 경향 오늘날 CPU 칩의 면적 30~70%는 캐시가 차지한다. 캐시 교체 정책에는 3가지 방식이 있다. FIFO(First in ..
GitHub Pull Request
조금 쉽게 생각하자면 Pull Request는 거대한 프로젝트가 있다 가정할때 사람들이 일부분씩을 바꾸고 합칠때 효율적이고 올바르게 합칠 수 있는 좋은 도구인 것 같다. (https://www.secmem.org/blog/2019/04/10/git_pr/) 내가 어떠한 프로젝트에 Pull Request를 하기위해서는 Fork clone branch 만들기 코드 작성 add,commit,push Pull Request 생성 Merge Pull Reqest Merge이후 branch삭제 와 같은 과정을 통해 진행된다. Fork : 해당 프로젝트의 저장소를 자신의 git으로 가져온다. 해당 기능을 사용하면 다른 계정의 git을 내 저장소로 가져올 수 있다. clone : 결국 코드 작업을 하기 위해서는 로컬 ..
05_Webpack 여러 loader들
File Loader img파일을 모듈로 다루는 법을 알아보자. 저저번글부터 사용한 프로젝트에 assets파일을 하나 만들고 아무이미지나 두장 넣는다. npm i file-loader -D file-loader를 설치하고 { test: /\.(png|jpe?g|gif)$/i, //$는 끝을 의미 i는 대소문자를 가리지 않겠다는 의미 use: [ { loader: "file-loader", options: { name: "[contenthash].[ext]", // ext : 확장자 }, }, ], }, module의 rules에 위와같은 코드를 넣어서 loader를 적용시킨다. 이제 loader를 적용시키는법은 어느정도 익숙해졌을 것이다. //index.js import "normalize.css"; i..
04_Webpack 설정
handlebars 화면을 표현할 수 있는 템플릿 엔진 Model 문서에 노출시킬 데이터 Template 데이터가 문서에 어떻게 보여질지도 작성되어있음 위 두개를 컴파일을 거쳐 View가된다! View 템플릿내에 데이터가 담겨있는 완성된 뷰 그럼이제 handlebars를 사용해보자. npm i -handlebars -D npm i handlebars-loader -D //webpack.config.js const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./index.js", output: { filename: "bundle.js", path: path..
03_Webpack 기본구조
Webpack Webpack은 웹어플리케이션에 도움을 주는 하나의 도구이다. Webpack의 기본 구조 https://webpack.js.org/ webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. webpack.js.org Webpack의 공식문서에 가면 가장먼저 보이는 이미지가 위 이미지이다. 다양한 확장자로이루어져서 서로 연결되어 있는 파일들이 뭔가 깔끔하게 정리된 모습을 확인할 수 있다...
02_Module,Bundle
이번에는 Webpack에대해서 알아볼 것이다. 우선 Webpack의 기본구조들을 알아보기위해 아래 개념들부터 차근차근 알아보자. Module 프로그램을 구성하는 내부의 코드가 기능별로나뉘어져 있는 형태 > 한파일의 큰 덩이를 여러개의 파일로 나누어서 쓰는것 Module을 상요하기위해서는 Module을 인식하는 ModuleSystem과 그를 다루는 keyward가 필요하다. Module의 표준으로는 CommonJS(Node.js)와 ESM(ECMAScript 2015~ ) 가 존재한다. Module을 내보낼때는 객체에 넣고 한곳으로 내보내거나, 개별적으로 내보내는 방식중에서 택하게 된다. CommonJS require ( 모듈의 경로)fmf tkdydgotj 불러온다. module.exports를 통해서 ..