Vue.js 개발 할 때 보안점검을 위해 권한 체크 부분이 있었는데, 여기서 발생했던 이슈를 공유한다. 현상은? 아래와 같이 라우터가 구성되어 있고 화면 이동 시 beforeEach 에서 intercept 하여 권한 체크 및 토큰 유효성을 체크 하도록 하는데... const router = new Router( { routes : [ { path: '/', redirect: '/home' }, { path: '/pjt', component: ScreenWithLNB, children: [ { path: '/app/:appId', component: Project }, ] }, ... ] } router.beforeEach((to, from, next) => { // token check } URL pat..
Storybook 이란? SPA 개념이 나오면서 페이지 단위가 아닌 컴포넌트 단위로 개발 방식이 바뀌었고 최근에 유행하는 Vue.js, React, Angular 등이 이런 개발을 용이하게 한다. 웹 화면의 모든 UI 구성 요소들을 컴포넌트로 보면 되는데 예를 들어 버튼 같은 컴포넌트 개발 시 만들어지는걸 view 내부에서 확인하면서 고쳐가기가 어렵다. (하면 할 순 있다) 그래서 이런 컴포넌트의 특성을 고려해서 개발할 수 있도록 지원하는 오픈소스 라이브러리가 Storybook 이다. Vue.js 에서 적용하기 Dependency 추가하기 storybook 라이브러리와 vue 관련된 정보를 우아하게 보여주기 위한 라이브러리를 추가한다. npm install @storybook/vue npm install..
Excel Data를 업로드 하는 방식 외에 간단하게 Copy & Paste 로 JSON Data 를 생성해주는 방식을 소개합니다. 기본적으로 Excel에 있는 Data를 Copy 하면 행 구분은 탭 구분자 ('\t') 로 되어 있습니다. 아래 Script 부분에서 볼 수 있듯이 탭 으로 파싱해서 json data 형태로 만드는 방식입니다. Template 부분 clipboard 에 있는 Data를 붙여넣기 할 수 있게 textarea 태그를 사용합니다. 1 Script 부분 textarea로 붙여넣은 data를 parsing 해서 json data로 추가하는 부분입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 handler() { if..
요즘엔 브라우저도 성능이 좋아져서 Excel을 Parsing 하는걸 서버에 맡기지 않고 웹상에서 처리를 많이 합니다. Excel 파일을 업로드해서 Parsing 하는 코드를 알아보겠습니다. xlsx 모듈 설치 npm install xlsx 태그 추가 기본 input tag의 file 타입으로 업로드 했을때 입니다. 기본 허용하는 mime-type은 xlsx 로 아래와 같이 설정하면 됩니다. 1 Script 추가 methods 영역에 추가하시면 됩니다. 여기서 parsing해서 items 변수에 json data로 저장을 하는 코드입니다. items를 활용해서 table의 입력값으로 활용할 수 도 있습니다. 아래 reader.onload 에서 data를 얻어오는 부분은 둘 중 하나로 하시면 됩니다. 1 2..
- Total
- Today
- Yesterday
- Bitcoin
- Java
- white paper
- 비트코인
- gRPC
- architecture
- 아키텍처
- 스프링 시큐리티
- 동적계획법
- 카르다노
- SpringBoot
- 블록체인
- Vue.js
- 백준
- CARDANO
- leetcode
- 사토시 나가모토
- excel parsing
- kubernetes
- Bruteforce
- 스프링
- vuejs
- Nealford
- DP
- Spring
- 암호화폐
- Redis
- Blockchain
- k8s
- 알고리즘
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |