본문 바로가기

FRONTEND67

XSS 공격 및 CORS - 해결방법 XSS 공격 및 CORS - 해결방법 XSS 공격 및 CORS - 해결방법 Cross Site scripting (XSS) XSS 의 위험성 XSS 동작 방식 XSS 공격을 막는 방법 1. HTTPS 연결 사용 2. Content Security Policy (CSP) 실행 3. innerHTML 대신 textContent 사용 4. modern framework 사용 Cross Origin Resource Sharing (CORS) CORS 를 사용하는 경우 CORS 해결하기 (회피하기) 1. 서버, 클라이언트가 같은 도메인과 포트를 사용 2. cross-origin HTTP 요청 허가 3. Jason with Padding (JSONP) 4. 기타 결론 참고자료 : dev.to, velog.io@wl.. 2021. 5. 10.
Vue3 에 Tailwind CSS 설치하기 How to setup Tailwind CSS in Vue 3 How to Setup Tailwind CSS in Vue 3 A streamlined walkthrough if you hate docs so much. devjavu.space tailwind - vue3 vite Install Tailwind CSS with Vue 3 and Vite - Tailwind CSS Setting up Tailwind CSS in a Vue 3 and Vite project. tailwindcss.com 2021. 5. 10.
Map, WeakMap, Set, WeakSet Map, WeakMap, Set, WeakSet Map, WeakMap, Set, WeakSet Map set() 과 get() 으로 값 할당하기 Map 내부 순회 Array 와의 관계 WeakMap 사용 방법 Set add() 와 delete() 로 Set 객체 사용 Set 내부 순회 Array 와의 관계 String 과의 관계 WeakSet 사용 방법 Map Map 객체는 Object 와 동일하게 키-값 쌍을 저장하며 삽입 순서도 기억하는 콜렉션 입니다. 어떤 값이라도 key, value 로 설정할 수 있습니다. Map 이 Object 와 구별되는 중요한 특징이 있는데, 주요한 특징들은, Map 의 key 는 함수, 객체 등을 포함한 모든 값이 가능합니다. Map 은 명시적으로 제공한 키 외에는 어떤.. 2021. 5. 9.
Cookie, Session, Token 의 차이점 Cookie, Session, Token 의 차이점 Cookie, Session, Token 의 차이점 계정 정보를 요청 Header 에 넣는 방식 Session / Cookie 방식 인증 절차 Session 과 Cookie 의 차이점 장단점 Token 기반 인증 방식 JWT Token 인증절차 장단점 출처 : tanfil.tistory, Dev.to 계정 정보를 요청 Header 에 넣는 방식 절대 이렇게 하면 안됩니다. 보통 앱에서는 서버로 HTTP 요청을 할 때 따로 암호화 되지 않으므로, 해커가 HTTP 요청을 가로채서(intercept) 사용자의 계정정보를 알 수 있습니다. Session / Cookie 방식 Session/Cookie 방식 인증은 기본적으로 세션 저장소를 필요로 합니다. 세션 .. 2021. 5. 9.
토이프로젝트 아이디어 링크 40 side project ideas for software engineers Node.js Project Ideas for beginners 2021. 5. 8.
bundle size 와 Javascript Performance Javascript Performance Beyond bundle size Bundle Size Bundler 관련 Plugins Bundlephobia Webpack Bundle Analyzer Rollup Plugin Analyzer 그 외의 bundle size tool 들 Beyond the bundle Runtime CPU cost 안전한 속도 측정 방법 Power usage Memory usage Disk usage 결론 출처 nolanlawson 번역 Javascript Performance Beyond bundle size bundle size를 가장 먼저 체크하는 이유는, 가장 빠르게 확인할 수 있기 때문입니다. 그러나 이와 비슷한 중요 다른 metrics들도 있습니다. * 파싱/컴파일링.. 2021. 3. 3.
5) Typescript - Classes 전통 JS는 재사용 가능한 컴포넌트를 만들기 위한 function과 prototype 기반 상속을 사용하였지만, class가 함수를 상속받고 classe로부터 object가 만들어지는 object-oriented에 익숙한 프로그래머들에게는 약간 어색합니다. ECMAScript 2015(ES6)를 시작으로, JS 프로그래머들은 그들의 앱을 이 객체지향(object-oriented) 접근을 사용하여 그들의 앱을 만들 수 있게 되었습니다. TS에서는, JS로 컴파일해서 모든 주요 브라우저와 플랫폼에서 사용할 수 있는 개발자들에게 이 기술을 사용하도록해주었고, JS의 다음버전을 기다릴 필요가 없도록 해주었습니다. Classes class Greeter { greeting: string; constructor (.. 2021. 2. 8.
4) Typescript - LiteralTypes 리터럴은 집합적인 타입의 구체적인 서브 타입입니다. 이는 타입 시스템 내부에서 "Hello World"는 string이지만, string은 "Hello World"가 아닌것을 의미합니다. TS에는 strings, numbers, booleans 세 가지의 리터럴 타입이 있습니다. 리터럴 타입을 이용하여 여러분은 정확한 string, number, boolean 값을 가지도록 정확한 값을 할당 할 수 있습니다. String Literal Types string 리터럴 타입은 type, type guard, type alias와 잘 조합됩니다. 여러분은 이 특징을 enum 같은 방식으로 string과 함께 사용할 수 있습니다. type Easing = 'ease-in' | 'ease-out' | 'ease-.. 2021. 2. 8.
2) Typescript - interface Typescript Interface Interface Typescript의 핵심 원리는 그 값이 가지고있는 형태를 중심으로 타입 체크를 한다는 것입니다. 이것은 "duck typing" 이나 "structural subtyping" 이라고 불리웁니다. interface는 이 타입들의 역할을 채우며, 여러분의 코드를 정의하는 강력한 방법입니다. function printing (obj: { label: string }) { console.log(obj.label) } let myObj1 = { size: 10, label: "Size 10 Object" } let myObj2 = { size: 10 } printing(myObj1) printing(myObj2) // Property 'label&.. 2021. 1. 25.
1) Typescript 기본 타입 사용법 및 정리 Typescript 기본 타입 사용법 및 정리 Boolean let boolType: boolean = false Number let decimal: number = 6 let hex: number = 0xf00d let binary: number = 0b1010 let octal: number = 0o744 let big: bigint = 100n String let color: string = 'blue' color = 'red' Array let list_1: number[] = [1, 2, 3] let list_2: Array = [1, 2, 3] Tuple let x: [string, number] // declare tubple type x = ['hello', 10] // Ok x = [10.. 2021. 1. 22.
디렉토리 구별 - "./file" vs "file" 의 차이점 src = "images/file.png" - 현재 디렉토리에서 찾기 src = "./images/file.png" - 현재 디렉토리에서 찾기 src = "../images/file.png" - 상위 디렉토리에서 찾기 src = "/images/file.png" - 루트('/') 디렉토리에서 찾기 "images" 와 "./images" 의 모두 현재 디렉토리에서 찾는것이고, 지극히 개인적인 취향입니다. 그러나 번들러 bundler 또는 빌드build 프로그램을 사용하는 경우, "images" 와 "./images" 는 다르게 동작할 수 있습니다. Parcel bundler 의 경우, "./images" 는 현재 디렉토리에서 상대적 위치에서 으로 취급 하지만 "node_modules" 폴더에서 파일을 찾습.. 2021. 1. 8.
ECMAScript 2020 - ES11 목차 ECMAScript는 무엇인가요? BigInt import() Promise.allSettled() globalThis Nullish 통합 연산자 ?? 선택적 체이닝 연산자 ?. 1. ECMAScript는 무엇인가요? - What is ECMAScript 자바스크립트는 ECMAScript 사양에 기반한 프로그래밍 언어입니다. ActionScript나 Javascript, JSccript, TypeScript는 모두 ECMAScript를 핵심으로 사용합니다. 비교하자면, AS/JS/JScript/TS는 4개의 다른 자동차지만 각각의 외형도 다르고 특징을 가지기 위해 수정되더라도, 같은 엔진을 사용하는 것입니다. ECMAScript 의 역사 - History of ECMAScript Brendan Ei.. 2021. 1. 8.

티스토리툴바