본문 바로가기

전체 글218

vanlia javascript 에서 router 구현 라우팅 HASH방식으로 구현 anchor 태그를 사용한다. (url 정보에 #이 붙는다. ) /router/router.js 생성 최초 진입은 index.html uri : "/" , "/complete" 에 따라서 동적으로 index.htm에 있는 app-rootclass 에 template정보가 렌더링 된다. DOMContentLoaded 될때 (서비스 실행 시) 최초로 render()가 호출 된 후 다음 로직이 실행된다. hashchange 이벤트 리스너를 받아 uri hash 변경시(/#/complete) 해당 template가 렌더링 되며 점수를 보여주는 로직이 실행된다. router.js // router.js const root = document.querySelector('.app-root.. 2021. 7. 17.
webpack webpack 실행 npm init -y npm i webpack webpack-cli -D (--save-dev) 배포용 > 빌드할떄 빠지게 된다. npm i lodashlodash > dependency에 추가 되어있음 스크립트로 설정하기 "webpack --mode=none --entry=src/index.js --output-public/ouput.js"이런식으로 옵션 줄 수 있다. 근데 넘길어 그래서 webpack.config.js 설정파일에 쓴다. // webpack.config.js // `webpack` command will pick up this config setup by default var path = require('path'); //노드 path 라이브러리 mod.. 2021. 7. 16.
ESlint ESlint ESlint 설정을 끄는 방법 /* eslint-disable */를 컴포넌트 마다 넣어주는것 각 컴포넌트 마다 넣어주는건 비효율적임 ! vue.config.js 생성 module.exports = { lintOnSave: false //설정함 } https://cli.vuejs.org/config/#lintonsave 참고 조건에 맞지않으면 error를 출력해라 "preittier/prettier": ['error', { printWidth: 80 }]jsconfig.json { "compilerOptions": { "baseUrl": ".", "paths": { "~/*": [ "./*" ], "@/*": [ "./src/*" ], } }, "exclude": [ "node.. 2021. 7. 6.
map, filter, reduce map, filter, reduce const products = [ {name: '안녕', price: 12000}, {name: '하세요', price: 15000}, {name: '저는', price: 20000}, {name: '지니', price: 25000}, {name: '입니다', price: 15000} ]; map map 로직 const map = (f, iter) => {//f 라는 함수를 받아서 어떤값을 수집할 것인지 위임한다.(추상화) let res = []; for (const a of iter) { res.push(f(a)); } return res; }; 고차함수이다. /////////////es5 /////////////// let names = []; for (const .. 2021. 7. 5.
반응형

티스토리툴바