본문 바로가기
210701 CSS 3D Hover 효과 만들기 https://letsbuildui.dev/articles/a-3d-hover-effect-using-css-transforms?utm_source=CSS-Weekly&utm_campaign=Issue-464&utm_medium=email 2021. 7. 1.
210628 Javascript Optional Chanining 활용 Javascript Optional Chaining 활용 Optional Chaining 을 이용하여 내부 프로퍼티 및 메서드에 접근 가능합니다 const adventurer = { name: 'Alice', cat: { name: 'Dinah' }, methods () { return 'This is methods!' } } const dogName = adventurer.dog?.name console.log(docName) // undefined console.log(adventurer.someMethods?.()) // 'This is methods!' // optional chaining 사용방법 const greeting = object?.deepProp?.deeperProp?.greet //.. 2021. 6. 28.
ES2021 새로운 문법 ES2021 Features ES2021 Features 논리 할당 연산자 - Logical Assignment Operators 숫자 분리 - Numeric Seperators Promise.any 와 AggregateError String.prototype.replaceAll WeakRefs 와 FinializationRegistry Objects 논리 할당 연산자 - Logical Assignment Operators // Or Or Equal x ||= y x || (x = y) // And And Equals x &&= y x && (x = y) // QQ Eqauls x ??= y x ?? (x = y) // 사용 예제 - 모두 동일한 구문입니다 if (!user.id) user.id = 1 .. 2021. 6. 28.
210603_Short Polling vs Long Polling Short Polling vs Long Polling 챗봇같은 real-time application 은 기본 request-response 구조를 사용할 수 없습니다. 이를 구현하기 위해서는 polling 메커니즘을 구현해야합니다. polling 메커니즘에는 real-time 을 구현하기위한 Websoket 과 SSE(server-side event) 도 존재합니다. 그래서, polling 은 무엇일까요? Polling Polling 은 client 가 일정시간 내에 데이터를 얻기 위해 request 를 server 에 보내는 기술을 말합니다. Short Polling Short Polling 은 client 가 데이터를 얻기위해 request를 서버에 보낸 후, 정해진 지연(정해진 시간) 후에 res.. 2021. 6. 3.
210524 _ npm 을 이용한 확장 모듈 관리 NPM 을 이용한 의존성 확장 모듈 관리 NPM 을 이용한 의존성 확장 모듈 관리 npm 소개 npm 사용법 npm 을 이용한 확장 모듈 설치 글로벌 설치 로컬 설치 확장모듈 검색 설치된 확장 모듈 관리 package.json 을 이용한 프로젝트 관리 기본 모듈만 사용하여 직접 작성할 수도 있지만, 다른 개발자들이 미리 만들어둔 수많은 확장 모듈들을 사용하면 필요한 기능을 훨씬 빠르게 개발할 수 있습니다. npm 소개 npm 은 노드를 위한 패키지 매니저입니다. 많은 개발자들이 확장 모듈을 만들고, 이 확장 모듈을 쉽게 관리해주는것이 npm 입니다. 이미 존재하는 모듈을 이용하면 생산성을 높일 수 있습니다. 서버에 배포하거나 협업하는 개발자가 개발 환경을 설정할 때 소스가 의존하는 확장 모듈도 함께 설치.. 2021. 5. 30.
이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다. 보안 오류 (:) PSSecurityException / UnauthorizedAccess 포맷한지 얼마 안돼서 그런가.... "보안 오류"라고 뜨면서 작업이 실행되지 않는 현상이 발생했습니다. 회사에서는 맥을 쓰고, 집에서는 윈도우를 써서 환경이 맥에 익숙해져 있다가 윈도우 스크립트를 실행 하려니까 한국말로 뜨니 적응이 안됩니다. 검색해보니 시스템의 접근 가능 여부 설정이 제한되어있어서 그랬는데.. 한국말로 저렇게 써두니까 뭘 검색해야 할지 모르겠더라구요. 아무튼 그래서 정리해보았습니다. 관리자로 shell script 실행 shell 에 아래 순서대로 입력합니다. $ ExecutionPolicy # 현재 상태 확인 Restricted # 제한된 상태 $ Set-ExecutionPolicy Unrestricted # 상태 변경 > 실행 규칙 변경 > 실행 정책은 신뢰하지 않는 스크립트로부터 .. 2021. 5. 29.
210425_Jest 사용법 Jest 기본 사용법 Test 파일 구성 Test File 이름 짓기 Jest 코드 작성 Jest 로 스냅샷 테스트하기 비동기 테스트 패턴 테스트 더블 (Test double) 모의 함수 만들기 (Mocking) SpyOn 사용하기 (Spying) Jest 기본 사용법 Spharos CMP 프로젝트의 Jest 는 package.json dependencies 내부에 @vue-plugin-e2e-cypress 로 정의되어있으며, 하단 스크립트로 실행 할 수 있습니다. --mode 는, 개발기 dev, 배포용 prod 으로 변경할 수 있습니다. "scripts": { "test:unit": "vue-cli-service test:unit --mode prod" }, "devDependencies": { "@.. 2021. 5. 28.
210512 css @property 속성 사용하기 (예시) See the Pen 210512_css property1 by Jaeeun Jung (@dmsdl950823) on CodePen. ** 지원하지 않는 브라우저가 있을 수 있으니 주의하기! 2021. 5. 12.
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.

티스토리툴바