본문 바로가기

Programming/Frontend16

[보안] OWASP ZAP vs Burp Suite Pro: OWASP Top 10 보안 테스트 비교 OWASP ZAP(Zed Attack Proxy)과 Burp Suite Professional은 웹 및 API 기반 애플리케이션의 보안 취약점을 찾아내는 대표적인 동적 분석 도구입니다. 두 도구 모두 OWASP Top 10에 해당하는 흔한 웹 취약점들을 탐지하고 테스트할 수 있으며, 프록시 기능을 기반으로 애플리케이션과 공격자 사이에서 요청/응답을 가로채 검증합니다 . 하지만 취약점 탐지 범위와 정확도, 자동화 및 스크립팅 지원, CI/CD 파이프라인 통합 능력, PHP/Python 환경에서의 활용 편의성 등 여러 측면에서 차이가 있습니다. 여기서는 OWASP Top 10 중심의 보안 테스트 관점에서 ZAP과 Burp Suite Pro를 자세히 비교하고, 각 도구의 장단점과 상황별 적합성을 평가하겠습니다.. 2025. 4. 21.
[typescript] 함수 정의 종류 및 장단점 TypeScript에서 함수를 정의하는 두 가지 주요 방식의 장단점을 설명해드리겠습니다:function 키워드 사용:function add(a: number, b: number): number { return a + b;}  장점:호이스팅(hoisting)이 되어 함수를 선언 전에도 호출 가능this 바인딩이 동적으로 이루어짐 (메서드로 사용할 때 유용)코드가 더 명시적이고 읽기 쉬움재귀 함수 작성이 더 자연스러움제네릭 타입 사용이 더 직관적 const 화살표 함수:const add = (a: number, b: number): number => { return a + b;}; 장점:this가 렉시컬 스코프로 바인딩됨 (콜백 함수에서 유용)더 간결한 문법 (특히 한 줄 함수의 경우)변수 재할당.. 2025. 4. 12.
[아이디어] 엑셀 파일 위치에 따른 수정 모니터링 방법 엑셀 파일의 수정 감지는 크게 두 가지 방식으로 나눠서 생각할 수 있습니다.📌 1. 로컬(단일 PC) 환경에서 엑셀 수정 감지로컬 PC에서 엑셀 파일을 모니터링할 때는 보통 다음 두 가지 방식이 쓰입니다.파일 시스템 이벤트 감지(watchdog, Windows의 파일 시스템 Watcher 등을 통해 파일이 변경되었는지 확인)폴링 방식 (주기적 파일 상태 체크)(파일의 변경시간, MD5 해시값, 크기 등을 정기적으로 확인해 변화가 있을 때 추출)장점빠른 속도간단한 구조단점네트워크 폴더 감시보다는 환경 제약이 적지만, 파일을 여러 사람이 수정하는 경우 충돌할 가능성이 있음. 📌 2. 네트워크(공유 폴더) 환경에서 엑셀 수정 감지네트워크 환경에서는 위 방식에서 몇 가지 고려 사항이 추가됩니다.기본적으로는 .. 2025. 3. 28.
[크롬확장앱] 크롬 프로파일 정보 가져오기 다음은 TypeScript를 사용하여 크롬 확장 앱에서 프로파일 사용자 정보를 가져오는 방법을 보여주는 코드입니다. 필요한 파일과 코드를 정리했습니다. 1. manifest.json (권한 설정이 이미 완료되었다고 가정)manifest.json 파일은 따로 제공하지 않습니다. 확장 앱의 권한 설정에서 "identity"가 포함되어 있어야 합니다. 2. background.ts// background.tsfunction getUserProfile(): void { chrome.identity.getProfileUserInfo((userInfo) => { console.log('User ID:', userInfo.id); console.log('User Email:', userInfo.email.. 2025. 1. 27.
Node.js 버전을 여러 개 사용하는 방법?! Node.js의 다양한 버전을 효율적으로 관리하려면 **NVM(Node Version Manager)**을 사용하는 것이 좋습니다. NVM을 통해 여러 버전의 Node.js를 설치하고, 필요에 따라 손쉽게 전환할 수 있습니다. 아래는 NVM의 설치부터 활용까지의 방법을 정리한 내용입니다.1. NVM 설치하기 • Windows: 1. NVM for Windows GitHub 페이지에서 최신 버전의 nvm-setup.exe 파일을 다운로드합니다. 2. 다운로드한 설치 파일을 실행하고 지시에 따라 설치를 완료합니다. • macOS/Linux: 1. 터미널을 열고 아래 명령어를 입력하여 NVM을 설치합니다.curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.. 2025. 1. 4.
[svelte 실무적용] #2. child 변수값을 parent 변수에 업데이트 하기 사이트가 복잡해져 가면 component 를 잘게 찢어서 사용하기에 한계가 있다. 이유는 상위 parent component 에서 하위 childe component 를 호출하는 거야 문제가 없겠지만, 하위 child component 내부에서 변경된 변수값을 상위 parent 에 전달하기 복잡하다. 복잡하지만 그래도 사이트를 만들어야 하니 해야지.. 참조페이지 https://svelte.dev/examples/component-bindings 1. dispatcher 사용 참조 페이지 : https://svelte.dev/tutorial/component-events 자주 애용하지만 복잡하다. vuejs 에서 $emit()과 거의 같은 역할을 한다. vuejs 를 하다 보니 아래 $emit과 동일한 걸.. 2022. 8. 12.
[svelte 실무적용] #1. 사용이유, html 에디터(quill), SEO 적용 샘플 SvelteJS 사용 이유? 빠르다니깐, 궁금해서~! 그런데 모르겠다. react, vue, svelte 모두 빌드한 js 소스를 서버에 올리고 다운로드 받아서 사용하는 진짜 프론트엔드 사이드 스크립트다. 중간의 내용이야 어찌저찌 해서 팩키징 결과물이 조금씩 틀려지기는 하겠지만, 그렇다고 속도 측면은 잘 모르겠다. react는 안써보고, vue랑 별반 차이가... 그냥 빠르다니깐.. 그런가? 하는데.. 알아서들 참조하시고~ 아직 vite, rollup 차이를 구분 못하고, 실무에 sveltejs를 적용해 보면서, 맨땅에 헤딩하는 심정으로 진행하면서 실무에 필요한 내용 중에 빠져 있거나, 샘플에서 커스터마이징이 필요한 내용들을 정리해서 올려 보겠다. typescript를 사용하는 이유? 정형화된 틀에 맞춰.. 2022. 8. 4.
[크롬:앱] 크롬 확장 프로그램 #1. Hello World 갑자기 크롬 확장 앱이 만들어 보고 싶어졌습니다. 몇년 전에 관심을 가지고 잠깐 보기는 했지만, 멀 만들지??? 하는 생각에 잠깐 보고, 이렇게 만드는 구나~~ 하고 말았는데, 유투브 동영상에 나오는 광고가 귀찮아서 없애볼까 하는 생각에 다시 크롭앱을 보기 시작했네요.. 크롬 관련된 개발할 수 있는 종류가 몇가지 됩니다. https://developer.chrome.com/docs/ Documentation - Chrome Developers Build the next generation of web experiences. developer.chrome.com 이중에서 페이지가 로딩되면 곧바로 실행되어야 하니, Extensions 항목을 먼저 공부해 봅니다. https://developer.chrome... 2022. 2. 21.
[VueJs] amcharts3 사용하기 설치 npm install amcharts3 --save 사용 샘플 소스 오류 수정 import AmCharts from 'amcharts3' 위 형태로 하면 AmCharts.makeChart() 함수를 찾을 수 없다는 오류가 나와서 수정 참조 URL https://github.com/developerKumar/AmchartsUse 2020. 6. 19.
[VueJs] API 기능 모음 (추가 중) history.back() this.$router.go(-1) UI 강제 업데이트 this.$forceUpdate() // string replace all let replaceAll = function (source, needle, target) { return source.split(needle).join(target) } // 를 변환 let decodeHTML = function (html) { let txt = document.createElement('textarea') txt.innerHTML = html return txt.value } 2020. 6. 7.
[VueJs] vue-chartjs 로 멀티라인 그래프 그리기 머신러닝 같은 강좌나 책을 읽다 보면 간혹 마주치는 단어가 시계열 혹은 시계열화 이란 것입니다. 말은 어려워 보이는데 영어로는 "time series" 라고 합니다. 한글은 어렵지만 영어는 어느 정도 뜻이 이해가 갑니다. 그냥 순차적으로 먼가 하는 거구나... 라는 센쑤~! 개발자들이 디비 등에서 추출한 정보는 보통 테이블 형식의 텍스트로 제공하는 경우가 많습니다. 이것을 보기 좋게 그래프 형태로 변형해서 보여주면, 직관적으로 이해하게 되고, 실시간 의사결정이 가능해 진다고 합니다. 예전부터 알고는 있었지만, 막상 그래프 표현은 좀 어렵기는 합니다. vuejs에서는 되게 쉽습니다. 시계열의 대표적인 것이 Line Chart 일 것 같아서, 소스로 좀더 쉽게 만들어 보도록 하겠습니다. Line Charts.. 2020. 5. 11.
[VueJs] CKEditor 연동하기 // 설치 npm i --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic // package.json 확인 "dependencies": { "@ckeditor/ckeditor5-build-classic": "^16.0.0", "@ckeditor/ckeditor5-vue": "^1.0.1" } // template 파일 샘플 팁 언어를 한국어(ko) 로 지정을 해도 메뉴들이 여전히 영어로 나올 경우, 한국어를 직접 참조할 수 있도록 추가 import '@ckeditor/ckeditor5-build-classic/build/translations/ko'; 참조 URL : https://ckeditor.com/docs/ckeditor5/lates.. 2020. 4. 27.
[VueJs] component 에서 벗어날때 이벤트 처리하기 페이지 이동 전에 특정 이벤트를 처리하고 싶은 경우가 있는 경우 유용합니다. // component LIFECYCLE components: { ... }, mounted: { ... } methods: { ... }, beforeRouteLeave (to, from, next) { ... } // 컴포넌트를 벗어나는 경우 처리할 이벤트 // 샘플 beforeRouteLeave(to, from, next) { const answer = window.confirm('데이터 저장이 되지 않았습니다. 이 페이지를 나가시겠습니까?') if (answer) { next() } else { next(false) // false를 추가한 경우 페이지 이동을 하지 않음 } } 2020. 4. 26.
[ReactJS][설정] File Template for WebStorm React 맥에서 입맛에 맞는 에디터 찾기가 쉽지 않습니다. 특히나 맥맹인 저로써는 Visual Studio for Mac도 그리 좋아하지 않습니다. 애초에 텍스트 에디터나 리치 에디터 쪽에는 애플이 별로 신경을 쓰지 않은 것으로 보이네요. 적어도 맥맹인 저에게는 그렇습니다. =_=;;그나마 마음에 드는 녀석이 바로 WebStorm 이네요. 코딩의 즐거움을 줄이기? 위해서 ReactJS용 템플릿을 만들어 보았습니다. 만든 김에 귀찮아서 package.json, webpack.config.js 템플릿도 만들었습니다. 지우고 다시 설정하면 되도록 계속 조정을 할 생각입니다. ^^Preferences > Editor > File and Code Templates > + (add)1. React File (js.. 2017. 6. 28.
[AngularJS] AngularJS 2와 TypeScript로 SPA 만들기 #1-1 샘플 소스 분석 My First Angular 2 App 만들기 [링크] Angularjs 2 샘플 소스 다운받기 (QuickStart) 샘플 소스를 따라 하면 마지막에 npm start 가 나옵니다. 이 소스는 특별히 문제가 없어 보이지만, 다음 Tutorial의 소스인 Tour of Heroes를 따라하다 보면 NodeJS 위에서는 정상동작을 하나, 실제 웹서비스에서는 오류가 나옵니다. 데이터를 제대로 읽지 못해서 그런 것으로 보입니다. 그래서 TypeScript를 사용하는 것은 NodeJS 서버 위에서 사용을 해야하는 건가? 하는 고민을 하기도 했습니다. 실은 제가 NodeJS 프로젝트는 WebStorm 에디터를 이용해서 하고 있어서, 툴에 대한 종속성 문제가 생기는 거라, 좀 헤깔렸습니다. NodeJS + Ang.. 2016. 5. 5.
[AngularJS] AngularJS 2와 TypeScript로 SPA 만들기 #1 환경 설정 SPA 만들기를 시작하면서 필요에 의해서 웹페이지 하나를 만드는데, 테이블이 2개, 셀렉트 박스가 3개가 서로 맞물려서 데이터를 주고 받아야 하는데, 이걸 처리하려고 하니 일반 웹페이지에서는 페이지 갱신을 여러번 해줘야 하고, 그럴때 마다 할일없이 데이터 요청을 계속하게 되는 악순환?이 생겨서, 처음에는 그냥 페이지 로드하면서 백단에서 async하게 ajax call을 해볼 생각이었다. 문득 백단에서 호출하는 녀석을 ajax로 할 거면 angularjs로 하는 것도 괜찮지 않을까? 하는 생각을 했다. 그러면 이번에 나온 angularjs 2는 어떨까? 그러고 보니 angularjs가 typescript를 지원한다는데... 이참에 그것도 한번 해볼까? typescript를 잘 지원하는 에디터가 visual.. 2016. 5. 3.
반응형

티스토리툴바