엑셀, 마크다운, 테이블 만들어 주는 / html / github like / tool / 도구
excel 데이터를 markdown 으로 변환해 주는 툴
엑셀 데이터를 붙여넣기 하면, markdown table 로 변환해 준다.
[컴] linux 에 node 를 압축파일로 설치
archived file / tar /tgz / zip 으로 설치 / npm 설치 / 리눅스 설치 / how to
linux 에 node 를 압축파일로 설치
- download : https://nodejs.org/dist/ 에서 원하는 버전을 선택해서 download 하자.
- 설치하려는 서버에 upload
- 압출 풀기 :
tar -zxvf ./node-v19.9.0-linux-x64.tar.gz - PATH 에 추가:
export PATH=/usr/<node_dir>/bin:$PATH
Reference
[컴] LG유플러스 해킹, 2022~2023
해커 / 해킹 / 엘지 / 통신사 / 웹셀 /
LG유플러스 해킹, 2022~2023
과학기술정보통신부와 한국인터넷진흥원(KISA)은 2023-04-27 정부서울청사에서 ’LG유플러스 사이버 침해사고 원인분석 및 조치방안’을 발표하고 해킹당한 개인정보가 LG유플러스 고객정보가 맞다고 밝혔다.
LG유플러스가 해커로부터 확보한 데이터 60만건을 분석:
- 데이터베이스(DB) 형태의 텍스트 파일로 26개 칼럼으로 구성돼 있다.
- 동일인 중복 데이터를 제거해 29만6477명의 정보를 확인
- 또 LG유플러스가 해커로부터 추가로 확보한 이미지로 된 데이터 --> 1039명의 정보를 새로 확보했다. 다만 이 중 399명의 정보는 DB에서 정확히 확인되지 않음.
해킹 방법
KISA 의 분석:
파일유출 시점은 마지막 업데이트가 이뤄진 2018년 6월15일 오전 3시58분 직후로 보인다 --> 누군가 관리자 계정에 웹셸 같은 악성코드를 설치 --> 정확한 유출 경로는 2018년 당시 DB 접속 로그 정보가 거의 남아 있지 않아 조사에 한계
해커가 웹셸(webshell) 방식을 이용해 개인정보를 탈취했을 것으로 추정
webshell 공격 me: 생각보다 간단하다. web page 또는 api 를 열어놓는다. 그래서 특정 인자를 받으면, 관련해서 system command 를 실행할 수 있게 만들어 놓는다. php 에서는 간단히 아래처럼 가능하다. 다만 이번 경우는 db 이기에 아마도 db 관련 query 를 마음대로 사용할 수 있도록 webshell 을 작성했을 듯.
// localhost/test.php?q=ls <?php system($_GET['q']); ?>
해킹을 당한 이유
- 고객인증 DB의 관리자 계정의 암호를 초기암호로 방치 –> 해킹(웹셸 방식)
- 모니터링 시스템 부재 : 대용량 데이터 외부 유출 시 비정상 행위를 실시간 감시할 수 없었다.
- 정보보안관련 예산 및 인원이 3사중 가장 적다, (LG유플러스: 292억원, 91명)
2022년 통신 3사의 정보보호 투자액과 담당 직원
- LG유플러스: 292억원, 91명
- SK텔레콤: 860억원, 305명
- KT: 1021억원, 336명
2023년 초 LG유플러스 서비스 장애를 일으킨 분산서비스거부(DDos·디도스) 공격
- 라우터에 과부하를 유발하는 수법
- 당시 LG유플러스는 68개 이상의 라우터 정보가 외부에 노출
- 신뢰할 수 없는 장비와 통신이 가능한 상태
- ’포트 스캔’을 통해 LG유플러스 라우터를 특정하고 노출된 포트를 대상으로 디도스 공격
- ‘접근제어 정책’(Access control policy)을 통해 라우터 간 통신 유형을 제한하지만 이 같은 조치가 미흡
- 1월29일과 2월4일 총 5회
- 공격자는 1월29일 3회에 걸쳐 63분 동안 주요 네트워크 장비 14대를 공격했고 전국적으로 서비스 장애
- 2월4일에도 2회에 걸쳐 57분 동안 일부 지역 엣지 라우터 320대를 공격해 장애가 생겼다.
- 공격 IP가 변조돼 디도스 공격 주체가 누구인지 파악하지 못했다.
Reference
[컴][웹] html 의 element 를 화면 중앙에 놓는 법
중앙에 / in the middle of / 화면 가운데 가로 세로 중앙
html 의 element 를 화면 중앙에 놓는 법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.element {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); // element 의 중앙을 중앙으로 옮겨준다
width: 300px;
height: 300px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="element">Centered element</div>
</body>
</html>[컴][웹] vue3/vite 에서 .env 사용
환경변수 / properties / .env files / vue3 에서 환경 변수 사용 방법
vue3/vite 에서 .env 사용
기존에는 VUE_APP_* 을 사용했는데, 이것은 webpack plugin
에서 지원했던 것이다.[ref. 3]
그래서 vite 를 쓰면, vite 에서 지원하는 방식을 써야 한다. 자세한 내용은 ref. 1, ref. 2 에서 확인할 수 있다.
vite build --mode development# .env.development
VITE_DEBUG=true
VITE_MYURL='https://mylocal.com'<script>
const _ = {
name: "MyComponent",
components: {},
methods: {
myTestMethod: function () {
console.log(import.meta.env.VITE_MYURL)
}
}
}
export default _;
</script>See Also
- Install Tailwind CSS with Vue 3 and Vite - Tailwind CSS
- Upgrade Guide - Tailwind CSS : tailwind 에서 purge option 대신에 content 를 사용하라는 글
Reference
[컴][웹] vue3/vite 에서 multi page app 작업
vue/ vuejs / 여러페이지 / 멀티 / 여러
vue3/vite 에서 multi page app 작업
아래처럼 설정을 하면
/entry
+ main/
- index.html
+ test/
- index.htmlexport default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
rollupOptions: {
// https://vitejs.dev/guide/build.html#multi-page-app
input: {
main: resolve(__dirname, 'entry/main/index.html'),
test: resolve(__dirname, 'entry/test/index.html'),
},
output: {
// https://rollupjs.org/configuration-options/#output-dir
dir: 'dist' // if you want to change the dist folder name
}
},
// build: { sourcemap: true },
},
})결과는 다음처럼 만들어진다.
/dist/entry
+ main/
- index.html
+ test/
- index.html이것의 단점은
- depth 를 맞춰서 directory 를 만들어야 한다.
그래서 entry directory 를 root 에 둘 수 밖에 없다.
(그래서 위의 경우 static server 에서 path의 기본값을 'entry/main/index.html' 로 잡아줘야 한다.)
- 같은 template html 이라도 복사해서 넣어줘야 한다.
vite-plugin-virtual-mpa
vite-plugin-virtual-mpa 라는 plugin 을 사용할 수 있다.
방법은 다음과 같다.
- 다음처럼 설치하면 된다.
npm i -D vite-plugin-virtual-mpa그리고 여기를 참고해서
vite.config.js에 설정을 추가 하면 된다.참고로 build.rollupOptions.input 에
main이 있고,createMpaPlugin의 pages 에main이 있다면, pages의 main 만 만들어진다.
<!-- src/template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'
import { defineConfig, normalizePath } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createMpaPlugin, createPages } from 'vite-plugin-virtual-mpa';
const pages = createPages([
{
name: 'main2',
filename: `entry2/index.html`,
entry: '/src/main.js',
data: {
title: 'This is Main page',
},
},
]);
const base = '/';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
createMpaPlugin({
template: 'src/template.html',
/**
* You can write directly or use `createPages` function independently outside and then pass it to this field.
* Both of the above can enjoy type hints.
*/
pages,
/**
* Use html minimization feature at build time.
*/
htmlMinify: true,
/**
* Customize the history fallback rewrite rules for `dev server`.
* If you config your pages as above, this rewrite rules will be automatically generated.
* Otherwise you should manually write it, which will overwrite the default.
*/
// rewrites: [
// {
// from: new RegExp(
// normalizePath(`/${base}/(apple|banana|strawberries|home)`),
// ),
// to: (ctx) => normalizePath(`/${base}/fruits/${ctx.match[1]}.html`),
// },
// ],
/**
* Customize the history fallback rewrite rules for `preview server`.
* This option is almost the same with `rewrites`.
*/
previewRewrites: [
// If there's no index.html, you need to manually set rules for history fallback like:
{ from: /.*/, to: '/home.html' },
],
/**
* Sometimes you might want to reload `pages` config or restart ViteDevServer when
* there are some files added, removed, changed and so on. You can set `watchOptions` to
* customize your own logic.
*
* The `include` and `exclude` based on `Rollup.createFilter`
* @see https://vitejs.dev/guide/api-plugin.html#filtering-include-exclude-pattern
*/
watchOptions: {
events: ['add', 'unlink', 'change'],
include: [
'**/pages/**',
'**/infos/**',
],
handler: (ctx) => {
console.log(ctx.type, ctx.file);
// ctx.reloadPages();
},
},
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
// rollupOptions: {
// // https://vitejs.dev/guide/build.html#multi-page-app
// input: {
// main: resolve(__dirname, 'entry/main/index.html'),
// test: resolve(__dirname, 'entry/test/index.html'),
// },
// output: {
// // https://rollupjs.org/configuration-options/#output-dir
// dir: 'dist' // if you want to change the dist folder name
// }
// },
// build: { sourcemap: true },
},
})vue-route html5 mode
SPA에서 url 로 route 을 할 수 있다. 그리고 lazy loading 도 되니, 몇몇 경우에는 multi-page 대시 single page 를 고려해 볼 수 있을 듯 하다.
See Also
- javascript - How to check if user is authenticated to navigate through Vue routes? - Stack Overflow : vue route 에서 auth 를 check 하도록 하는법
[컴] vue3 의 Composite API vs Options API
vuejs3 / vuejs / vue 2 / script setup
vue3 의 Composite API vs Options API
Options API 가 vue2 에서 기존에 사용하던 방식, Composite API 는 새롭게 도입된 방식.
Composite API 는 좀 더 functional programming 에 가깝다. 하지만 functional programming 은 아니다.[ref. 1]
이전에 vue2 에서 mixin 이라는 것이 있었는데, 그것을 Composite API 로 작성해서 사용하는 것은 훨씬 자연스럽다.
개인적인 생각은 아직 적극적으로 사용할 단계는 아닌듯 싶다.
단점
- Nuxt 등 다른 vue based project 에서 아직 지원하지 않는다.
- 아주 큰 project 에서는 이득이 있지만, 중소규모의 project에서는 큰 이득이 없다. [ref. 1]
Refereces
피드 구독하기:
글 (Atom)