FrontEnd
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를 통해서 ..
01_마크다운(MARK DOWN)
README.md 란 파일을 한번정도는 다들 보았을 것이다. 이 .md파일은 마크다운 파일이라는 표시이다. https://heropy.blog/2017/09/30/markdown/ MarkDown 사용법 총정리 마크다운(MarkDown)에 대해서 알고 계신가요?파일 확장자가 .md로 된 파일을 보셨나요?웹 개발을 하면서 아마 README.md라는 이름의 파일을 한 번은 보셨을텐데, ... heropy.blog 위 글을 보면서 공부한 내용이다. 마크다운을 이용하면 보다 쉬운 문법으로 쉽고 빠르게 문서를 정리할 수 있다. 문법이 쉽고 관리가 용이하고 지원하는 플래폼이 많다는 장점이 있지만 표준이 딱히 정해지지 않고 모든 HTML 마크업을 대신하지 못한다는 단점이 있다. HTML으로 구현되기 때문에 화면에 표..
27_타입스크립트 & 리덕스 미들웨어
타입스크립트 환경에서 리덕스 미들웨어를 어떻게 사용할지 알아보자! 깃허브 api를 사용해서 특정 사용자의 프로필을 조회해보는 기능을 구현해 볼 것이다. 이전 글에서 만들었던 프로젝트에 yarn add axios redux-thunk axios와 redux-thunk를 설치해보자. import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { Provider } from "react-redux"; import { createStore, applyMiddleware } from..