분류 전체보기 (33) 썸네일형 리스트형 LocalStorage vs. Cookies: All You Need to Know About Storing JWT Tokens Securely in the Front-End (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://indepth.dev/posts/1382/localstorage-vs-cookies 저작권 정보: 원문 링크 표기 https://indepth.dev/ JWT토큰을 프런트엔드에 안전하게 저장하는 방법은 무엇인가? localStorage와 Cookie의 장단점을 살펴보자. 지난번 글에서는 OAuth 2.0의 구조를 살펴보고 액세스 토큰을 생성하고 토큰을 새로 고치는 방법을 조사했습니다. 이제 우리는 프런트엔드에 토큰을 저장하는 방법을 연구하고 있습니다. Access Token은 일반적으로 서버에 의해 서명되며 요청을 승인하기 위해 서버에 대한 모든 HTTP요청.. The Complete Guide to Lazy Loading Images - 1 (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://css-tricks.com/the-complete-guide-to-lazy-loading-images/ 저작권 정보: https://css-tricks.com Lazy Loading Images – The Complete Guide Lazy loading images that are not in the viewport improves initial page load performance and user experience. This is an in-depth guide to everything about lazy loading of images includi.. Key data structures and their roles in RenderingNG(한글)(2) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://developer.chrome.com/blog/renderingng-data-structures/ 저작권 정보: https://developers.google.com/terms/site-policies Display lists and paint chunks 디스플레이 항목에는 Skia로 래스터화할 수 있는 로우 레벨의 드로잉 명령(여기 참조)이 포함되어 있다. 디스플레이 항목은 테두리 또는 배경 그리기와 같은 몇 개의 도면 명령만으로 되어있어 일반적으로 간단하다. 페인트 트리 워크는 CSS 도장 순서에 따라 배치 트리 및 관련 조각 위로 반복되어 표시 항목 .. An in-depth perspective on webpack's bundling process (한글) (1) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://indepth.dev/posts/1482/an-in-depth-perspective-on-webpacks-bundling-process 저작권 정보: https://indepth.dev/ 웹팩은 오늘날 웹 개발자들이 그들의 애플리케이션을 만드는 데 사용하는 필수적인 요소로 간주될 수 있는 매우 강력하고 흥미로운 도구입니다. 하지만, 많은 사람들은 그것의 복잡성 때문에 웹팩을 가지고 일하는 것은 꽤 도전적인 일이라고 주장합니다. 이 시리즈 글에서 웹팩으로 일하는 것이 좀 더 쉬워지길 바라면서 웹팩의 내부 작업에 대한 여러 세부 사항을 공유하고자 합니다. 이 .. Rxjs Bad Practice (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://indepth.dev/posts/1442/ngrx-bad-practices 저작권 정보: https://indepth.dev ※ RxJS의 용어나 관용적으로 쓰는 표현들은 따로 번역하지 않았습니다. (ex. selector, Observable..) 이전 기사에서 저는 Anauglr 의 나쁜 사례 (두번째) 와 RxJS 의 모범 사례를 다뤘습니다. 6개월 동안 ngrx 를 사용해보면서 그것의 장점들을 모두 이해했고, 이제는 제가 (그리고 종종 전체 커뮤니티에서도) 해롭거나 복잡하다고 생각한 몇가지예제와 패턴들을 공유 해보려 합니다. 자, NGRX 에서 하지 .. Key data structures and their roles in RenderingNG(한글)(1) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://developer.chrome.com/blog/renderingng-data-structures/ 저작권 정보: https://developers.google.com/terms/site-policies 이 글은 크롬 렌더링 엔진에 있는 시리즈의 일부분이다. 렌더링NG, 아키텍처, VideoNG 및 LayoutNG에 대해 자세히 알아보려면 나머지 시리즈를 확인하십시오. 이 시리즈의 이전 게시물에서는 렌더링NG 아키텍처의 목표, 주요 속성 및 고급 구성요소 조각에 대한 개요를 제공했다.이제 렌더링 파이프라인에 대한 입력 및 출력인 주요 데이터 구조(data st.. Demistifying webpack's 'import' function: using dynamic arguments (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://indepth.dev/posts/1483/demistifying-webpacks-import-function-using-dynamic-arguments 저작권 정보: https://indepth.dev/ 웹팩 import 함수의 신비함: 동적 인수 사용하기 웹팩의 유명한 셀링 포인트임에도 불구하고, import 함수는 개발자들이 잘 알지 못하는 많은 숨겨진 세부 특징과 기능들을 가지고 있습니다. 예를 들면, import 함수 동적 표현식을 받을 수 있고, 그것으로 이미 잘 알려져 있는 lazy loading과 같은 기능을 해낼 수 있습니다. 동적 표현식은 원.. RxJS: Why memory leaks occur when using a Subject (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://indepth.dev/posts/1433/rxjs-why-memory-leaks-occur-when-using-a-subject 저작권 정보: https://indepth.dev ※ RxJS의 용어나 관용적으로 쓰는 표현들은 따로 번역하지 않았습니다. (ex. Subject, Observable..) Suscriber는 구독자로 번역하였습니다. RxJS 관련 자료들을 읽다 보면 ‘unsubscribe’, ‘memoery leaks’, ‘subject’와 같은 단어들을 흔히 볼 수 있습니다. 이 글에서는 해당 사실에 대해서 따져보려 합니다. 그리고 그 끝에서 .. You Can Label a JavaScript `if` Statement (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://css-tricks.com/you-can-label-a-javascript-if-statement/#top-of-site 저작권 정보: https://css-tricks.com/license/ Labels는 자바스크립트 생성 이후 존재해온 기능이다. 그들은 새롭지 않아! 나는 많은 사람들이 그것에 대해 알고 있다고 생각하지 않고 그들이 약간 혼란스럽다고 주장할 수도 있다. 그러나, 우리가 보게 될 것처럼, 라벨은 매우 특정한 경우에 유용할 수 있다. 그러나 먼저 자바스크립트 Labels는 HTML의 와 혼동되어서는안 된다. 이것은 완전히 다른 것이다! 자바스.. Deep-copying in JavaScript using structuredClone (한글) 이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다. 원문: https://web.dev/structured-clone/ 저작권 정보: https://creativecommons.org/licenses/by/4.0/ 오랫동안, 자바스크립트의 값을 깊게 복사하려면 별도의 해결 방법에 의지하거나 라이브러리를 사용해야만 했습니다. 이제 깊은 복사를 위한 내장기능으로 structuredClone()이 제공됩니다. 지원 브라우저: Chrome X / Firefox 94 / Edge X / Safari preview 출처 글 작성 당시, 모든 브라우저에서 일일 배포(nightly releases)로 이 API를 구현했으며, Firefox는 F.. 이전 1 2 3 4 다음
