개발/Javascript
-
[Task queue] click과 promise개발/Javascript 2022. 10. 5. 12:55
자세한 정리는 나중에 시간을 내서 하기로 하고 지금은 기록을 위한 간단한 정리. 마이크로태스크 큐에 쌓인 태스크들은 매크로태스크가 한 번 실행될 때마다 처리된다. 다시 말해 하나의 마이크로태스크 큐가 실행될 때 그동안 쌓인 N개의 마이크로태스크 큐가 처리된다. 클릭 이벤트는 매크로태스크 큐에 들어간다. Promise는 마이크로태스크 큐에 들어간다. 반복문 안에서 데이터를 가져오는 fetch 함수가 호출되고 있다고 해보자. 이 때 발생한 클릭 이벤트는 매크로태스크 큐에 들어간다. 핸들러가 있다면 핸들러도 매크로태스크 큐에 들어간다. 처리되고 있던 매크로태스크가 끝나면 마이크로태스크들이 처리될 거고, 클릭 이벤트가 처리될 때 그동안 쌓인 마이크로태스크 큐들이 처리될 거다. 작업을 하다가 발견한 것인데 다음 ..
-
[Regex] test() 사용시 전역 플래그(g 플래그)개발/Javascript 2022. 8. 31. 14:34
공식문서의 내용을 참고하면 좋다. 전역 플래그는 모든 문자열에서 정규식 규칙을 찾는데, test()에서 사용할 때(exec도 동일) 일치하는 문자열을 찾으면(true) 다음 탐색을 위해 lastIndex를 갱신한다. 일치하는 문자열을 못 찾으면(false) lastIndex을 0으로 초기화한다. 이메일 정규식으로 테스트해보자. const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g; .com으로 끝나는 정상 이메일 주소를 입력해보자. co까지 입력하면 true가 나오는데 m을 입력하는 순간 false가 판정된다. 검사 의도는 com으로 입력을 완료했을 때 true가 나와야 하는 것이다. 왜냐하면 마지막 true 판정이 com의 o이기 때문에, 탐색을 이어가기 위..
-
[Webpack] Typescript 설정 추가개발/Javascript 2022. 8. 9. 22:00
번들링을 할 때 타입스크립트도 처리할 수 있게 로더를 추가하면 됩니다. const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const mode = process.env.mode || 'development'; module.exports = { devtool: 'eval-cheap-source-map', mode, entry: { main: './src/app.ts', }, output: { file..
-
[Webpack 5] externals개발/Javascript 2022. 8. 8. 12:16
웹팩 설정에 externals라고 있습니다. 이 옵션은 번들 파일에서 의존성을 제외하는 방법을 제공합니다. 대신에 사용자 환경에 있는 의존성을 필요로 합니다. 공식문서에 나오는 표현인데 코드로 보면 이해가 빠를 겁니다. module.exports = { mode, entry: { main: "./src/app.js", }, output: { filename: "[name].js", path: path.resolve("./dist"), assetModuleFilename: "[name].[ext]?[hash]", }, devServer: { client: { overlay: true, logging: "error", }, proxy: { "/api": "http://localhost:8081", }, ho..
-
[Webpack 5] Optimization.minimizer개발/Javascript 2022. 8. 7. 16:44
webpack5에는 terser 플러그인이 내장되어 있습니다. 하지만 Optimization.minimizer 옵션을 커스텀해야 하거나 Terser 플러그인의 옵션을 넣어야 한다면 별도로 다운로드 해야 합니다. 이 경우 프로덕션 모드에서는 최적화를 수행하고 개발모드에선 수행하지 않도록 해야할 때 webpack4에서는 3항 연산자를 이용해야 했는데요. webpack5에서는 주석 한 줄이면 됩니다. optimization: { minimizer: [ // `...`, new CssMinimizerPlugin(), new TerserPlugin({ terserOptions: { compress: { drop_console: true, }, }, }), ], },
-
ESLint(feat. Prettier)개발/Javascript 2022. 8. 5. 16:03
eslint와 prettier는 보통 같이 쓰는 경우가 많다. eslint도 포맷팅 기능이 있지만 prettier가 더 좋게 해주기 때문이다. 여기에서 해결해야 하는 문제는 포맷팅 규칙이 겹쳐셔 생기는 오류. 겹치는 규칙을 eslint에서 꺼주면 된다. eslint-config-prettier을 설치하고 .eslintrc.js에 관련 설정을 추가한다. { "extends": [ "some-other-config-you-use", "prettier" ] } 매번 eslint, prettier를 따로 실행해서 코드를 검사하는 건 개발 생산성을 떨어뜨린다. prettier를 eslint 규칙에 맞게 실행할 수 있다. 즉 eslint를 실행하면서 prettier를 실행시킬 수 있다. eslint-plugin-p..
-
윈도우에서 NODE_ENV 사용하기개발/Javascript 2022. 8. 4. 15:59
윈도우 프롬프트 창에서 NODE_ENV 환경변수를 설정하려고 하면 안 될 겁니다. cross-env 라이브러리를 사용하면 손 쉽게 해결할 수 있습니다. 다만 맥이나 리눅스에서 터미널에서 NODE_ENV를 직접 사용하지 말고 package.json에서 스크립트를 설정해서 사용하면 됩니다. "build": "cross-env NODE_ENV=development webpack" 웹팩 서드파티 라이브러리인 HtmlWebPackPlugin을 이용해서 index.html까지 번들할 때 ejs(embedded javascript) 문법을 사용해 개발 모드인지 프로덕션 모드인지에 따라 필요한 문구를 동적으로 넣을 수 있습니다. // index.html // webpack.config.js plugins: [ new ..
-
[Webpack] file-loader, url-loader개발/Javascript 2022. 8. 3. 18:00
Webpack 4 file-loader module.rules에 다음과 같이 설정했었습니다. 별도로 file-loader를 설치해야 합니다. { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { publicPath: './dist/', name: '[name].[ext]?[hash]' } } output.path 프로퍼티에 설정한 경로에 번들링된 파일이 위치하게 됩니다. url-loader 이는 dataURI 스킴을 처리하는 로더입니다. 작고 여러 개인 이미지에 대한 http 요청을 줄여야 할 때 사용을 고려해볼 수 있습니다. 별도의 url-loader를 설치해야 합니다. 다음처럼 설정하면 2kb 미만의 이미지 파일은 base64로 인코딩 ..